/* ===== PRISTINE PROPERTY MASTERS - MAIN STYLESHEET ===== */

:root {
    --clr-primary: #0B1D39;
    --clr-secondary: #102A43;
    --clr-accent: #FFD60A;
    --clr-accent-hover: #FFC300;
    --clr-light: #F5F5F5;
    --clr-text-dark: #1A1A1A;
    --clr-text-light: #FFFFFF;

    /* Alias kept because services.css referenced --clr-text, which was
       never defined anywhere. Pointed at the dark body text colour. */
    --clr-text: #1A1A1A;
}


/* CSS Reset & Base Styles */
/* ======================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Prevent horizontal scrolling.
   overflow-x: hidden must live on body ONLY, never on html. When html is
   left at overflow: visible, the body's overflow-x propagates to the
   viewport: the viewport clips sideways but the WINDOW stays the scroll
   container, so window.scrollY works and GA4 scroll-depth tracking fires.
   With hidden on both html and body, body itself became the scroll
   container, window.scrollY was permanently 0, and scroll tracking was
   silently dead (SITE_AUDIT item 10). */
html {
    width: 100%;
    position: relative;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Ensure header is sticky on all devices.
   Phase 3: translucent white with blur so content ghosts under it,
   hairline bottom edge, and a shadow that fades in once the page is
   scrolled (main.js toggles .header--scrolled reading window.scrollY,
   which works since the item 10 fix). */
.header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(11, 29, 57, 0.08);
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transition: box-shadow 0.25s ease;
}

.header--scrolled {
    box-shadow: 0 2px 16px rgba(11, 29, 57, 0.12);
}

/* Fix mobile layouts */
@media (max-width: 767px) {
    .header {
        position: -webkit-sticky !important; /* iOS Safari support */
    }
    
    .container {
        max-width: 100%;
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Prevent content from expanding beyond viewport */
    .services-grid,
    .reviews-grid,
    .gallery-grid,
    .areas-grid,
    .contact-grid,
    .footer-content {
        width: 100%;
        max-width: 100%;
    }
}

/* Services section - blue glass card override */
.services .card--glass {
    background: rgba(70, 90, 120, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
    .services .card--glass {
        background: rgba(70, 90, 120, 0.85);
    }
}

.services .card--glass:hover {
    background: rgba(70, 90, 120, 0.55);
    border-color: rgba(255, 214, 10, 0.3);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 214, 10, 0.1);
}

/* Services card text - white on blue glass */
.services .card--glass .service-title {
    color: #fff;
    opacity: 0.98;
}

.services .card--glass .service-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Why Choose section - maintain site width */
.why-choose-panel {
    max-width: 1200px !important;
}

/* Light section wrapper - visual reset between navy sections */
.section--light {
    background: linear-gradient(180deg, #EAF2FA 0%, #F5F7FB 100%);
    padding: 5rem 0;
    position: relative;
}

.section--light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(10, 35, 66, 0.1);
}

.section--light::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(10, 35, 66, 0.1);
}

/* Typography on light surface */
.section--light h2,
.section--light h3 {
    color: #0A2342 !important;
}

.section--light p,
.section--light .about-description,
.section--light .trust-rating,
.section--light .feature-content {
    color: #1A1A1A !important;
}

/* Panel inside the light section: crisp white card, not a muddy
   blue-gray tint (phase 5.5, Mike's review) */
.section--light .why-choose-panel {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(11, 29, 57, 0.08) !important;
    box-shadow: 0 12px 40px rgba(10, 35, 66, 0.08) !important;
}

/* Feature cards - light translucent blue to match panel */
.section--light .feature-card {
    background: #ffffff !important;
    border: 1px solid rgba(11, 29, 57, 0.08) !important;
    box-shadow: 0 2px 12px rgba(10, 35, 66, 0.06) !important;
}

.section--light .feature-card .feature-title {
    color: #0A2342 !important;
}

/* Yellow accents only */
.section--light .section-title::after {
    background: #FFD60A !important;
}

.section--light .trust-rating .stars {
    color: #FFD60A !important;
}

/* Responsive padding */
@media (max-width: 1024px) {
    .section--light {
        padding: 4.5rem 0;
    }
}

@media (max-width: 768px) {
    .section--light {
        padding: 3.5rem 0;
    }
}

@media (max-width: 480px) {
    .section--light {
        padding: 2.5rem 0;
    }
}

/* A) Why Choose - mobile rating layout */
.section--light .trust-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 480px) {
    .section--light .trust-rating {
        flex-direction: column;
        gap: 8px;
    }
}

@media (min-width: 768px) {
    .section--light .trust-rating {
        flex-direction: row;
        gap: 12px;
    }
}

/* B) Why Choose - enhanced glass feature cards */
.section--light .feature-card {
    background: #ffffff !important;
    border: 1px solid rgba(11, 29, 57, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(10, 35, 66, 0.07) !important;
    padding: 24px 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .section--light .feature-card {
        background: #ffffff !important;
    }
}

.section--light .feature-card:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(10, 35, 66, 0.14) !important;
}

/* Enhanced feature card icons. Navy disc with the gold icon on it:
   the old yellow-on-10%-yellow circle was invisible on light cards,
   which Mike flagged after the icon pass. */
