/* ===================================
   PATROL LANDING PAGE STYLES
   LNN Protection Services
   Scoped under .patrol-landing namespace
   =================================== */

/* LNN Brand Color Variables - V0 Layout with LNN Colors */
:root {
    --lnn-primary: #fab700;    /* LNN Yellow - Primary Brand */
    --lnn-dark: #333333;       /* Dark text and backgrounds */
    --lnn-light: #f8f9fa;      /* Light backgrounds */
    --lnn-white: #ffffff;      /* White */
    --lnn-success: #28a745;    /* Form validation success */
    --lnn-error: #dc3545;      /* Error states */
    --lnn-secondary: #6c757d;  /* Secondary text and muted text */
    --lnn-primary-hover: #e6a600; /* Primary color on hover */
    --lnn-border: #e5e7eb;     /* Light borders */
    --lnn-radius: 0.5rem;      /* 8px corner radius */
}

/* Consolidated CTA Button Styles - Used across Hero, Problem, and Solution sections */
.patrol-landing .hero-cta-button {
    background-color: var(--lnn-primary);
    color: var(--lnn-dark);
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    display: inline-block;
    border: none;
    font-size: 1.125rem;
    margin: 2rem 0;
    transition: all 0.2s ease;
    transform: translateY(0);
}

.patrol-landing .hero-cta-button:hover {
    background-color: var(--lnn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: var(--lnn-dark);
}

.patrol-landing .hero-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.patrol-landing .hero-cta-button:focus {
    outline: none;
}

/* Consolidated Image Container Styles - Used across sections */
.patrol-landing .hero-image-container,
.patrol-landing .problem-image-container,
.patrol-landing .solution-image-container {
    position: relative;
    transform: scale(1.1);
}

.patrol-landing .hero-image-main,
.patrol-landing .problem-image-main,
.patrol-landing .solution-image-main {
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.patrol-landing .hero-image-overlay,
.patrol-landing .problem-image-overlay,
.patrol-landing .solution-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(55, 65, 81, 0.2) 0%, transparent 100%);
    border-radius: 0.75rem;
}

/* Base Landing Page Styles */
.patrol-landing {
    font-family: 'Poppins', 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--lnn-dark);
}

/* Custom Header Styling - Match existing header.js styles */
.patrol-landing .navbar {
    font-family: 'Poppins', sans-serif;
}

.patrol-landing .navbar-brand {
    font-weight: 600;
    color: var(--lnn-dark) !important;
}

.patrol-landing .nav-link {
    color: var(--lnn-secondary) !important; /* Grey by default */
    font-weight: 600 !important;
    font-size: 1rem !important; /* Bootstrap default navbar font-size */
    transition: color 0.3s ease;
    text-decoration: none !important;
    letter-spacing: normal;
    line-height: 1.5;
}

.patrol-landing .nav-link:hover,
.patrol-landing .nav-link:focus {
    color: var(--lnn-dark) !important; /* Dark on hover */
    font-weight: 600 !important; /* Keep same font-weight to prevent flicker */
    text-decoration: none !important;
}


.patrol-landing .navbar-text a,
.patrol-landing .phone-link {
    color: var(--lnn-secondary) !important; /* Grey like other nav links */
    text-decoration: none !important;
    font-weight: 600;
    display: inline-flex;
    align-items: baseline;
    transition: color 0.3s ease;
}

.patrol-landing .navbar-text a:hover,
.patrol-landing .phone-link:hover {
    color: var(--lnn-dark) !important; /* Dark on hover like other nav links */
    font-weight: 600; /* Keep same font-weight to prevent flicker */
    text-decoration: none !important;
}

.patrol-landing .phone-link .fa {
    margin-right: 0.25rem !important;
    font-size: 1rem;
    color: inherit !important; /* Use same color as text and change together */
    position: relative;
    top: -1px; /* Fine-tune vertical position */
    pointer-events: none; /* Prevent separate hover on icon */
}

/* Ensure icon color changes with parent link */
.patrol-landing .phone-link:hover .fa {
    color: inherit !important;
}

/* Social media icons styling (exclude phone icon) */
.patrol-landing .fa:not(.phone-link .fa) {
    color: var(--lnn-dark) !important;
    margin-left: 8px;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.patrol-landing .fa:hover {
    color: var(--lnn-primary) !important;
}

/* Simple CSS-only dropdown that always works */
.patrol-landing .dropdown {
    position: relative;
}

.patrol-landing .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 280px;
    padding: 0.5rem 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
}

