/* ── IronEagle Design Tokens ─────────────────────────── */
:root {
    /* Brand */
    --color-primary:      #ffa500;
    --color-primary-dark: #cc8400;
    --color-primary-glow: rgba(255, 165, 0, 0.12);
    --color-accent:       #2cbcde;
    --color-accent-dark:  #1aa8c8;
    --gradient-primary:   linear-gradient(93deg, #FFA500 0%, #FF4500 100%);

    /* Semantic */
    --color-success: #22c55e;
    --color-danger:  #ef4444;
    --color-warning: #f59e0b;

    /* Surfaces */
    --bg-primary:   #000000;
    --bg-secondary: #111111;
    --bg-card:      #1a1a1a;
    --surface:      #222222;

    /* Text */
    --text-primary:   #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted:     #999999;

    /* Borders */
    --border:       #333333;
    --border-focus: #ffa500;

    /* Spacing (4px base) */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-size-xs:  12px;
    --font-size-sm:  14px;
    --font-size-md:  16px;
    --font-size-lg:  18px;
    --font-size-xl:  24px;
    --font-size-2xl: 32px;

    /* Motion */
    --dur:  160ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:    0 8px 24px rgba(0,0,0,0.5);
    --shadow-focus: 0 0 0 3px rgba(255, 165, 0, 0.18);

    /* Legacy aliases — kept for backward compat */
    --e-a-bg-default:       #000;
    --e-a-color-txt:        #fff;
    --e-a-color-txt-hover:  #ffa500;
    --e-a-btn-bg:           #ffa500;
    --e-a-btn-bg-hover:     #cc8400;
    --e-a-btn-color-invert: #fff;
    --e-a-border:           1px solid #333;
    --e-a-transition-hover: 0.3s ease-in-out;
}

/* ── Button System ───────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    white-space: nowrap;
}
.btn-primary {
    background: var(--gradient-primary);
    color: #000;
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #000;
    text-decoration: none;
}
.btn-primary:active { transform: translateY(0); }
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary-glow);
    color: var(--color-primary);
    text-decoration: none;
}
.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #dc2626;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.btn-danger:active { transform: translateY(0); }
.btn-lg   { padding: var(--space-lg) var(--space-3xl); font-size: var(--font-size-md); }
.btn-pill { border-radius: var(--radius-full); }
.btn-full { width: 100%; }
/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden; /* Hide horizontal overflow */
    width: 100%; /* Ensure content does not exceed viewport width */
}

/* Ensure all elements respect the viewport width */
* {
    box-sizing: border-box; /* Include padding and borders in element dimensions */
    max-width: 100%; /* Prevent elements from exceeding viewport width */
}

/* Adjust for container overflows */
.container {
    width: 100%; /* Ensure containers fit within the viewport */
    max-width: 100%; /* Prevent containers from stretching too wide */
    margin: 0 auto; /* Center container within the viewport */
    overflow-x: hidden; /* Avoid any horizontal scrolling issues */
}
@media (max-width: 768px) {
    .container {
        padding: 10px; /* Add responsive padding for smaller screens */
    }

    img {
        max-width: 100%; /* Ensure images do not overflow */
        height: auto; /* Maintain aspect ratio */
    }

    .accordion-item {
        width: 100%; /* Ensure accordion fits within screen */
    }
}
/* Start Header Section*/
/* GENERAL HEADER STYLES */
header {
    background: black;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: top 0.3s ease, visibility 0.3s ease;
}

/* a1garage-style mobile elements — hidden by default, shown only on phones/tablets */
.mobile-cta-row,
.mobile-bottom-nav { display: none; }

/* Hide the floating Instant-Free-Quote / phone panel while the slide-out menu is open */
body.menu-open .roof-btn-outer { display: none !important; }

/* A2P SMS opt-in disclosure line rendered beneath the SMS consent checkbox on lead forms */
.sms-consent-note {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted, #9ca3af);
    margin: 2px 0 8px;
}
.sms-consent-note a { color: var(--color-primary, #ffa500); text-decoration: underline; }

    /* HEADER CONTAINER */
    header .container {
        display: flex;
        flex-direction: row !important; /* Only affects header */
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;   /* owl-style: constrain to the site content width, centered */
        margin: 0 auto;
        padding: 8px 20px;
    }

    /* Very large monitors (32"+): widen the header so the full nav has ample room on one row.
       Laptops (< 1800px) are untouched and keep the 1200px width. */
    @media (min-width: 1800px) {
        header .container { max-width: 1400px; }
    }

    /* CALL BUTTON */
    header .call-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: rgba(255,165,0,0.1);
        border: 1.5px solid rgba(255,165,0,0.5);
        border-radius: 8px;
        height: 40px;
        padding: 0 12px;
        transition: background 0.2s ease, border-color 0.2s ease;
        flex-shrink: 0;
        text-decoration: none;
    }

        header .call-button i {
            color: var(--color-primary, #ffa500);
            font-size: 16px;
        }

        header .call-button .call-label {
            color: var(--color-primary, #ffa500);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        header .call-button:hover {
            background: rgba(255,165,0,0.22);
            border-color: var(--color-primary, #ffa500);
            text-decoration: none;
        }

    /* LOGO */
    header .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1; /* Centers logo */
        text-align: center;
    }

        header .logo img {
            max-height: 44px; /* compact bar — logo matches nav button height (owl-style) */
            width: auto;
        }

    /* MENU BUTTON */
    header .menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: rgba(255,165,0,0.1);
        border: 1.5px solid rgba(255,165,0,0.5);
        border-radius: 8px;
        height: 40px;
        padding: 0 12px;
        transition: background 0.2s ease, border-color 0.2s ease;
        flex-shrink: 0;
        cursor: pointer;
    }

        header .menu-button i {
            color: var(--color-primary, #ffa500);
            font-size: 15px;
        }

        header .menu-button .menu-label {
            color: var(--color-primary, #ffa500);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        header .menu-button:hover {
            background: rgba(255,165,0,0.22);
            border-color: var(--color-primary, #ffa500);
        }

/* LARGE SCREEN MENU (desktop nav shows at >=900px; tablets/phones use the hamburger) */
@media (min-width: 900px) {
    header .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* owl-style: logo + nav grouped left, CTA pushed right */
    }

    /* Logo sits on the left and does NOT stretch — nav hugs it instead of floating away */
    header .logo {
        flex-grow: 0;
        margin-right: 32px;
    }

    /* Way-bigger logo on large screens (phones/tablets keep the compact 40px) */
    header .logo img {
        max-height: 88px;
    }

    /* Quote CTA + theme toggle sit on the far right */
    header .instant-free-quote-cta { margin-left: auto; }
    header .site-theme-toggle { margin-left: 14px; }

    /* Large Screen Navigation */
    header .nav-menu {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

        header .nav-menu ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        header .nav-menu li {
            margin: 0;
            padding: 0;
            flex-shrink: 0; /* never compress a link enough to force its text onto 2 lines */
        }

        header .nav-menu a {
            text-decoration: none;
            color: #fff !important;
            font-weight: bold;
            padding: 8px 8px;
            font-size: 15.5px;
            white-space: nowrap; /* keep each label on a single line (fixes 2-line menu on wide monitors) */
            transition: color 0.3s ease, background 0.3s ease;
        }

            header .nav-menu a:hover {
                background: var(--color-primary-dark);
                color: #000 !important;
                border-radius: var(--radius-sm);
            }

    /* Instant Free Quote CTA — nav pill (large screens) */
    header .instant-free-quote-cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #ffa500 0%, #ff8800 100%);
        color: #0a0a0a !important;
        padding: var(--space-md) var(--space-xl);
        border-radius: var(--radius-full);
        text-decoration: none;
        font-weight: 700;
        font-size: var(--font-size-sm);
        letter-spacing: 0.02em;
        white-space: nowrap;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(255, 165, 0, 0.35);
        transition: transform 150ms ease-out, box-shadow 150ms ease-out;
    }

        header .instant-free-quote-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(255, 165, 0, 0.5);
            color: #0a0a0a !important;
            text-decoration: none;
        }

        header .instant-free-quote-cta:active {
            transform: translateY(0);
        }

        header .instant-free-quote-cta:focus-visible {
            outline: 2px solid #ffa500;
            outline-offset: 3px;
        }

    /* Hide Call and Menu Buttons on Large Screens */
    header .call-button,
    header .menu-button {
        display: none !important;
    }

    /* Ensure Mobile Menu is Hidden */
    .mobile-menu {
        display: none !important;
    }
}

/* ── a1garage-style mobile header + bottom nav (phones & tablets, up to 899px) ── */
@media (max-width: 899px) {
    /* Header scrolls with the page (not fixed) so the stacked buttons don't eat the screen */
    header { position: static; }

    header .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px 12px 0;
        position: relative; /* anchor for the corner day/night toggle */
    }

    header .logo {
        order: 1;
        flex-grow: 0;
        margin: 0;
        text-align: center;
    }

    header .logo img {
        max-height: 72px; /* bigger/wider logo on phones */
    }

    /* Old inline controls + desktop nav are replaced by the new mobile layout */
    header .call-button,
    header .menu-button,
    header .nav-menu,
    header .instant-free-quote-cta {
        display: none !important;
    }

    /* Day/night toggle kept in the header, tucked into the top-right corner by the logo */
    header .site-theme-toggle {
        display: inline-flex !important;
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        padding: 5px 10px;
        font-size: 11px;
        z-index: 2;
    }

    /* Two stacked action buttons under the logo */
    .mobile-cta-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 12px 14px 14px;
        background: #000;
    }
    .mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.02em;
        text-decoration: none;
    }
    .mobile-cta-call {
        background: linear-gradient(135deg, #ffa500 0%, #ff8800 100%);
        color: #0a0a0a;
        box-shadow: 0 3px 10px rgba(255,165,0,0.30);
    }
    .mobile-cta-book {
        background: transparent;
        color: #fff;
        border: 1.5px solid rgba(255,165,0,0.75);
    }

    /* Fixed bottom app-style nav: Home · Services · Menu */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1400;
        background: #000;
        border-top: 1px solid rgba(255,165,0,0.35);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.45);
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-bottom-nav .mbn-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 600;
        padding: 4px 0;
    }
    .mobile-bottom-nav .mbn-item i {
        font-size: 1.2rem;
        color: var(--color-primary, #ffa500);
    }
    .mobile-bottom-nav .mbn-item:active { opacity: 0.65; }

    /* Header no longer fixed → drop the top clearance; add bottom clearance for the nav bar */
    main.container { padding-top: 14px; }
    .slider-wrapper { margin-top: 0; }
    body { padding-bottom: 66px; }
}

/* MOBILE MENU STYLING (Adjustable Height) */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -70%;
    width: 70%;
    background: black;
    box-shadow: -2px 0 10px rgba(255, 140, 0, 0.3); /* Orange glow */
    transition: right 0.4s ease-in-out;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    overflow: hidden; /* Remove extra spacing */
    height: auto; /* Automatically adjust based on content */
    max-height: 90vh; /* Prevents it from being too tall */
}

    /* Ensure it only appears when opened */
    .mobile-menu.open {
        right: 0;
    }

    /* MENU HEADER (Modern Orange Gradient) */
    .mobile-menu .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: var(--gradient-primary);
        color: black;
        text-align:center;
        font-weight: bold;
        font-size: 20px;
        border-top-left-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    }

    /* CLOSE BUTTON */
    .mobile-menu .close-menu {
        background: transparent;
        border: none;
        font-size: 26px;
        color: white;
        cursor: pointer;
        transition: transform 0.3s ease, color 0.3s ease;
    }

        .mobile-menu .close-menu:hover {
            transform: rotate(90deg);
            color: #ffa500;
        }

    /* MENU LIST */
    .mobile-menu nav .menu-list {
        list-style: none;
        padding: 20px;
        margin: 0;
    }

        /* MENU ITEMS */
        .mobile-menu nav .menu-list li {
            margin-bottom: 15px;
            text-align: center;
        }

            /* MENU LINKS */
            .mobile-menu nav .menu-list li a {
                display: block;
                text-decoration: none;
                font-size: 18px;
                font-weight: bold;
                color: #fff;
                padding: 12px 20px;
                border-radius: 8px;
                transition: background 0.3s ease, transform 0.2s ease;
            }

                /* MENU HOVER EFFECT */
                .mobile-menu nav .menu-list li a:hover {
                    background: rgba(255, 140, 0, 0.7); /* Semi-transparent orange */
                    transform: scale(1.05);
                    color: black;
                }


                /* ACTIVE MENU ITEM */
                .mobile-menu nav .menu-list li a.active {
                    background: #ffa500;
                    color: black;
                }

/* RESPONSIVE: Make menu slightly wider on very small screens */
@media (max-width: 480px) {
    .mobile-menu {
        width: 85%;
        right: -85%;
    }

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


/* Hide Mobile Menu on Large Screens */
@media (min-width: 769px) {
    .mobile-menu {
        display: none !important;
    }
}

/* End Header Section*/

/* Body Section*/

/* ===== About Owner Section ===== */
/* Main Container */
.about-owner-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* Default: Align horizontally */
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary, #111111);

    background-size: contain; /* Resize to fit within the section */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center; /* Center the logo */
    padding: 60px 20px;
    gap: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative; /* Required for z-index handling */
}

/* Container Alignment */
.about-owner-inner {
    display: flex;
    flex-direction: row; /* Align image and content side-by-side by default */
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Owner Image */
.owner-image {
    flex: 1;
    width: 100%; /* Take full width for large screens */
}

    .owner-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

/* Content Section */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    text-align: left;
}

    /* Section Heading */
    .content h2 {
        font-family: EurostileLTStd-BoldEx2, Sans-serif;
        font-size: 46px;
        text-transform: uppercase;
        line-height: 120%;
        color: orange;
        text-align: left;
    }

    /* Subheading */
    .content h4 {
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 120%;
        color: var(--color-primary, #ffa500);
        text-align: left;
        margin-bottom: 12px;
        border-left: 4px solid var(--color-primary, #ffa500);
        padding-left: 12px;
    }

    /* Paragraph Text */
    .content p {
        font-family: Inter-Regular, Sans-serif;
        font-size: 18px;
        line-height: 1.6;
        color: var(--text-secondary, #e0e0e0);
        margin-bottom: 20px;
        text-align: left;
    }

    /* Call-to-Action Text */
    .content .cta-text {
        font-family: Inter-Regular, Sans-serif;
        font-size: 18px;
        line-height: 1.6;
        color: var(--text-secondary, #e0e0e0);
        margin-bottom: 20px;
        text-align: left;
    }

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .about-owner-section {
        flex-direction: column; /* Stack items vertically */
    }

    .about-owner-inner {
        flex-direction: column; /* Ensure vertical stacking */
    }

    .owner-image {
        order: 1; /* Image on top */
        width: 100%; /* Full width */
        margin-bottom: 20px; /* Space between image and content */
    }

        .owner-image img {
            height: auto; /* Maintain natural aspect ratio */
            width: 100%; /* Full width */
        }

    .content {
        order: 2; /* Content below image */
        width: 100%; /* Full width */
        text-align: left; /* Left-align text */
    }

        .content h2, .content h4, .content p {
            text-align: left; /* Consistent left alignment */
        }
        .content h4 {font-size: 21px;
        }
}
/* ===== End About Owner Section ===== */
/* ===== User Input Section Start ===== */
/* General Section Styles */
.form-section {
    width: 100%;
    background-color: #fff; /* White background */
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-title {
    font-size: 24px;
    background-color: #fff; /* White background */
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #000; /* Black text */
    text-align: center;
    margin-bottom: 20px;
}

/* Form Container */
.horizontal-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px; /* Restrict the maximum width */
    box-sizing: border-box;
}

/* Form Row Layout */
.form-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

/* Input Wrapper */
.input-wrapper {
    position: relative;
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    min-width: 180px;
    max-width: 100%;
}

    .input-wrapper.larger {
        flex: 2; /* Larger width for address & message */
    }

    .input-wrapper i.icon {
        position: absolute;
        left: 10px;
        color: #ddd;
        font-size: 18px;
        transition: color 0.3s;
    }

    .input-wrapper input,
    .input-wrapper select,
    .input-wrapper textarea {
        width: 100%;
        padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) * 3);
        background: var(--bg-card);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: var(--font-sans);
        font-size: var(--font-size-sm);
        box-sizing: border-box;
        outline: none;
        transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
        appearance: none;
        -webkit-appearance: none;
    }

    .input-wrapper select {
        padding-right: calc(var(--space-md) * 3);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffa500' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-md) center;
        background-size: 16px;
        cursor: pointer;
    }

    .input-wrapper select option {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .input-wrapper textarea {
        resize: vertical;
        min-height: 80px;
    }

    .input-wrapper input::placeholder,
    .input-wrapper textarea::placeholder {
        color: var(--text-muted);
    }

        .input-wrapper input:focus,
        .input-wrapper select:focus,
        .input-wrapper textarea:focus {
            border-color: var(--border-focus);
            box-shadow: var(--shadow-focus);
        }

            .input-wrapper input:focus + .icon,
            .input-wrapper textarea:focus + .icon {
                color: var(--color-primary);
            }

/* ── Unified Submit Button ───────────────────────────── */
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #000;
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    white-space: nowrap;
}

    .submit-btn:hover {
        background: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        color: #000;
    }
    .submit-btn:active { transform: translateY(0); }

/* Alert Messages */
.alert {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

    .alert.success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .alert.error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

/* Estimate form submit always full-width row */
#estimate-submit-btn {
    flex: 1 1 100%;
    max-width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .input-wrapper {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .input-wrapper,
    .input-wrapper.larger {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .submit-btn {
        width: 100%;
    }
}

/* ===== User Input Section End ===== */



/* ── End User Input Section ──────────────────────────── */
/* ================================
   SLIDING PANEL (OFF-SCREEN BY DEFAULT)
   ================================ */
.quick-quote-panel {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    margin: auto;
}

.quick-quote-header h2 {
    margin: 0;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}

.quick-quote-header p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    font-weight: bold;
}

/* ================================
   SEARCH INPUT FIELD STYLING
   ================================ */
.quick-quote-search {
    display: flex;
    align-items: center;
    justify-content: center; /* Centers children horizontally */
    margin-top: 15px;
    width: 80%;
    margin-left: auto;
    margin-right: auto; /* Ensures it's centered */
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    background: var(--bg-card);
    color: var(--text-primary);
}

.search-input-wrapper input::placeholder {
    color: var(--text-muted);
}

/* Search Icon */
.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
}

    .search-icon img {
        width: 24px;
    }

/* Address Input only (scoped — do NOT make global) */
#addressInput {
    flex: 1;
    border: none;
    padding: 10px;
    font-size: 14px;
    outline: none;
    text-align: center;
    pointer-events: auto;
    z-index: 10;
    background: transparent;
    color: #111827 !important;
}

.coordinates-box {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    font-family: monospace;
}

/* Quick-quote panel buttons only */
.quick-quote-panel button:not(.slide-out-close):not(.slider-dot):not(.custom-slider-btn):not(.close-menu),
.price-quote-panel button:not(.slide-out-close),
#submit-quote-btn,
#searchBtn {
    background: var(--gradient-primary);
    color: #000;
    border: none;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-radius: var(--radius-md);
}
/* Animation Eagle*/
.eagle-container {
    display: none; /* Hidden by default */
    text-align: center;
    margin-top: 20px;
}

.eagle-image {
    width: 80px;
    height: auto;
    animation: flapping 1s infinite;
}

@keyframes flapping {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.eagle-message {
    font-size: 1.2rem;
    color: #ff4500;
    font-weight: bold;
}


/* ================================
   FREE QUOTE PANEL (SLIDING PANEL)
   ================================ */
.roof-quote-panel {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen initially */
    width: 70%; /* Adjust width as needed */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(175deg,
        #2a1000 0%,
        #0d0d0d 22%,
        #000000 55%,
        #0d0400 82%,
        #1a0800 100%);
    color: rgba(255, 255, 255, 0.9);
    border-left: 3px solid rgba(255, 165, 0, 0.35);
    box-shadow: -4px 0 32px rgba(255, 140, 0, 0.12), -2px 0 8px rgba(0, 0, 0, 0.6);
    transition: right 0.4s ease-in-out;
    will-change: right;
    z-index: 9998;
    overflow: hidden;
}

    .roof-quote-panel.open {
        right: 0; /* Slide in when open */
    }

/* ================================
   QUOTE HEADER & SEARCH BOX
   ================================ */
.quick-quote-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 60%;
    margin: auto;
}

.quick-quote-header h2 {
    margin: 0;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}

.quick-quote-header p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    font-weight: bold;
}

/* ================================
   SEARCH INPUT FIELD STYLING
   ================================ */
.quick-quote-search {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    background: var(--bg-card);
}

/* Search Icon */
.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
}

    .search-icon img {
        width: 24px;
    }

/* #addressInput scoped above */

/* ================================
   EAGLE VALIDATION MESSAGE FIX
   ================================ */