.section--light .feature-card .feature-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--clr-primary) !important;
    color: var(--clr-accent) !important;
    box-shadow: 0 4px 12px rgba(11, 29, 57, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin: 0 auto 16px auto !important;
    transition: all 0.3s ease !important;
}

.section--light .feature-card:hover .feature-icon {
    background: var(--clr-secondary) !important;
    transform: scale(1.05) !important;
}

@media (min-width: 768px) {
    .section--light .feature-card {
        padding: 28px 24px !important;
    }
}

/* C) Proudly Serving - equal-size city buttons */
.service-areas-panel .areas-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

.service-areas-panel .areas-grid .area-link {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .service-areas-panel .areas-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    .service-areas-panel .areas-grid .area-link {
        min-width: 140px !important;
    }
}

@media (max-width: 480px) {
    .service-areas-panel .areas-grid .area-link {
        white-space: normal !important;
        line-height: 1.2 !important;
        padding: 10px 12px !important;
        min-height: 52px !important;
    }
}

/* D) Testimonials - improved readability */
.reviews .section-title {
    color: #0A2342 !important;
    text-shadow: none !important;
    letter-spacing: 0.3px !important;
}

.reviews .review-card {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.reviews .review-card .review-author {
    color: #0A2342 !important;
    text-shadow: none !important;
    font-weight: 500 !important;
}

.reviews .review-card .review-stars {
    color: #FFD60A !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
}

/* Gallery grid - 4×2 desktop, 1 column mobile */
.gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1.5rem !important;
    }
}


/* Mobile Free Quote button */
.mobile-quote-btn {
    display: none;
    background: var(--clr-accent);
    color: var(--clr-text-dark);
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.mobile-quote-btn:hover {
    background: var(--clr-accent-hover);
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .mobile-quote-btn {
        display: flex;
    }
    
    .mobile-right-group {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
}

/* Floating CTA */
.floating-cta {
    position: fixed;
    background: var(--clr-accent);
    color: var(--clr-text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 50px;
    padding: 12px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0.9;
    white-space: nowrap;
}

.floating-cta:hover,
.floating-cta:focus {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    background: var(--clr-accent-hover);
}

.floating-cta:focus-visible {
    outline: 3px solid var(--clr-primary);
    outline-offset: 2px;
}

/* Desktop positioning */
@media (min-width: 768px) {
    .floating-cta {
        bottom: 2rem;
        right: 2rem;
    }
}

/* Mobile positioning */
@media (max-width: 767px) {
    .floating-cta {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.85rem;
        padding: 10px 18px;
    }
    
    .floating-cta:hover,
    .floating-cta:focus {
        transform: translateX(-50%) translateY(-2px);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-cta {
        transition: none;
    }
    
    .floating-cta:hover,
    .floating-cta:focus {
        transform: none;
    }
    
    @media (max-width: 767px) {
        .floating-cta:hover,
        .floating-cta:focus {
            transform: translateX(-50%);
        }
    }
}

/* Quote section scroll offset */
#quote {
    scroll-margin-top: 2rem;
    scroll-margin-bottom: 2rem;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

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

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

/* Links */
a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: #004499;
    text-decoration: underline;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buttons & Forms */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

textarea {
    overflow: auto;
}

/* Utility Classes */
/* =============== */
.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;
}

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

/* Hero Section Sizing Rules */
/* ========================= */
.hero {
    min-height: 100vh;
    min-height: 100dvh; /* Modern browsers */
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height, 64px) + env(safe-area-inset-top) + 12px);
        padding-bottom: 2rem;
    }
}

@media (min-width: 1536px) {
    .hero {
        min-height: 75vh;
    }
}

/* Responsive Design */
/* ================= */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .container {
        padding: 0 0.75rem;
    }
    
    /* Hero CTA spacing */
    .hero-cta {
        margin-bottom: 0.75rem;
    }
    
    .hero-reassurance {
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(1.6rem, 6vw, 2rem);
        line-height: 1.25;
    }
}

@media (max-width: 375px) {
    .hero {
        padding-top: calc(var(--header-height, 64px) + env(safe-area-inset-top) + 32px);
        padding-bottom: 2.5rem;
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 5.5vw, 1.9rem);
        line-height: 1.2;
        margin-bottom: 0.75rem;
        margin-top: 0.5rem;
    }
}

/* Component-specific styles will be added as pages are built */

/* ===== CONTACT PAGE STYLES ===== */

/* Contact Hero Section */
.contact-hero {
    background: linear-gradient(135deg, var(--clr-primary) 0%, #1a3a5c 50%, var(--clr-primary) 100%);
    color: var(--clr-text-light);
    padding: 3rem 0 2rem;
    text-align: center;
}

.contact-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.contact-hero-subtitle {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* Contact Form Section */
.contact-form-section {
    background: var(--clr-light);
    padding: 3rem 0;
}

.contact-form {
    background: var(--clr-text-light);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.form-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-row {
    display: grid;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--clr-text-dark);
}

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

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

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    width: 100%;
    margin-top: 1rem;
}

.form-reassurance {
    text-align: center;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

/* Alternative Contact Methods */
.contact-methods {
    background: var(--clr-text-light);
    padding: 3rem 0;
}

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

.contact-method-card {
    background: var(--clr-light);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease;
}

.contact-method-card:hover {
    transform: translateY(-4px);
}

.contact-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.contact-method-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--clr-primary);
}