/* Show dropdown on hover */
.patrol-landing .dropdown:hover .dropdown-menu {
    display: block !important;
}

.patrol-landing .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: var(--lnn-dark);
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: all 0.2s ease;
}

.patrol-landing .dropdown-item:hover {
    background-color: var(--lnn-light);
    color: var(--lnn-primary) !important;
    text-decoration: none;
}

.patrol-landing .dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,.15);
}

/* Dropdown arrow styling */
.patrol-landing .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Main Content Container - Remove gap */
.patrol-landing-content {
    margin-top: 0; /* Remove gap between header and hero */
}

/* Hero Frame Styles - Advanced Responsive Implementation */
.patrol-landing-hero {
    position: relative;
    min-height: calc(100vh - 70px); /* Account for navbar height */
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    padding-left: 5%; 
    padding-right: 5%;
}

/* Desktop Hero Layout */
.patrol-landing-hero .hero-content {
    max-width: 70%; /* Increased width for better content area */
    text-align: left;
    color: white;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Perfect vertical centering */
}

.patrol-landing-headline {
    font-size: 2.8rem; 
    color: var(--lnn-dark);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    margin-bottom: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
}

.patrol-landing-subtext {
    font-size: 1.25rem;
    color: var(--lnn-secondary);
    margin-bottom: 4rem;
    line-height: 1.7;
}


.patrol-landing-hero .trust-badges {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
    list-style: none;
    margin-top: 1rem;
    padding: 0;
}

.patrol-landing-hero .trust-badge {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.patrol-landing-hero .badge-icon {
    width: 2.2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patrol-landing-hero .badge-icon i {
    color: var(--lnn-dark);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    font-size: 0.75rem;
}

.patrol-landing-hero .badge-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lnn-dark);
    white-space: nowrap;
}


/* Mobile Hero Layout */
@media (max-width: 991px) {
    .patrol-landing-hero {
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: center;
    }

    /* Hide the hero image completely on mobile */
    .patrol-landing-hero .col-lg-5 {
        display: none;
    }

    .patrol-landing-hero .col-lg-7 {
        width: 100%;
        text-align: center;
    }

    .patrol-landing-hero .hero-content {
        position: relative;
        transform: none;
        max-width: 100%;
        text-align: center;
        top: auto;
        left: auto;
    }
    
    .patrol-landing-headline {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        line-height: 1.2;
    }
    
    .patrol-landing-subtext {
        font-size: 1.1rem;
        margin-bottom: 3rem;
        line-height: 1.6;
    }

    .patrol-landing-hero .trust-badges {
        gap: 0.8rem;
        justify-content: center;
    }

    .patrol-landing-hero .trust-badge {
        gap: 0.5rem;
    }

    .patrol-landing-hero .badge-icon {
        width: 1rem;
        height: 1rem;
    }

    .patrol-landing-hero .badge-text {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--lnn-dark);
    }

    .patrol-landing-hero .badge-icon i {
        font-size: 0.75rem;
    }
}

/* Problem Frame Styles - Full Height Impact Layout */
.patrol-landing-problem {
    min-height: calc(100vh - 70px); /* Account for navbar height */
    overflow: hidden;
    margin-top: 10%;
    padding-top: 0;
    padding-left: 5%; 
    padding-right: 5%;
}

.image-on-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.image-on-left .col-lg-5 {
    flex: 0 0 auto; 
    margin-right: 4rem;
}

.image-on-left .col-lg-7 {
    flex: 1; 
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding-right: 2rem;
}


.patrol-landing-problem .problem-content {
    width: 80%;
    color: white;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    
}

.patrol-landing-problem .problem-headline {
    font-size: 2.8rem; 
    color: var(--lnn-dark);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    margin-bottom: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
}

.patrol-landing-problem .problem-description {
    font-size: 1.125rem;
    color: var(--lnn-secondary);
    margin-bottom: 3rem;
    line-height: 1.7;
}

.patrol-landing-problem .problem-closing {
    font-size: 1.125rem;
    color: #333;
    margin-bottom: 3rem;
    line-height: 1.5;
    font-weight: 600;
}

/* Property Risk Indicators - Parent container */
.patrol-landing-problem .property-risk {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: nowrap;
}

/* Individual risk item */
.patrol-landing-problem .property-risk .risk-item {
    text-align: center;
    flex: 1;
}