.eagle-container {
    display: none;
    text-align: center;
    margin-top: 20px;
    transition: opacity 0.3s ease-in-out;
}

.eagle-image {
    width: 80px;
    height: auto;
    animation: flapping 1s infinite;
}

/* ✅ Ensure proper flapping motion */
@keyframes flapping {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ✅ Added flap-animation class for proper triggering */
.flap-animation {
    animation: flapping 1s infinite;
}

.eagle-message {
    font-size: 1.2rem;
    color: #ff4500;
    font-weight: bold;
}

/* ================================
   ROOF HIGHLIGHTING FIX
   ================================ */
#satellite-map-section {
    display: block !important;
    margin-top: 10px;
}

#map {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    display: none;
}

/* ================================
   ROOF TYPE SELECTION PANEL
   ================================ */
.roof-type-panel {
    display: none;
    background: var(--surface);
    border: 1px solid rgba(255, 165, 0, 0.2);
    border-top: 3px solid #ff6600;
    border-radius: 0 0 10px 10px;
    padding: 20px 18px 16px;
    text-align: left;
    margin-top: 0;
    box-shadow: 0 8px 32px rgba(255, 165, 0, 0.12), 0 2px 12px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Service select inside the dark panel */
#panel-service-select {
    width: 100%;
    padding: 9px 12px;
    border-radius: 6px;
    background-color: var(--surface, #222) !important;
    color: var(--text-primary, #fff) !important;
    border: 1px solid var(--border, #333) !important;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
#panel-service-select:focus {
    border-color: var(--border-focus, #ffa500) !important;
    box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.15);
}

#panel-service-select option {
    background: #111;
    color: #fff;
}

/* ── Gutter run qualifying question buttons ───────────────────────────── */
#panel-gutter-run-question p {
    color: rgba(255, 255, 255, 0.85) !important;
}

#panel-gutter-run-question [data-runs] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s, border-color 0.15s;
}

#panel-gutter-run-question [data-runs]:hover {
    background: rgba(255, 165, 0, 0.12) !important;
    border-color: rgba(255, 165, 0, 0.4) !important;
    color: #ffa500 !important;
}

/* ── Instruction hint text ────────────────────────────────────────────── */
#panel-instruction-hint {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 2px solid rgba(255, 165, 0, 0.4);
    border-radius: 0 4px 4px 0;
}

/* ── Both-mode toggle buttons ─────────────────────────────────────────── */
#panel-both-toggle {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    padding: 4px;
}

/* ── Gutter tool section action buttons ───────────────────────────────── */
#panel-undo-btn,
#panel-clear-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 4px;
}

#panel-undo-btn:hover,
#panel-clear-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* ── Add-run button ───────────────────────────────────────────────────── */
#panel-add-run-btn {
    border: 1px solid rgba(226, 75, 74, 0.6) !important;
    background: rgba(226, 75, 74, 0.08) !important;
    color: #e24b4a !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}

#panel-add-run-btn:hover {
    background: rgba(226, 75, 74, 0.18) !important;
}

/* ── Gutter draw hint ─────────────────────────────────────────────────── */
#panel-gutter-draw-hint {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Material/guard labels ────────────────────────────────────────────── */
#panel-roof-material-row label,
#panel-gutter-material-row label {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12px;
}

/* All selects inside the service-selection panel */
.roof-type-panel select:not(#panel-service-select):not(#gfe-service-select) {
    background: #0d0d0d !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 5px;
}

.roof-type-panel select option {
    background: #111;
    color: #fff;
}

/* Get My Quote button — scoped high-specificity override */
.roof-type-panel .see-my-price,
.roof-type-panel #see-my-price-btn {
    background: linear-gradient(90deg, #ffa500 0%, #ff5500 100%) !important;
    color: #000 !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px;
    border: none !important;
    border-radius: 6px !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 2px 14px rgba(255, 165, 0, 0.3);
    transition: box-shadow 0.2s, transform 0.15s;
}

.roof-type-panel .see-my-price:hover,
.roof-type-panel #see-my-price-btn:hover {
    box-shadow: 0 4px 20px rgba(255, 165, 0, 0.5) !important;
    transform: translateY(-1px);
}

/* ── Dark-theme fixes: Sprint 40 Amendment removed (panel background restored to dark) ── */
.roof-type-panel label,
.roof-type-panel p,
.roof-type-panel > div > label {
    color: var(--text-primary, #fff) !important;
}

#panel-gutter-run-question p {
    color: rgba(255, 255, 255, 0.8) !important;
}

#panel-gutter-run-question [data-runs] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

#panel-gutter-run-question [data-runs]:hover {
    background: rgba(255, 102, 0, 0.12) !important;
    border-color: #ff6600 !important;
    color: #ff8c00 !important;
}

#panel-gutter-draw-hint {
    color: var(--text-muted, #999) !important;
}

#panel-instruction-hint {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 2px solid rgba(255, 102, 0, 0.5);
}

#panel-undo-btn,
#panel-clear-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

#panel-undo-btn:hover,
#panel-clear-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Map container: stays dark */
#map {
    background: #1a1a1a;
}

/* Estimate price card: dark overlay with orange accent */
#panel-estimate-card > div {
    background: rgba(26, 26, 26, 0.92) !important;
    border: 1px solid rgba(26, 26, 26, 0.6) !important;
    border-left: 4px solid #FF6600 !important;
    color: #ffffff !important;
    border-radius: 8px;
}

#panel-estimate-card > div > div {
    color: #ffffff !important;
}
/* ── End Sprint 40 Amendment light-theme overrides ─────────────────────── */

.roof-options {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.roof-option {
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    transition: 0.3s ease;
    width: 120px;
    background: #f8f8f8;
    border: 1px solid #ccc;
}

    .roof-option img {
        width: 50px;
        height: auto;
    }

    .roof-option span {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        font-weight: 600;
    }

    .roof-option:hover, .roof-option.selected {
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px);
        background: #f4f4f4;
    }
/* Roof Type Selection Styling */
.roof-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.edit-roof, .see-my-price {
    background: linear-gradient(90deg, #ffa500, #ff4500);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 150px;
}

/* Price Quote Form Styling */
.price-quote-panel {
    display: none;
    background: transparent;
    padding: 20px;
    text-align: center;
    width: 90%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.price-form-title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

.price-form-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.price-quote-form .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.price-quote-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.85);
}

.price-quote-form input,
.price-quote-form select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: var(--surface);
    color: #fff;
}

.price-quote-form select option {
    background: #111;
    color: #fff;
}

/* Higher-specificity override to beat browser UA stylesheet on inputs/selects */
.roof-quote-panel .price-quote-form input,
.roof-quote-panel .price-quote-form select,
.roof-quote-panel .price-quote-form textarea {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 5px;
}

.roof-quote-panel .price-quote-form select option {
    background: #111;
    color: #fff;
}

.roof-quote-panel .price-quote-form input::placeholder,
.roof-quote-panel .price-quote-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.checkbox-group {
    text-align: left;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.8);
}

#submit-quote-btn {
    background: #ff4500;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    width: 100%;
}

/* ================================
   SLIDE-OUT FREE QUOTE BUTTON
   ================================ */
.roof-btn-outer {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    flex-direction: row;
    pointer-events: none;
}

.roof-button {
    display: flex;
    align-items: center;
    height: 43px;
    cursor: pointer;
    filter: drop-shadow(-3px 2px 6px rgba(0,0,0,0.4));
    transition: filter var(--dur) var(--ease);
    pointer-events: all;
}

.roof-button:hover {
    filter: drop-shadow(-3px 2px 10px rgba(255,165,0,0.5));
}

.roof-btn-cap-left,
.roof-btn-cap-right {
    flex: none;
    display: block;
}

.roof-button-text {
    background: var(--color-primary);
    color: #000;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 43px;
    height: 43px;
    padding: 0 10px;
    white-space: nowrap;
    display: block;
    user-select: none;
}

/* Callout tooltip */
.quick-quote-callout {
    background: var(--bg-card);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 10px 28px 10px 12px;
    margin-right: 10px;
    min-width: 170px;
    position: relative;
    display: none;
    box-shadow: var(--shadow-md);
    pointer-events: all;
}

.quick-quote-callout.open {
    display: block;
}

/* Arrow pointing right toward the button */
.quick-quote-callout::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 7px solid var(--color-primary);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.quick-quote-callout-title {
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}

.quick-quote-callout-text {
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.4;
}

.slide-out-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    transition: color var(--dur) var(--ease);
}

.slide-out-close:hover {
    color: var(--text-primary);
}

/* ================================
   RESPONSIVE STYLING (MOBILE)
   ================================ */
@media (max-width: 768px) {
    .quick-quote-panel {
        max-width: 100%;
        padding: 15px;
    }

    .quick-quote-header h2 {
        font-size: 1.8rem;
    }

    .quick-quote-header p {
        font-size: 1.2rem;
    }

    .search-input-wrapper {
        flex-direction: column;
        padding: 10px;
    }

    .quick-quote-panel input[type="text"],
    .price-quote-panel input[type="text"] {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .quick-quote-panel button:not(.slide-out-close),
    .price-quote-panel button:not(.slide-out-close) {
        width: 100%;
        padding: 12px;
        border-radius: 5px;
    }

    .roof-quote-panel {
        width: 90%;
        right: -100%; /* fully off-screen when closed (was -90%, left a ~32px sliver peeking on the right edge on phones) */
    }

    .roof-type-panel {
        width: 95%;
    }

    .roof-options {
        flex-direction: column;
        align-items: center;
    }

    .roof-option {
        width: 90%;
    }

    .roof-btn-outer {
        top: 75%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .roof-button-text {
        font-size: 11px;
    }

    .quick-quote-callout {
        display: none !important;
    }
}

/* =================================
   Iron Roofing Values  SECTIONS
   ================================= */
.iron-roofing-values {
    padding: 40px 20px;
    background-color: #f9f9f9;
}

/* Image Section */
.image-section {
    flex: 1; /* Ensure equal sizing with other sections */
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 15px;
    justify-content: center;
    align-items: center; /* Center-align the images */
}

    .image-section img {
        width: 100%; /* Make images fill the full width of their container */
        max-width: 100%; /* Remove size limitation */
        height: 300px; /* Maintain aspect ratio */
        border-radius: 5px; /* Add rounded corners */
        object-fit: cover; /* Ensure images cover the container without distortion */
    }

/* Content Section */
.content-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
}

    .content-section h4 {
        font-size: 1.5rem;
        color: #ff4500;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .content-section h2 {
        font-size: 2.5rem;
        color: #333;
        margin-bottom: 20px;
    }

    .content-section p {
        font-size: 1.2rem;
        color: #555;
        margin-bottom: 30px;
    }

.accordion-section {
    width: 100%; /* Full width for large screens */
    max-width: 1200px; /* Limit the max width */
    margin: 0 auto; /* Center-align */
    padding: 20px; /* Add padding for spacing */
}

.accordion-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-weight: bold;
}

    .accordion-header i {
        transition: transform 0.3s ease;
    }

    .accordion-header.active i {
        transform: rotate(180deg);
    }