.contact-link {
    color: var(--clr-accent);
    text-decoration: none;
    font-weight: 500;
}

.contact-link:hover {
    text-decoration: underline;
}

/* Service Areas Section */
.service-areas {
    background: linear-gradient(135deg, var(--clr-primary) 0%, #1a3a5c 50%, var(--clr-primary) 100%);
    padding: 4rem 0;
    text-align: center;
}

.service-areas .section-title {
    color: var(--clr-text-light);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.service-areas .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--clr-accent);
    margin: 1rem auto;
    border-radius: 2px;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 2rem auto 0;
}

.area-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: var(--clr-text-dark);
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.area-link:hover {
    background: var(--clr-accent);
    color: var(--clr-text-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 214, 10, 0.3);
    border-color: var(--clr-accent);
}

.area-icon {
    font-size: 1rem;
    opacity: 0.8;
}

/* Trust Section */
.trust-section {
    background: var(--clr-light);
    padding: 4rem 0;
}

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

.review-card {
    background: var(--clr-text-light);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.review-stars {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--clr-accent);
}

.review-text {
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.review-author {
    font-weight: 500;
    color: var(--clr-primary);
}

.trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--clr-primary);
}

.trust-badge-icon {
    font-size: 1.5rem;
}

/* Contact Page Mobile Responsive */
@media (max-width: 768px) {
    .contact-hero-title {
        font-size: 2rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
    }

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

@media (min-width: 769px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .form-submit {
        width: auto;
        justify-self: end;
    }
}

@media (max-width: 480px) {
    .areas-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }

    .contact-hero {
        padding: 2rem 0 1.5rem;
    }

    .contact-hero-title {
        font-size: 1.75rem;
    }
}

/* ===== Header logo =====================================================
   The brand lockup ships in two crops, swapped by the <picture> element in
   the header:
     logo-full.webp  10.8:1  bolt + wordmark + tagline   (768px and up)
     logo-mark.webp   5.2:1  bolt + PPM monogram         (767px and down)
   The full lockup needs roughly 280px to stay legible, which collides with
   the Free Quote button on a phone. The compact mark fits in 165px.

   These are wide lockups, so WIDTH is the binding dimension, not height.
   The logo is also allowed to shrink (flex 0 1 auto + min-width 0) so that
   when the viewport tightens it yields space rather than crowding the nav
   or the call-to-action. A gap on .nav guarantees separation at every
   width, which a max-width alone does not: at 900px and 1024px a fixed
   280px logo sat flush against the nav with zero gap. */

.nav {
    gap: 1.5rem;
}

.nav-logo {
    flex: 0 1 auto;
    min-width: 0;
}

.nav-logo picture {
    display: flex;
    align-items: center;
    min-width: 0;
}

.logo-image {
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .logo-image { max-width: 230px; }
}

@media (max-width: 900px) {
    .logo-image { max-width: 200px; }
}

@media (max-width: 767px) {
    /* compact mark from here down */
    .logo-image { max-width: 165px; }
    .nav { gap: 0.75rem; }
}

@media (max-width: 400px) {
    .logo-image { max-width: 120px; }
    .nav { gap: 0.5rem; }
}

/* The call-to-action is the point of the header, so it is the wrong element
   to compress. Pin it: never shrink, never wrap its label. The logo above is
   shrinkable, so when space runs out the logo gives way and the button keeps
   its shape. Without this, widening the logo pushed "Get a Free Quote" into
   three wrapped lines at 900px. */

.nav-cta,
.mobile-quote-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ===== Nav collapses at 1024px, not 768px ==============================
   Between 769px and 1024px the header tried to fit the logo, a six-item
   nav and the Get a Free Quote button on one row, and it never had the
   space: measured on the pre-existing site at 830px the nav sat 8px from
   a 70px logo. That 8px is why the old header only worked with a logo too
   small to read. Widening the logo to a legible size turned those 8px
   into a 122px overlap.

   Rather than shrink the brand back to illegible, the hamburger now takes
   over up to 1024px. Tablets get the same header phones get: logo, Free
   Quote, menu button. The business name is the one header element that
   has to survive, so the nav is what gives way.

   These selectors carry an extra class for specificity because main.css
   loads before home.css, contact.css and services.css, whose desktop nav
   rules would otherwise win. */