/* Icon styling - no background circles, larger icons */
.patrol-landing-problem .property-risk .risk-icon.fa {
    font-size: 2rem; 
    color: var(--lnn-dark);
    margin: 0;
    padding: 0;
    display: block;
    margin-bottom: 0.75rem;
}

/* Bold text - slightly bigger */
.patrol-landing-problem .property-risk .risk-title {
    font-size: 16px; /* up from 14px */
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--lnn-dark);
}

/* Small text - slightly bigger */
.patrol-landing-problem .property-risk .risk-description {
    font-size: 14px; /* up from 12px */
    color: #666;
    line-height: 1.3;
}


/* Problem Section Mobile Styles */
@media (max-width: 991px) {
    .patrol-landing-problem {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        margin-top: 5%;
    }

    /* Hide the problem image completely on mobile */
    .patrol-landing-problem .col-lg-5 {
        display: none;
    }

    .patrol-landing-problem .col-lg-7 {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding-right: 0;
    }

    .image-on-left {
        flex-direction: column;
        justify-content: center;
    }

    .patrol-landing-problem .problem-content {
        text-align: center;
        width: 100%;
    }

    .patrol-landing-problem .problem-headline {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .patrol-landing-problem .problem-description {
        font-size: 1.1rem;
        color: var(--lnn-secondary);
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    .patrol-landing-problem .problem-closing {
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 2rem;
        line-height: 1.5;
        font-weight: 600;
    }

    /* Property Risk Icons Mobile Optimization */
    .patrol-landing-problem .property-risk {
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .patrol-landing-problem .property-risk .risk-icon.fa {
        font-size: 1.5rem;
    }

    .patrol-landing-problem .property-risk .risk-title {
        font-size: 14px;
    }

    .patrol-landing-problem .property-risk .risk-description {
        font-size: 12px;
    }
}

/* Solution Frame Styles - Full Height Impact Layout */
.patrol-landing .patrol-landing-solution {
    min-height: calc(100vh - 70px); /* Account for navbar height */
    overflow: hidden;
    padding-top: 0;
    padding-left: 5% !important; 
    padding-right: 5% !important;
    background: var(--lnn-white) !important;
}

.patrol-landing-solution .image-on-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.patrol-landing-solution .image-on-right .col-lg-7 {
    flex: 1; 
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding-right: 2rem;
}

.patrol-landing-solution .image-on-right .col-lg-5 {
    flex: 0 0 auto; 
    margin-left: 4rem;
}


.patrol-landing-solution .solution-content {
    width: 85%;
    display: flex;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
}

.patrol-landing-solution .solution-headline {
    font-size: 2.5rem; 
    color: var(--lnn-dark);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.patrol-landing-solution .solution-description {
    font-size: 1.125rem;
    color: var(--lnn-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.patrol-landing-solution .solution-benefits {
    margin-bottom: 0.2rem;
    width: 100%;
}

.patrol-landing-solution .benefit-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.75rem !important;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.patrol-landing-solution .benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.patrol-landing-solution .benefit-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--lnn-dark);
    margin-bottom: 0.1rem !important;
    padding-bottom: 0rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.5rem;
}

.patrol-landing-solution .benefit-icon {
    font-size: 1.4rem;
}

.patrol-landing-solution .benefit-description {
    font-size: 1rem;
    color: var(--lnn-secondary);
    line-height: 1.2;
    margin: 0;
    padding-left: 7.5%;
}

.patrol-landing-solution .solution-closing {
    font-size: 1.125rem;
    color: #333;
    margin-bottom: 1rem;
    margin-top: 1rem !important;
    line-height: 1.5;
    font-weight: 600;
}


/* Solution Section Mobile Styles */
@media (max-width: 991px) {
    .patrol-landing .patrol-landing-solution {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-top: 5%;
    }

    /* Hide the solution image completely on mobile */
    .patrol-landing-solution .col-lg-5 {
        display: none;
    }

    .patrol-landing-solution .col-lg-7 {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding-right: 0;
    }

    .patrol-landing-solution .solution-content {
        text-align: center;
        width: 100%;
        align-items: center;
    }

    .patrol-landing-solution .solution-headline {
        text-align: center;
        font-size: 2rem;
    }

    .patrol-landing-solution .solution-description {
        text-align: center;
        font-size: 1.1rem;
    }

    .patrol-landing-solution .solution-closing {
        text-align: center;
    }

    .patrol-landing-solution .hero-cta-button {
        text-align: center;
        display: inline-block;
    }

    /* Benefits list centered but content inside items left-aligned */
    .patrol-landing-solution .solution-benefits {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .patrol-landing-solution .benefit-item {
        max-width: 300px;
        width: 100%;
        text-align: left;
    }

    .patrol-landing-solution .benefit-title {
        text-align: left;
        font-size: 1rem;
    }

    .patrol-landing-solution .benefit-description {
        text-align: left;
        font-size: 1rem;
    }
}

/* Trust Frame Styles - Centered Content Layout */
.patrol-landing .patrol-landing-trust {
    min-height: calc(100vh - 70px); /* Account for navbar height */
    overflow: hidden;
    margin-top: 0%;
    padding-left: 5%; 
    padding-right: 5%;
    background: var(--lnn-white) !important;
    display: flex;
    align-items: center;
}

.patrol-landing-trust .trust-content {
    width: 100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.patrol-landing-trust .trust-headline {
    font-size: 2.8rem; 
    color: var(--lnn-dark);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    margin-bottom: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.patrol-landing-trust .trust-description {
    font-size: 1.125rem;
    color: var(--lnn-secondary);
    margin-bottom: 3rem;
    line-height: 1.7;
    max-width: 600px;
}

.patrol-landing-trust .testimonial-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 3rem;
    margin: 0 auto;
    border: 1px solid #e9ecef;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 25px 0px;
    max-width: 900px;
    width: 100%;
    text-align: left;
}

.patrol-landing-trust .testimonial-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lnn-dark);
    margin-bottom: 1.5rem;
}

.patrol-landing-trust .testimonial-content {
    font-size: 1rem;
    color: var(--lnn-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.patrol-landing-trust .testimonial-quote {
    border-left: 5px solid #fab700;
    padding-left: 1.5rem;
    margin-top: 1.5rem;
}

.patrol-landing-trust .quote-text {
    font-size: 1.125rem;
    color: var(--lnn-dark);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.patrol-landing-trust .quote-author {
    font-size: 0.95rem;
    color: var(--lnn-secondary);
    font-weight: 600;
}

/* Trust Frame Mobile Responsiveness */
@media (max-width: 991px) {
    .patrol-landing .patrol-landing-trust {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 5%;
    }
    
    .patrol-landing-trust .testimonial-card {
        max-width: 95%;
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .patrol-landing-trust .trust-headline {
        font-size: 2rem;
    }
    
    .patrol-landing-trust .trust-description {
        font-size: 1.1rem;
    }

    .patrol-landing-trust .testimonial-card {
        max-width: 95% !important;
        padding: 24px;
    }
    
    .patrol-landing-trust .quote-text {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .patrol-landing-trust .trust-headline {
        font-size: 2rem;
    }
    
    .patrol-landing-trust .trust-description {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .patrol-landing-trust .testimonial-card {
        max-width: 100%;
        padding: 20px;
        margin: 0 auto;
    }
    
    .patrol-landing-trust .quote-text {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .patrol-landing-trust .quote-author {
        font-size: 0.875rem;
    }
}

/* CTA Form Frame Styles - Centered Content Layout */
.patrol-landing .patrol-landing-cta {
    min-height: calc(100vh - 70px); /* Account for navbar height */
    overflow: hidden;
    padding: 5%;
    background: linear-gradient(135deg, 
        rgba(250, 183, 0, 0.05) 0%, 
        rgba(250, 183, 0, 0.1) 100%
    ) !important;
    display: flex;
    align-items: center;
}

.patrol-landing-cta .cta-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 0 auto;
}

.patrol-landing-cta .cta-headline {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--lnn-dark);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.patrol-landing-cta .cta-description {
    font-size: 1.125rem;
    color: var(--lnn-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 700px;
}

.patrol-landing-cta .form-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.patrol-landing-cta .form-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 3rem;
    margin: 0 auto;
    border: 1px solid #e9ecef;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 25px 0px;
    text-align: left;
}

.patrol-landing-cta .form-submit {
    text-align: center;
    margin-bottom: 1.5rem;
}

.patrol-landing-cta .cta-button {
    background-color: var(--lnn-primary);
    color: var(--lnn-dark);
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
    transition: 0.2s;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    min-width: 200px;
}

.patrol-landing-cta .cta-button:hover {
    background-color: var(--lnn-primary-hover);
    color: var(--lnn-dark);
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 8px 0px;
}

.patrol-landing-cta .cta-button:active {
    transform: translateY(0px);
}

.patrol-landing-cta .cta-button:focus {
    outline: none;
}

.patrol-landing-cta .form-privacy {
    text-align: center;
    margin-bottom: 2rem;
}

.patrol-landing-cta .privacy-link {
    color: #fab700 !important;
    text-decoration: none;
}

.patrol-landing-cta .privacy-link:hover {
    color: #e6a600 !important;
    text-decoration: underline;
}

.patrol-landing-cta .alt-contact {
    border-top: 1px solid #dee2e6;
    padding-top: 2rem;
    text-align: center;
}

.patrol-landing-cta .alt-contact p {
    color: var(--lnn-dark);
    margin-bottom: 1rem;
    font-weight: 600;
}

.patrol-landing-cta .alt-contact-button {
    color: #fab700;
    border: 2px solid #fab700;
    background-color: transparent;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.patrol-landing-cta .alt-contact-button:hover {
    color: var(--lnn-dark);
    background-color: var(--lnn-primary);
    border-color: #fab700;
    text-decoration: none;
}

/* CTA Form Mobile Responsiveness */
@media (max-width: 991px) {
    .patrol-landing-cta {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 5%;
    }
    
    .patrol-landing-cta .form-card {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .patrol-landing-cta .cta-headline {
        font-size: 2rem;
    }
    
    .patrol-landing-cta .cta-description {
        font-size: 1.1rem;
    }
    
    .patrol-landing-cta .form-card {
        padding: 1.5rem;
    }
    
    .patrol-landing-cta .cta-button {
        padding: 14px 28px;
        font-size: 16px;
        min-width: 180px;
    }
}

@media (max-width: 576px) {
    .patrol-landing-cta .cta-headline {
        font-size: 2rem;
    }
    
    .patrol-landing-cta .cta-description {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .patrol-landing-cta .form-card {
        padding: 1.25rem;
    }
    
    .patrol-landing-cta .cta-button {
        padding: 12px 24px;
        font-size: 15px;
        min-width: 160px;
    }
    
    .patrol-landing-cta .alt-contact-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}





/* Form Elements */
.patrol-landing-contact-form .form-label {
    font-weight: 600;
    color: var(--lnn-dark);
    margin-bottom: 0.5rem;
}

.patrol-landing-contact-form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-height: 48px; /* Ensure consistent height for all form controls */
}

.patrol-landing-contact-form .form-control:focus {
    border-color: var(--lnn-primary);
    box-shadow: 0 0 0 0.2rem rgba(250, 183, 0, 0.25);
    outline: none;
}

/* Remove ALL green validation borders - override Bootstrap validation styles */
.patrol-landing-contact-form .form-control:valid,
.patrol-landing-contact-form .form-control.is-valid {
    border-color: #e9ecef !important; /* Force default border color */
    background-image: none !important; /* Remove validation check icon */
}

.patrol-landing-contact-form .form-control:invalid,
.patrol-landing-contact-form .form-control.is-invalid {
    border-color: #e9ecef !important; /* Keep neutral color even for invalid */
    background-image: none !important; /* Remove validation X icon */
}

/* Fix for select dropdown being squished and ensure dropdown arrow appears */
.patrol-landing-contact-form select.form-control {
    height: 48px !important;
    min-height: 48px !important;
    padding: 12px 40px 12px 16px !important; /* More space for dropdown arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    background-color: white !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border-color: #e9ecef !important; /* Force gray border */
    cursor: pointer !important;
}

.patrol-landing-contact-form #service:focus {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23fab700" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') !important;
    border-color: var(--lnn-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(250, 183, 0, 0.25) !important;
}

/* Style the placeholder text to appear greyed out */
.patrol-landing-contact-form select.form-control.placeholder-active {
    color: #999999 !important; /* Grey placeholder text only when placeholder is showing */
}

.patrol-landing-contact-form select.form-control:not(.placeholder-active) {
    color: var(--lnn-dark) !important; /* Normal text color when option selected */
}

/* Ensure dropdown options always have normal dark color */
.patrol-landing-contact-form select.form-control option {
    color: var(--lnn-dark) !important;
    background-color: white !important;
}

/* Specific override for Business Name and Service Interest fields */
.patrol-landing-contact-form #business {
    border-color: #e9ecef !important;
    background-image: none !important;
}

/* Service field specific styling - ensure arrow shows */
.patrol-landing-contact-form #service {
    border-color: #e9ecef !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    background-color: white !important;
    height: 48px !important;
    line-height: 1.5 !important;
    padding-right: 40px !important;
}


/* Responsive Design */
@media (max-width: 768px) {
    .patrol-landing-headline {
        font-size: 2.5rem;
    }
    
    .patrol-landing-subtext {
        font-size: 1.2rem;
    }
    
    
    
    
}

@media (max-width: 576px) {
    .patrol-landing-headline {
        font-size: 2rem;
    }
    
    .patrol-landing-content {
        margin-top: 70px;
    }
    
    .patrol-landing-hero,
    .patrol-landing-problem,
    .patrol-landing-solution,
    .patrol-landing-trust,
    .patrol-landing-cta {
        padding: 60px 0;
    }
    
}

/* Animation and Transitions with GPU Acceleration */
.patrol-landing-hero,
.patrol-landing-problem,
.patrol-landing-solution,
.patrol-landing-trust,
.patrol-landing-cta {
    animation: fadeInUp 0.8s ease-out;
    transform: translateZ(0); /* GPU acceleration */
    backface-visibility: hidden;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    .patrol-landing-hero,
    .patrol-landing-problem,
    .patrol-landing-solution,
    .patrol-landing-trust,
    .patrol-landing-cta {
        animation: none;
    }
    
    
    
    .patrol-landing * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Ensure no conflicts with existing site styles */
.patrol-landing * {
    box-sizing: border-box;
}


/* Phone number styling */
.patrol-landing a[href^="tel:"] {
    color: var(--lnn-primary);
    text-decoration: none;
    font-weight: 600;
}

.patrol-landing a[href^="tel:"]:hover {
    color: var(--lnn-dark);
    text-decoration: underline;
}

/* Loading states for form */
.patrol-landing-contact-form .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Phone validation styling */
.patrol-landing-contact-form .form-control.is-valid {
    border-color: var(--lnn-success) !important;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path fill="%2328a745" d="M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

.patrol-landing-contact-form .form-control.is-invalid {
    border-color: var(--lnn-error) !important;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23dc3545" viewBox="-2 -2 7 7"><path stroke="%23dc3545" d="M0 0l3 3m0-3L0 3"/><circle r=".5"/><circle cx="3" r=".5"/><circle cy="3" r=".5"/><circle cx="3" cy="3" r=".5"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

.patrol-landing-contact-form .invalid-feedback {
    display: none;
    color: var(--lnn-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Mobile navbar functionality */
.patrol-landing .navbar-collapse {
    transition: all 0.35s ease;
}

/* Ensure proper Bootstrap navbar behavior */
.patrol-landing .navbar-nav {
    flex-direction: column;
}

@media (min-width: 992px) {
    .patrol-landing .navbar-nav {
        flex-direction: row;
    }
}

/* Hide by default on mobile - match Bootstrap lg breakpoint */
@media (max-width: 991.98px) {
    .patrol-landing .navbar-collapse {
        display: none !important;
    }
    
    .patrol-landing .navbar-collapse.show {
        display: block !important;
    }
}

/* Always show on desktop - match Bootstrap lg breakpoint */
@media (min-width: 992px) {
    .patrol-landing .navbar-collapse {
        display: flex !important;
    }
}

/* Hamburger menu icon styling */
.patrol-landing .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid var(--lnn-dark);
    border-radius: 0.25rem;
    transition: box-shadow 0.15s ease-in-out;
}

.patrol-landing .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    outline: none;
}

.patrol-landing .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(33, 37, 41, 0.75)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Mobile navbar styling - match Bootstrap lg breakpoint */
@media (max-width: 991.98px) {
    .patrol-landing .navbar-toggler {
        display: block !important;
    }
    
    .patrol-landing .navbar-collapse {
        border-top: 1px solid rgba(0,0,0,.1);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    
    .patrol-landing .navbar-nav {
        margin-bottom: 0.5rem;
    }
    
    .patrol-landing .navbar-text {
        margin-bottom: 0.5rem;
    }
    
    .patrol-landing .fa {
        margin: 0.25rem 0.5rem;
    }
}

/* Hide hamburger on desktop - match Bootstrap lg breakpoint */
@media (min-width: 992px) {
    .patrol-landing .navbar-toggler {
        display: none !important;
    }
}