.accordion-content {
    display: none; /* Hidden by default */
    padding: 15px;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

    .accordion-content p {
        margin: 0;
    }

.accordion-item.active .accordion-content {
    display: block; /* Show when active */
}

/* For smaller screens */
/* Responsive Design for Small Screens */
@media (max-width: 768px) {
    .iron-roofing-values {
        padding: 20px; /* Reduce padding for smaller screens */
    }

    /* Ensure the image section is displayed first */
    .image-section {
        order: 1; /* Image section comes first */
        width: 100%; /* Full width */
    }

        .image-section img {
            height: auto; /* Maintain aspect ratio */
        }

    /* Ensure content section is displayed second */
    .content-section {
        order: 2; /* Content section comes second */
        width: 100%; /* Full width */
        padding: 10px; /* Add spacing for readability */
        text-align: center; /* Center-align text for better readability on small screens */
    }

        .content-section h4 {
            font-size: 1.2rem; /* Adjust heading size for smaller screens */
            margin-bottom: 8px; /* Reduce margin */
        }

        .content-section h2 {
            font-size: 1.8rem; /* Adjust title size */
            margin-bottom: 15px;
        }

        .content-section p {
            font-size: 1rem; /* Adjust paragraph font size */
            line-height: 1.5; /* Improve readability */
        }

    /* Ensure accordion section is displayed last */
    .accordion-section {
        order: 3; /* Accordion section comes last */
        width: 100%; /* Full width */
        max-width: 100%; /* Allow accordion to span full screen width */
        padding: 10px; /* Add padding for spacing */
    }

    .accordion-item {
        margin-bottom: 15px; /* Add space between accordion items */
    }

    .accordion-header {
        padding: 10px; /* Reduce padding for smaller headers */
    }

    .accordion-content {
        font-size: 0.9rem; /* Adjust font size for smaller screens */
        padding: 10px; /* Reduce padding inside accordion content */
    }
}


/* =================================
   END Iron Roofing Values  SECTIONS
   ================================= */
/* FAQ's Section Start*/
/* FAQ Container */
/* FAQ Section Container */
.faq-container {
    margin: 50px 0;
    padding: 20px;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
}

/* FAQ Header Styling */
.faq-header {
    text-align: center;
    margin-bottom: 20px;
}

    .faq-header .subtitle {
        font-size: 16px;
        font-weight: bold;
        color: #ff4500; /* Orange */
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .faq-header .title {
        font-size: 28px;
        font-weight: bold;
        color: var(--text-primary, #fff);
    }

/* Accordion Styling */
.faq-accordion {
    border-top: 2px solid #ff4500; /* Orange top border */
}

/* Individual FAQ Item */
.faq-item {
    border-bottom: 1px solid var(--border, #333);
    padding: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .faq-item:hover {
        background: rgba(255, 165, 0, 0.06);
    }

/* FAQ Question */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

/* Plus/Minus Icon */
.faq-icon {
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #ff4500; /* Orange */
}

/* Rotate icon when open */
.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: #e03e00; /* Darker orange */
}

/* FAQ Answer (Initially Hidden) */
.faq-answer {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin-top: 10px;
    display: none;
    padding-left: 10px;
    border-left: 2px solid #ff4500; /* Orange left border */
}

/* Smooth Open Transition */
.faq-item.active .faq-answer {
    display: block;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .faq-container {
        padding: 15px;
    }

    .faq-header .title {
        font-size: 24px;
    }

    .faq-question {
        font-size: 16px;
    }

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

    .faq-answer {
        font-size: 14px;
    }
}

/* FAQ's Section End*/

/* =================================
   FOOTER & REMAINING SECTIONS
   ================================= */

/* Footer Top Section*/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Ensures main content takes up the remaining space */
}

.custom-footer {
    background-color: black; /* Dark background */
    color: #FFA500; /* Light text for contrast */
    margin: 0;
    padding: 20px 0; /* Adjust padding as needed */
    text-align: center;
}

    .custom-footer .top-ftr-row {
        display: flex;
        flex-direction: column; /* Divide into rows */
        gap: 20px; /* Spacing between rows */
        border-bottom: 2px solid #FFA500; /* Orange dividing line */
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

        .custom-footer .top-ftr-row > div {
            flex: 1 1 calc(25% - 20px); /* Four equal columns with space between */
            margin: 10px;
            text-align: center;
        }
        /* Override H4 styles in the top footer section */
        .custom-footer .top-ftr-row .row .column h4 {
            font-family: Inter-Medium, Sans-serif;
            font-size: 22px;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 110%;
            color: #fff; /* White text color */
            margin-top: 30px;
        }

/* Individual Row Styles */
.top-ftr-row .row {
    display: flex;
    justify-content: space-around; /* Spread columns evenly */
    align-items: flex-start;
    text-align: left;
    font-family: Inter-Medium, Sans-serif;
}

/* Column Styles Mission */
.top-ftr-row .column {
    flex: 1; /* Make columns equal width */
    padding: 0 10px;
    color: #FFA500;
    font-family: Inter-Medium, Sans-serif;
    font-size: 20px;
}

.custom-footer .top-ftr-row h2 {
    color: #FFA500; /* Orange titles Company - Services - Contact Us */
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-family: Sans-serif;
    font-size: 24px;
}

.top-ftr-row .column ul {
    list-style: none;
    padding: 0;
}

    .top-ftr-row .column ul li {
        margin-bottom: 5px;
    }

        .top-ftr-row .column ul li a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

            .top-ftr-row .column ul li a:hover {
                color: #FFA500;
            }

/* Responsive Layout for Small Screens */
@media (max-width: 768px) {
    /* Stack every footer section full-width so nothing is jammed or cut off */
    .top-ftr-row .row {
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 26px;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }

    .top-ftr-row .column,
    .top-ftr-row .column:first-child,
    .top-ftr-row .column:not(:first-child) {
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0;
        text-align: center;
        padding: 0;
        margin-bottom: 0;
    }

    .top-ftr-row .column:first-child {
        margin-bottom: 6px;
    }

    .top-ftr-row .column h2 {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .top-ftr-row .column ul {
        padding: 0;
    }

    .top-ftr-row .column ul li {
        font-size: 15px;
        margin-bottom: 9px;
        word-break: break-word;
    }

    /* Contact column: show the FULL email + address — wrap instead of truncating */
    .top-ftr-row .column:last-child ul li {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 15px;
        word-break: break-word;
    }
}

/* Middle Footer Section */
/* Default Layout (Larger Screens) */
/* Default Layout for Large Screens */
.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    gap: 10px; /* Space between social icons and text/button */
}

/* Social Media Icons */
.social-media-icons {
    display: flex;
    list-style: none;
    gap: 10px; /* Space between icons */
    margin: 20px;
    padding: 0;
}

    .social-media-icons li a {
        display: inline-block;
        text-decoration: none;
        transition: transform 0.2s ease;
    }

    .social-media-icons li img {
        width: 40px; /* Icon size */
        height: auto;
    }

    .social-media-icons li a:hover img {
        transform: scale(1.1); /* Slight zoom on hover */
    }

/* Footer Text + Button for Large Screens */
.footer-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    gap: 12px;
    text-align: center;
}

/* Button */
.footer-button {
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    background-image: linear-gradient(93deg, #FFA500 0%, #FF4500 100%);
    font-size: 20px;
    color: black;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .footer-button:hover {
        transform: scale(1.05);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }
/* Responsive Adjustments for Tablets */
@media (max-width: 1024px) {
    .footer-row {
        flex-direction: row; /* Keep row layout */
        justify-content: center;
        align-items: center;
        gap: 20px; /* Space between sections */
    }

    .social-media-icons {
        justify-content: center;
    }

    .footer-text-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

/* Button in Middle Column (Large Screens) */
.footer-text-container .footer-button {
    margin: 0 auto;
    display: inline-block;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    background-image: linear-gradient(93deg, #FFA500 0%, #FF4500 100%);
    color: black;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

    .footer-text-container .footer-button:hover {
        transform: scale(1.05); /* Slight hover effect */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add shadow */
    }

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
        gap: 20px;
    }

    /* Social Media Icons in a Single Row */
    .social-media-icons {
        justify-content: center;
        margin-bottom: 15px; /* Space below icons */
    }

    /* Text in a Separate Row */
    .footer-text-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center; /* Center-align text */
    }

    /* Button Centered in a Separate Row */
    .footer-button {
        margin: 10px auto 0 auto; /* Center-align button */
        font-size: 14px; /* Slightly smaller font size */
    }
}

/* Bottom Footer Section: Copyright */
/* Footer Row */
.footer-row {
    display: flex;
    justify-content: center; /* Center the row */
    align-items: center; /* Center vertically */
    width: 100%;
    padding: 20px 0;
    margin: 0;
}

/* Footer Columns */
.footer-column {
    flex: 1; /* Makes each column take equal width */
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Empty Columns */
    .footer-column.empty {
        flex: 1; /* Ensures equal space for empty columns */
    }

    /* Centered Column */
    .footer-column.center {
        flex: 1; /* Equal width for center column */
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* Copyright Section */
.footer-copyright {
    font-family: Inter-Medium, Sans-serif;
    font-size: 18px;
    color: white; /* Set the text color to black */
    text-align: center;
    line-height: 1.5;
    margin: 0;
    padding: 20px 0; 
}

    /* Link Styling in Copyright */
    .footer-copyright a {
        color: orange; /* Set the link color to orange */
        text-decoration: none;
        font-weight: bold;
    }

        .footer-copyright a:hover {
            text-decoration: underline; /* Underline on hover */
        }

/* Responsive Layout for Smaller Screens Copyright */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column; /* Stack columns vertically on small screens */
        text-align: center;
    }

    .footer-column {
        flex: none; /* Remove flex basis for stacking */
        width: 100%; /* Full width for each column */
    }
}
/* ========== Image Slides full width, relative positioning ========== */
/* Slider container styles */
.custom-slider-container {
    position: relative;
    width: 100%; /* Full width of the container */
    overflow: hidden;
    box-sizing: border-box;
}

/* Track holding all slides */
.custom-slider-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Individual slides */
.custom-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 52vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000;
}

    .custom-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Navigation buttons */
.custom-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 2px solid rgba(255, 165, 0, 0.5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.custom-slider-btn:hover {
    background: rgba(255, 165, 0, 0.7);
    border-color: var(--color-primary);
}

.custom-slider-btn svg path {
    fill: #fff;
}

.custom-slider-btn.prev-btn { left: 14px; }
.custom-slider-btn.next-btn { right: 14px; }

/* Dot indicators */
.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.slider-dot.active {
    background: var(--color-primary);
    transform: scale(1.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-slide {
        height: 32vh;
    }
    .custom-slider-btn {
        width: 36px;
        height: 36px;
    }
}

/* ========== End of Updated Slider Section ========== */
/* ===== Services Section Start ===== */
.services-section {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: auto;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --gap: 20px 0;
    --padding-top: 20px;
    --padding-bottom: 20px;
    --padding-left: 10px;
    --padding-right: 10px;
    display: var(--display);
    flex-direction: var(--flex-direction);
    width: var(--container-widget-width);
    height: var(--container-widget-height);
    align-items: center;
    gap: var(--gap);
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
    background-color: #f9f9f9; /* Light background for the section */
}

/* Title Styling */
.services-title h2 {
    font-size: 28px;
    font-weight: 700;
    font-family: Inter-Bold,Sans-serif;
    color: #000; /* Black text */
    text-align: center;
    margin-bottom: 20px;
}

/* Service Item Container */
.service-item {
    --display: flex;
    --flex-direction: column;
    --flex-wrap: nowrap;
    --gap: 15px;
    display: var(--display);
    flex-direction: var(--flex-direction);
    align-items: center;
    gap: var(--gap);
    width: 100%;
    max-width: var(--content-width, 1140px);
    margin: 0 auto;
    padding: 10px 0;
    font-family: Inter-Bold,Sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 120%;
}

    /* Service Title */
    .service-item h3 {
        font-size: 22px;
        font-weight: bold;
        color: var(--text-primary, #fff);
        text-align: center;
        margin-bottom: 10px;
    }

    /* Service Images */
    .service-item img {
        display: inline-block; /* Ensure images are inline for alignment */
        vertical-align: middle; /* Align image content to the middle */
        width: 100%; /* Full width of the container */
        max-width: 790px; /* Restrict the maximum width */
        height: 500px; /* Maintain aspect ratio */
        border: none; /* Remove border */
        border-radius: 0; /* Remove any rounding */
        box-shadow: none; /* Remove shadow */
    }


/* Service List */
.service-list {
    --gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

    /* Service List Items */
    .service-list li {
        --border-color: #ffa500; /* Orange border color */
        padding: 10px 15px;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        transition: transform 0.2s ease, background-color 0.3s ease;
    }

        .service-list li a {
            text-decoration: none;
            color: #007bff; /* Link color */
            font-size: 14px;
        }

        .service-list li:hover {
            background-color: #ffa500; /* Change background on hover */
            transform: scale(1.05);
        }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .service-item {
        padding: 20px;
    }

        .service-item img {
            max-width: 100%;
            border-radius: 0; /* Remove border radius on smaller screens */
        }

    .service-list {
        flex-direction: column;
        align-items: center;
        width: 80%;
    }

        .service-list li {
            width: 100%;
            text-align: center;
        }
}


/* ========== End Our Services ========== */
/* Main Container: Align all sections */
.roofing-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for rows */
    justify-content: space-between; /* Space between items */
    gap: 20px; /* Space between sections */
    width: 90%; /* Limit row width on large screens */
    max-width: 1200px; /* Set a maximum width for rows */
    margin: 0 auto; /* Center the container horizontally */
    padding: 20px;
    background: linear-gradient(135deg, #1f1f1f 25%, #2e2e2e 25%, #2e2e2e 50%, #1f1f1f 50%, #1f1f1f 75%, #2e2e2e 75%);
}

/* Title Section */
.title-section {
    flex: 1 1 48%; /* Take up 48% of the width on large screens */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Align content to the left */
    text-align: left; /* Align text to the left */
    color: #fff;
    padding: 20px;
    border-radius: 0px;
    min-height: 300px; /* Ensures equal height */
    box-sizing: border-box; /* Include padding in width/height */
    width: 100%; /* Full width */
}

/* Roofing Section */
.roofing-section {
    
    flex: 1 1 48%; /* Equal width for roofing sections */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch; /* Ensure content spreads full width */
    text-align: left; /* Align text to the left */
    background: linear-gradient(135deg, #1f1f1f 25%, #2e2e2e 25%, #2e2e2e 50%, #1f1f1f 50%, #1f1f1f 75%, #2e2e2e 75%);
    padding: 0; /* Remove padding */
    border-radius: 0px;
    min-height: 300px; /* Ensures equal height */
    box-sizing: border-box; /* Include padding in width/height */
    width: 100%; /* Full width */
}

/* Solution Item */
.solution-item {
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch; /* Ensure all items fill the width */
    text-align: left; /* Align text to the left */
    width: 100%; /* Full width inside roofing-section */
    height: 100%; /* Fill available height */
    padding: 20px; /* Remove padding */
    margin: 0; /* Remove margin */
    box-sizing: border-box; /* Include padding in width/height */
}
    .solution-item h3 {
        background: white;
        width: 100%;
        padding: 20px;
        margin: 0;
    }
    .solution-item h5 {
        background: white;
        width: 100%;
        padding: 20px;
        margin: 0;
    }
    /* Images */
    .solution-item img {
        background: white;
        width: 100%; /* Full width of the section */
        height: 350px; /* Consistent image height */
        object-fit: cover; /* Maintain aspect ratio */
        margin: 0; /* Remove margin */
        padding: 0; /* Remove padding */
    }
/* Features Section */
.features {
    display: flex;
    justify-content: space-between; /* Space features evenly */
    align-items: center; /* Align items in the center vertically */
    gap: 20px; /* Space between features */
    width: 100%; /* Full width */
    padding: 10px 0; /* Add padding for spacing */
    position: relative; /* Required for pseudo-elements */
    background: white;
    width: 100%;
}

/* Individual Feature */
.feature {
    display: flex;
    align-items: center; /* Align icon and text horizontally */
    gap: 10px; /* Space between icon and text */
    flex: 1; /* Equal space for each feature */
    text-align: left; /* Align text to the left */
    position: relative; /* Position for the vertical line */
    padding: 10px; /* Consistent padding */
}

    /* Icon */
    .feature img {
        width: 30px; /* Set icon width */
        height: 30px; /* Set icon height */
        flex-shrink: 0; /* Prevent icon from shrinking */
    }

    /* Text */
    .feature h6 {
        font-family: EurostileLTStd-BoldEx2, Sans-serif;
        font-size: 14px;
        color: #FFA500;
        margin: 0; /* Remove extra margin */
        line-height: 1; /* Align with icon */
    }

    /* Vertical Line */
    .feature:not(:last-child)::after {
        content: ""; /* Add a vertical line */
        position: absolute;
        top: 10%; /* Align with the feature height */
        right: 0; /* Position line at the right edge */
        width: 1px; /* Line thickness */
        height: 80%; /* Adjust height to match feature height */
        background-color: #FFA500; /* Line color */
    }

/* Learn More Button */
.learn-more-button {
    width: 100%; /* Full width */
    padding: 10px;
    background: linear-gradient(90deg, #FFA500, #FF4500);
    color: #000;
    font-family: EurostileLTStd-BoldEx2, Sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 0; /* Remove margin */
}

    .learn-more-button:hover {
        background: linear-gradient(90deg, #FF4500, #FFA500);
        color: #fff;
    }

/* Title Section Text */
.title-section h4 {
    font-family: Inter-Medium, Sans-serif;
    font-size: 20px;
    color: #FFA500;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 150%;
}

.title-section h2 {
    font-family: EurostileLTStd-BoldEx2, Sans-serif;
    font-size: 46px;
    color: #fff;
    margin-bottom: 20px;
    line-height: 120%;
}

.title-section p {
    font-family: Inter-Regular, Sans-serif;
    font-size: 20px;
    color: #e0e0e0;
    font-weight: 400;
    line-height: 150%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .roofing-container {
        flex-direction: column; /* Stack all sections vertically */
        align-items: center;
        width: 100%; /* Full width for smaller screens */
    }

    .title-section, .roofing-section {
        flex: 1 1 100%; /* Full width for each section */
    }

    .solution-item {
        min-height: auto; /* Remove fixed height for smaller screens */
    }

    .features {
        flex-direction: row; /* Stack features vertically */
    }
}
/* ============================= */
/* ===== Contact Us Styling ===== */
/* ============================= */

/* Contact Page Background */
.contact-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 50px 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Contact Hero Section */
.contact-hero {
    max-width: 700px;
    text-align: center;
    padding: 50px;
    background: black;
    border-left: 5px solid #ff7f00;
    border-right: 5px solid #ff7f00;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 127, 0, 0.3);
    margin-bottom: 50px;
}

    .contact-hero h1 {
        font-size: 2.8rem;
        text-transform: uppercase;
        font-weight: 700;
        color: #ff7f00;
    }

    .contact-hero p {
        font-size: 1.2rem;
        line-height: 1.6;
        color: white;
    }

/* Add space between header and body on large screens */
@media (min-width: 1024px) {
    .contact-container {
        margin-top: 40px;
    }
}

/* Contact Details Section */
.contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 90%;
    margin-bottom: 50px;
    border-left: 5px solid #ff7f00;
    border-right: 5px solid #ff7f00;
    border-radius: 12px;
    padding: 20px;
}

.contact-box {
    flex: 1;
    text-align: center;
    background: black;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
    min-width: 250px;
}

    .contact-box:hover {
        transform: translateY(-5px);
        box-shadow: 0px 6px 15px rgba(255, 127, 0, 0.5);
    }

    .contact-box i {
        font-size: 2.5rem;
        color: orange;
        margin-bottom: 10px;
    }

    .contact-box h3 {
        font-size: 1.6rem;
        font-weight: 700;
        color: white;
        margin-bottom: 10px;
        background: black;
    }

    .contact-box p {
        font-size: 1rem;
        color: #ccc;
    }

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

        .contact-box a:hover {
            color: #ff5500;
            text-shadow: 0px 0px 5px rgba(255, 127, 0, 0.8);
        }

/* Contact Form Section */
.contact-form {
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: var(--space-3xl);
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 0px 4px 10px var(--color-primary-glow);
    border-left: 4px solid var(--color-primary);
    border-right: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3xl);
    box-sizing: border-box;
}

.contact-form form {
    width: 100%;
}

    .contact-form h2 {
        font-size: 2rem;
        color: var(--color-primary);
        margin-bottom: var(--space-xl);
        text-transform: uppercase;
    }

/* ── Unified Form Inputs ─────────────────────────────── */
.input-group {
    position: relative;
    margin-bottom: var(--space-lg);
    text-align: left;
}

    .input-group label {
        display: block;
        font-family: var(--font-sans);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: var(--space-sm);
    }

    .input-group input,
    .input-group select,
    .input-group textarea {
        width: 100%;
        padding: var(--space-md);
        background: var(--bg-card);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: var(--font-sans);
        font-size: var(--font-size-sm);
        box-sizing: border-box;
        transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
        appearance: none;
        -webkit-appearance: none;
    }

    .input-group input::placeholder,
    .input-group textarea::placeholder {
        color: var(--text-muted);
    }

        .input-group input:focus,
        .input-group select:focus,
        .input-group textarea:focus {
            border-color: var(--border-focus);
            box-shadow: var(--shadow-focus);
            outline: none;
        }

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

    .input-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffa500' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-md) center;
        background-size: 16px;
        padding-right: var(--space-3xl);
        cursor: pointer;
    }

    .input-group input.input-error,
    .input-group select.input-error,
    .input-group textarea.input-error {
        border-color: var(--color-danger);
    }

    .form-error-msg {
        display: block;
        font-size: var(--font-size-xs);
        color: var(--color-danger);
        margin-top: var(--space-xs);
    }

/* ============================= */
/* ===== Booking Section Styling ===== */
/* ============================= */
.schedule-consultation {
    background: #111;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
    border-radius: 10px;
    margin-top: 50px;
    max-width: 800px;
    box-shadow: 0 0 15px rgba(255, 127, 0, 0.4);
    font-family: 'Arial', sans-serif; /* Match font style */
}

    .schedule-consultation h2 {
        font-size: 2.5rem;
        color: #ff7f00;
        margin-bottom: 20px;
        font-weight: bold;
    }

/* .input-group and .submit-btn consolidated above */

/* Center Booking Section on Small Screens */
@media (max-width: 768px) {
    .schedule-consultation {
        width: 90%;
        text-align: center;
    }

        .schedule-consultation h2 {
            font-size: 2rem;
        }

    .contact-container {
        padding: 20px;
    }

    .contact-hero {
        padding: 30px;
    }

        .contact-hero h1 {
            font-size: 2rem;
        }

    .contact-box {
        padding: 20px;
    }
}

/* ============================= */
/* ===== End of Contact Page Styles ===== */
/* ============================= */
/* ============================= */
/* ===== Services Page Styling Start ===== */
/* ============================= */

/* Service Page Container */
.services-container {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 60px; /* Extra padding on top for spacing */
}

/* Section Headers */
.service-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
}

    .service-header h4 {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--color-primary);
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .service-header h2 {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--text-primary, #fff);
        margin-bottom: 15px;
    }

    .service-header p {
        font-size: 1.2rem;
        color: var(--text-muted, #999);
        max-width: 700px;
        margin: 0 auto 30px;
    }

/* ============================= */
/* ===== Google Map Styling (Full Width) ===== */
/* ============================= */
.service-map {
    width: 100%;
    max-width: 1200px; /* Aligning with other sections */
    margin: 40px auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

.google-map {
    width: 100%;
    height: 450px; /* Increased height for better visibility */
    border: none;
}

/* ============================= */
/* ===== Service Areas Styling ===== */
/* ============================= */
.service-areas {
    width: 100%;
    max-width: 1000px; /* Ensures alignment */
    margin: 50px auto;
}

    .service-areas h3 {
        font-size: 2rem;
        color: #ff8f33;
        margin-bottom: 20px;
    }

/* Service Areas List */
.area-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

    .area-list li {
        background: #000;
        color: white;
        padding: 12px 25px;
        border-radius: 5px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.3s;
    }

        .area-list li i {
            color: #ff8f33;
        }

        .area-list li:hover {
            background: #ff8f33;
            color: #fff;
        }

/* ============================= */
/* ===== Estimate Section ===== */
/* ============================= */
.estimate-banner {
    background: var(--bg-card,#1a1a1a);
    border: 1px solid var(--border,#333);
    border-radius: 16px;
    padding: 50px 20px;
    margin-top: 60px;
    color: white;
    border-radius: 10px;
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

    .estimate-banner h3 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .estimate-banner p {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

/* Estimate Button */
.estimate-btn {
    display: inline-block;
    background: white;
    color: #ff7f00;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .estimate-btn:hover {
        background: #000;
        color: white;
    }

/* ============================= */
/* ===== Free Estimate Popup ===== */
/* ============================= */
.estimate-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
}

    .popup-content h2 {
        font-size: 2rem;
        margin-bottom: 10px;
        color: #ff7f00;
    }

    .popup-content p {
        font-size: 1.2rem;
        margin-bottom: 20px;
        color: #333;
    }

/* ============================= */
/* ===== Services Page Styling Start ===== */
/* ============================= */

/* Service Page Container */
.services-container {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 60px;
}

/* Section Headers */
.service-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
}

    .service-header h4 {
        font-size: 1.2rem;
        font-weight: bold;
        color: #ff8f33;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .service-header h2 {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--text-primary, #fff);
        margin-bottom: 15px;
    }

    .service-header p {
        font-size: 1.2rem;
        color: var(--text-muted, #999);
        max-width: 700px;
        margin: 0 auto 30px;
    }

/* ============================= */
/* ===== Google Map Styling (Full Width) ===== */
/* ============================= */
.service-map {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

.google-map {
    width: 100%;
    height: 450px;
    border: none;
}

/* ============================= */
/* ===== Service Areas Styling ===== */
/* ============================= */
.service-areas {
    width: 100%;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff8f33, #222);
    box-shadow: 0px 4px 12px rgba(255, 127, 0, 0.3);
}

    .service-areas h3 {
        font-size: 2rem;
        color: #ff8f33;
        margin-bottom: 20px;
        background: none;
    }

/* Service Areas List */
.area-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

    .area-list li {
        background: #000;
        color: white;
        padding: 12px 25px;
        border-radius: 5px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.3s;
    }

        .area-list li i {
            color: #ff8f33;
        }

        .area-list li:hover {
            background: #ff8f33;
            color: #fff;
        }

/* ============================= */
/* ===== Estimate Section ===== */
/* ============================= */
.estimate-banner {
    background: var(--bg-card,#1a1a1a);
    border: 1px solid var(--border,#333);
    border-radius: 16px;
    padding: 50px 20px;
    margin-top: 60px;
    color: white;
    border-radius: 10px;
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

    .estimate-banner h3 {
        font-size: 2rem;
        margin-bottom: 10px;
        background: none;
    }

    .estimate-banner p {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

/* Estimate Button */
.estimate-btn {
    display: inline-block;
    background: white;
    color: #ff7f00;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .estimate-btn:hover {
        background: #000;
        color: white;
    }

/* ============================= */
/* ===== Roofing Services Section (Fixes Alignment) ===== */
/* ============================= */
.roofing-services {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #ff9f44, #222);
    color: #fff;
    max-width: 1200px;
    margin: 0 auto 60px;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

/* Header */
.services-header {
    max-width: 900px;
    margin: 0 auto 40px;
}

    .services-header h2 {
        font-size: 2.8rem;
        color: white;
        margin-bottom: 15px;
    }

    .services-header p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 40px;
    }

/* Grid Layout */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Service Box */
.service-box {
    background: #111;
    padding: 25px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .service-box:hover {
        transform: translateY(-5px);
        box-shadow: 0px 5px 15px rgba(255, 127, 0, 0.5);
    }

    .service-box img {
        width: 90px;
        height: 90px;
        margin-bottom: 15px;
    }

    .service-box h3 {
        font-size: 1.6rem;
        color: #ff9f44;
        margin-bottom: 10px;
    }

    .service-box p {
        font-size: 1rem;
        color: #ccc;
    }

/* ============================= */
/* ===== Responsive Adjustments (Single Column Layout) ===== */
/* ============================= */
@media (max-width: 768px) {
    .services-container {
        padding: 60px 15px;
    }

    .services-header h2 {
        font-size: 2.2rem;
    }

    .google-map {
        height: 300px;
    }

    .service-map,
    .service-areas,
    .estimate-banner,
    .roofing-services {
        width: 100%;
        max-width: 100%;
        margin: 20px auto; /* Equal spacing for all sections */
        padding: 40px 20px;
    }

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

    .area-list {
        flex-direction: column;
        align-items: center;
    }

        .area-list li {
            width: 100%;
            text-align: center;
        }

    .estimate-banner {
        padding: 30px 15px;
    }

    .estimate-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================= */
/* Loading Animation Container Start */
/* ============================= */
/* Loading Animation Container */
.loading-container {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    z-index: 999;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* **Envelope Icon Animation** */
.envelope {
    font-size: 3rem;
    position: relative;
    animation: bounce 1s infinite;
}

/* **Wing Flap Effect** */
.wings {
    position: absolute;
    top: -10px;
    left: -20px;
    display: flex;
}

.wing-left, .wing-right {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    animation: flap 0.5s infinite alternate;
}

.wing-right {
    left: 20px;
}
.alert {
    display: none;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.success {
    background-color: #28a745;
    color: white;
}

    .alert.error {
        background-color: #dc3545; /* Red error */
        color: white;
    }


@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes flap {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

/* ============================= */
/* Loading Animation Container End*/
/* ============================= */
/* ============================= */
/* ===== Proposal Section ===== */
/* ============================= */
/* 🔹 General Styles (proposal section only — PaymentSystem print views) */
.cover-page, .about-page, .certifications-page, .quote-page {
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* 🔹 Cover Page */
.cover-page {
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: left;
    background-color: #000;
    color: #fff;
    padding: 40px;
}

    .cover-page h1 {
        font-size: 36px;
        font-weight: bold;
        color: #f7941d;
    }

    .cover-page p {
        font-size: 16px;
        opacity: 0.9;
    }

    .cover-page .customer-info {
        background-color: #f7941d;
        padding: 15px;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        margin-top: 20px;
    }

    .cover-page img {
        width: 100%;
        height: 75vh;
        object-fit: cover;
        border-radius: 8px;
    }

/* 🔹 About Us Page */
.about-page {
    padding: 40px;
    text-align: center;
    background-color: #f7f7f7;
}

    .about-page h1 {
        color: #f7941d;
        font-size: 32px;
        margin-bottom: 10px;
    }

    .about-page .team {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-top: 30px;
    }

    .about-page .team-member {
        text-align: center;
        max-width: 200px;
    }

        .about-page .team-member img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #f7941d;
        }

        .about-page .team-member p {
            font-size: 16px;
            margin-top: 5px;
            font-weight: bold;
        }

/* 🔹 Certifications Page */
.certifications-page {
    padding: 40px;
    background-color: #fff;
    text-align: center;
}

    .certifications-page h2 {
        color: #000;
        font-size: 26px;
        border-bottom: 2px solid #f7941d;
        display: inline-block;
        padding-bottom: 5px;
        margin-bottom: 20px;
    }

    .certifications-page .cert-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
    }

    .certifications-page .cert-item {
        text-align: center;
        width: 180px;
    }

        .certifications-page .cert-item img {
            width: 100px;
            height: auto;
            margin-bottom: 10px;
        }

/* 🔹 Quote Page */
.quote-page {
    padding: 40px;
    background-color: #f7f7f7;
}

    .quote-page h2 {
        font-size: 26px;
        color: #f7941d;
        margin-bottom: 20px;
    }

.quote-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

    .quote-table th {
        background-color: #f7941d;
        color: #fff;
        padding: 12px;
        text-align: left;
        font-size: 16px;
    }

    .quote-table td {
        padding: 12px;
        border-bottom: 1px solid #ddd;
        font-size: 16px;
    }

.quote-summary {
    text-align: right;
    font-size: 18px;
    margin-top: 20px;
    font-weight: bold;
}

/* 🔹 Footer */
.footer {
    text-align: center;
    font-size: 14px;
    padding: 20px;
    background-color: #000;
    color: #fff;
}
/* ============================= */
/* ===== Privacy Page ===== */
/* ============================= */
.privacy-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 30px;
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

    .privacy-container h1 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .privacy-container h2 {
        font-size: 24px;
        font-weight: bold;
        margin-top: 30px;
    }

    .privacy-container h3 {
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
    }

    .privacy-container p {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .privacy-container ul {
        margin-left: 20px;
    }

    .privacy-container a {
        color: #0056b3;
        text-decoration: none;
    }

        .privacy-container a:hover {
            text-decoration: underline;
        }
/* ============================= */
/* ===== Term of Service Page ===== */
/* ============================= */
.terms-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 30px;
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

    .terms-container h1 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .terms-container h2 {
        font-size: 24px;
        font-weight: bold;
        margin-top: 30px;
    }

    .terms-container p {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .terms-container a {
        color: #0056b3;
        text-decoration: none;
    }

        .terms-container a:hover {
            text-decoration: underline;
        }

/* ============================= */
/* ===== Careers Page Styles ==== */
/* ============================= */

/* ============================================================
   UNIFIED THEME OVERRIDES — applied last, highest priority
   Fixes: color inconsistency, dark theme, footer, cross-browser
   ============================================================ */

/* ── Reset body to dark theme ──────────────────────────── */
body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* ── Container reset ───────────────────────────────────── */
/* The generic .container should only set max-width and center.
   Section-specific layouts use their own flex rules. */
main.container {
    display: block;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-top: 72px; /* clear the fixed header on all screen sizes (compact logo) */
    padding-left: 16px;
    padding-right: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: visible;
}

/* Slider wrapper fills full viewport width */
.slider-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 72px; /* clear the fixed header (compact logo) */
}

/* Large screens use a taller bar (88px logo) — push content + slider clear of it.
   Placed after the base rules so it wins on source order at >=900px. */
@media (min-width: 900px) {
    main.container { padding-top: 108px; }
    .slider-wrapper { margin-top: 108px; }
}

/* ── Unified dark sections ─────────────────────────────── */
.about-owner-section {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.about-owner-section .content h2 { color: var(--color-primary); }
.about-owner-section .content h4 { color: var(--color-primary); }
.about-owner-section .content p  { color: var(--text-secondary); }

.form-section {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ── Unified orange — replace all hardcoded variants ────── */
.faq-accordion       { border-top-color: var(--color-primary); }
.faq-header .subtitle { color: var(--color-primary); }
.faq-icon            { color: var(--color-primary); }
.faq-item.active .faq-icon { color: var(--color-primary-dark); }
.faq-answer          { border-left-color: var(--color-primary); color: var(--text-secondary); }
.faq-item            { background: var(--bg-card); border-bottom-color: var(--border); }
.faq-item:hover      { background: var(--surface); }
.faq-header .title   { color: var(--text-primary); }
.faq-container       { background: var(--bg-card); box-shadow: var(--shadow-md); }
.faq-question        { color: var(--text-primary); }

/* Dark content sections */
.iron-roofing-values  { background: var(--bg-secondary); }
.content-section h4   { color: var(--color-primary); }
.content-section h2   { color: var(--text-primary); }
.content-section p    { color: var(--text-secondary); }
.accordion-header     { background: var(--surface); color: var(--text-primary); }
.accordion-content    { background: var(--bg-card); color: var(--text-secondary); }
.accordion-item       { border-color: var(--border); }

/* Contact page unified */
.contact-hero {
    border-left-color: var(--color-primary);
    border-right-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-glow);
}
.contact-hero h1 { color: var(--color-primary); }
.contact-details {
    border-left-color: var(--color-primary);
    border-right-color: var(--color-primary);
}
.contact-box:hover { box-shadow: 0 6px 15px var(--color-primary-glow); }
.contact-box i  { color: var(--color-primary); }
.contact-box h3 { color: var(--text-primary); background: transparent; }
.contact-box a  { color: var(--color-primary); }
.contact-box a:hover { color: var(--color-primary-dark); }

/* Services page accent color */
.service-header h4     { color: var(--color-primary); }
.service-areas h3      { color: var(--color-primary); background: none; }
.area-list li i        { color: var(--color-primary); }
.area-list li:hover    { background: var(--color-primary); color: #000; }
.service-box h3        { color: var(--color-primary); }
.content-section h4    { color: var(--color-primary); }

/* Services section on home page */
.services-section      { background: var(--bg-secondary); }
.services-title h2     { color: var(--text-primary); }
.service-list li       { border-color: var(--color-primary); }
.service-list li:hover { background: var(--color-primary); }
.service-list li a     { color: var(--text-primary); }

/* Roofing solutions */
.title-section h4 { color: var(--color-primary); }

/* ── Footer ─────────────────────────────────────────────── */
.custom-footer {
    background: #000;
    color: var(--text-secondary);
    padding: 0;
    margin-top: auto;
}

.custom-footer .top-ftr-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 40px 32px 32px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

.top-ftr-row .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.top-ftr-row .column {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 180px;
    flex: 1 1 180px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: 0;
}

.custom-footer .top-ftr-row h2 {
    color: var(--color-primary);
    font-size: var(--font-size-md);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.custom-footer .top-ftr-row h4 {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.7;
    text-transform: none;
    background: none;
    margin-top: 10px;
}

.top-ftr-row .column ul li {
    margin-bottom: 8px;
}

.top-ftr-row .column ul li a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    -webkit-transition: color var(--dur) var(--ease);
    transition: color var(--dur) var(--ease);
}
.top-ftr-row .column ul li a:hover { color: var(--color-primary); }
.top-ftr-row .column ul li i {
    color: var(--color-primary);
    margin-right: 6px;
    width: 14px;
}

/* Middle footer row */
.footer-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 24px 32px;
    gap: 20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}

.footer-text-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 10px;
}

.footer-text-container h2 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
}

.footer-button {
    display: inline-flex;
    align-items: center;
    background: var(--gradient-primary);
    color: #000;
    font-weight: 700;
    font-size: var(--font-size-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    text-decoration: none;
    -webkit-transition: background var(--dur) var(--ease), -webkit-transform var(--dur) var(--ease);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
    white-space: nowrap;
}
.footer-button:hover {
    background: var(--color-primary-dark);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    color: #000;
    text-decoration: none;
}

/* Social icons */
.social-media-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.social-media-icons li img {
    width: 36px;
    height: 36px;
    -webkit-transition: opacity var(--dur) var(--ease), -webkit-transform var(--dur) var(--ease);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    opacity: 0.8;
}
.social-media-icons li a:hover img {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* Copyright row */
.center-content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: none;
    padding: 16px 32px;
}
.footer-copyright {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    padding: 0;
    margin: 0;
}
.footer-copyright a { color: var(--color-primary); font-weight: 600; }

/* ── Contact form — ensure all inputs align equally ──── */
.input-group input,
.input-group select,
.input-group textarea {
    text-align: left;
}

/* ── Contact form select arrow ───────────────────────── */
.input-group select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ── Message box (contact response) ─────────────────── */
.message-box {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-align: center;
    margin-top: 12px;
}

/* ── Estimate form section ───────────────────────────── */
.form-section {
    background: var(--bg-secondary);
    padding: 40px 20px;
}
.form-title {
    color: var(--color-primary);
    background: transparent;
    font-size: var(--font-size-xl);
}

/* ── Slider wrapper header clearance ─────────────────── */
@media (max-width: 768px) {
    .slider-wrapper { margin-top: 0; } /* mobile header is static (a1garage layout) — no fixed-header gap */
    .custom-slide   { height: 32vh; }

    /* Footer mobile stacks */
    .footer-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 20px 16px;
    }
    .top-ftr-row .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24px;
    }
    .custom-footer .top-ftr-row { padding: 24px 16px 16px; }
    .top-ftr-row .column { -ms-flex: 1 1 100%; flex: 1 1 100%; }
    .footer-text-container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; }
    .social-media-icons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .center-content { padding: 12px 16px; }

    main.container { padding-top: 14px; padding-left: 12px; padding-right: 12px; }
}

/* ── Cross-browser: appearance reset for selects ──────── */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ── Transition vendor prefixes on interactive elements ─ */
a, button, .btn, .submit-btn, .footer-button,
.nav-item a, .mobile-menu nav .menu-list li a,
.contact-box, .service-box, .faq-item,
.roof-button, .slider-dot {
    -webkit-transition-property: background, color, transform, box-shadow, opacity, border-color;
    transition-property: background, color, transform, box-shadow, opacity, border-color;
}

/* ── Blog Article (detail page) ─────────────────────────── */
.blog-article {
    max-width: 820px;
    margin: 48px auto 64px;
    padding: 60px 80px;
    background: #fff;
    color: #1a1a1a;
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.9;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,.18);
}
.blog-article h1 { font-size: 36px; font-weight: 800; font-family: sans-serif; line-height: 1.2; margin: 16px 0 32px; color: #111; }
.blog-article h2 { font-size: 24px; font-weight: 700; font-family: sans-serif; margin: 52px 0 18px; color: #111; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.blog-article h3 { font-size: 20px; font-weight: 700; font-family: sans-serif; margin: 36px 0 14px; color: #111; }
.blog-article p  { margin: 0 0 22px; color: #1a1a1a; }
.blog-article ul, .blog-article ol { padding-left: 28px; margin-bottom: 22px; color: #1a1a1a; }
.blog-article li { margin-bottom: 10px; line-height: 1.75; }
.blog-article a  { color: #c0392b; }
.blog-article strong { color: #111; }
.blog-article table { width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 15px; margin-bottom: 28px; }
.blog-article th { padding: 12px 16px; text-align: left; border-bottom: 2px solid #e5e7eb; background: #f3f4f6; color: #111; }
.blog-article td { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; color: #1a1a1a; }
.blog-article tr:nth-child(even) td { background: #fafafa; }
.blog-article .blog-breadcrumb { font-size: 13px; color: #999; font-family: sans-serif; margin-bottom: 4px; }
.blog-article .blog-breadcrumb a { color: #c0392b; text-decoration: none; }
.blog-article .blog-cta { margin-top: 48px; padding: 40px; background: #f8f8f8; border-radius: 12px; text-align: center; border: 1px solid #eee; }
.blog-article .blog-cta h3 { margin: 0 0 10px; font-size: 22px; }
.blog-article .blog-cta p { color: #555; font-size: 15px; margin: 0 0 24px; }
@media (max-width: 860px) {
    .blog-article { padding: 44px 40px; }
}
@media (max-width: 600px) {
    .blog-article { padding: 32px 20px; margin: 24px 8px 40px; }
    .blog-article h1 { font-size: 26px; }
    .blog-article h2 { font-size: 20px; margin-top: 40px; }
    .blog-article h3 { font-size: 18px; }
}

/* ── Blog Cards ─────────────────────────────────────────── */
.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.blog-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    height: 100%;
}
.blog-card:hover {
    box-shadow: 0 8px 32px rgba(255,165,0,.18);
    transform: translateY(-3px);
}
.blog-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-block;
}
.blog-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 14px 0 10px;
    line-height: 1.45;
    color: var(--text-primary, #fff);
}
.blog-card-desc {
    font-size: 14px;
    color: var(--text-muted, #999);
    line-height: 1.7;
    margin-bottom: 0;
}
.blog-card-meta {
    font-size: 12px;
    color: var(--text-muted, #999);
    margin-top: 14px;
    margin-bottom: 0;
}

/* ── Prevent body proposal section from overriding dark theme ─ */
/* (The Proposal/Contract styles below are print-only in PaymentSystem, not Website) */

/* ── Safari: fix for fixed positioned elements ───────── */
@supports (-webkit-overflow-scrolling: touch) {
    .roof-btn-outer, .mobile-menu { -webkit-transform: translate3d(0,0,0); }
}

/* ── Slider: ensure proper width in all browsers ─────── */
.custom-slider-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.custom-slider-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    will-change: transform;
    /* Never let track wrap */
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

/* ── Bootstrap Accordion Dark Theme ─────────────────────
   Fixes the white FAQ accordion on the Financing page
   (and any other accordion used site-wide).
   ──────────────────────────────────────────────────────── */
.accordion-item {
    background-color: var(--bg-card, #1a1a1a) !important;
    border-color: var(--border, #333) !important;
}
.accordion-item + .accordion-item {
    border-top-color: var(--border, #333) !important;
}
.accordion-button {
    background-color: var(--bg-card, #1a1a1a) !important;
    color: var(--text-primary, #fff) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--surface, #222) !important;
    color: var(--color-primary, #ffa500) !important;
    box-shadow: none !important;
}
/* The down-arrow icon — recolour for dark bg */
.accordion-button::after {
    filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg);
}
.accordion-button:not(.collapsed)::after {
    filter: invert(65%) sepia(80%) saturate(600%) hue-rotate(5deg);
}
.accordion-body {
    background-color: var(--surface, #222) !important;
    color: var(--text-secondary, #e0e0e0) !important;
    border-top: 1px solid var(--border, #333);
}

/* ── Unified Page Hero Header ────────────────────────────
   Used on all inner pages for consistent title/subtitle.
   Works at all screen sizes from 375px → 3440px.
   ──────────────────────────────────────────────────────── */
.page-hero {
    text-align: center;
    padding: clamp(32px, 6vw, 80px) 20px clamp(24px, 4vw, 48px);
    margin-bottom: clamp(24px, 4vw, 48px);
}
.page-hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin-bottom: 14px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-align: center;
    width: 100%;
}
.page-hero .hero-accent {
    display: inline-block;
    width: 52px;
    height: 4px;
    background: var(--gradient-primary, linear-gradient(90deg,#ffa500,#cc8400));
    border-radius: 2px;
    margin: 0 0 16px;
}
.page-hero .hero-sub {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-muted, #999);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}
/* Extra-wide screens (≥2000px): cap content and bump up sizes */
@media (min-width: 2000px) {
    .page-hero h1 { font-size: 3.6rem; }
    .page-hero .hero-sub { font-size: 1.35rem; max-width: 820px; }
}

/* ── Bootstrap Dark-Theme Overrides ─────────────────────
   Fixes every page that uses Bootstrap utility classes on
   a dark (#000) background: text-muted, cards, forms, etc.
   Applied last → highest specificity wins.
   ──────────────────────────────────────────────────────── */

/* Text helpers */
.text-muted    { color: var(--text-muted,    #999) !important; }
.text-secondary{ color: var(--text-secondary,#e0e0e0) !important; }
.text-primary  { color: var(--color-primary, #ffa500) !important; }

/* Bootstrap card → dark surface */
.card {
    background-color: var(--bg-card, #1a1a1a) !important;
    border-color: var(--border, #333) !important;
    color: var(--text-primary, #fff) !important;
}
.card-body, .card-title, .card-text { color: inherit !important; }

/* blockquote inside dark card */
.card .blockquote p { color: var(--text-secondary, #e0e0e0) !important; }

/* bg-light, f8f9fa, e9ecef placeholders → dark */
.bg-light,
[style*="background:#f8f9fa"],
[style*="background: #f8f9fa"],
[style*="background:#e9ecef"],
[style*="background: #e9ecef"] {
    background-color: var(--bg-card, #1a1a1a) !important;
    color: var(--text-primary, #fff) !important;
}

/* Bootstrap alert-primary → orange-tinted dark */
.alert-primary {
    background-color: rgba(255,165,0,0.15) !important;
    border-color: var(--color-primary, #ffa500) !important;
    color: var(--text-primary, #fff) !important;
}

/* List group items → transparent dark */
.list-group-item {
    background-color: transparent !important;
    border-color: var(--border, #333) !important;
    color: var(--text-primary, #fff) !important;
}

/* Form controls */
.form-control,
.form-select {
    background-color: var(--surface, #222) !important;
    border-color: var(--border, #333) !important;
    color: var(--text-primary, #fff) !important;
}
.form-control::placeholder { color: var(--text-muted, #999) !important; }
.form-control:focus,
.form-select:focus {
    background-color: var(--surface, #222) !important;
    border-color: var(--border-focus, #ffa500) !important;
    color: var(--text-primary, #fff) !important;
    box-shadow: 0 0 0 3px rgba(255,165,0,0.18) !important;
}

/* Form labels */
.form-label { color: var(--text-secondary, #e0e0e0) !important; }

/* Badge bg-primary → orange */
.badge.bg-primary { background-color: var(--color-primary, #ffa500) !important; color: #000 !important; }

/* ── Google Places autocomplete widget ───────────────────
   address-input-upgrade.js hides the original <input> and mounts a
   <gmp-place-autocomplete> in its place. The web component inherits none of the
   input's styling, so without this it renders in Google's default light theme —
   white box, wrong font, wrong radius — sitting in a row of dark themed inputs.

   The widget uses a closed shadow root, so its internals cannot be reached with
   descendant selectors. Two levers work: normal box properties on the host, and
   the --gmp-mat-* Material design tokens Google exposes for theming. Both are
   applied so the box and its inner field agree.

   Matches Bootstrap .form-control's geometry (padding .375rem .75rem, radius
   .375rem, 1rem type) and the site's dark surface/border/text tokens. */
gmp-place-autocomplete {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    background-color: var(--surface, #222);
    color: var(--text-primary, #fff);

    /* Material tokens — these reach inside the shadow root. */
    --gmp-mat-color-surface:             var(--surface, #222);
    --gmp-mat-color-on-surface:          var(--text-primary, #fff);
    --gmp-mat-color-on-surface-variant:  var(--text-muted, #999);
    --gmp-mat-color-outline:             var(--border, #333);
    --gmp-mat-color-outline-variant:     var(--border, #333);
    --gmp-mat-color-primary:             var(--color-primary, #ffa500);
    --gmp-mat-font-family:               inherit;
    --gmp-mat-font-size-body:            1rem;
}

gmp-place-autocomplete:focus-within {
    border-color: var(--border-focus, #ffa500);
    box-shadow: 0 0 0 3px rgba(255,165,0,0.18);
    outline: none;
}

/* ── EOF unified overrides ───────────────────────────── */


/* ── Utility classes ──────────────────────────────────────────── */
.u-text-orange { color: var(--orange, #f97316); }
.u-text-muted  { color: var(--text-muted, #6b7280); }
.u-text-success{ color: var(--green, #16a34a); }
.u-text-danger { color: var(--red, #dc2626); }
.u-text-warning{ color: var(--amber, #d97706); }
.u-text-white  { color: #fff; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-fw-800 { font-weight: 800; }
.u-font-mono { font-family: monospace; }
.u-font-sm   { font-size: 13px; }
.u-font-xs   { font-size: 11px; }
.u-d-none    { display: none !important; }
.u-d-flex    { display: flex; }
.u-d-block   { display: block; }
.u-d-inline  { display: inline; }
.u-d-inline-block { display: inline-block; }
.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: 4px; }
.u-mt-2 { margin-top: 8px; }
.u-mt-3 { margin-top: 16px; }
.u-mt-4 { margin-top: 24px; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: 4px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 16px; }
.u-mb-4 { margin-bottom: 24px; }
.u-ml-1 { margin-left: 4px; }
.u-ml-2 { margin-left: 8px; }
.u-mr-1 { margin-right: 4px; }
.u-mr-2 { margin-right: 8px; }
.u-p-0  { padding: 0; }
.u-p-2  { padding: 8px; }
.u-p-3  { padding: 16px; }
.u-w-100 { width: 100%; }
.u-gap-1 { gap: 4px; }
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 16px; }
.u-align-center { align-items: center; }
.u-justify-end  { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-cursor-pointer { cursor: pointer; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-overflow-hidden { overflow: hidden; }
.u-border-0 { border: 0; }
.u-bg-transparent { background: transparent; }
.u-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-grid-full    { grid-column: 1 / -1; }
.js-hidden      { display: none; }

/* ── Screen-reader only ──────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Services grid + cards ───────────────────────────────────── */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.svc-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-top: 3px solid var(--color-primary, #ffa500);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.svc-icon {
    font-size: 2rem;
    color: var(--color-primary, #ffa500);
    margin-bottom: 14px;
    display: block;
}
.svc-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 10px;
}
.svc-desc {
    font-size: 0.9rem;
    color: var(--text-secondary, #e0e0e0);
    line-height: 1.6;
    margin: 0;
}

/* ── Services page — section layout helpers ──────────────────── */
.svc-section-mb    { margin-bottom: 60px; }
.svc-map-section   { margin-bottom: 56px; }
.cities-section    { margin-bottom: 56px; }
.svc-section-heading {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 32px;
}
.svc-map-heading   { margin-bottom: 20px; }
.svc-map-caption   { text-align: center; font-size: 13px; color: var(--text-muted, #999); margin-top: 10px; }
.cities-intro      { text-align: center; color: var(--text-muted, #999); font-size: 14px; margin-bottom: 36px; }
.cities-heading    { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 8px; }
.city-cta-row      { text-align: center; margin-top: 28px; }
.estimate-banner-inner { text-align: center; padding: 48px 32px; }
.estimate-banner-heading { color: var(--text-primary, #fff); font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.estimate-banner-sub    { color: var(--text-secondary, #e0e0e0); margin-bottom: 24px; }

/* ── Maintenance plans CTA box ───────────────────────────────── */
.maintenance-plan-section {
    max-width: 860px;
    margin: 0 auto 56px;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-top: 3px solid var(--color-primary, #ffa500);
    border-radius: 14px;
    padding: 36px 32px;
}
.maintenance-plan-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}
.plans-cta-btn { width: 100%; text-align: center; }
.maintenance-plan-title { color: var(--text-primary, #fff); font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.maintenance-plan-title i { color: var(--color-primary, #ffa500); margin-right: 8px; }
.maintenance-plan-desc { color: var(--text-secondary, #e0e0e0); font-size: 14px; margin: 0; line-height: 1.6; }
.maintenance-plan-list { color: var(--text-muted, #999); font-size: 13px; margin: 12px 0 0 0; padding-left: 18px; line-height: 2; }

/* ── State cards (Services page — PA/NJ/DE) ──────────────────── */
.state-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
@media (max-width: 900px) { .state-cards-grid { grid-template-columns: 1fr; } }
.state-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--border, #333); position: relative; }
.state-card-pa { background: linear-gradient(160deg, #0a1628 0%, #1a1a1a 35%); border-color: #1e3a6e; }
.state-card-pa .state-badge-lg { background: #1e3a6e; color: #c8a84b; border: 2px solid #c8a84b; }
.state-card-pa .district-label { color: #7eb8f7; border-color: rgba(30,58,110,0.5); }
.state-card-pa .city-chips span { background: rgba(30,58,110,0.35); border-color: rgba(30,58,110,0.7); }
.state-card-pa .city-chips span:hover { background: rgba(30,58,110,0.7); color: #7eb8f7; }
.state-card-nj { background: linear-gradient(160deg, #1a0a00 0%, #1a1a1a 35%); border-color: #7a2a00; }
.state-card-nj .state-badge-lg { background: #8b1a00; color: #f5c842; border: 2px solid #f5c842; }
.state-card-nj .district-label { color: #f5a442; border-color: rgba(122,42,0,0.5); }
.state-card-nj .city-chips span { background: rgba(122,42,0,0.3); border-color: rgba(122,42,0,0.6); }
.state-card-nj .city-chips span:hover { background: rgba(122,42,0,0.65); color: #f5a442; }
.state-card-de { background: linear-gradient(160deg, #001a1a 0%, #1a1a1a 35%); border-color: #0a4a3a; }
.state-card-de .state-badge-lg { background: #0a4a3a; color: #c8d862; border: 2px solid #c8d862; }
.state-card-de .district-label { color: #5ecfaa; border-color: rgba(10,74,58,0.5); }
.state-card-de .city-chips span { background: rgba(10,74,58,0.35); border-color: rgba(10,74,58,0.7); }
.state-card-de .city-chips span:hover { background: rgba(10,74,58,0.7); color: #5ecfaa; }
.state-card-header { display: flex; align-items: center; gap: 16px; padding: 24px 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.state-badge-lg { font-size: 18px; font-weight: 900; padding: 10px 16px; border-radius: 10px; letter-spacing: 1px; flex-shrink: 0; }
.state-name { font-size: 18px; font-weight: 700; color: var(--text-primary, #fff); }
.state-sub  { font-size: 12px; color: var(--text-muted, #999); margin-top: 2px; }
.state-district { padding: 16px 24px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.state-district:last-child { border-bottom: none; padding-bottom: 20px; }
.district-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
    padding-bottom: 6px; border-bottom: 1px solid;
}
.district-label i { font-size: 11px; }
.city-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.city-chips span {
    font-size: 12px; padding: 3px 10px; border-radius: 20px; border: 1px solid;
    color: var(--text-secondary, #e0e0e0); cursor: default;
    transition: background 0.2s ease, color 0.2s ease;
}

/* ── Testimonials page ───────────────────────────────────────── */
.testimonials-container { max-width: 960px; margin: 60px auto; padding: 0 20px; }
.trust-bar { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); }
.review-card { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 12px; padding: 1.5rem; }
.review-stars { font-size: 1.2rem; }
.reviewer-meta { color: var(--text-muted, #999); font-size: 12px; margin-top: 2px; }
.review-photo-placeholder { background: var(--surface, #222); border: 1px solid var(--border, #333); height: 160px; }
.review-photo-icon { color: var(--text-muted, #999); font-size: 13px; }
.review-photo-icon i { display: block; font-size: 28px; margin-bottom: 6px; color: var(--border, #333); }
.testimonials-cta { margin-top: 60px; padding: 32px; background: var(--bg-card, #1a1a1a); border-radius: 12px; text-align: center; }
.testimonials-cta-heading { font-size: 20px; font-weight: 700; margin-bottom: 8px; }

/* ── Financing page ──────────────────────────────────────────── */
.section-heading { text-align: center; }
.section-sub     { text-align: center; }
.lender-header   { justify-content: center; }
.financing-calc-card { max-width: 560px; }
.financing-calc-btn  { margin-top: 12px; }
.financing-cta { background: var(--bg-card, #1a1a1a); border-color: #333 !important; }
.lender-icon {
    width: 48px; height: 48px; font-weight: 800;
    color: #fff; font-size: 14px; flex-shrink: 0;
}
.lender-icon-gs { background: #006aff; }
.lender-icon-h  { background: #ff6b35; }
.lender-icon-sy { background: #8b1a1a; }
.lender-icon-eb { background: #1a6e3c; }
.lender-link { text-decoration: none; color: inherit; display: block; }
.lender-link:hover h5 { color: var(--color-primary, #f97316); }
.lender-ext-icon { font-size: 10px; opacity: 0.5; margin-left: 4px; vertical-align: middle; }
@media (max-width: 767.98px) {
    .lender-card { text-align: center; }
    .lender-header { flex-direction: column !important; gap: 8px; margin-bottom: 12px !important; }
    .lender-header .me-3 { margin-right: 0 !important; }
    .lender-list { display: inline-block; text-align: left; margin: 0 auto; }
    .lender-list li { white-space: nowrap; }
}

/* ── Insurance page ──────────────────────────────────────────── */
.step-circle { width: 56px; height: 56px; font-size: 1.4rem; font-weight: 700; }
.storm-damage-card { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px; min-height: 120px; }
.storm-damage-title { color: var(--text-primary, #fff); }
.storm-damage-desc  { color: var(--text-muted, #999); font-size: 13px; }
.ins-alert {
    background: rgba(255,165,0,0.1);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}
.ins-alert strong { color: var(--color-primary); }
.ins-form-card { background: var(--bg-card, #1a1a1a); }
.ins-label-sm  { font-size: 12px; color: var(--text-muted, #999); margin-bottom: 4px; }
.ins-submit-note { text-align: center; font-size: 12px; color: var(--text-muted, #888); margin-top: 8px; }
.ins-cta { background: var(--bg-card, #1a1a1a); border-color: #333 !important; }
.icon-mr { margin-right: 8px; }

/* ── Why Us page ─────────────────────────────────────────────── */
.owner-avatar { width: 120px; height: 120px; font-size: 3rem; }
.why-section-heading { text-align: center; }
.diff-card { text-align: center; }

/* ── Contact & GetFreeEstimate — trust strip + form card ─────── */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 48px; }
.trust-item  { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted, #999); }
.trust-icon  { color: var(--color-primary, #ffa500); font-size: 18px; }
.contact-form-card,
.estimate-form-card {
    max-width: 680px;
    margin: 0 auto 60px;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 48px);
}
.contact-form-heading,
.estimate-form-heading {
    font-size: 20px; font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 24px; text-align: center;
}
.form-alert-success {
    background: rgba(34,197,94,0.15); border: 1px solid #22c55e;
    color: #22c55e; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
}
.form-alert-error {
    background: rgba(239,68,68,0.15); border: 1px solid #ef4444;
    color: #ef4444; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
}
.form-alert-error a { color: #ef4444; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.form-textarea-mt { margin-top: 14px; }
.form-submit-mt   { margin-top: 20px; }
.form-submit-note { text-align: center; font-size: 12px; color: var(--text-muted, #888); margin-top: 8px; }
.form-phone-note  { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted, #999); }
.form-phone-link  { color: var(--color-primary, #ffa500); font-weight: 700; }
.turnstile-wrap   { margin-top: 16px; }
.honeypot-field   { display: none !important; position: absolute; left: -9999px; }
.contact-insurance-grid { display: none; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* ── _AboutUs partial ────────────────────────────────────────── */
.about-us-section {
    text-align: center;
    padding: clamp(28px, 4vw, 52px) 20px;
    border-bottom: 1px solid var(--border, #333);
    background: var(--bg-secondary, #111);
}
.about-us-heading { font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 10px; line-height: 1.25; }
.about-us-sub     { font-size: 1rem; color: var(--text-muted, #999); max-width: 700px; margin: 0 auto 28px; line-height: 1.7; }
.about-us-stats   { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.about-us-stat    { display: flex; align-items: center; gap: 10px; }
.about-us-stat-icon  { color: var(--color-primary, #ffa500); font-size: 1.2rem; }
.about-us-stat-label { color: var(--text-primary, #fff); font-weight: 700; }
.about-us-stat-sub   { color: var(--text-muted, #999); font-size: 0.9rem; }

/* ── _OurServices partial ────────────────────────────────────── */
.our-svc-section  { padding: clamp(48px, 6vw, 80px) 0; background: var(--bg-primary, #000); }
.our-svc-header   { text-align: center; margin-bottom: 40px; }
.our-svc-eyebrow  { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-primary, #ffa500); margin-bottom: 10px; }
.our-svc-heading  { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 14px; line-height: 1.2; }
.our-svc-accent   { display: inline-block; width: 52px; height: 4px; background: linear-gradient(90deg, #ffa500, #cc8400); border-radius: 2px; }
.our-svc-footer   { text-align: center; margin-top: 36px; }
.btn-svc-all {
    display: inline-block;
    border: 2px solid var(--color-primary, #ffa500);
    color: var(--color-primary, #ffa500);
    padding: 12px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.btn-svc-all:hover { background: var(--color-primary, #ffa500); color: #000; }

/* ── _RoofingSolutions partial ───────────────────────────────── */
.roofing-solutions-section {
    padding: clamp(40px, 5vw, 64px) 0;
    background: var(--bg-primary, #000);
    border-top: 1px solid var(--border, #333);
    border-bottom: 1px solid var(--border, #333);
}
.roofing-solutions-header { text-align: center; margin-bottom: 36px; }
.roofing-solutions-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.roofing-solutions-footer { text-align: center; margin-top: 36px; }
.solution-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-top: 3px solid var(--color-primary, #ffa500);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
}
.solution-card-icon  { font-size: 2rem; color: var(--color-primary, #ffa500); margin-bottom: 14px; display: block; }
.solution-card-title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 8px; }
.solution-card-desc  { font-size: 0.875rem; color: var(--text-secondary, #ccc); line-height: 1.6; margin: 0; }

/* ── _IronRoofingValues partial ──────────────────────────────── */
.values-section { padding: clamp(48px, 6vw, 80px) 0; background: var(--bg-primary, #000); }
.values-grid    { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
@media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } }
.values-images  { display: flex; flex-direction: column; gap: 12px; }
.values-img-main { width: 100%; flex: 1; min-height: 180px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border, #333); }
.values-img-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
.values-img-sm   { width: 100%; height: 100%; min-height: 140px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border, #333); }
.values-eyebrow  { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-primary, #ffa500); margin-bottom: 10px; }
.values-heading  { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 10px; line-height: 1.2; }
.values-sub      { font-size: 0.95rem; color: var(--text-muted, #999); line-height: 1.7; margin-bottom: 24px; }

/* ── _FAQs partial ───────────────────────────────────────────── */
.faq-container  { background: var(--bg-card, #1a1a1a); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.faq-accordion  { border-top: 2px solid var(--color-primary, #ffa500); }
.faq-item       { background: var(--bg-card, #1a1a1a); border-bottom: 1px solid var(--border, #333); cursor: pointer; transition: background 0.2s ease; }
.faq-item:hover { background: var(--surface, #222); }
.faq-question   { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: 1rem; font-weight: 600; color: var(--text-primary, #fff); user-select: none; }
.faq-icon       { font-size: 1.25rem; font-weight: 700; color: var(--color-primary, #ffa500); flex-shrink: 0; margin-left: 12px; transition: transform 0.25s ease, color 0.2s ease; font-style: normal; }
.faq-item.active .faq-icon { transform: rotate(45deg); color: var(--color-primary, #ffa500); }
.faq-answer     { display: none; padding: 0 20px 16px; font-size: 0.95rem; color: var(--text-secondary, #e0e0e0); background: var(--surface, #222); border-left: 3px solid var(--color-primary, #ffa500); line-height: 1.7; }
.faq-answer a   { color: var(--color-primary, #ffa500); }
.faq-item.active .faq-answer { display: block; }
.faq-header .subtitle { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-primary, #ffa500); margin-bottom: 8px; }
.faq-header .title    { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 24px; }

/* ── Blog listing page ───────────────────────────────────────── */
.blog-listing-container { max-width: 960px; margin: 60px auto; padding: 0 20px; }
.blog-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.blog-card-img  { height: 156px; display: flex; align-items: center; justify-content: center; }
.blog-card-body { padding: 24px; }
.blog-card-icon { font-size: 48px; color: rgba(255,255,255,.7); }
.blog-img-cost      { background: linear-gradient(135deg, #1e3a5f, #c0392b); }
.blog-img-signs     { background: linear-gradient(135deg, #065f46, #1e3a5f); }
.blog-img-insurance { background: linear-gradient(135deg, #7c3aed, #1e3a5f); }
.blog-img-materials { background: linear-gradient(135deg, #92400e, #c0392b); }
.blog-img-flat      { background: linear-gradient(135deg, #1e3a5f, #065f46); }
.blog-img-coastal   { background: linear-gradient(135deg, #1e5f5f, #1e3a5f); }
.blog-img-metal     { background: linear-gradient(135deg, #374151, #1e3a5f); }
.blog-img-lifespan    { background: linear-gradient(135deg, #14532d, #1e3a5f); }
.blog-img-ventilation { background: linear-gradient(135deg, #0c4a6e, #14532d); }
.blog-tag-amber   { background: #fef3c7; color: #92400e; }
.blog-tag-green   { background: #d1fae5; color: #065f46; }
.blog-tag-purple  { background: #ede9fe; color: #5b21b6; }
.blog-tag-orange  { background: #fde8d4; color: #92400e; }
.blog-tag-coastal { background: #cffafe; color: #0e7490; }
.blog-tag-gray    { background: #e5e7eb; color: #374151; }
.blog-cta-box { margin-top: 60px; padding: 32px; background: var(--bg-card, #1a1a1a); border-radius: 12px; text-align: center; }
.blog-cta-heading { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.blog-cta-sub     { color: #999; margin-bottom: 20px; }

/* ── Footer logo ─────────────────────────────────────────────── */
.footer-logo { height: 100px; }

/* ── Nav / Layout ────────────────────────────────────────────── */
.nav-logo-img { height: 40px; }
.nav-quote-link {
    background: var(--color-primary-glow);
    color: var(--color-primary);
    border-radius: var(--radius-md);
}
.footer-cta-heading { margin: 0; font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.3; }

/* ── FreeQuotePanel ──────────────────────────────────────────── */
.eagle-icon-lg { font-size: 36px; color: var(--color-primary, #ffa500); }
.out-of-area-card {
    display: none;
    margin-top: 16px;
    background: rgba(255, 165, 0, 0.07);
    border: 2px solid rgba(255, 165, 0, 0.5);
    border-radius: 12px;
    padding: 20px 18px;
    text-align: center;
}
.out-of-area-emoji { font-size: 2rem; margin-bottom: 8px; }
.out-of-area-title { font-weight: 700; font-size: 1rem; margin: 0 0 6px; color: #fff; }
.out-of-area-desc  { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin: 0 0 16px; line-height: 1.5; }
.out-of-area-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-out-of-area-call {
    display: block; padding: 12px; border-radius: 8px; font-weight: 700;
    text-decoration: none; background: var(--color-primary, #ffa500); color: #fff; font-size: 0.95rem;
}
.btn-out-of-area-estimate {
    display: block; padding: 11px; border-radius: 8px; font-weight: 600;
    text-decoration: none; border: 2px solid var(--color-primary, #ffa500);
    color: var(--color-primary, #ffa500); font-size: 0.9rem;
}

/* ── Careers page ────────────────────────────────────────────── */
.careers-file-wrapper {
    display: flex; align-items: center; gap: 0;
    background: var(--surface, #222); border: 1px solid var(--border, #333);
    border-radius: var(--radius-md, 8px); overflow: hidden;
    transition: border-color 0.15s; width: 100%;
}
.careers-file-wrapper:focus-within {
    border-color: var(--border-focus, #ffa500);
    box-shadow: 0 0 0 3px rgba(255,165,0,0.18);
}
.careers-file-wrapper i.icon {
    padding: 0 14px; color: var(--color-primary, #ffa500);
    font-size: 15px; flex-shrink: 0;
}
.careers-file-wrapper input[type="file"] {
    flex: 1; background: transparent; border: none;
    color: var(--text-muted, #999); padding: 12px 14px 12px 0;
    font-size: 14px; cursor: pointer;
}
.careers-file-wrapper input[type="file"]::file-selector-button { display: none; }
.careers-file-label {
    display: block; font-size: 12px; color: var(--text-muted, #999);
    margin-bottom: 6px; padding-left: 2px;
}
.careers-label-icon { color: var(--color-primary, #ffa500); margin-right: 6px; }
.car-file-name  { margin-top: 6px; font-size: 12px; color: var(--color-primary, #ffa500); display: none; }
.car-file-error { display: none; margin-top: 6px; font-size: 12px; color: #ef4444; }
.car-loading    { display: none; text-align: center; padding: 12px 0; color: var(--text-muted, #999); font-size: 14px; }
.car-loading-icon { color: var(--color-primary, #ffa500); }

/* ── Gallery page ────────────────────────────────────────────── */
.gallery-img { height: 280px; width: 100%; object-fit: cover; border-radius: .375rem .375rem 0 0; }

/* ── VirtualMeeting partial ──────────────────────────────────── */
.vm-title { color: #fff; }

/* ── Location & service detail page shared components ─────────── */
.loc-breadcrumb      { padding: 12px 0 0; }
.loc-breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; font-size: 13px; color: var(--text-muted, #aaa); }
.loc-breadcrumb-link { color: var(--color-primary, #ffa500); }
.loc-breadcrumb-sep  { margin: 0 4px; }
.loc-breadcrumb-current { color: var(--text-secondary, #ccc); }
.loc-hero            { padding: 56px 0 40px; }
.loc-hero-badge {
    display: inline-block;
    background: var(--color-primary-glow, rgba(255,165,0,0.12));
    color: var(--color-primary, #ffa500);
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; padding: 4px 14px; border-radius: 20px;
    border: 1px solid var(--color-primary, #ffa500); margin-bottom: 16px;
}
.loc-hero-badge-red {
    display: inline-block; background: rgba(255,60,60,0.12); color: #ff6b6b;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; padding: 4px 14px; border-radius: 20px;
    border: 1px solid #ff6b6b; margin-bottom: 16px;
}
.loc-hero-heading { font-size: clamp(1.75rem,4vw,2.75rem); font-weight: 800; color: var(--text-primary, #fff); line-height: 1.2; margin-bottom: 16px; }
.loc-hero-sub     { font-size: 1.1rem; color: var(--text-secondary, #ccc); max-width: 640px; margin-bottom: 28px; line-height: 1.7; }
.loc-btn-row      { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-loc-primary  { background: var(--color-primary, #ffa500); color: #000; padding: 14px 28px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 1rem; }
.btn-loc-secondary { border: 2px solid var(--color-primary, #ffa500); color: var(--color-primary, #ffa500); padding: 14px 28px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 1rem; }
.loc-trust-bar { display: flex; flex-wrap: wrap; gap: 20px; padding: 24px 28px; background: var(--bg-card, #1a1a1a); border-radius: 10px; margin-bottom: 48px; border: 1px solid var(--border, #333); }
.loc-trust-item { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.loc-trust-icon  { color: var(--color-primary, #ffa500); font-size: 1.2rem; }
.loc-trust-label { font-weight: 700; color: var(--text-primary, #fff); }
.loc-trust-sub   { font-size: 12px; color: var(--text-muted, #aaa); }
.loc-section      { margin-bottom: 48px; }
.loc-section-mb56 { margin-bottom: 56px; }
.loc-section-heading    { font-size: 1.6rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 20px; }
.loc-section-heading-lg { font-size: 1.75rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 8px; }
.loc-section-sub        { color: var(--text-secondary, #ccc); margin-bottom: 32px; }
.loc-section-sub-sm     { color: var(--text-secondary, #ccc); margin-bottom: 24px; }
.loc-svc-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.loc-svc-card  { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px; padding: 24px; }
.loc-svc-icon  { color: var(--color-primary, #ffa500); font-size: 1.5rem; margin-bottom: 12px; display: block; }
.loc-svc-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 8px; }
.loc-svc-desc  { font-size: 0.9rem; color: var(--text-secondary, #ccc); line-height: 1.6; margin: 0; }
.loc-hoods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.loc-hood-chip  { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 6px; padding: 10px 14px; font-size: 0.875rem; color: var(--text-secondary, #ccc); }
.loc-hood-icon  { color: var(--color-primary, #ffa500); margin-right: 6px; font-size: 0.75rem; }
.loc-why-card    { background: var(--bg-card, #1a1a1a); border-radius: 12px; padding: 40px; margin-bottom: 56px; border: 1px solid var(--border, #333); }
.loc-why-heading { font-size: 1.6rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 24px; }
.loc-why-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.loc-why-title   { font-size: 1rem; font-weight: 700; color: var(--color-primary, #ffa500); margin-bottom: 8px; }
.loc-why-title i { margin-right: 8px; }
.loc-why-desc    { font-size: 0.9rem; color: var(--text-secondary, #ccc); line-height: 1.6; }
.loc-cta-banner  { text-align: center; padding: 48px 24px; background: linear-gradient(135deg,rgba(255,165,0,0.08),rgba(255,165,0,0.03)); border-radius: 12px; border: 1px solid rgba(255,165,0,0.2); margin-bottom: 48px; }
.loc-cta-heading { font-size: 1.75rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 12px; }
.loc-cta-sub     { color: var(--text-secondary, #ccc); margin-bottom: 28px; max-width: 500px; margin-left: auto; margin-right: auto; }
.btn-loc-cta-primary   { display: inline-block; background: var(--color-primary, #ffa500); color: #000; padding: 16px 36px; border-radius: 6px; font-weight: 800; text-decoration: none; font-size: 1.05rem; margin-right: 12px; }
.btn-loc-cta-secondary { display: inline-block; border: 2px solid var(--color-primary, #ffa500); color: var(--color-primary, #ffa500); padding: 14px 28px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.loc-nearby-section { margin-bottom: 40px; }
.loc-nearby-heading { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 16px; }
.loc-nearby-links   { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-nearby-link    { padding: 8px 16px; background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 6px; color: var(--color-primary, #ffa500); text-decoration: none; font-size: 0.875rem; }

/* ── Blog article callout box ────────────────────────────────── */
.blog-callout   { background: #f0f9ff; border-left: 4px solid #3b82f6; padding: 24px 28px; border-radius: 0 8px 8px 0; margin: 44px 0; }
.blog-callout p { margin: 10px 0 18px; color: #444; }
.blog-callout-heading { font-size: 16px; }
.blog-callout-amber { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 24px 28px; border-radius: 0 8px 8px 0; margin: 44px 0; }
.blog-callout-amber p { margin: 10px 0 18px; color: #444; }
.blog-callout-btn { background: #c0392b; color: #fff; padding: 10px 24px; border-radius: 6px; text-decoration: none; font-weight: 700; display: inline-block; }

/* ── Premium blog article components (.ab-*) ─────────────────────────── */
.blog-article-container  { max-width: 820px; margin: 0 auto; }
.ab-breadcrumb           { margin-bottom: 24px; }
.ab-breadcrumb ol        { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--text-muted, #aaa); }
.ab-breadcrumb a         { color: var(--color-primary, #ffa500); text-decoration: none; }
.ab-breadcrumb-sep       { margin: 0 4px; }
.ab-breadcrumb-current   { color: var(--text-secondary, #ccc); }
.ab-category-wrap        { margin-bottom: 8px; }
.ab-category-badge       { display: inline-block; background: var(--color-primary-glow, rgba(255,165,0,0.12)); color: var(--color-primary, #ffa500); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--color-primary, #ffa500); }
.ab-h1                   { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: var(--text-primary, #fff); line-height: 1.25; margin-bottom: 16px; }
.ab-author-bar           { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border, #333); }
.ab-author-avatar        { width: 36px; height: 36px; background: var(--color-primary, #ffa500); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000; font-size: 0.875rem; flex-shrink: 0; }
.ab-author-name          { font-size: 0.9rem; font-weight: 600; color: var(--text-primary, #fff); }
.ab-author-date          { font-size: 0.8rem; color: var(--text-muted, #aaa); }
.article-body            { color: var(--text-secondary, #ddd); line-height: 1.9; font-size: 1.05rem; }
.article-body p          { margin-bottom: 22px; }
.article-body strong     { color: var(--text-primary, #fff); }
.ab-h2                   { font-size: 1.55rem; font-weight: 800; color: var(--text-primary, #fff); margin: 52px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); }
.ab-intro                { font-size: 1.1rem; line-height: 1.9; margin-bottom: 28px; }
.ab-p-24                 { margin-bottom: 24px; }
.ab-p-32                 { margin-bottom: 32px; }
.ab-ul                   { margin-bottom: 28px; padding-left: 24px; }
.ab-ul-sm                { margin-bottom: 22px; padding-left: 24px; }
.ab-ul-lg                { margin-bottom: 36px; padding-left: 24px; }
.ab-ol                   { margin-bottom: 36px; padding-left: 24px; }
.ab-li                   { margin-bottom: 12px; line-height: 1.75; }
.ab-li-sm                { margin-bottom: 10px; line-height: 1.7; }
.ab-li-lg                { margin-bottom: 16px; line-height: 1.75; }
.ab-material-grid        { display: grid; gap: 16px; margin-bottom: 40px; }
.ab-material-card        { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px; padding: 20px; display: flex; gap: 20px; align-items: flex-start; }
.ab-material-life        { flex-shrink: 0; min-width: 110px; }
.ab-material-life-num    { font-size: 1.4rem; font-weight: 800; }
.ab-material-life-label  { font-size: 0.7rem; color: var(--text-muted, #aaa); text-transform: uppercase; letter-spacing: 1px; }
.ab-material-name        { font-size: 1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 6px; }
.ab-material-desc        { font-size: 0.9rem; color: var(--text-secondary, #ccc); line-height: 1.6; margin: 0; }
.ab-life-success         { color: #22c55e; }
.ab-life-warning         { color: #ffa500; }
.ab-life-danger          { color: #ef4444; }
.ab-table-wrap           { overflow-x: auto; margin-bottom: 32px; }
.ab-table                { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ab-table thead tr       { background: var(--color-primary, #ffa500); color: #000; }
.ab-table th             { padding: 12px 16px; text-align: left; font-weight: 700; }
.ab-table-row-odd        { background: var(--bg-card, #1a1a1a); }
.ab-table-row-even       { background: var(--surface, #222); }
.ab-table-td-label       { padding: 11px 16px; color: var(--text-primary, #fff); font-weight: 600; border-bottom: 1px solid var(--border, #333); }
.ab-table-td             { padding: 11px 16px; color: var(--text-secondary, #ccc); border-bottom: 1px solid var(--border, #333); }
.ab-faq                  { background: var(--bg-card, #1a1a1a); border-radius: 10px; padding: 28px; margin-bottom: 32px; border: 1px solid var(--border, #333); }
.ab-faq-h3               { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 20px; }
.ab-faq-item             { border-bottom: 1px solid var(--border, #333); padding: 14px 0; }
.ab-faq-q                { font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 6px; }
.ab-faq-a                { font-size: 0.9rem; color: var(--text-secondary, #ccc); line-height: 1.6; }
.ab-related              { background: var(--bg-card, #1a1a1a); border-radius: 10px; padding: 24px; margin-bottom: 32px; border: 1px solid var(--border, #333); }
.ab-related-h3           { font-size: 1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 12px; }
.ab-related-ul           { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-related-link         { color: var(--color-primary, #ffa500); text-decoration: none; font-size: 0.9rem; }
.ab-cta                  { background: linear-gradient(135deg, rgba(255,165,0,0.1), rgba(255,165,0,0.04)); border: 1px solid rgba(255,165,0,0.25); border-radius: 12px; padding: 32px; text-align: center; }
.ab-cta-h3               { font-size: 1.3rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 10px; }
.ab-cta-p                { color: var(--text-secondary, #ccc); margin-bottom: 20px; }
.ab-cta-btn              { display: inline-block; background: var(--color-primary, #ffa500); color: #000; padding: 14px 32px; border-radius: 6px; font-weight: 800; text-decoration: none; font-size: 1rem; }

/* ── DynamicArticle layout (.ab-hero, .ab-headline, .ab-meta) ── */
.ab-hero             { margin-bottom: 36px; }
.ab-headline         { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; color: var(--text-primary, #fff); line-height: 1.2; margin-bottom: 12px; }
.ab-meta             { font-size: 0.875rem; color: var(--text-muted, #aaa); margin: 0; }

/* ── Hero image ─────────────────────────────────────────────── */
.ab-hero-img         { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 32px; display: block; }

/* ── Article body + Quill content output ────────────────────── */
.ab-body             { color: var(--text-secondary, #ddd); line-height: 1.9; font-size: 1.05rem; }
.ab-body p           { margin-bottom: 22px; }
.ab-body strong      { color: var(--text-primary, #fff); }
.ab-body h2          { font-size: 1.55rem; font-weight: 800; color: var(--text-primary, #fff); margin: 52px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); }
.ab-body h3          { font-size: 1.2rem; font-weight: 700; color: var(--text-primary, #fff); margin: 36px 0 14px; }
.ab-body ul          { margin-bottom: 28px; padding-left: 24px; }
.ab-body ol          { margin-bottom: 28px; padding-left: 24px; }
.ab-body li          { margin-bottom: 10px; line-height: 1.75; }
.ab-body a           { color: var(--color-primary, #ffa500); text-decoration: underline; }
.ab-body a:hover     { opacity: 0.8; }
.ab-body blockquote,
.ab-pullquote        { margin: 36px 0; padding: 24px 28px; border-left: 4px solid var(--color-primary, #ffa500); background: var(--bg-card, #1a1a1a); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 1.1rem; font-style: italic; color: var(--text-secondary, #ccc); line-height: 1.8; }
.ql-content          { color: var(--text-secondary, #ddd); line-height: 1.9; font-size: 1.05rem; }
.ql-content p        { margin-bottom: 22px; }
.ql-content strong   { color: var(--text-primary, #fff); }
.ql-content h2       { font-size: 1.55rem; font-weight: 800; color: var(--text-primary, #fff); margin: 52px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); }
.ql-content h3       { font-size: 1.2rem; font-weight: 700; color: var(--text-primary, #fff); margin: 36px 0 14px; }
.ql-content ul       { margin-bottom: 28px; padding-left: 24px; }
.ql-content ol       { margin-bottom: 28px; padding-left: 24px; }
.ql-content li       { margin-bottom: 10px; line-height: 1.75; }
.ql-content a        { color: var(--color-primary, #ffa500); text-decoration: underline; }
.ql-content a:hover  { opacity: 0.8; }
.ql-content blockquote { margin: 36px 0; padding: 24px 28px; border-left: 4px solid var(--color-primary, #ffa500); background: var(--bg-card, #1a1a1a); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 1.1rem; font-style: italic; color: var(--text-secondary, #ccc); line-height: 1.8; }

/* ── Figure + caption ────────────────────────────────────────── */
.ab-figure           { margin: 36px auto; text-align: center; }
.ab-figure img       { max-width: 100%; border-radius: var(--radius-md); display: block; margin: 0 auto; }
.ab-caption          { font-size: 0.8rem; color: var(--text-muted, #aaa); margin-top: 8px; font-style: italic; }

/* ── Author bio card ─────────────────────────────────────────── */
.ab-author-bio        { display: flex; gap: 20px; align-items: flex-start; background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: var(--radius-lg); padding: 28px; margin: 48px 0 32px; }
.ab-author-bio-avatar { width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
.ab-author-bio-name   { font-size: 1rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 4px; }
.ab-author-bio-title  { font-size: 0.8rem; color: var(--color-primary, #ffa500); margin-bottom: 10px; }
.ab-author-bio-text   { font-size: 0.9rem; color: var(--text-secondary, #ccc); line-height: 1.7; margin: 0; }

/* ── Article CTA box ─────────────────────────────────────────── */
.ab-cta-box          { background: linear-gradient(135deg, rgba(255,165,0,0.1), rgba(255,165,0,0.04)); border: 1px solid rgba(255,165,0,0.25); border-radius: var(--radius-lg); padding: 32px; text-align: center; margin: 48px 0; }
.ab-cta-box h3       { font-size: 1.3rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 10px; }
.ab-cta-box p        { color: var(--text-secondary, #ccc); margin-bottom: 20px; }

/* ── Location info / license notice box ─────────────────────── */
.loc-info-box {
    background: var(--bg-card, #1a1a1a); border-radius: 8px;
    padding: 16px 20px; margin-bottom: 40px;
    border-left: 4px solid var(--color-primary, #ffa500);
    color: var(--text-secondary, #ccc); font-size: 0.9rem;
}
.loc-info-box strong { color: var(--color-primary, #ffa500); }

/* ── Service/location page — process steps ───────────────────── */
.loc-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.loc-step-item  { display: flex; gap: 16px; align-items: flex-start; }
.loc-step-num   { background: var(--color-primary, #ffa500); color: #000; font-weight: 800; font-size: 1rem; min-width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loc-step-title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #fff); margin: 0 0 6px; }
.loc-step-desc  { font-size: 0.875rem; color: var(--text-secondary, #ccc); line-height: 1.6; margin: 0; }

/* ── Service page — emergency/tarp banner ────────────────────── */
.loc-emerg-banner  { background: linear-gradient(135deg,rgba(255,165,0,0.10),rgba(255,165,0,0.04)); border: 1px solid rgba(255,165,0,0.3); border-radius: 12px; padding: 40px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.loc-emerg-inner   { flex: 1; min-width: 260px; }
.loc-emerg-icon    { font-size: 3rem; color: var(--color-primary, #ffa500); margin-bottom: 16px; }
.loc-emerg-heading { font-size: 1.6rem; font-weight: 800; color: var(--text-primary, #fff); margin-bottom: 12px; }
.loc-emerg-desc    { color: var(--text-secondary, #ccc); line-height: 1.7; margin-bottom: 16px; }
.loc-emerg-list    { color: var(--text-secondary, #ccc); line-height: 2; padding-left: 1.25rem; margin-bottom: 20px; }
.loc-emerg-list strong { color: var(--text-primary, #fff); }

/* ── Service page — FAQ cards ────────────────────────────────── */
.loc-faq-list { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.loc-faq-card { background: var(--bg-card, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px; padding: 24px; }
.loc-faq-q    { font-size: 1rem; font-weight: 700; color: var(--color-primary, #ffa500); margin: 0 0 10px; }
.loc-faq-a    { font-size: 0.9rem; color: var(--text-secondary, #ccc); line-height: 1.7; margin: 0; }
.loc-faq-a a  { color: var(--color-primary, #ffa500); }

/* ── Service page — warranty cards ──────────────────────────── */
.loc-warranty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.loc-warranty-card { border: 2px solid var(--color-primary, #ffa500); border-radius: 10px; padding: 28px; text-align: center; }
.loc-warranty-icon  { color: var(--color-primary, #ffa500); font-size: 2rem; margin-bottom: 12px; display: block; }
.loc-warranty-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 8px; }
.loc-warranty-desc  { font-size: 0.875rem; color: var(--text-secondary, #ccc); line-height: 1.6; margin: 0; }
.loc-warranty-note  { margin-top: 24px; font-size: 0.875rem; color: var(--text-muted, #888); }
.loc-warranty-note a { color: var(--color-primary, #ffa500); }
.loc-card-cta       { margin-top: 32px; text-align: center; }

/* ── Link color utility ──────────────────────────────────────── */
.u-text-primary { color: var(--color-primary, #ffa500); }

/* ── Warranty page ───────────────────────────────────────────── */
.warr-hero-section  { padding: 3rem 1.5rem; margin-bottom: 2rem; border-radius: var(--radius-lg, 12px); }
.warr-section-title { text-align: center; margin-bottom: 2rem; }
.warr-section-sub   { color: var(--text-secondary, #aaa); max-width: 640px; margin: 0 auto; }
.warr-cards-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; max-width: 960px; margin: 0 auto; }
.warr-card          { border: 2px solid var(--color-primary, #f97316); border-radius: var(--radius-md, 8px); padding: 2rem; text-align: center; }
.warr-card-icon     { font-size: 2.5rem; color: var(--color-primary, #f97316); margin-bottom: .75rem; }
.warr-card-years    { margin: 0 0 .5rem; }
.warr-card-label    { font-weight: 700; color: var(--color-primary, #f97316); margin: 0 0 .75rem; }
.warr-card-desc     { color: var(--text-secondary, #aaa); font-size: .9rem; margin: 0; }
.warr-section       { max-width: 960px; margin: 0 auto 2rem; padding: 0 1.5rem; }
.warr-section-lg    { max-width: 960px; margin: 0 auto 3rem; padding: 0 1.5rem; }
.warr-content-card  { border-radius: var(--radius-lg, 12px); padding: 2rem 2.5rem; }
.warr-heading       { margin: 0 0 1rem; }
.warr-heading-lg    { margin: 0 0 1.5rem; }
.warr-content-p     { color: var(--text-secondary, #aaa); }
.warr-content-list  { color: var(--text-secondary, #aaa); line-height: 1.9; padding-left: 1.5rem; }
.warr-steps-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.warr-step-item     { text-align: center; }
.warr-step-icon     { font-size: 2rem; color: var(--color-primary, #f97316); margin-bottom: .5rem; }
.warr-step-title    { margin: 0 0 .5rem; }
.warr-cta-section   { text-align: center; padding: 2rem 1.5rem 3rem; }
.warr-cta-sub       { color: var(--text-secondary, #aaa); margin-bottom: 1.5rem; }
.warr-cta-btn       { font-size: 1.1rem; padding: .75rem 2.5rem; }

/* ── Footer 3-column mid row (Session 28) ─────────────────────── */
.footer-mid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 24px 32px;
    gap: 24px;
    border-bottom: 1px solid var(--border);
}
.footer-mid .footer-social-wrap { justify-self: start; }
.footer-mid .footer-cta-heading {
    text-align: center;
    justify-self: center;
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: 700;
}
.footer-mid .footer-button { justify-self: end; }
@media (max-width: 768px) {
    .footer-mid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px;
    }
    .footer-mid .footer-cta-heading { text-align: center; }
}

/* ── Why Us — dark CTA (Session 28) ───────────────────────────── */
.why-cta {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #333);
}
.why-cta h3 { color: var(--text-primary, #fff); }
.why-cta .text-muted { color: var(--text-muted, #999) !important; }

/* ── Insurance benefit grid (Session 28) ──────────────────────── */
.ins-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    padding: 0;
    list-style: none;
    margin: 0;
}
@media (min-width: 768px) {
    .ins-benefit-grid { grid-template-columns: repeat(3, 1fr); }
}
.ins-benefit-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card, #1a1a1a);
    border-radius: var(--radius-md, 8px);
    border-left: 3px solid var(--color-primary, #e67e22);
    -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ins-benefit-card:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.ins-benefit-icon {
    color: var(--color-primary);
    font-size: 18px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Insurance form two-column labels (Session 28) ────────────── */
.ins-form-col-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary, #e67e22);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border, #333);
    margin-bottom: 12px;
}


/* ════════════════════════════════════════════════════════════════
   ESTIMATE ENGINE UX — Sprint 40 Enhancement
   ════════════════════════════════════════════════════════════════ */

/* ── ESTIMATE TOASTS ─────────────────────────────────────────── */
.ie-service-toast {
    position: relative;
    margin: 0 auto 10px;
    max-width: 320px;
    background: #1a1a1a;
    border-left: 4px solid #FF6600;
    border-radius: 6px;
    color: #f0f0f0;
    padding: 12px 32px 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 10000;
    pointer-events: auto;
    cursor: pointer;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 180ms ease-out, opacity 180ms ease-out;
}
.ie-service-toast.ie-toast-visible {
    transform: translateY(0);
    opacity: 1;
}
.ie-toast-icon {
    font-size: 17px;
    margin-right: 6px;
    vertical-align: middle;
}
.ie-toast-title {
    font-weight: 700;
    color: #FF6600;
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ie-toast-body {
    display: block;
    color: #e0e0e0;
    font-size: 12px;
}
.ie-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #666;
    font-size: 14px;
    line-height: 1;
}

/* ── DRAW GUIDE ──────────────────────────────────────────────── */
.ie-draw-guide {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a;
    border-top: 3px solid #FF6600;
    border-radius: 0 0 6px 6px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 220ms ease-out, opacity 220ms ease-out;
    z-index: 9999;
    pointer-events: none;
}
.ie-draw-guide.ie-guide-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.ie-draw-guide-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.ie-draw-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.ie-draw-step-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.ie-draw-step-text {
    font-size: 10px;
    color: #c0c0c0;
    line-height: 1.35;
    min-width: 0;
}
.ie-draw-step-num {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: #FF6600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.ie-draw-guide-divider {
    width: 1px;
    height: 36px;
    background: #333;
    flex-shrink: 0;
}
.ie-draw-guide-close {
    color: #555;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
    line-height: 1;
}

/* ── GUARD VISUAL PICKER ─────────────────────────────────────── */
.ie-guard-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.ie-guard-option {
    cursor: pointer;
    display: block;
    margin: 0;
}
.ie-guard-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.ie-guard-card {
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 7px;
    padding: 8px 6px 6px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    cursor: pointer;
}
.ie-guard-option input[type="radio"]:checked + .ie-guard-card {
    border-color: #FF6600;
    background: rgba(255,102,0,0.12);
    box-shadow: 0 0 0 2px rgba(255,102,0,0.18);
}
.ie-guard-card:hover {
    border-color: rgba(255,102,0,0.5);
    background: rgba(255,102,0,0.07);
}
.ie-guard-svg {
    width: 100%;
    height: 38px;
    display: block;
    margin-bottom: 5px;
}
.ie-guard-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #f0f0f0;
    line-height: 1.2;
}
.ie-guard-sub {
    display: block;
    font-size: 9px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}

/* ── Slider CTA Overlay (Sprint 49) ─────────────────────────────────────── */
.slider-cta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    padding: 0 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.52) 100%);
    pointer-events: none;
}
.slider-cta-headline {
    font-family: 'EurostileLTStd-BoldEx2', 'Arial Black', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    margin: 0 0 20px;
    line-height: 1.15;
}
.slider-cta-btn {
    pointer-events: auto;
    display: inline-block;
    padding: 14px 36px;
    background: #e85d04;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 4px 20px rgba(232,93,4,0.4);
}
.slider-cta-btn:hover {
    background: #c94e00;
    transform: translateY(-2px);
    color: #fff;
}
@media (max-width: 600px) {
    .slider-cta-headline { font-size: 1.25rem; }
    .slider-cta-btn { padding: 11px 24px; font-size: 0.9rem; }
}


/* Damage spot selector active button */
.ie-spot-active {
    background: rgba(226,75,74,0.15) !important;
    border-color: #E24B4A !important;
    color: #E24B4A !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   F4-2b — INSTANT FREE QUOTE CTA (global base + side-tab variant)
   ══════════════════════════════════════════════════════════════ */
.instant-free-quote-cta {
    background: linear-gradient(135deg, #ffa500 0%, #ff8800 100%);
    color: #0a0a0a;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
    box-shadow: 0 4px 14px rgba(255, 165, 0, 0.35);
}
.instant-free-quote-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 165, 0, 0.5);
    color: #0a0a0a;
    text-decoration: none;
}
.instant-free-quote-cta:active {
    transform: translateY(0);
}
.instant-free-quote-cta:focus-visible {
    outline: 2px solid #ffa500;
    outline-offset: 3px;
}

/* Side tab variant — preserves roof-button SVG shape; overrides color only */
.roof-button.instant-free-quote-cta.cta-side-tab {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   ESTIMATE-FLOW-REPAIR-V1 — D3 BACKGROUND
   Diagonal 135° orange accents + center radial glow + corner vignette
   Applied to both .roof-quote-panel (slide-in panel) and
   .estimate-form-card (/GetFreeEstimate page card)
   ══════════════════════════════════════════════════════════════ */
.roof-quote-panel,
.estimate-form-card {
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0px,
            transparent 38px,
            rgba(255, 140, 0, 0.035) 38px,
            rgba(255, 140, 0, 0.035) 39px
        ),
        radial-gradient(
            ellipse 80% 60% at 50% 40%,
            rgba(255, 120, 0, 0.08) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 100% 100% at 0% 0%,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 100% 100% at 100% 100%,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 50%
        ),
        linear-gradient(160deg, #1c1f24 0%, #14171a 100%);
}
.roof-quote-panel  { overflow: hidden; }
.estimate-form-card { position: relative; }

/* Metallic top edge */
.roof-quote-panel::before,
.estimate-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 140, 0, 0.5) 30%,
        rgba(255, 140, 0, 0.8) 50%,
        rgba(255, 140, 0, 0.5) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Bottom shadow line */
.roof-quote-panel::after,
.estimate-form-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 1;
}

/* Ensure panel content renders above pseudo-elements */
.roof-quote-panel > *,
.estimate-form-card > * {
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   F4-2b — ADDRESS INPUT COLOR (D6)
   White text on dark translucent background, orange border
   ══════════════════════════════════════════════════════════════ */
.roof-quote-panel #addressInput {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #ffa500;
    color: #ffffff;
    caret-color: #ffa500;
}
.roof-quote-panel #addressInput::placeholder {
    color: rgba(255, 255, 255, 0.55);
}
.roof-quote-panel #addressInput:focus {
    outline: none;
    border-color: #ffa500;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.25);
}
.roof-quote-panel #addressInput:-webkit-autofill,
.roof-quote-panel #addressInput:-webkit-autofill:hover,
.roof-quote-panel #addressInput:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(30, 30, 30, 0.95) inset !important;
    caret-color: #ffa500;
    transition: background-color 600000s ease-in-out 0s;
}

/* ══════════════════════════════════════════════════════════════
   F4-2b — GUTTER COVER TILES (D7)
   Dark charcoal tiles, orange accent borders, scoped to panel
   ══════════════════════════════════════════════════════════════ */
.roof-quote-panel .ie-guard-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.roof-quote-panel .ie-guard-option {
    cursor: pointer;
}
.roof-quote-panel .ie-guard-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.roof-quote-panel .ie-guard-card {
    background: #242831;
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 10px;
    padding: 16px 12px;
    cursor: pointer;
    transition: border-color 150ms, background-color 150ms;
    color: #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.roof-quote-panel .ie-guard-card:hover {
    border-color: rgba(255, 165, 0, 0.6);
    background: #2a2e38;
}
.roof-quote-panel .ie-guard-option input[type="radio"]:checked + .ie-guard-card {
    border-color: #ffa500;
    background: #2a2e38;
    box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.4),
                inset 0 0 20px rgba(255, 165, 0, 0.08);
}
.roof-quote-panel .ie-guard-svg {
    width: 100px;
    height: 60px;
    color: #ffa500;
}
.roof-quote-panel .ie-guard-label {
    font-weight: 600;
    font-size: 14px;
    color: #f4f4f4;
    display: block;
}
.roof-quote-panel .ie-guard-sub {
    font-size: 12px;
    color: rgba(244, 244, 244, 0.7);
    display: block;
}

/* ══════════════════════════════════════════════════════════════
   F4-2b — CONTRAST + DARK-ON-DARK FIXES (D9)
   All text within panel ≥ 4.5:1 WCAG AA
   ══════════════════════════════════════════════════════════════ */
/* Price card */
.roof-quote-panel #panel-estimate-card {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 12px;
    color: #f4f4f4;
}
.roof-quote-panel #panel-estimate-card .ie-price-main,
.roof-quote-panel #panel-estimate-card .ie-price-value {
    color: #ffa500;
}
.roof-quote-panel #panel-estimate-card .ie-price-label,
.roof-quote-panel #panel-estimate-card .ie-breakdown-label {
    color: #f4f4f4;
}
.roof-quote-panel #panel-estimate-card .ie-price-footnote,
.roof-quote-panel #panel-estimate-card .ie-breakdown-sub {
    color: rgba(244, 244, 244, 0.7);
}

/* Measurement readouts */
.roof-quote-panel #roof-area-text,
.roof-quote-panel #roof-polygon-data h3 {
    color: #f4f4f4;
}

/* Service select + material labels inside panel */
.roof-quote-panel label {
    color: rgba(244, 244, 244, 0.85);
}

/* Validation error text */
.roof-quote-panel #validation-message {
    color: #ff6b6b;
}

/* "Add gutter guards" label contrast */
.roof-quote-panel #panel-guard-row label {
    color: rgba(244, 244, 244, 0.85);
}


/* ── F4-3: PlaceAutocompleteElement overrides (panel only) ─── */
/* Minimum CSS to match the dark panel theme. No other changes. */
.roof-quote-panel gmp-place-autocomplete {
    font-family: inherit;
    width: 100%;
    display: block;
}
.roof-quote-panel gmp-place-autocomplete input {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: inherit;
}
.pac-container {
    z-index: 99999 !important;
}
.estimate-flow__address-group {
    display: contents;
}

/* ══════════════════════════════════════════════════════════════
   F4-4 D-2 — Global autofill contrast (public site inputs)
   Dark theme: bg-card=#1a1a1a, text-primary=#ffffff
   .roof-quote-panel #addressInput rules are more specific and
   override this for the panel — do not reorder.
   ══════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    caret-color: #ffffff;
    transition: background-color 600000s ease-in-out 0s;
}

/* ══════════════════════════════════════════════════════════════
   ESTIMATE-FLOW-REPAIR-V1 — D4 PANEL DIMENSIONS
   Override existing 70% width with clamped value
   ══════════════════════════════════════════════════════════════ */
.roof-quote-panel {
    width: clamp(420px, 32vw, 560px);
}

/* ══════════════════════════════════════════════════════════════
   ESTIMATE-FLOW-REPAIR-V1 — D5 GFE CARD DIMENSIONS
   Max-width 720px with responsive padding
   ══════════════════════════════════════════════════════════════ */
.estimate-form-card {
    max-width: 720px;
    padding: clamp(20px, 4vw, 32px);
}

/* ══════════════════════════════════════════════════════════════
   ESTIMATE-FLOW-REPAIR-V1 — D6 ADDRESS INPUT SIZING
   56px height, 18px font for both panel and GFE card
   ══════════════════════════════════════════════════════════════ */
.roof-quote-panel #addressInput,
.estimate-form-card #gfe-address-input {
    height: 56px;
    font-size: 18px;
    line-height: 1.3;
}

/* D6 dropdown — dark surface with orange hover */
.roof-quote-panel gmp-place-autocomplete::part(suggestion),
.estimate-form-card gmp-place-autocomplete::part(suggestion) {
    background: #1c1f24;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
    font-size: 14px;
}
.roof-quote-panel gmp-place-autocomplete::part(suggestion):hover,
.estimate-form-card gmp-place-autocomplete::part(suggestion):hover,
.roof-quote-panel gmp-place-autocomplete::part(suggestion-highlighted),
.estimate-form-card gmp-place-autocomplete::part(suggestion-highlighted) {
    background: rgba(255, 140, 0, 0.15);
    color: #fff;
}

/* GFE card address input base styling (matches panel dark theme) */
.estimate-form-card #gfe-address-input {
    background: var(--surface);
    color: #fff;
    border: 1px solid rgba(255, 140, 0, 0.5);
    border-radius: 6px;
    padding: 8px 14px;
    width: 100%;
    box-sizing: border-box;
}
.estimate-form-card #gfe-address-input:focus {
    outline: none;
    border-color: rgba(255, 140, 0, 0.8);
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.15);
}
.estimate-form-card gmp-place-autocomplete {
    font-family: inherit;
    width: 100%;
    display: block;
}

/* ── AC-WEBSITE-2026-04-26 ──────────────────────────────────────────────── */

/* HP-2: About Us border-radius matches about-owner-section, desktop only */
@media (min-width: 768px) {
    .about-us-section { border-radius: 8px; }
}

/* SP-1: eliminate horizontal scrollbar inside slide-out panel */
/* SP-2/SP-3: address row + button use full panel body width */
.roof-quote-panel .quick-quote-panel { max-width: 100%; overflow-x: hidden; }
.roof-quote-panel .quick-quote-search { width: 100%; }

/* GFE-1: widen estimate card to match page content rhythm */
.estimate-form-card { max-width: min(1100px, 90vw); }

/* GFE-MOBILE-1/3: search row full width on phone so input matches Start button */
@media (max-width: 767px) {
    .quick-quote-search { width: 100%; }
}

/* GFE-5: don't inherit panel scroll behavior — let dropdown overflow naturally */
.estimate-form-card .quick-quote-panel {
    overflow-y: visible;
}

/* GFE-6: extend card padding when autocomplete widget mounts so dropdown
   overflow lands on dark gradient surface, not bare page beneath */
.estimate-form-card.has-autocomplete {
    padding-bottom: 180px;
}

/* ── AC-WEBSITE-2026-04-26-R2 ───────────────────────────────────────────── */

/* PD-1: slide-out panel desktop width — Sultan override of ESTIMATE-FLOW-REPAIR-V1 clamp(420px,32vw,560px) */
@media (min-width: 1024px) {
    .roof-quote-panel {
        width: 60vw;
        max-width: 880px;
        min-width: 520px;
    }
}

/* PD-2/GFB-2: address group grows to fill available row space (flex:1 on the wrapper div) */
.search-input-wrapper .estimate-flow__address-group {
    flex: 1;
    min-width: 0;
}

/* PP-2/GFB-PHONE-1: phone — address group + input full-width for parity with Start button */
@media (max-width: 768px) {
    .estimate-flow__address-group {
        width: 100%;
        box-sizing: border-box;
    }
    .estimate-flow__address-group #addressInput {
        width: 100%;
        box-sizing: border-box;
    }
}

/* GFB-1: GFE inner form box (icon+input+Start cluster) spans ≥ 70% of card width on desktop */
@media (min-width: 1024px) {
    .estimate-form-card .quick-quote-search {
        width: min(85%, 880px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── AC-WEBSITE-2026-04-26-R3: search row proportions ───────────────────── */

/* Desktop ≥769px: grid gives exact columns — icon 10% / input 70% / button 20% */
@media (min-width: 769px) {
    .search-input-wrapper {
        display: grid;
        grid-template-columns: 10% 1fr 20%;
        align-items: center;
        padding: 6px;
        gap: 0;
    }
    .search-input-wrapper .search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .search-input-wrapper .estimate-flow__address-group {
        min-width: 0;
    }
    .search-input-wrapper #addressInput {
        width: 100%;
        box-sizing: border-box;
    }
    .search-input-wrapper #startQuoteBtn {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}

/* Phone ≤768px: column stack, input and Start button same full width */
@media (max-width: 768px) {
    .search-input-wrapper {
        align-items: stretch;
        gap: 8px;
    }
    .search-input-wrapper .search-icon {
        padding-left: 0;
        justify-content: center;
        align-self: center;
    }
    .search-input-wrapper .estimate-flow__address-group {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    .search-input-wrapper .estimate-flow__address-group #addressInput,
    .search-input-wrapper #addressInput {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
    }
    .search-input-wrapper #startQuoteBtn {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
}

/* GFE-MAP-1: /GetFreeEstimate satellite map — mirrors #map rules (approved 2026-04-27) */
#gfe-map {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    background: #1a1a1a;
}

/* GFE-THEME-1: Corrected for dark panel background (cream overrides removed) */
#gfe-gutter-run-question [data-runs] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
#gfe-gutter-run-question [data-runs]:hover {
    background: rgba(255, 102, 0, 0.12) !important;
    border-color: #ff6600 !important;
    color: #ff8c00 !important;
}
#gfe-damage-spot-row [data-spots] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
#gfe-gutter-draw-hint { color: var(--text-muted, #999) !important; }
#gfe-instruction-hint {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 2px solid rgba(255, 102, 0, 0.5);
}
#gfe-undo-btn, #gfe-clear-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
#gfe-undo-btn:hover, #gfe-clear-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
#gfe-estimate-card > div {
    background: rgba(26, 26, 26, 0.92) !important;
    border: 1px solid rgba(26, 26, 26, 0.6) !important;
    border-left: 4px solid #FF6600 !important;
    color: #ffffff !important;
    border-radius: 8px;
}
#gfe-estimate-card > div > div { color: #ffffff !important; }

/* GFE-GUARD-1: guard picker — dark-card style matching sliding panel (approved 2026-04-27) */
#gfe-guard-type-row .ie-guard-picker { gap: 12px; margin-top: 12px; }
#gfe-guard-type-row .ie-guard-card {
    background: #242831 !important;
    border: 1px solid rgba(255, 165, 0, 0.3) !important;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
#gfe-guard-type-row .ie-guard-card:hover {
    border-color: rgba(255, 165, 0, 0.6) !important;
    background: #2a2e38 !important;
}
#gfe-guard-type-row .ie-guard-option input[type="radio"]:checked + .ie-guard-card {
    border-color: #ffa500 !important;
    background: #2a2e38 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.4), inset 0 0 20px rgba(255, 165, 0, 0.08);
}
#gfe-guard-type-row .ie-guard-svg { width: 100px; height: 60px; color: #ffa500; }
#gfe-guard-type-row .ie-guard-label { font-weight: 600; font-size: 14px; color: #f4f4f4 !important; display: block; }
#gfe-guard-type-row .ie-guard-sub { font-size: 12px; color: rgba(244, 244, 244, 0.7) !important; display: block; }
#gfe-estimate-card { margin-top: 16px; }

/* S3.1: Roof type card picker in GFE panel */
.gfe-roof-type-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.gfe-roof-type-option {
    cursor: pointer;
    display: block;
    margin: 0;
}
.gfe-roof-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.gfe-roof-type-card {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    padding: 8px 4px 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gfe-roof-type-card i {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 160ms ease;
}
.gfe-roof-type-option input[type="radio"]:checked + .gfe-roof-type-card {
    border-color: #E24B4A;
    background: rgba(226, 75, 74, 0.12);
    box-shadow: 0 0 0 1px rgba(226, 75, 74, 0.25);
}
.gfe-roof-type-option input[type="radio"]:checked + .gfe-roof-type-card i {
    color: #E24B4A;
}
.gfe-roof-type-card:hover {
    border-color: rgba(226, 75, 74, 0.5);
    background: rgba(226, 75, 74, 0.07);
}
.gfe-roof-type-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #f0f0f0;
    line-height: 1.2;
}
.gfe-roof-type-sub {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
}
@media (max-width: 360px) {
    .gfe-roof-type-picker { grid-template-columns: repeat(2, 1fr); }
}

/* GFE-SEGLIST-1: gutter run list text — dark on beige (approved 2026-04-27) */
#gfe-segment-list { color: #2d2d2d; }
#gfe-segment-list li { border-bottom-color: rgba(0, 0, 0, 0.12) !important; }

/* HP-2-UPDATE: full-width + border-radius on all screens to match .about-owner-section (approved 2026-04-27) */
.about-us-section {
    width: 100%;
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════
   PILL-BTN: Instant Free Quote — modern bottom-right pill (approved 2026-04-27)
   Replaces SVG-capped side-tab shape. JS still targets #open-quote-panel.
   ══════════════════════════════════════════════════════════════ */

/* Vertical-center on right edge */
.roof-btn-outer {
    top: 50% !important;
    bottom: auto;
    right: 24px;
    transform: translateY(-50%) !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Hide floating CTA stack while sliding quote panel is open */
body:has(#roof-quote-panel.open) .roof-btn-outer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Callout + IFQ pill horizontal row */
.ifq-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    pointer-events: none;
}

/* Phone button + callout horizontal row */
.phone-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    pointer-events: none;
}

/* Phone callout — mirrors .quick-quote-callout */
.phone-callout {
    background: var(--bg-card);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 10px 28px 10px 12px;
    margin-right: 10px;
    min-width: 170px;
    position: relative;
    display: none;
    box-shadow: var(--shadow-md);
    pointer-events: all;
}
.phone-callout.open {
    display: block;
}
.phone-callout::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 7px solid var(--color-primary);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

/* Pill button */
.cta-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 22px 0 18px;
    height: 50px;
    background: linear-gradient(135deg, #ffa500 0%, #ff7000 100%);
    color: #0a0a0a;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.35px;
    border-radius: 50px;
    cursor: pointer;
    user-select: none;
    pointer-events: all;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(255, 140, 0, 0.5), 0 0 0 0 rgba(255, 165, 0, 0);
    animation: pill-pulse 3s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-pill-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.7), 0 0 0 6px rgba(255, 165, 0, 0.12);
    animation: none;
}
.cta-pill-btn:active {
    transform: translateY(-1px);
}
.cta-pill-btn i {
    font-size: 15px;
    flex-shrink: 0;
}
@keyframes pill-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(255, 140, 0, 0.5), 0 0 0 0 rgba(255, 165, 0, 0); }
    50%       { box-shadow: 0 6px 26px rgba(255, 140, 0, 0.65), 0 0 0 8px rgba(255, 165, 0, 0.08); }
}

/* Stack: slightly smaller right margin on mobile */
@media (max-width: 767.98px) {
    .roof-btn-outer {
        right: 16px;
    }
    .cta-pill-btn {
        height: 44px;
        font-size: 13px;
        padding: 0 18px 0 14px;
        gap: 8px;
    }
    .cta-pill-btn i {
        font-size: 13px;
    }
}

/* Phone call circle button */
.cta-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffa500 0%, #ff7000 100%);
    color: #000;
    border-radius: 50%;
    text-decoration: none;
    pointer-events: all;
    box-shadow: 0 4px 18px rgba(255, 140, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-phone-btn:hover,
.cta-phone-btn:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.7);
    color: #000;
    text-decoration: none;
    outline: none;
}
.cta-phone-btn:active {
    transform: translateY(-1px);
}
.cta-phone-btn i {
    font-size: 18px;
}
@media (max-width: 767.98px) {
    .cta-phone-btn { width: 44px; height: 44px; }
    .cta-phone-btn i { font-size: 16px; }
}

/* ── GFE page: light-background overrides for engine-injected HTML ─────────── */
/* The estimate engine builds HTML with rgba(255,255,255,...) colors for the    */
/* dark sliding panel. These rules restore legibility on the GFE light surface. */
#gfe-segment-list {
    color: #333333;
}
#gfe-segment-list li {
    border-bottom-color: rgba(0,0,0,0.12) !important;
}
#gfe-estimate-card [style*="rgba(255,255,255"] {
    color: #555555 !important;
}

/* ── S1: Slider sub-headline ─────────────────────────────────────────────── */
.slider-cta-sub {
    color: rgba(255,255,255,0.92);
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    font-weight: 400;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    margin: -10px 0 22px;
    max-width: 560px;
    line-height: 1.55;
}
@media (max-width: 600px) {
    .slider-cta-sub { font-size: 0.82rem; margin-bottom: 16px; }
}

/* ── S1: Three Step Plan ─────────────────────────────────────────────────── */
.three-step-plan {
    padding: var(--space-3xl) 0;
    margin-bottom: var(--space-2xl);
}
.tsp-header { text-align: center; margin-bottom: var(--space-3xl); }
.tsp-header h2 {
    color: var(--text-primary);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0;
}
.tsp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.tsp-step {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}
.tsp-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--gradient-primary);
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 800;
    color: #000;
    margin: 0 auto var(--space-lg);
}
.tsp-step h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.tsp-step p {
    color: var(--text-muted);
    margin: 0;
}
@media (max-width: 767px) {
    .tsp-steps { grid-template-columns: 1fr; }
}

/* ── S1: Founder Quote ───────────────────────────────────────────────────── */
.founder-quote {
    display: flex;
    align-items: center;
    gap: var(--space-3xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    border-left: 4px solid var(--color-primary);
}
.fq-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--color-primary);
    flex-shrink: 0;
}
.founder-quote blockquote {
    margin: 0;
    border: none;
    padding: 0;
}
.founder-quote blockquote p {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
.founder-quote blockquote cite {
    color: var(--color-primary);
    font-weight: 600;
    font-style: normal;
    font-size: var(--font-size-sm);
}
@media (max-width: 767px) {
    .founder-quote {
        flex-direction: column;
        text-align: center;
        gap: var(--space-xl);
        padding: var(--space-2xl);
    }
}

/* ── S1: Triple Guarantee ────────────────────────────────────────────────── */
.triple-guarantee {
    padding: var(--space-3xl) 0;
    margin-bottom: var(--space-2xl);
}
.triple-guarantee h2 {
    color: var(--text-primary);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-3xl);
}
.tg-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.tg-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
}
.tg-card h3 {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.tg-card p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.65;
}
@media (max-width: 767px) {
    .tg-cards { grid-template-columns: 1fr; }
}

/* ── S2: WhyUs Page ──────────────────────────────────────────────────────── */
.whyus-page {
    padding: var(--space-3xl) 0;
}

/* Shared section utilities */
.whyus-section-eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}
.whyus-section-h2 {
    color: var(--text-primary);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: var(--space-xl);
    line-height: 1.25;
}

/* Hero */
.whyus-hero {
    text-align: center;
    padding: var(--space-4xl) 0 var(--space-3xl);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-3xl);
}
.whyus-hero-h1 {
    color: var(--text-primary);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    line-height: 1.15;
}
.whyus-hero-sub {
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.15rem);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.6;
}

/* Origin Story */
.whyus-origin {
    margin-bottom: var(--space-3xl);
}
.whyus-origin-inner {
    display: flex;
    gap: var(--space-3xl);
    align-items: flex-start;
}
.whyus-origin-aside {
    flex-shrink: 0;
    width: 200px;
    text-align: center;
    position: sticky;
    top: var(--space-2xl);
}
.whyus-origin-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--color-primary);
    display: block;
    margin: 0 auto var(--space-lg);
}
.whyus-origin-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-md);
    margin-bottom: var(--space-xs);
}
.whyus-origin-role {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 2px;
}
.whyus-origin-company {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin: 0;
}
.whyus-origin-body p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}
.whyus-origin-body strong {
    color: var(--text-primary);
}
@media (max-width: 900px) {
    .whyus-origin-inner { flex-direction: column; align-items: center; }
    .whyus-origin-aside { width: 100%; position: static; margin-bottom: var(--space-2xl); }
    .whyus-origin-photo { width: 120px; height: 120px; }
}

/* Credentials */
.whyus-credentials {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    border-left: 4px solid var(--color-primary);
}
.whyus-cred-lead {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.7;
    margin-bottom: var(--space-2xl);
    max-width: 680px;
}
.whyus-cred-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.whyus-cred-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-lg);
}
.whyus-cred-icon {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: var(--space-md);
    display: block;
}
.whyus-cred-card h3 {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.whyus-cred-card p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
    line-height: 1.55;
}
.whyus-cred-number {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: monospace;
    margin-top: var(--space-xs) !important;
}
.whyus-cred-footer {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin: 0;
}
@media (max-width: 900px) {
    .whyus-cred-grid { grid-template-columns: repeat(2, 1fr); }
    .whyus-credentials { padding: var(--space-2xl); }
}
@media (max-width: 540px) {
    .whyus-cred-grid { grid-template-columns: 1fr; }
}

/* Inspection Categories */
.whyus-inspection {
    margin-bottom: var(--space-3xl);
}

/* Founder's 100 Social Proof */
.whyus-founders-proof {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}
.whyus-founders-proof p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.75;
    margin-bottom: var(--space-lg);
}
.whyus-founders-proof-cta-text {
    color: var(--text-primary) !important;
    font-weight: 600;
}
.whyus-inline-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}
.whyus-inline-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

/* Repel Language */
.whyus-repel {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1000 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-primary-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}
.whyus-repel-h2 {
    color: var(--text-primary);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    margin-bottom: var(--space-xl);
    line-height: 1.3;
}
.whyus-repel p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.75;
    margin-bottom: var(--space-lg);
}
.whyus-repel-right-fit {
    color: var(--text-primary) !important;
    font-weight: 600;
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-lg);
    margin-bottom: 0 !important;
}

/* Bottom CTA */
.whyus-cta {
    text-align: center;
    padding: var(--space-4xl) var(--space-2xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-top: var(--space-3xl);
}
.whyus-cta h2 {
    color: var(--text-primary);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}
.whyus-cta p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    max-width: 560px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.7;
}
@media (max-width: 600px) {
    .whyus-hero { padding: var(--space-3xl) 0 var(--space-2xl); }
    .whyus-credentials,
    .whyus-founders-proof,
    .whyus-repel,
    .whyus-cta { padding: var(--space-2xl) var(--space-lg); }
}

/* ── S3: GetFreeEstimate Reframe ─────────────────────────────────────────── */
.gfe-page {
    padding: var(--space-3xl) 0;
}

/* Shared utility (same eyebrow as .whyus-section-eyebrow) */
.gfe-section-eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

/* Hero */
.gfe-hero {
    text-align: center;
    padding: var(--space-4xl) 0 var(--space-3xl);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-3xl);
}
.gfe-hero-h1 {
    color: var(--text-primary);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--space-lg);
}
.gfe-hero-sub {
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.15rem);
    max-width: 620px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.65;
}
.gfe-hero-timing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.gfe-timing-pill {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.gfe-timing-pill strong {
    color: var(--color-primary);
}
.gfe-timing-sep {
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    font-weight: 300;
}

/* Value Stack */
.gfe-value-stack {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-3xl);
    margin-bottom: var(--space-2xl);
}
.gfe-vs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--space-3xl);
    margin-top: var(--space-xl);
}
.gfe-vs-item {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}
.gfe-vs-icon {
    color: var(--color-primary);
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.gfe-vs-item h3 {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}
.gfe-vs-item p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 700px) {
    .gfe-vs-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .gfe-value-stack { padding: var(--space-2xl) var(--space-lg); }
}

/* WhyUs nudge link */
.gfe-whyus-nudge {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2xl);
}
.gfe-whyus-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.gfe-whyus-link:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

/* Privacy note below email field */
.gfe-privacy-note {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin: var(--space-xs) 0 0;
}

/* Triple Guarantee inside price panel — tighten spacing to fit inline */
#gfe-price-quote-panel .triple-guarantee {
    padding: var(--space-xl) 0;
    margin-bottom: var(--space-xl);
}
#gfe-price-quote-panel .triple-guarantee h2 {
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin-bottom: var(--space-xl);
}
#gfe-price-quote-panel .tg-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
#gfe-price-quote-panel .tg-card {
    padding: var(--space-lg) var(--space-md);
}
#gfe-price-quote-panel .tg-card h3 {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}
#gfe-price-quote-panel .tg-card p {
    font-size: var(--font-size-xs);
}
@media (max-width: 600px) {
    #gfe-price-quote-panel .tg-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .gfe-hero { padding: var(--space-3xl) 0 var(--space-2xl); }
}

/* ════════════════════════════════════════════════════════════════
   DAY / NIGHT MODE — AC_DAY_NIGHT_TOGGLE_2026-05-19
   ════════════════════════════════════════════════════════════════ */

/* ── TN-3A: theme toggle button (website) ───────────────────── */
.site-theme-toggle {
    background: none;
    border: 1px solid rgba(255,165,0,0.4);
    border-radius: 20px;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    padding: 5px 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}
.site-theme-toggle:hover {
    border-color: var(--color-primary, #ffa500);
    color: var(--color-primary, #ffa500);
}

/* ── TN-5E: day-mode CSS variable overrides ─────────────────── */
html[data-theme="day"] {
    --bg-primary:   #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card:      #ffffff;
    --surface:      #f0f0f0;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted:   #666666;
    --border:       #e0e0e0;
    /* --color-primary stays #ffa500 — brand orange is invariant */
}

/* ── TN-5A: Group A day-mode overrides (header + mobile menu) ── */
html[data-theme="day"] header {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
html[data-theme="day"] header .nav-menu a {
    color: #1a1a1a !important;
}
html[data-theme="day"] header .nav-menu a:hover {
    color: #000 !important;
}
html[data-theme="day"] .mobile-menu {
    background: #ffffff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.15);
}
html[data-theme="day"] .mobile-menu nav .menu-list li a {
    color: #1a1a1a;
}
html[data-theme="day"] .site-theme-toggle {
    border-color: rgba(26,26,26,0.25);
    color: rgba(26,26,26,0.65);
}
html[data-theme="day"] .site-theme-toggle:hover {
    border-color: var(--color-primary, #ffa500);
    color: var(--color-primary, #ffa500);
}

/* ── TN-5B: alert day/night mode ───────────────────────────── */
html:not([data-theme="day"]) .alert.success {
    background-color: rgba(34,197,94,0.10);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.30);
}
html:not([data-theme="day"]) .alert.error {
    background-color: rgba(239,68,68,0.10);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.30);
}

/* ── TN-5C: contact page day-mode overrides ─────────────────── */
html[data-theme="day"] .contact-hero {
    background: #ffffff;
}
html[data-theme="day"] .contact-hero p {
    color: #333333;
}
html[data-theme="day"] .contact-box {
    background: #ffffff;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.08);
}

/* ── TN-5F: blog tag night-mode overrides ───────────────────── */
html:not([data-theme="day"]) .blog-tag-amber   { background: rgba(217,119,6,0.15);  color: #f59e0b; }
html:not([data-theme="day"]) .blog-tag-green   { background: rgba(4,120,87,0.15);   color: #10b981; }
html:not([data-theme="day"]) .blog-tag-purple  { background: rgba(91,33,182,0.15);  color: #a78bfa; }
html:not([data-theme="day"]) .blog-tag-gray    { background: rgba(107,114,128,0.15); color: #9ca3af; }
html:not([data-theme="day"]) .blog-tag-orange  { background: rgba(234,88,12,0.15);  color: #f97316; }
html:not([data-theme="day"]) .blog-tag-coastal { background: rgba(14,116,144,0.15); color: #22d3ee; }

/* ── TN-5G: blog article night-mode override ────────────────── */
html:not([data-theme="day"]) .blog-article {
    background: var(--bg-card, #1a1a1a);
    color: var(--text-primary, #fff);
}
html:not([data-theme="day"]) .blog-article h1,
html:not([data-theme="day"]) .blog-article h2,
html:not([data-theme="day"]) .blog-article h3 { color: var(--text-primary, #fff); }
html:not([data-theme="day"]) .blog-article p,
html:not([data-theme="day"]) .blog-article ul,
html:not([data-theme="day"]) .blog-article ol { color: var(--text-secondary, #e0e0e0); }
html:not([data-theme="day"]) .blog-article strong { color: var(--text-primary, #fff); }
html:not([data-theme="day"]) .blog-article th { background: var(--surface, #222); color: var(--text-primary, #fff); border-bottom-color: var(--border, #333); }
html:not([data-theme="day"]) .blog-article td { color: var(--text-secondary, #e0e0e0); border-bottom-color: var(--border, #333); }
html:not([data-theme="day"]) .blog-article tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
html:not([data-theme="day"]) .blog-article .blog-cta { background: var(--surface, #222); border-color: var(--border, #333); }
html:not([data-theme="day"]) .blog-article h2 { border-bottom-color: rgba(255,255,255,0.08); }
html:not([data-theme="day"]) .blog-callout { background: rgba(59,130,246,0.08); }
html:not([data-theme="day"]) .blog-callout p { color: var(--text-secondary, #ccc); }
html:not([data-theme="day"]) .blog-callout-amber { background: rgba(245,158,11,0.08); }
html:not([data-theme="day"]) .blog-callout-amber p { color: var(--text-secondary, #ccc); }

/* ── TN-5H: quote panel — keep dark in day mode ─────────────── */
html[data-theme="day"] .roof-quote-panel,
html[data-theme="day"] .estimate-form-card {
    color: #f0f0f0;
}
html[data-theme="day"] .roof-quote-panel label,
html[data-theme="day"] .estimate-form-card label {
    color: rgba(244,244,244,0.85);
}

/* ── TN-5I: state cards — super-light tinted backgrounds for day mode ── */
html[data-theme="day"] .state-card-header { border-bottom-color: rgba(0,0,0,0.08); }
html[data-theme="day"] .state-district    { border-bottom-color: rgba(0,0,0,0.06); }
html[data-theme="day"] .state-name        { color: #111; }
html[data-theme="day"] .state-sub         { color: #555; }

/* PA — near-white blue */
html[data-theme="day"] .state-card-pa {
    background: linear-gradient(160deg, #eef4fb 0%, #f6f9ff 60%, #fafcff 100%);
    border-color: #b8cfe8;
}
html[data-theme="day"] .state-card-pa .district-label {
    color: #1e3a6e; border-color: rgba(30,58,110,0.18);
}
html[data-theme="day"] .state-card-pa .city-chips span {
    background: rgba(30,58,110,0.07); border-color: rgba(30,58,110,0.22); color: #1e3a6e;
}
html[data-theme="day"] .state-card-pa .city-chips span:hover {
    background: rgba(30,58,110,0.15); color: #0f2348;
}

/* NJ — near-white warm red */
html[data-theme="day"] .state-card-nj {
    background: linear-gradient(160deg, #fdf0ea 0%, #fff5f1 60%, #fffaf8 100%);
    border-color: #e0ac94;
}
html[data-theme="day"] .state-card-nj .district-label {
    color: #7a2a00; border-color: rgba(122,42,0,0.18);
}
html[data-theme="day"] .state-card-nj .city-chips span {
    background: rgba(122,42,0,0.06); border-color: rgba(122,42,0,0.22); color: #7a2a00;
}
html[data-theme="day"] .state-card-nj .city-chips span:hover {
    background: rgba(122,42,0,0.14); color: #4a1500;
}

/* DE — near-white teal */
html[data-theme="day"] .state-card-de {
    background: linear-gradient(160deg, #e8f6f2 0%, #f2faf7 60%, #f8fdfc 100%);
    border-color: #8ecbb8;
}
html[data-theme="day"] .state-card-de .district-label {
    color: #0a4a3a; border-color: rgba(10,74,58,0.18);
}
html[data-theme="day"] .state-card-de .city-chips span {
    background: rgba(10,74,58,0.06); border-color: rgba(10,74,58,0.22); color: #0a4a3a;
}
html[data-theme="day"] .state-card-de .city-chips span:hover {
    background: rgba(10,74,58,0.14); color: #062b22;
}

/* ── TN-5K: contact + insurance form day-mode fixes ─────────── */
/* .checkbox-group hardcodes color:rgba(255,255,255,0.8) — white on white = invisible */
html[data-theme="day"] .checkbox-group       { color: #1a1a1a; }
html[data-theme="day"] .checkbox-group a     { color: var(--color-primary, #ffa500); }
/* form-group label (lead source partial) and ins-label-sm labels */
html[data-theme="day"] .form-group label     { color: #1a1a1a; }
html[data-theme="day"] .ins-label-sm         { color: #555; }
/* Insurance form card — Bootstrap .card has its own bg var; enforce ours */
html[data-theme="day"] .ins-form-card        { background: #ffffff; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
/* ins-form-col-label border visible on white */
html[data-theme="day"] .ins-form-col-label   { border-bottom-color: #e0e0e0; }
/* ins-alert on white background */
html[data-theme="day"] .ins-alert            { background: rgba(255,165,0,0.08); color: #333; }
/* ins-cta box */
html[data-theme="day"] .ins-cta              { background: #f5f6f8; border-color: #e0e0e0 !important; }

/* ── TN-5J: footer — day-mode fixes ─────────────────────────── */
/* background:#000 and background-color:black are both hardcoded, not CSS vars */
html[data-theme="day"] .custom-footer {
    background: #f5f6f8;
    border-top: 1px solid #e0e0e0;
}
/* Legacy rule at line ~2003 hardcodes color:#fff with 4-class specificity — match it to override */
html[data-theme="day"] .custom-footer .top-ftr-row .row .column h4 {
    color: #333;
}

/* ── TN-5L: DynamicArticle + .ab-* blog components — day-mode ── */
html[data-theme="day"] .ab-headline                 { color: #1a1a1a; }
html[data-theme="day"] .ab-meta                     { color: #666; }
html[data-theme="day"] .ab-body                     { color: #333; }
html[data-theme="day"] .ab-body strong              { color: #111; }
html[data-theme="day"] .ab-body h2                  { color: #111; border-bottom-color: #e0e0e0; }
html[data-theme="day"] .ab-body h3                  { color: #111; }
html[data-theme="day"] .ab-body blockquote,
html[data-theme="day"] .ab-pullquote                { background: #f5f6f8; color: #444; }
html[data-theme="day"] .ql-content                  { color: #333; }
html[data-theme="day"] .ql-content strong           { color: #111; }
html[data-theme="day"] .ql-content h2               { color: #111; border-bottom-color: #e0e0e0; }
html[data-theme="day"] .ql-content h3               { color: #111; }
html[data-theme="day"] .ql-content blockquote       { background: #f5f6f8; color: #444; }
html[data-theme="day"] .ab-author-bio               { background: #ffffff; border-color: #e0e0e0; }
html[data-theme="day"] .ab-author-bio-name          { color: #111; }
html[data-theme="day"] .ab-author-bio-text          { color: #333; }
html[data-theme="day"] .ab-cta-box h3               { color: #1a1a1a; }
html[data-theme="day"] .ab-cta-box p                { color: #333; }