@media (min-width: 768px) and (max-width: 1024px) {

    .nav .nav-toggle { display: block; }

    .nav .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--clr-text-light);
        flex-direction: column;
        padding: 2rem 1.5rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 12px 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav .nav-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .nav .nav-list li {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

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

    .nav .nav-link {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    /* Same dropdown treatment as the phone block below: no slide-in
       underline on full-width links, navy text on hover. */
    .nav .nav-link::after {
        display: none;
    }

    .nav .nav-link:hover {
        color: var(--clr-primary);
        background: rgba(255, 214, 10, 0.12);
        padding-left: 0.5rem;
    }

    .nav .nav-cta {
        margin: 1.5rem 0 0 0;
        width: 100%;
        text-align: center;
    }

    .header .mobile-quote-btn { display: flex; }

    .header .mobile-right-group {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    /* room for the full lockup now that the nav is out of the row */
    .logo-image { max-width: 260px; }
}

/* ===== 404 page ========================================================
   Lives at /404.html. Cloudflare Pages serves it automatically, with a
   real 404 status, for any path that does not resolve. Before it existed
   a missing URL returned the full homepage with HTTP 200, which is a soft
   404: it invites Google to index unlimited junk URLs as real pages. */

.error-page {
    background: var(--clr-light);
    padding: 4rem 0;
}

.error-page-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    flex-wrap: wrap;
}

.error-mascot img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.error-copy {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 480px;
}

.error-code {
    font-size: clamp(3.5rem, 10vw, 5rem);
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: var(--clr-accent);
    -webkit-text-stroke: 2px var(--clr-primary);
}

.error-title {
    color: var(--clr-primary);
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0.5rem 0 0.75rem;
}

.error-text {
    color: #444;
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.error-help {
    font-size: 0.95rem;
    color: #555;
}

.error-help a {
    color: var(--clr-primary);
    font-weight: 600;
}

.error-links {
    padding: 3rem 0;
    /* .section carries a dark background in home.css, which rendered the
       navy section title invisible against it. Pin both explicitly. */
    background: var(--clr-text-light);
}

.error-links .section-title {
    color: var(--clr-primary);
}

.error-links .area-link {
    color: var(--clr-primary);
}

@media (max-width: 767px) {
    .error-page { padding: 2.5rem 0; }
    .error-page-inner { gap: 1.5rem; }
    .error-mascot img { max-width: 190px; }
    .error-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ===== Mascot (Herb) ===================================================
   Herb is decorative in every placement, so each <img> carries an empty
   alt and screen readers skip him. */

/* --- Homepage call-to-action strip ---
   The strip background is --clr-accent and Herb is the same yellow, so he
   blends into it. A navy drop shadow separates him without adding a shape
   that would fight the flat design. */

.quote-cta-strip--mascot .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.quote-cta-strip--mascot .cta-strip-copy {
    flex: 0 1 auto;
    min-width: 0;
}

.cta-mascot {
    flex: 0 0 auto;
    width: 100%;
    max-width: 190px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(11, 29, 57, 0.35));
}

/* --- Contact page, beside the quote form --- */

.contact-form-section--mascot .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.contact-mascot {
    flex: 0 0 auto;
    text-align: center;
    max-width: 260px;
}

.contact-mascot-img {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.contact-mascot-caption {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--clr-primary);
    font-size: 1rem;
}

/* --- Footer, small ---
   The footer is navy, so Herb needs no separation treatment here. */

.footer-mascot {
    display: block;
    width: 72px;
    height: auto;
    margin: 0 auto 1rem;
}

@media (max-width: 767px) {
    .quote-cta-strip--mascot .container { gap: 1.25rem; }
    .cta-mascot { max-width: 130px; }
    .contact-form-section--mascot .container { gap: 1.5rem; }
    .contact-mascot-img { max-width: 150px; }
    .footer-mascot { width: 56px; }

    /* Herb sits before the form in the DOM (left of it on desktop), so
       when the flex row wraps on phones he stacked ABOVE the form. The
       form is what the visitor came for; Herb moves below it. */
    .contact-form-section--mascot .contact-mascot { order: 2; }
}

/* The iframe and its reassurance line are one column, not two flex items.
   Without this wrapper the "We'll respond within 24 hours" line became a
   third column and floated off to the right of the form. */

.contact-form-wrap {
    flex: 0 1 560px;
    min-width: 0;
}

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

/* --- Horizontal overflow fixes (SITE_AUDIT item 11) ---
   Three scoped rules, one shared root cause. The .btn base rule says
   white-space: nowrap, which is right for the header CTA ("Get a Free
   Quote" must never wrap) but wrong inside service cards, where city
   pages have labels like "Gutter Cleaning in El Dorado Hills". A grid
   item's automatic minimum size is its min-content width, so those
   unwrappable buttons forced 1fr columns wider than the container and
   the row overflowed the viewport (up to 1514px wide at 1280 on El
   Dorado Hills, and 325px at 320). min-width: 0 lets the cards shrink
   to their track, and letting their buttons wrap gives the text
   somewhere to go. The footer rule breaks the long email address,
   which was pushing every page 8px wide at viewports around 600px.
   These selectors out-specify the page-stylesheet rules they override,
   which matters because main.css loads first. */

.services-grid > .service-card {
    min-width: 0;
}

.service-card .btn {
    white-space: normal;
}

a.footer-link {
    overflow-wrap: anywhere;
}


/* ==================================================================
   Consolidated shared rules (SITE_AUDIT item 9), moved 2026-08-07
   ==================================================================
   These blocks were duplicated in home.css, contact.css and
   services.css. One canonical copy now lives here; every page loads
   main.css, so every page gets them. Where a page stylesheet keeps a
   same-selector block (contact.css's restyled cards and links,
   services.css's .logo-image), that block is a deliberate page
   override and wins because page stylesheets load after main.css.
   body is intentionally NOT consolidated: each page family sets its
   own background. */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

.section {
    padding: 4rem 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--clr-primary);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.skip-link {
    position: absolute;
    top: auto;
    left: -999px;
    background: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
    left: 6px;
}

.header {
    background: var(--clr-text-light) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    width: 100%;
    height: auto;
    display: block;
    transform: translateZ(0);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: auto;
    width: auto;
    object-fit: contain;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.nav-toggle:hover {
    background: rgba(10, 35, 66, 0.1);
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--clr-primary);
    position: relative;
    transition: all 0.3s ease;
}

.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--clr-primary);
    transition: all 0.3s ease;
    left: 0;
}

