/* Clean, validated stylesheet for Lonestar Funding Team */

:root {
    --navy: #002868;
    --red: #bf0a30;
    --white: #ffffff;
    --text: #222;
    --on-white: #022445; /* brand text color for content over white */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Poppins", sans-serif;
    color: var(--text);
    background-color: #f4f6f8;
    line-height: 1.6;
}

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* Navbar */
.navbar {
    background: var(--navy);
    color: var(--white);
    padding: 0.7rem 0;
    position: sticky;
    top: 0; z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

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

.logo img { height: 75px; width: auto; display: block; }

/* Keep header items on a single line and prevent nav text wrapping */
.nav-container { flex-wrap: nowrap; }
.nav-links { gap: 1rem; align-items: center; }
.nav-links a { white-space: nowrap; line-height: 1; font-size: 0.96rem; }

.nav-links { display: flex; list-style: none; gap: 1rem; align-items: center; }
.nav-links a { color: rgba(255,255,255,0.92); text-decoration: none; font-weight: 600; padding: 0.28rem 0.35rem; border-radius: 6px; transition: background 0.18s, color 0.18s, transform 0.18s; font-size: 0.95rem; }
.nav-links a:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.nav-links .active { color: var(--red); background: rgba(255,255,255,0.08); }

.menu-toggle { display: none; font-size: 1.8rem; cursor: pointer; }

/* Ensure single toggle button has consistent hit-area and stacking */
#menu-toggle { line-height: 1; border: none; background: transparent; }

/* Hero */
.hero { background: linear-gradient(120deg, var(--navy) 60%, #012b55 100%); color: var(--white); padding: 3.5rem 0 2.5rem; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://www.transparenttextures.com/patterns/cubes.png'); opacity: 0.06; pointer-events: none; }
.hero .hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 0.6rem; line-height: 1.05; }
.hero h1 span { color: var(--red); }
.hero p { font-size: 1.05rem; margin-bottom: 1.6rem; opacity: 0.95; }
/* Subpage hero lead text (e.g., Equipment Financing) should use brand red for emphasis */
.subpage-hero .lead, .funding-hero .lead { color: var(--red); opacity: 0.95; }

/* Subpage hero: use the same navy background and spacing as the main hero so layouts match */
.page-hero.subpage-hero, .subpage-hero {
    /* solid navy to match the navbar and full-bleed across the viewport */
    background: var(--navy);
    color: var(--white);
    padding: 3.5rem 0 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* full-bleed pattern so hero covers entire viewport even when nested */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
}
.page-hero.subpage-hero .container, .subpage-hero .container { position: relative; z-index: 2; }
.page-hero.subpage-hero h1, .subpage-hero h1 { color: var(--white); }
.page-hero.subpage-hero p, .subpage-hero p { color: rgba(255,255,255,0.95); }

@media (min-width: 993px) {
    .page-hero.subpage-hero { padding: 4rem 0 3.25rem; }
}
/* Specific subpage hero titles should use brand red for emphasis */
.page-hero.subpage-hero.biz-hero h1,
.page-hero.subpage-hero.equipment-hero h1,
.page-hero.subpage-hero.rei-hero h1,
.page-hero.subpage-hero.rv-hero h1,
.page-hero.subpage-hero.about-hero h1,
.page-hero.subpage-hero.contact-hero h1 {
    color: var(--red);
}
.hero .btn { background: var(--red); color: var(--white); padding: 0.9rem 2rem; text-decoration: none; border-radius: 28px; font-weight: 700; transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 6px 20px rgba(190,10,40,0.12); }
.hero .btn:hover { box-shadow: 0 10px 30px rgba(190,10,40,0.16); }
.hero .cta-small { display: inline-block; margin-top: 0.4rem; color: rgba(255,255,255,0.85); text-decoration: underline; }

/* Archived hero graphic rules (kept for quick restore) ---------------------------------
   .hero-graphic { display: block; max-width: 420px; width: 36%; height: auto; box-shadow: 0 12px 30px rgba(2,36,69,0.12); border-radius: 10px; }

   .header-graphic { display: none; }

   @media (min-width: 993px) {
       .hero { desktop restore: padding: 4rem 0 3.25rem; overflow: visible; }
       .hero .container { position: relative; }
       .hero-anchored { display: block; position: absolute; right: 8%; bottom: -18%; transform: translateX(0); width: 520px; max-width: 52%; z-index: 5; box-shadow: 0 12px 30px rgba(2,36,69,0.12); border-radius: 10px; }
       .header-graphic { display: none; }
   }

   @media (max-width: 992px) {
       .hero-graphic, .header-graphic { width: 80%; max-width: 320px; margin: 1.2rem auto 0; position: static; transform: none; display: block; }
   }
----------------------------------------------------------------------------------------- */

/* Buttons */
.btn { background: var(--red); color: var(--white); padding: 0.8rem 1.8rem; text-decoration: none; border-radius: 30px; font-weight: 600; transition: background 0.3s; display: inline-block; margin-top: 1rem; vertical-align: middle; }
.btn:hover { background: #a50d2c; }
.btn-outline { border: 2px solid var(--red); color: var(--red); padding: 0.8rem 1.8rem; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s; display: inline-block; margin-top: 1rem; vertical-align: middle; background: transparent; }
.btn-outline:hover { background: var(--red); color: var(--white); }

/* Services */
.services { padding: 5rem 0; text-align: center; }
.services h2 { color: #0b2946; margin-bottom: 3rem; font-size: 2rem; }
.service-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.service-card { background: var(--white); border-radius: 16px; box-shadow: 0 2px 16px rgba(0,0,0,0.09); padding: 2.2rem 1.5rem; text-align: left; transition: box-shadow 0.3s, transform 0.3s; border: 1.5px solid #f2f2f2; }
.service-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.13); border-color: var(--red); }
.service-card h3 { color: var(--on-white); margin-bottom: 0.6rem; }
.service-card p { color: var(--on-white); margin-bottom: 1.2rem; }

/* Ensure cards use the brand text color on white backgrounds for consistency */
.site-card { color: var(--on-white); }

/* Responsive service grid: 1 col mobile, 2 cols tablet, 4 cols desktop */
.service-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .service-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Center a lone item on the second row when the grid is 2-columns (e.g., 3 total items) */
@media (min-width: 720px) and (max-width: 1099px) {
    /* If the grid has exactly 3 children, target the 3rd (which is also the last) and center it */
    .service-grid > *:nth-child(3):nth-last-child(1) {
        /* layout + centering (user-provided computed styles) */
        grid-column: 1 / -1; /* span both columns */
        justify-self: center !important; /* center within the spanned area */
        width: min(520px, 100%); /* limit width but allow shrink on small tablets */
        margin: 0 auto; /* extra centering fallback for browsers that stretch grid items */
        max-width: 520px; /* hard cap */

        /* visual & layout properties copied from computed styles to ensure consistency */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        background: #fff;
        border: 1px solid #eef2f6;
        border-radius: 16px;
        padding: 1.4rem;
        box-shadow: 0 6px 18px rgba(11,41,70,0.04);
        color: var(--on-white);
        transform: none !important;
        will-change: auto !important;
        transition: none !important;
    }
}

/*
  For modern browsers that support :has(), detect when a .service-grid has exactly 3 children
  and force a 2-column layout so the third item sits alone on its own row. This makes the
  existing centering rules apply even at large viewports where the normal breakpoint would
  create more columns. Browsers that don't support :has() will ignore this selector and
  continue to use the media-query centering fallback above.
*/
.service-grid:has(> :nth-child(3):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
}

/* Ensure the centering rule still applies (re-declare in case the :has() forces layout at any width) */
.service-grid:has(> :nth-child(3):nth-last-child(1)) > *:nth-child(3):nth-last-child(1) {
    grid-column: 1 / -1;
    justify-self: center !important;
    width: min(520px, 100%);
    margin: 0 auto;
    max-width: 520px;
}

/* JS fallback mirror: when .three-up is present on the grid, apply the same centering */
.service-grid.three-up {
    grid-template-columns: repeat(2, 1fr);
}
.service-grid.three-up > *:nth-child(3):nth-last-child(1) {
    grid-column: 1 / -1;
    justify-self: center !important;
    width: min(520px, 100%);
    margin: 0 auto;
    max-width: 520px;
}

/* Service card icon + CTA layout */
.service-card { display: flex; flex-direction: column; justify-content: space-between; }
.service-card .service-icon, .rei-card .service-icon {
    width: 64px; height: 64px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff, #fbfbff); box-shadow: 0 6px 18px rgba(11,41,70,0.04); margin-bottom: 0.9rem; border: 2px solid var(--red); color: var(--red); font-weight: 700; font-size: 1.4rem; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.service-card .service-icon img.service-img { width: 44px; height: 44px; display: block; }
.service-card .service-icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.service-card .card-footer { margin-top: 1rem; display: flex; justify-content: flex-start; }
.service-card .card-footer .btn-outline { margin: 0; }

/* Make the icon border turn red when the parent card is hovered or focused */
.service-card:hover .service-icon,
.site-card:hover .service-icon,
.service-card:focus-within .service-icon,
.site-card:focus-within .service-icon,
.rei-card:hover .service-icon,
.rei-card:focus-within .service-icon {
    border-color: var(--red);
    box-shadow: 0 8px 22px rgba(11,41,70,0.06);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* ==================================================
   Unified card styles and animations
   Applies to feature/service/rei/term/how-step cards
   ================================================== */
/* Base look for all cards on the site */
.site-card, .service-card, .feature-card, .rei-card, .term-card, .how-step, .feature-card, .service-card {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 1.4rem;
    box-shadow: 0 6px 18px rgba(11,41,70,0.04);
    transition: box-shadow 280ms cubic-bezier(.2,.9,.3,1), border-color 220ms;
}

/* Hover / focus interactions for all cards */
.site-card:hover, .service-card:hover, .feature-card:hover, .rei-card:hover, .term-card:hover, .how-step:hover {
    box-shadow: 0 14px 34px rgba(11,41,70,0.12);
    /* stronger, thicker red border on hover to match home styling */
    border-color: var(--red);
    border-width: 4px;
    border-style: solid;
}

/* Make sure internal layouts keep their spacing (don't override display types) */
.service-card .service-icon, .feature-card .service-icon, .rei-card .service-icon { margin-bottom: 0.9rem; }

/* Keep the card-footer buttons consistent */
.site-card .card-footer .btn-outline, .service-card .card-footer .btn-outline, .feature-card .card-footer .btn-outline, .rei-card .card-footer .btn-outline { margin: 0; }

/* Slightly reduce motion on small screens for stability */
@media (max-width: 720px) {
    .site-card, .service-card, .feature-card, .rei-card, .term-card, .how-step { transition: box-shadow 180ms, border-color 160ms; }
    .site-card:hover, .service-card:hover, .feature-card:hover, .rei-card:hover, .term-card:hover, .how-step:hover {
        transform: none;
        box-shadow: 0 8px 22px rgba(11,41,70,0.06);
        border-color: var(--red);
        border-width: 2.5px;
        border-style: solid;
    }
}

/* Keyboard focus visibility for cards */
.site-card:focus-visible, .service-card:focus-visible, .feature-card:focus-visible, .rei-card:focus-visible, .term-card:focus-visible, .how-step:focus-visible {
    outline: 3px solid rgba(191,10,48,0.12);
    outline-offset: 3px;
}

/* Ensure keyboard users see a clear focus ring on primary interactive controls */
.btn:focus-visible, .btn-outline:focus-visible, .nav-links a:focus-visible, .acc-head:focus-visible {
    outline: 3px solid rgba(191,10,48,0.16);
    outline-offset: 3px;
    box-shadow: 0 8px 20px rgba(191,10,48,0.06);
    border-radius: 8px;
}

/* Business funding: center the 'Why Choose' heading and make benefits list two-per-row */
.page-content .benefits-list { list-style: none; padding: 0; margin: 0.6rem auto 1.6rem; display: block; max-width: 760px; }
.page-content .benefits-list li { padding-left: 0; margin-bottom: 0.6rem; }
@media (min-width: 993px) {
    /* Desktop: centered two-column grid with fixed column widths so it sits directly under the centered H2 */
    .page-content .benefits-list { display: grid; grid-template-columns: repeat(2, 360px); gap: 0.8rem 1.4rem; width: fit-content; margin-left: auto; margin-right: auto; }
    .page-content .benefits-list li { width: 360px; display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.25rem 0; box-sizing: border-box; }
}

/* Mobile / narrow screens: single-column full-width items */
@media (max-width: 992px) {
    .page-content .benefits-list { display: block; width: 100%; max-width: 720px; }
    .page-content .benefits-list li { width: 100%; display: flex; }
}

/* icon alignment */
.page-content .benefits-list li::before { margin-top: 0.08em; flex: 0 0 auto; }

/* Center the H2 when directly followed by the benefits list for visual alignment */
.page-content h2.centered { text-align: center; margin-bottom: 0.6rem; }
@media (min-width: 993px) {
    .page-content h2.centered { margin-bottom: 1rem; }
}


/* About Section */
.about-preview { background: #f7f7f7; text-align: center; padding: 4rem 0; }
.about-preview h2 { color: #0b2946; margin-bottom: 1.5rem; }

/* About preview CTA tweaks */
.about-preview .btn {
    padding: 0.9rem 2.2rem;
    font-size: 1rem;
    border-radius: 30px;
}

.about-preview .btn-outline {
    padding: 0.85rem 2rem;
    font-size: 0.98rem;
    border-radius: 28px;
}

/* Ensure paragraph and CTA don't overlap */
.about-preview p {
    max-width: 900px;
    margin: 0 auto 1.2rem;
    line-height: 1.7;
    color: var(--on-white);
}

/* Slightly more breathing room between hero and about-preview */
.page-hero + .about-preview { margin-top: 0.6rem; padding-top: 4.5rem; }

/* Intro paragraph helper: centered, readable line length and subtle emphasis
   Used for short marketing intros above section headings (e.g., homepage, service pages) */
.intro {
    max-width: 920px;
    margin: 0 auto 1.2rem;
    color: var(--on-white);
    font-size: 1.03rem;
    line-height: 1.6;
    text-align: center;
}

/* REI page color fixes: ensure text that appears on white backgrounds uses the brand blue
   (some earlier rules mistakenly set white text; this scoped rule targets REI components) */
.rei-card, .rei-table, .rei-accordion .acc-item, .rei-cards, .page-hero.rei-hero, .what-we-need {
    color: var(--on-white) !important; /* brand blue for text on light/white backgrounds */
}

/* Checklist: keep red checkmark visual and ensure list items remain readable */
.checklist li { position: relative; padding-left: 2.2rem; color: var(--on-white); }
.checklist li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 700; }

/* Center the REI checklist container under the intro paragraph while keeping items left-aligned */
.page-hero.rei-hero + section > .checklist,
.page-hero.rei-hero + section > ul.checklist {
    display: block;
    margin: 0.6rem auto 0; /* center horizontally with a small top gap */
    max-width: 560px; /* keep the checklist readable */
    text-align: left; /* ensure the items themselves are left-aligned */
}

/* Alternative centered checklist that can be used above tables/charts */
.centered-checklist { display: block; margin: 0.8rem auto 1rem; max-width: 560px; text-align: left; }

/* Single-line centered requirements helper used above the REI comparison table */
.single-line-reqs { text-align: center; color: var(--on-white); font-weight: 600; margin: 0.6rem 0 0.6rem; }
.single-line-reqs .sep { margin: 0 0.6rem; color: rgba(2,36,69,0.35); }

/* Decorative checkmark used between single-line requirements */
.single-line-reqs .checkmark { color: var(--red); margin: 0 0.6rem; font-weight: 700; }

.about-preview .btn,
.about-preview .btn-outline {
    display: inline-block;
    margin-top: 1rem;
}

/* Footer */

footer { background: var(--navy); color: var(--white); text-align: center; padding: 2rem 0; }
.footer-logo img { height: 75px; width: auto; margin-bottom: 0.5rem; border-radius: 6px; }
.socials { display:flex; gap:0.75rem; align-items:center; justify-content:center; }
.socials a { color: var(--red); margin: 0 0.5rem; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; }

/* Social icon styling and accessible helpers */
.socials .icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.social-link { padding: 6px; border-radius: 6px; transition: background 160ms ease; }
.social-link:hover, .social-link:focus { background: rgba(255,255,255,0.04); outline: none; }
.social-link svg { width: 20px; height: 20px; display: block; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Defensive override: remove any remaining transform/translate/scale animations on cards */
.site-card, .service-card, .rei-card, .feature-card, .term-card, .how-step {
    transform: none !important;
    transition: box-shadow .18s ease-in-out !important;
}

/* Strong footer social icon constraints
   Occasionally browser zoom, UA styles, or other rules can make inline SVGs scale unexpectedly.
   Force a compact, predictable anchor size and cap the SVG dimensions. Keep high specificity
   and !important so this wins against odd cascades. */
footer .socials .social-link { width: 44px !important; height: 44px !important; padding: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; }
footer .socials .social-link .icon, footer .socials svg.icon, .social-link svg { width: 20px !important; height: 20px !important; max-width: 24px !important; max-height: 24px !important; display: block !important; }
footer .socials { gap: 0.5rem !important; }

/* Page content */
.page-content { padding: 4rem 0; }
.page-content h2 { color: #0b2946; margin-bottom: 1.2rem; }

/* Make the 'Why Choose' heading slightly bolder and smaller to match screenshot */
.page-content h2.centered { font-size: 1.05rem; font-weight: 700; color: #0b2946; margin-bottom: 0.8rem; }
.page-content p { margin-bottom: 2rem; font-size: 1.05rem; color: #444; }

/* About page content overrides: darker brand text on white background and generous spacing */
.content { color: #022445; padding: 3rem 0 4rem; }
.content h2, .content h3, .content h4 { color: #022445; }
.content p, .content li { color: #022445; line-height: 1.7; }

/* About cards: responsive 2-column grid that collapses to 1 column on mobile */
.about-cards { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1.2rem; }
.about-cards .site-card { padding: 1.6rem; }

@media (min-width: 900px) {
    .about-cards { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .about-cards .site-card { padding: 2rem; }
}

/* Slight typographic tweaks for lists inside cards */
.about-cards ul, .about-cards ol { margin-left: 1rem; }
.about-cards h3 { margin-bottom: 0.8rem; }
.about-cards h4 { margin-top: 0.6rem; margin-bottom: 0.35rem; }

/* Contact page modern layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2.5rem;
    align-items: start;
}

.contact-form {
    background: #fff;
    padding: 2rem;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(11,41,70,0.06);
    border: 1px solid #eef2f6;
}

.contact-form .form-row { margin-bottom: 1rem; }
.contact-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--on-white); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid #d9e1e8;
    font-size: 1rem;
    color: var(--on-white);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-form .form-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.contact-form .btn { margin-top: 0; }

/* Make action buttons consistent size */
.contact-form .form-actions .btn,
.contact-form .form-actions .btn-outline {
    min-width: 160px; /* ensure similar widths */
    text-align: center;
    padding: 0.8rem 1.8rem;
    line-height: 1.1;
}

/* Ensure reset button text color is visible in all contexts */
.contact-form .form-actions .btn-outline { color: var(--red); }

.contact-info {
    background: linear-gradient(180deg, #fff, #fbfdff);
    padding: 1.6rem;
    border-radius: 12px;
    border: 1px solid #eef2f6;
}

.contact-info h3 { margin-top: 0; color: var(--on-white); }
.contact-info, .contact-info p, .contact-info li { color: var(--on-white); }

/* Form status messages */
.form-status { margin-top: 0.8rem; padding: 0.65rem 0.9rem; border-radius: 10px; font-weight: 600; display: inline-block; }
.form-status.success { background: rgba(34,139,34,0.12); color: #116611; border: 1px solid rgba(34,139,34,0.18); }
.form-status.error { background: rgba(190,10,40,0.08); color: #a10b1f; border: 1px solid rgba(190,10,40,0.12); }

/* slightly smaller logo in footer for compactness */
.footer-logo img { height: 48px; }

@media (min-width: 993px) {
    /* Use fixed-width columns and center the grid itself so columns align under the centered H2 */
    .page-content .benefits-list { grid-template-columns: repeat(2, 360px); justify-content: center; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* Make sure small screens still get a 1-column layout */
@media (max-width: 1024px) {
    .page-content .benefits-list { grid-template-columns: 1fr; width: 100%; max-width: 720px; }
}

/* Make hamburger and mobile nav available on slightly larger screens too */
@media (max-width: 992px) {
    .menu-toggle { display: block; }
    .menu-toggle { z-index: 2100; font-size: 1.5rem; }
    /* Full-screen overlay nav when active for clearer mobile UX */
    .nav-links { display: none; flex-direction: column; position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: 100%; padding: 3.2rem 1.2rem; border-radius: 0; background: rgba(0,40,104,0.98); z-index: 2000; align-items: center; justify-content: center; gap: 1.2rem; }
    .nav-links.active { display: flex; }
    .nav-links a { color: var(--white); font-size: 1.05rem; padding: 0.8rem 1rem; }
    .nav-links a:hover { background: rgba(255,255,255,0.04); }

    /* Dropdown menu (desktop) */
    .dropdown { position: relative; }
    .dropdown .drop-toggle { cursor: pointer; }
    /* Hidden by default; shown on hover (desktop) or when .open is present on the dropdown */
    .dropdown .dropdown-menu { display: none !important; position: absolute; top: calc(100% + 8px); left: 0; background: var(--white); color: var(--on-white); min-width: 240px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.5rem 0; z-index: 2500; }
    .dropdown .dropdown-menu li { list-style: none; }
    .dropdown .dropdown-menu li a { display: block; padding: 0.55rem 1rem; color: var(--on-white); }
    .dropdown:hover .dropdown-menu { display: block !important; }
    .dropdown.open .dropdown-menu { display: block !important; }

    /* Strong safeguard: remove list bullets and ensure nav lists don't show markers (important to override cached/older rules) */
    .nav-links, .nav-links ul, .dropdown .dropdown-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure dropdown appears visually separate from nav on desktop and aligns to parent when space allows.
       If the dropdown would overflow to the right, align it to the right edge instead. */
    .dropdown { position: relative; }
    .dropdown .dropdown-menu { left: 0; right: auto; white-space: nowrap; }
    .nav-links > li:last-child .dropdown .dropdown-menu,
    .nav-links > li:nth-last-child(2) .dropdown .dropdown-menu {
        /* if the dropdown is near the right edge, pin it to the right */
        left: auto; right: 0;
    }

    /* Make sure dropdown items have consistent background and padding on desktop */
    @media (min-width: 993px) {
    .dropdown .dropdown-menu { background: var(--white); color: var(--on-white); border-radius: 8px; }
    .dropdown .dropdown-menu li a { color: var(--on-white); padding: 0.6rem 1rem; }
    }

    /* Mobile dropdown behavior: menu inside overlay */
    @media (max-width: 992px) {
        .dropdown .dropdown-menu { position: static; background: transparent; box-shadow: none; padding: 0; min-width: 0; }
        .dropdown .dropdown-menu li a { color: var(--white); padding: 0.6rem 0; }
        .dropdown .drop-toggle { color: var(--white); }
    }

    /* Fix hamburger visibility: position fixed so it never goes off-screen */
    .menu-toggle { position: fixed; top: 12px; right: 12px; padding: 10px 12px; border-radius: 8px; touch-action: manipulation; }

    /* Hamburger color: semi-dark gray for better contrast */
    .menu-toggle { color: #374151; background: rgba(255,255,255,0.95); border: 1px solid rgba(55,65,81,0.08); }

    /* Reduce header/logo size and constrain nav-container so it doesn't overflow */
    .nav-container { padding-right: 92px; max-width: calc(100% - 92px); box-sizing: border-box; }
    /* slightly larger mobile logo for better brand presence */
    .logo img { height: 56px; max-width: 160px; }

    /* Prevent any accidental horizontal scrolling on small devices */
    html, body { overflow-x: hidden; }
}

/* Desktop navigation / hamburger styling (don't let this override mobile) */
@media (min-width: 993px) {
    .menu-toggle {
        background: transparent;
        color: var(--white);
        border: 2px solid rgba(255,255,255,0.08);
        padding: 6px 10px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    .nav-links { right: 16px; }
    .nav-links a { padding: 0.6rem 0.8rem; }

    /* Reduce wrapping by tightening nav spacing on larger viewports */
    .nav-links { gap: 1.2rem; }
    .nav-links a { white-space: nowrap; }
}

/* Background fallbacks for service icons (if <img> doesn't load) */
.service-card.business .service-icon { background-image: url('assets/images/business-funding.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }
.service-card.equipment .service-icon { background-image: url('assets/images/equipment.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }
.service-card.rei .service-icon { background-image: url('assets/images/rei.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }
.service-card.specialty .service-icon { background-image: url('assets/images/specialty-vehicles.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }
.service-card.rv .service-icon { background-image: url('assets/images/rv.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }
.service-card.plane .service-icon { background-image: url('assets/images/plane.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }
.service-card.boat .service-icon { background-image: url('assets/images/boat.svg'); background-repeat: no-repeat; background-position: center; background-size: 44px 44px; }

/* Mobile contact form improvements */
@media (max-width: 992px) {
    .contact-form { padding: 1.2rem; }
    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea {
        padding: 0.9rem 0.95rem; font-size: 1rem; border-radius: 10px;
    }
    .contact-form .form-actions { flex-direction: column; gap: 0.8rem; }
    .contact-form .btn { width: 100%; }
    .contact-info { margin-top: 1rem; }
    .form-status { display: block; width: 100%; box-sizing: border-box; }

    /* Mobile polish for contact form */
    .contact-form { box-shadow: 0 10px 30px rgba(11,41,70,0.08); border-radius: 14px; padding: 1.4rem; }
    .contact-form label { font-size: 0.98rem; }
    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea {
        font-size: 1.02rem; padding: 1rem 1rem; border-radius: 12px;
    }
    .contact-form input[type="file"] { width: 100%; padding: 0.6rem 0.6rem; }
    .attachment-list .file-item { font-size: 0.98rem; padding: 0.45rem 0; }
    .contact-form .form-actions { gap: 0.75rem; }
    .contact-form .form-actions .btn, .contact-form .form-actions .btn-outline { padding: 0.95rem 1.2rem; font-size: 1rem; min-width: 100%; }
}

/* Extra small devices: tighten positioning to eliminate horizontal scrolling */
@media (max-width: 420px) {
    .menu-toggle { right: 8px; top: 8px; padding: 6px 8px; }
    .nav-container { padding-right: 56px; }
    .logo img { height: 48px; max-width: 140px; }
}

@media (max-width: 420px) {
    .contact-form { padding: 1rem; }
    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea, .contact-form select { font-size: 1rem; padding: 0.95rem; }
    .contact-form .form-actions .btn, .contact-form .form-actions .btn-outline { padding: 0.9rem; font-size: 0.98rem; }
    .attachment-list .file-item { font-size: 0.95rem; }
}

/* Improve spacing for the error messages on mobile */
.contact-form .error { color: #a10b1f; font-size: 0.92rem; margin-top: 0.35rem; display: block; }

/* Attachment list styling */
.attachment-list { margin-top: 0.6rem; font-size: 0.95rem; color: var(--on-white); }
.attachment-list .file-item { padding: 0.28rem 0; border-bottom: 1px dashed #eef2f6; }
.attachment-list .file-item:last-child { border-bottom: none; }


/* Funding Feature Cards */
.funding-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.feature-card { background: #fff; border: 1px solid #eee; border-radius: 15px; padding: 1.5rem; transition: all 0.3s; box-shadow: 0 3px 10px rgba(0,0,0,0.05); color: var(--on-white); }
.feature-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.feature-card h3 { color: var(--on-white); margin-bottom: 0.8rem; }

/* CTA Box */
.cta-box { text-align: center; background: var(--navy); color: var(--white); padding: 2.6rem 1.2rem; border-radius: 12px; margin-top: 1.6rem; box-shadow: 0 6px 18px rgba(2,36,69,0.06); }
.cta-box h3 { margin-bottom: 0.65rem; color: var(--red); font-size: 1rem; font-weight: 700; }
.cta-box p { color: var(--white); margin-bottom: 1.2rem; opacity: 0.95; }

/* Pill button inside CTA */
.cta-box .btn { background: var(--red); color: #fff; padding: 0.6rem 1.2rem; border-radius: 20px; display: inline-block; box-shadow: 0 6px 16px rgba(176,14,34,0.12); }
.cta-box .btn:hover { box-shadow: 0 8px 20px rgba(176,14,34,0.12); }

/* REI comparison table styles */
.rei-table-wrap { overflow-x: auto; }
.rei-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #d6e2ea; border-radius: 8px; box-shadow: 0 6px 18px rgba(11,41,70,0.04); }
.rei-table thead th { text-align: left; padding: 18px 12px; font-size: 1.05rem; border-bottom: 2px solid #d6e2ea; color: var(--on-white); background: linear-gradient(180deg,#f8fbfd,#ffffff); }
.rei-table tbody td { padding: 14px 12px; border-bottom: 1px solid #e9f0f4; color: var(--on-white); font-size: 0.96rem; }
.rei-table tbody tr:last-child td { border-bottom: none; }
.rei-table .table-cta { text-align: center; padding: 18px; }

/* subtle zebra striping for rows to aid scanning */
.rei-table tbody tr:nth-child(odd) { background: #fbfeff; }
.rei-table tbody tr:nth-child(even) { background: #ffffff; }

/* tighten header font and uppercase for emphasis */
.rei-table thead th { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

/* REI intro cards (responsive) */
.rei-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.2rem 0 1.6rem; }
.rei-card { background: #fff; border: 1px solid #eef2f6; border-radius: 12px; padding: 1.2rem; box-shadow: 0 6px 18px rgba(11,41,70,0.04); display: flex; flex-direction: column; gap: 0.8rem; }
.rei-card h3 { margin: 0; color: var(--on-white); font-size: 1.05rem; }
.rei-card p { margin: 0; color: var(--on-white); font-size: 0.98rem; }

/* ==================================================
   Scoped overrides for the 'Why Choose' section
   Keeps rules isolated, high-specificity, and deterministic
   ================================================== */
.why-choose { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 1.2rem; }
.why-choose > h2.centered { margin-bottom: 0.8rem; }

/* Keep the benefits block same width as the funding-features grid for visual alignment */
.why-choose .benefits-list { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1080px; }
.why-choose .benefits-list li { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.45rem 0; box-sizing: border-box; }

/* responsive grid: two columns on desktop, collapse to one on small screens */
@media (min-width: 993px) {
    /* two balanced columns with a comfortable minimum column width to visually align under the feature cards */
    .why-choose .benefits-list { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 0.8rem 2rem; margin-left: auto; margin-right: auto; }
    .why-choose .benefits-list li { width: auto; }
}

@media (max-width: 992px) {
    .why-choose .benefits-list { display: block; max-width: 720px; }
    .why-choose .benefits-list li { width: 100%; }
}

/* icon sizing and alignment for the checklist within the new grid */
.why-choose .benefits-list li::before { margin-top: 0.02em; width: 1.5em; height: 1.5em; flex: 0 0 1.5em; }

/* Keep CTA the same width as the list so it visually aligns centered under cards */
.why-choose .cta-box { margin-top: 1.2rem; width: 100%; max-width: 960px; }

.rei-card .card-icon { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(180deg,#fbfdff,#eef6fb); display: inline-flex; align-items: center; justify-content: center; color: var(--navy); font-weight: 800; font-size: 1rem; border: 1px solid #e6eef6; }

@media (max-width: 992px) {
    .rei-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 993px) {
    .funding-features { grid-template-columns: repeat(2, 1fr); }
}

/* Final override: ensure unified hover/animation/border for all card-like components
   This is placed at the end of the stylesheet to win the cascade where page-specific
   rules earlier may have unintentionally overridden the unified styles. */
.service-card, .feature-card, .rei-card, .term-card, .how-step, .site-card {
    transition: box-shadow 280ms cubic-bezier(.2,.9,.3,1) !important;
}
.service-card:hover, .feature-card:hover, .rei-card:hover, .term-card:hover, .how-step:hover, .site-card:hover {
    box-shadow: 0 14px 34px rgba(11,41,70,0.12) !important;
    border-color: rgba(190,10,40,0.12) !important;
}

/* Keyboard focus accessibility */
.service-card:focus-within, .feature-card:focus-within, .rei-card:focus-within, .term-card:focus-within, .how-step:focus-within {
    outline: 3px solid rgba(190,10,40,0.08);
    outline-offset: 6px;
}

@media (max-width: 720px) {
    .rei-cards { grid-template-columns: 1fr; }
    .rei-card { padding: 1rem; }
}

@media (max-width: 720px) {
    .rei-table thead { display: none; }
    .rei-table tbody td { display: block; width: 100%; box-sizing: border-box; }
    .rei-table tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #eef2f6; border-radius: 8px; overflow: hidden; }
    .rei-table .table-cta { padding: 12px; }
}

/* Accordion-style for REI table on very small screens */
.rei-accordion { display: none; }
@media (max-width: 720px) {
    .rei-accordion { display: block; }
    .rei-accordion .acc-item { border: 1px solid #eef2f6; border-radius: 8px; margin-bottom: 0.8rem; overflow: hidden; background: #fff; color: var(--on-white); }
        .rei-accordion .acc-head { padding: 12px 14px; font-weight: 700; color: var(--on-white); background: #fbfdff; cursor: pointer; border: none; width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .rei-accordion .acc-head .title { flex: 1; text-align: left; }
        .rei-accordion .acc-head .icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #e9eef3; color: var(--on-white); font-weight: 700; }
        .rei-accordion .acc-body { display: none; padding: 12px 14px; color: var(--on-white); border-top: 1px solid #f2f2f2; }
        .rei-accordion .acc-item.open .acc-body { display: block; }
        .rei-accordion .acc-item.open .acc-head .icon { background: #0b2946; color: #fff; }
}

/* Specialty vehicles page: financing options and terms */
.financing-options { padding: 3.5rem 0; }
.financing-options h2 { margin-bottom: 0.6rem; }
.funding-features { margin-top: 1.2rem; }

.terms-checklist { padding: 2.5rem 0 3rem; background: #ffffff; border-top: 1px solid #f3f6f8; color: var(--on-white); }
.terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin-top: 1rem; }
.term-card { background: #fbfdff; border: 1px solid #eef4fb; padding: 1.1rem; border-radius: 12px; }
.white-bg-text, .service-card, .feature-card, .rei-card, .rei-table, .rei-accordion .acc-item, .terms-checklist, .how-step, .contact-form {
    /* Ensure readable brand color on white background elements */
    color: var(--on-white);
}
.term-card h4 { color: var(--navy); margin-bottom: 0.6rem; }
.terms-checklist .muted { color: #5b6b78; margin-bottom: 0.6rem; }

.checklist,
.checklist ul { 
    /* Force remove any list markers for browsers and override other rules */
    list-style: none !important; 
    margin: 0 !important; 
    padding-left: 0 !important; 
    color: var(--on-white);
}
.checklist li { 
    margin-bottom: 0.6rem; 
    /* Use flex so the check icon and text align, and multi-line text wraps cleanly */
    display: flex; 
    align-items: flex-start; 
    gap: 0.6rem;
    position: relative;
}
/* Hide any native marker and replace with a text-sized SVG check icon */
.checklist li::marker { display: none; }
.checklist li::before {
    /* larger red checkmark SVG encoded as data URI; increased to 1.5em for better visibility */
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 1.5em;
    margin-top: 0.02em; /* small vertical nudge to better center with text */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23bf0a30' d='M9 16.2L4.8 12l-1.4 1.4L9 19l12.7-12.7L20.3 5.9z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.how-it-works { padding: 2.5rem 0; }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.how-step { background: #fff; border-radius: 12px; padding: 1rem; border: 1px solid #eef2f6; box-shadow: 0 4px 18px rgba(11,41,70,0.04); text-align: left; color: var(--on-white); }
.how-step .step-number { background: linear-gradient(180deg,var(--red),#b10b2a); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-right: 0.75rem; float: left; }
.how-step h4 { margin-top: 0; margin-bottom: 0.6rem; color: var(--on-white); }
.how-step p { margin-left: 56px; color: var(--on-white); }

@media (max-width: 720px) {
    .how-step .step-number { float: none; display: inline-flex; margin-right: 0.6rem; }
    .how-step p { margin-left: 0; }
}

/* Strong mobile rules: keep hamburger visible and prevent horizontal scrolling up to 1100px */
@media (max-width: 1100px) {
    /* Show hamburger and fix its position so it's always visible */
    .menu-toggle { display: block !important; position: fixed !important; top: 8px !important; right: 8px !important; z-index: 4000 !important; font-size: 1.4rem !important; color: #374151 !important; background: #ffffffcc !important; border: 1px solid rgba(55,65,81,0.12) !important; padding: 6px 8px !important; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important; }

    /* Hide inline nav on narrower screens so it doesn't push layout */
    .nav-links { display: none !important; }
    .nav-links.active { display: flex !important; position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; padding: 3.2rem 1.2rem; background: rgba(0,40,104,0.98); align-items: center; justify-content: center; flex-direction: column; gap: 1.2rem; z-index: 3900; }

    /* Ensure header content can't push the toggle offscreen */
    .nav-container { max-width: calc(100% - 96px); padding-right: 96px; box-sizing: border-box; }
    .logo img { height: 40px !important; max-width: 120px; }

    /* Prevent horizontal scroll caused by any element */
    html, body { overflow-x: hidden !important; }
}

/* Desktop: show two service cards per row for improved visual balance */
@media (min-width: 993px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; }
}

/* End-file force overrides: make sure REI and all card types animate and show the brand hover tint */
.rei-card, .service-card, .feature-card, .term-card, .how-step {
    transition: box-shadow 280ms cubic-bezier(.2,.9,.3,1) !important;
}
.rei-card:hover, .service-card:hover, .feature-card:hover, .term-card:hover, .how-step:hover {
    box-shadow: 0 14px 34px rgba(11,41,70,0.12) !important;
    border-color: rgba(190,10,40,0.16) !important;
}

/* subtle focus visible for keyboard users */
.rei-card:focus-within, .service-card:focus-within, .feature-card:focus-within { outline: 3px solid rgba(190,10,40,0.06); outline-offset: 6px; }

/* Force-disable transform motion on all card components (defensive override) */
.site-card, .service-card, .feature-card, .rei-card, .term-card, .how-step {
    transform: none !important;
    will-change: auto !important;
    transition: box-shadow 180ms ease !important;
}
.site-card:hover, .service-card:hover, .feature-card:hover, .rei-card:hover, .term-card:hover, .how-step:hover {
    transform: none !important;
}

/* Final defensive override: remove transitions entirely for card elements to eliminate any motion */
.site-card, .service-card, .feature-card, .rei-card, .term-card, .how-step {
    transition: none !important;
}