.hamburger::before {
    top: -7px;
}

.hamburger::after {
    bottom: -7px;
}

.nav-toggle[aria-expanded="true"] .hamburger {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger::after {
    transform: rotate(-45deg);
    bottom: 0;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1001;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

/* Desktop nav links: navy text with a yellow underline that slides in.
   The old hover turned the text itself yellow, which is illegible on
   the white header; yellow is the indicator here, not the text color. */
.nav-link {
    color: var(--clr-text-dark);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 1px;
    background: var(--clr-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-link:hover, .nav-link:focus {
    color: var(--clr-primary);
    text-decoration: none;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform: scaleX(1);
}

/* Current page: underline stays on, set by main.js */
.nav-link[aria-current="page"] {
    color: var(--clr-primary);
    font-weight: 600;
}

.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-cta {
    margin-left: 1rem;
}

/* ==================================================================
   Button system (redesign phase 1, 2026-08-07)
   ==================================================================
   Three variants, one source of truth. The page stylesheets define NO
   button rules anymore; the legacy class names in the HTML are aliased
   here rather than renamed across 18 pages:
     primary   (yellow):  .btn-accent, .btn-service
     secondary (navy):    .btn-dark, .hero .btn-outline
     ghost     (outline): .btn-outline, .btn-outline-dark
   Ghost is navy-on-light by default and switches to white on navy
   sections (.bg-section). .btn-outline-dark lives on the yellow CTA
   strip, where a yellow hover would vanish, so it deepens with a navy
   tint instead. The old .btn-dark hover (navy to #0d2a4a) was an
   invisible state change; secondary now lightens, lifts and sweeps
   its border toward yellow. The header CTA (.nav-cta) and
   .mobile-quote-btn keep their pinned flex and nowrap rules defined
   with the header styles above; nothing here may let them wrap. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    min-height: 44px;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

/* The global a:hover rule underlines links; buttons are not prose links */
.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
    transition-duration: 0.05s;
}

.btn:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

.btn-lg {
    padding: 0.9rem 2rem;
    font-size: 1.0625rem;
}

/* --- Primary: yellow --- */

.btn-accent,
.btn-service {
    background: var(--clr-accent);
    color: var(--clr-text-dark);
}

.btn-accent:hover,
.btn-service:hover {
    background: var(--clr-accent-hover);
    color: var(--clr-text-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 214, 10, 0.35);
}

/* Compact primary used on service cards */
.btn-service {
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(255, 214, 10, 0.25);
}

/* --- Secondary: navy --- */

.btn-dark,
.hero .btn-outline {
    background: var(--clr-primary);
    color: var(--clr-text-light);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Over the hero photo the secondary goes glassy for contrast */
.hero .btn-outline {
    background: rgba(10, 35, 66, 0.88);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-dark:hover,
.hero .btn-outline:hover {
    background: #16305A;
    color: var(--clr-text-light);
    border-color: rgba(255, 214, 10, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 29, 57, 0.35);
}

/* --- Ghost: outline, context-aware ---
   Most transparent sections sit over the navy body gradient, so ghost
   defaults to white. .bg-section is NOT a dark marker (the light
   reviews section carries it too); light contexts are keyed on the
   sections that declare light backgrounds. */

.btn-outline {
    background: transparent;
    color: var(--clr-text-light);
    border-color: rgba(255, 255, 255, 0.45);
}

.btn-outline:hover {
    color: var(--clr-text-light);
    border-color: var(--clr-accent);
    background: rgba(255, 214, 10, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Ghost on light sections */
.reviews .btn-outline,
.section--light .btn-outline,
.contact-form-section .btn-outline {
    color: var(--clr-primary);
    border-color: rgba(11, 29, 57, 0.45);
}

.reviews .btn-outline:hover,
.section--light .btn-outline:hover,
.contact-form-section .btn-outline:hover {
    color: var(--clr-primary);
    border-color: var(--clr-accent-hover);
    background: rgba(255, 214, 10, 0.15);
    box-shadow: 0 6px 18px rgba(11, 29, 57, 0.12);
}

/* Ghost on the yellow CTA strip */
.btn-outline-dark {
    background: transparent;
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.btn-outline-dark:hover {
    background: rgba(11, 29, 57, 0.08);
    color: var(--clr-primary);
    border-color: var(--clr-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 29, 57, 0.15);
}

/* Layout helpers formerly duplicated in home.css and services.css */

.card--glass .btn-service {
    margin-top: 1.5rem;
    min-height: 44px;
    align-self: stretch;
}

@media (max-width: 768px) {
    .btn-service {
        font-size: 0.9rem;
        letter-spacing: 0.1px;
    }

    .hero-cta .btn {
        min-width: 200px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active {
        transform: none;
        transition: none;
    }
}

/* ==================================================================
   Icon system (redesign phase 2, 2026-08-07)
   ==================================================================
   Every UI emoji was replaced with an inline SVG on the 24px grid,
   2px stroke, currentColor, sized 1em so each icon inherits its
   wrapper's font-size exactly as the emoji glyph did. The rating star
   is the one filled icon. Wrapper classes are unchanged; these rules
   only align the SVGs and give the wrappers brand color, which emoji
   could never take. */

.icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* Gold rating stars, spaced like the emoji row they replaced */
.review-stars,
.stars {
    color: var(--clr-accent);
}

.review-stars .icon + .icon,
.stars .icon + .icon {
    margin-left: 0.15em;
}

/* Accent-colored icons beside neutral text */
.area-icon,
.trust-icon,
.trust-badge-icon,
.why-icon,
.feature-icon,
.contact-icon,
.service-icon-inline {
    color: var(--clr-accent);
}

/* Inline list icons breathe away from their text */
.service-icon-inline .icon {
    margin-right: 0.45em;
}

/* ==================================================================
   Hero and section depth (redesign phase 4, 2026-08-07)
   ==================================================================
   Selectors here deliberately out-specify the hero rules still living
   in home.css and services.css (.hero .hero-title beats .hero-title
   regardless of load order), so this layer wins without touching the
   duplicated legacy blocks. */

/* Directional scrim: strong navy on the left where the text sits,
   falling away over the photo, with a faint warm glow top-right.
   Replaces a flat 30-40% wash that left headline contrast to luck. */
.hero .hero-overlay {
    background:
        radial-gradient(90rem 40rem at 110% -20%, rgba(255, 214, 10, 0.10), transparent 60%),
        linear-gradient(100deg,
            rgba(11, 29, 57, 0.92) 0%,
            rgba(11, 29, 57, 0.62) 48%,
            rgba(16, 42, 67, 0.30) 100%);
}

.hero .hero-title {
    font-size: clamp(1.75rem, 4.5vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* The service phrase of every H1 ("Roof Cleaning Services" in
   "Roof Cleaning Services in Lincoln...") carries the accent */
.hero .hero-accent {
    color: var(--clr-accent);
}

.hero .hero-subtitle {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop: the hero reads as an editorial block, left-aligned against
   the scrim. Mobile keeps the centered stack. */
@media (min-width: 900px) {
    section.hero {
        text-align: left;
    }

    .hero .hero-title {
        max-width: 17ch;
    }

    .hero .hero-subtitle {
        margin-left: 0;
    }

    .hero .hero-cta {
        justify-content: flex-start;
    }

    .hero .hero-reassurance {
        text-align: left;
    }
}

/* Eyebrow labels above section titles. The thin yellow bar the titles
   used to hang below is retired everywhere at once. */
.section-title::after {
    display: none !important;
}

/* section-qualified so the eyebrow beats element-level rules like
   .glass-panel p, which was painting SERVICE AREAS near-black on the
   navy panel (Mike caught it on the homepage) */
section .section-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-accent);
    text-align: center;
    margin-bottom: 0.6rem;
}

/* Yellow eyebrows vanish on light sections; navy there instead */
.section--light .section-eyebrow,
.reviews .section-eyebrow,
.service-area-map .section-eyebrow,
.contact-form-section .section-eyebrow {
    color: rgba(11, 29, 57, 0.65);
}

/* Soft radial glows lift the flat transparent sections that sit over
   the body gradient. background-image only, so sections that declare
   their own background shorthand in a page stylesheet keep it. */
.gallery.bg-section,
.service-areas.bg-section {
    background-image:
        radial-gradient(50rem 30rem at 15% 10%, rgba(255, 214, 10, 0.05), transparent 65%),
        radial-gradient(60rem 34rem at 90% 90%, rgba(255, 255, 255, 0.04), transparent 60%);
}

/* The yellow CTA strip gets a diagonal top edge; the section above
   shows through the notch. Padding compensates for the clipped rise. */
section.quote-cta-strip {
    clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
    padding-top: 5rem;
}

/* --- Contrast corrections (Mike's review of phase 2) ---
   Yellow stroke icons vanish on light backgrounds. On the light
   location chips the pin goes navy to match its label; star rows
   sitting on light cards get a faint navy outline so the gold reads
   as gold instead of pale. CSS stroke wins over the SVG's stroke
   attribute, which is what makes the outline possible. */

/* Phase 5 turned the location chips navy glass, so the pins went back
   to brand yellow, which is legible again on the dark chip. */
.area-link .area-icon {
    color: var(--clr-accent);
}

.review-card .review-stars .icon,
.trust-rating .stars .icon,
.section--light .stars .icon {
    stroke: rgba(11, 29, 57, 0.4);
    stroke-width: 1;
}

/* ==================================================================
   One card language (redesign phase 5, 2026-08-07)
   ==================================================================
   Derived from the glass service cards. Selectors ride their
   containers (.areas-grid, .reviews-grid, .why-choose-features,
   .contact-methods-grid) to out-specify the legacy card rules in the
   page stylesheets. */

/* --- Location chips: navy glass, yellow pin, white city name.
   Replaces the flat light-gray pills, including contact.css's white
   variant; every areas section sits on navy, so one dark chip works
   everywhere. --- */
.areas-grid .area-link {
    background: rgba(11, 29, 57, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--clr-text-light);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.areas-grid .area-link:hover,
.areas-grid .area-link:focus {
    background: rgba(16, 42, 67, 0.75);
    color: var(--clr-text-light);
    border-color: rgba(255, 214, 10, 0.65);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

/* --- Why-choose feature cards: compact, icon left, text left.
   The .why-choose-features grid rule always existed in the page
   stylesheets; no page used the wrapper until now, which is why the
   cards rendered as full-width slabs. --- */
/* The page-file grid caps at 800px, which cramps three columns;
   let the cards breathe inside the panel */
.why-choose-features {
    max-width: 1040px !important;
    margin-left: auto;
    margin-right: auto;
}

.why-choose-features .feature-card {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 1rem !important;
    padding: 20px !important;
}

.why-choose-features .feature-card .feature-icon {
    margin: 0 !important;
    flex-shrink: 0;
}

/* home.css centers .feature-content; these cards read left */
.why-choose-features .feature-content {
    text-align: left;
}

.why-choose-features .feature-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
}

.why-choose-features .feature-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- Review cards: quote mark, left-aligned, initials byline.
   The three real reviews only; nothing here touches their text. --- */
.reviews-grid .review-card {
    position: relative;
    text-align: left;
    padding: 2.25rem 1.75rem 1.75rem;
}

.reviews-grid .review-card::before {
    content: '\201C';
    position: absolute;
    top: 0.25rem;
    right: 1.25rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(11, 29, 57, 0.12);
    pointer-events: none;
}

.reviews-grid .review-stars {
    margin-bottom: 0.75rem;
}

.reviews-grid .review-text {
    font-style: normal;
    margin-bottom: 1.25rem;
}

.review-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-primary);
    color: var(--clr-accent);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-byline .review-author {
    font-weight: 600;
    color: var(--clr-primary);
    font-style: normal;
    margin: 0;
}

/* ==================================================================
   Design-quality pass (phase 5.5, Mike's review of the panels)
   ================================================================== */

/* --- Service cards: editorial, not monolithic. Left-aligned content,
   icon in a tinted chip, and a quiet arrow link instead of eight
   identical yellow buttons shouting at once. --- */
.services-grid .service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem;
}

.services-grid .service-card .service-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 214, 10, 0.12);
    border: 1px solid rgba(255, 214, 10, 0.25);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.services-grid .service-card .service-icon svg {
    width: 26px;
    height: 26px;
}

.services-grid .service-title {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.services-grid .service-description {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

/* The card CTA becomes a text link with a nudging arrow */
.services-grid .btn-service {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0.4rem 0;
    min-height: 0;
    border-radius: 0;
    color: var(--clr-accent);
    font-weight: 600;
    gap: 0.35rem;
    margin-top: auto !important;
    align-self: flex-start !important;
}

.services-grid .btn-service::after {
    content: '\2192';
    transition: transform 0.2s ease;
}

.services-grid .btn-service:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
    color: var(--clr-accent-hover);
}

.services-grid .btn-service:hover::after {
    transform: translateX(4px);
}

/* Popular badge: outline whisper, not a second button */
.services-grid .popular-badge {
    background: rgba(255, 214, 10, 0.12);
    color: var(--clr-accent);
    border: 1px solid rgba(255, 214, 10, 0.45);
    letter-spacing: 0.06em;
}

/* --- Trust strip: one calm row of badges, not boxes inside a box --- */
.trust-badges-grid {
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0.5rem 0;
}

.trust-badges-section .trust-item {
    background: transparent;
    flex-direction: row;
    gap: 0.6rem;
    min-height: 0;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
}

.trust-badges-section .trust-item:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

@media (min-width: 769px) {
    .trust-badges-section .trust-item + .trust-item {
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0;
    }
}

/* --- Service-page split panel: designed lists and labels --- */
.problem-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.problem-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.55rem;
}

.problem-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--clr-accent-hover);
}

.feature-list-light-icons li {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.6rem;
}

.feature-list-light-icons .service-icon-inline {
    flex-shrink: 0;
    margin-top: 0.15em;
}

/* The little H3s become quiet labels so the hierarchy reads at a
   glance: label, then content */
.content-text-column .dark-subtitle-small {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(11, 29, 57, 0.6);
    margin-bottom: 0.75rem;
}

.content-feature-image {
    border-radius: 0;
}

/* --- How-it-works: a connected process line, left-aligned steps --- */
.step-grid .step-card {
    text-align: left;
    position: relative;
}

.step-grid .step-number {
    margin-bottom: 1rem;
    box-shadow: 0 0 0 6px rgba(255, 214, 10, 0.12);
    position: relative;
    z-index: 1;
}

@media (min-width: 900px) {
    /* line from each number to its card edge; kept inside the card
       because a segment crossing the grid gap overflows the container
       whenever auto-fit wraps to fewer columns (caught by the harness
       at 1024 and 1100 on the services hub) */
    .step-grid .step-card:not(:last-child)::before {
        content: '';
        position: absolute;
        top: calc(1.5rem + 23px);
        left: calc(1.5rem + 60px);
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
    }
}

.step-grid .step-title {
    font-size: 1.1rem;
}

.step-grid .step-description {
    font-size: 0.95rem;
    line-height: 1.55;
}

/* --- Contact method cards join the glass language --- */
.contact-methods-grid .contact-method-card {
    background: rgba(11, 29, 57, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.contact-methods-grid .contact-method-card:hover {
    border-color: rgba(255, 214, 10, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.contact-methods-grid .contact-method-title {
    color: var(--clr-text-light);
}

.contact-methods-grid .contact-link {
    color: rgba(255, 255, 255, 0.9);
}

.contact-methods-grid .contact-link:hover {
    color: var(--clr-accent);
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    text-align: center;
}

.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
}

.service-areas {
    text-align: center;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 2rem auto 0;
}

.area-link {
    display: block;
    padding: 1rem;
    background: var(--clr-light);
    color: var(--clr-primary);
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.area-link:hover {
    background: var(--clr-accent);
    transform: translateY(-2px);
}

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

.review-card {
    background: var(--clr-text-light);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.review-stars {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.review-text {
    font-style: italic;
    margin-bottom: 1rem;
}

.review-author {
    font-weight: 500;
    color: var(--clr-primary);
}

.contact-link {
    color: var(--clr-accent);
    text-decoration: none;
    font-weight: 500;
}

.contact-link:hover {
    text-decoration: underline;
}

.footer {
    background: var(--clr-primary);
    color: var(--clr-text-light);
    padding: 3rem 0 1rem;
    position: relative;
}

/* Yellow hairline fading out toward the edges, the footer's one accent */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 214, 10, 0.7) 30%,
        var(--clr-accent) 50%,
        rgba(255, 214, 10, 0.7) 70%,
        transparent 100%);
}

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

/* Column labels recede; the links are the content */
.footer-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

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

.footer-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Color shift only; the old underline made rows jump on hover */
.footer-link:hover {
    color: var(--clr-accent);
    text-decoration: none;
}

.footer-link .icon {
    margin-right: 0.45em;
    color: rgba(255, 214, 10, 0.8);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 2rem;
    text-align: center;
    opacity: 0.7;
}

.area-icon {
    font-size: 1rem;
    opacity: 0.8;
}

@media (max-width: 768px) {

    .nav-toggle {
        display: block;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--clr-text-light);
        flex-direction: column;
        padding: 2rem 1.5rem;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        border-radius: 0 0 12px 12px;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .nav-list li {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

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

    .nav-link {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
        font-weight: 500;
        transition: all 0.3s ease;
        border-radius: 6px;
    }

    /* In the dropdown the slide-in underline makes no sense on
       full-width block links; the tint plus indent is the feedback.
       Navy text, not yellow: yellow on the white menu is illegible. */
    .nav-link::after {
        display: none;
    }

    .nav-link:hover {
        color: var(--clr-primary);
        background: rgba(255, 214, 10, 0.12);
        padding-left: 0.5rem;
    }

    .nav-cta {
        margin: 1.5rem 0 0 0;
        width: 100%;
        text-align: center;
        box-shadow: 0 4px 12px rgba(255, 214, 10, 0.3);
    }

}

/* ==========================================================================
   Location map
   ==========================================================================
   These rules used to live in services.css, which only the city pages and
   the service pages load. The Google Business Profile map now appears on
   the homepage and the contact page as well, and those load main.css plus
   home.css / contact.css only, so the rules have to be here or the map
   renders unstyled. Nothing in home.css or contact.css declares these
   selectors, so there is no cascade tie to lose by moving them. */

.service-area-map {
    background: var(--clr-light);
    padding: 3rem 0;
}

.service-area-map .section-title {
    text-align: center;
    margin-bottom: 1rem;
}

.service-area-map .section-intro {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--clr-text);
}

.map-container {
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.map-container iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

/* --- Click to load facade ---------------------------------------------
   A Google Maps embed drags in roughly a megabyte of third-party
   JavaScript. With a map on fourteen pages that would be far and away
   the heaviest thing on this site, and most visitors never scroll to it.
   So the facade is what ships: real markup, real address, no iframe.
   main.js swaps in the embed on click. If JavaScript is off the visitor
   still gets the address and the two Google Maps links below it. */

.map-facade {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    padding: 2rem;
    text-align: center;
    background:
        radial-gradient(40rem 24rem at 50% 0%, rgba(255, 214, 10, 0.10), transparent 70%),
        linear-gradient(160deg, var(--clr-primary), var(--clr-secondary));
    color: var(--clr-text-light);
}

.map-facade-inner {
    max-width: 32rem;
}

.map-facade-icon {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--clr-accent);
    margin-bottom: 1rem;
}

.map-facade-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--clr-text-light);
}

.map-facade-address {
    font-size: 1.0625rem;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.map-facade-note {
    font-size: 0.8125rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.6);
}

.map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.75rem;
}

@media (max-width: 768px) {
    .service-area-map {
        padding: 2rem 0;
    }

    .map-container iframe {
        height: 350px;
    }

    .map-facade {
        min-height: 350px;
        padding: 1.5rem;
    }

    /* Same reason .btn wraps inside service cards: nowrap buttons inflate
       min-content width and push the page into horizontal overflow. */
    .map-actions .btn {
        white-space: normal;
    }
}