/* ===== app/Views/layouts/header.php ===== */
/* Floating Edit Button Styles */
.floating-cookie-btn {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Change to right: 20px if preferred */
    background-color: #ffffff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 9998; /* Just below the modal (10000) */
    transition: all 0.2s ease-in-out;
}

.floating-cookie-btn:hover {
    background-color: #f8f9fa;
    color: #007bff; /* Highlights in your primary color */
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    font-family: sans-serif;
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Cookie Modal Styles */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

.cookie-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.cookie-modal-content h3 {
    margin-top: 0;
}

.cookie-option {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.cookie-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.cookie-option p {
    margin: 5px 0 0 25px;
    font-size: 13px;
    color: #666;
}

.cookie-modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* Buttons */
.btn-primary {
    background-color: rgb(16, 43, 82);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-secondary {
    background-color: #007bff !important;
    color: #333;
    border: 1px solid #007bff !important;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary:hover {
    background-color: rgb(16, 43, 82) !important;
}

@media screen and (min-width: 912px) {
    .dontShowOnMobile {
        display: block !important;
    }

    .showOnMobile {
        display: none !important;
    }
}

@media screen and (max-width: 911px) {
    .dontShowOnMobile {
        display: none !important;
    }

    .showOnMobile {
        display: block !important;
    }

    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 80%;
        margin: 0 10px;
    }

    .cookie-content p {
        width: 100%;
    }

    .cookie-buttons {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
    }

    .cookie-buttons .btn-primary,
    .cookie-buttons .btn-secondary {
        flex: 1 1 auto;
    }

    .menu-like-text {
        text-size-adjust: 100%;
        font-family: Inter, sans-serif;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 24px;
        text-align: start;
        text-decoration-color: rgb(16, 43, 82);
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-thickness: auto;
        text-transform: math-auto;
        color: rgb(16, 43, 82);
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
        margin-right: 10px;
    }


}

.menu-like-text {
    text-size-adjust: 100%;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 20px;
    text-align: start;
    text-decoration-color: rgb(16, 43, 82);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-transform: uppercase;
    color: rgb(16, 43, 82);
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.buy-button {
    display: flex !important;
    align-items: center;
    min-height: 75px;
}

.buy-button .list-inline-item {
    display: flex;
    align-items: center;
}

.header-login-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: currentColor;
    display: block;
}

.header-login-link .login-chevron {
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
}

#navigation {
    padding-right: 20px;
}

#topnav .navigation-menu {
    align-items: center;
    row-gap: 0;
    padding-top: 18px !important;
    padding-left: 20px !important;
}

@media (max-width: 991px) {
    #topnav .navigation-menu {
        padding-top: 0 !important;
    }
}

#topnav .navigation-menu > li > a {
    font-weight: 300 !important;
    letter-spacing: 0.1px;
    line-height: 20px !important;
}

#topnav .navigation-menu > li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-height: 40px;
    line-height: 1;
}

#topnav .navigation-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-weight: 300 !important;
    letter-spacing: 0.1px;
    line-height: 20px !important;
}

@media (min-width: 912px) and (max-width: 1240px) {
    #topnav .navigation-menu {
        row-gap: 0;
    }

    #topnav .navigation-menu > li {
        min-height: 28px;
    }

    #topnav .navigation-menu > li > a {
        min-height: 28px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 16px !important;
        line-height: 18px !important;
    }

    .navigation-menu > li > .menu-arrow {
        display: none !important;
    }

    .buy-button {
        min-height: 75px;
    }

    .menu-like-text {
        font-size: 13px;
        line-height: 18px;
    }
}

/* Form Hidden Fields Animation */
.frmhiddenfields {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.frmhiddenfields.show {
    max-height: 1000px;
    opacity: 1;
}

/* Header colours while sitting over the hero */
#topnav:not(.nav-sticky) {
    background: transparent !important;
    box-shadow: none !important;
}

#topnav:not(.nav-sticky) .menu-arrow {
    border: 0 !important;
}

#topnav:not(.nav-sticky) .menu-arrow::before {
    border-top-color: #102B52 !important;
}

#topnav:not(.nav-sticky) .navbar-toggle span {
    background-color: #ffffff !important;
}

#topnav .logo .site-logo {
    display: inline-block;
    height: 90px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: opacity 0.2s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#topnav .logo .site-logo-dark {
    display: inline-block;
}

#topnav .logo .site-logo-light {
    display: none;
}

#topnav:not(.nav-sticky):not(.inner-header) .logo .site-logo-dark {
    display: none;
}

#topnav:not(.nav-sticky):not(.inner-header) .logo .site-logo-light {
    display: inline-block;
}

#topnav.nav-sticky .logo .site-logo-dark,
#topnav.inner-header .logo .site-logo-dark {
    display: inline-block;
}

#topnav.nav-sticky .logo .site-logo-light,
#topnav.inner-header .logo .site-logo-light {
    display: none;
}

#topnav:not(.nav-sticky) .logo .logo-sticky-mode {
    display: none;
}

#topnav:not(.nav-sticky) .navigation-menu > li > a,
#topnav:not(.nav-sticky) .menu-like-text,
#topnav:not(.nav-sticky) .buy-button a {
    color: #ffffff !important;
    font-weight: 300 !important;
    letter-spacing: 0.1px;
}

#topnav:not(.nav-sticky):not(.inner-header) .navigation-menu > li > a:hover,
#topnav:not(.nav-sticky):not(.inner-header) .menu-like-text:hover,
#topnav:not(.nav-sticky):not(.inner-header) .buy-button a:hover {
    color: rgba(255, 255, 255, 0.82) !important;
}

#topnav:not(.nav-sticky) .buy-button svg,
#topnav:not(.nav-sticky) .navigation-menu > li > a svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

#topnav:not(.nav-sticky) .menu-arrow {
    border-color: #ffffff !important;
}

#topnav.nav-sticky .navigation-menu > li > a,
#topnav.nav-sticky .menu-like-text,
#topnav.nav-sticky .buy-button a {
    color: rgb(16, 43, 82) !important;
}

#topnav.nav-sticky .buy-button svg,
#topnav.nav-sticky .navigation-menu > li > a svg {
    fill: rgb(16, 43, 82) !important;
    color: rgb(16, 43, 82) !important;
}

#topnav.nav-sticky .menu-arrow {
    border: 0 !important;
}

#topnav.nav-sticky .menu-arrow::before {
    border-top-color: rgb(16, 43, 82) !important;
}

@media (max-width: 991px) {
    #topnav:not(.nav-sticky) #navigation {
        background: #ffffff !important;
    }

    #topnav:not(.nav-sticky) #navigation .navigation-menu > li > a,
    #topnav:not(.nav-sticky) #navigation .menu-like-text {
        color: rgb(16, 43, 82) !important;
    }

    #topnav:not(.nav-sticky) #navigation .navigation-menu > li > a svg {
        fill: rgb(16, 43, 82) !important;
        color: rgb(16, 43, 82) !important;
    }
}

/* Inner pages: header should start white, not transparent */
#topnav.inner-header {
    background: #ffffff !important;
    box-shadow: 0 0 3px rgba(60, 72, 88, 0.15) !important;
}

#topnav.inner-header .logo .site-logo-dark {
    display: inline-block !important;
}

#topnav.inner-header .logo .site-logo-light {
    display: none !important;
}

#topnav.inner-header .navigation-menu > li > a,
#topnav.inner-header .menu-like-text,
#topnav.inner-header .buy-button a {
    color: rgb(16, 43, 82) !important;
}

#topnav.inner-header .buy-button svg,
#topnav.inner-header .navigation-menu > li > a svg {
    fill: rgb(16, 43, 82) !important;
    color: rgb(16, 43, 82) !important;
}

#topnav.inner-header .menu-arrow {
    border: 0 !important;
}

#topnav.inner-header .menu-arrow::before {
    border-top-color: rgb(16, 43, 82) !important;
}

#topnav.inner-header .navbar-toggle span {
    background-color: rgb(16, 43, 82) !important;
}

@media (max-width: 767px) {
    .header_logo_bar {
        position: relative;
        display: flex !important;
        align-items: center !important;
        min-height: 64px;
        padding-left: 18px !important;
        padding-right: 18px !important;

    }

    #topnav .logo {
        flex: 0 0 auto;
    }

    .showOnMobile {
        display: flex !important;
        align-items: center !important;
        margin-left: auto;
        margin-right: 42px;
    }

    .showOnMobile .buy-button {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
    }

    .showOnMobile .buy-button .list-inline-item {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
    }

    .showOnMobile .header-phone {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px;
        padding: 0 !important;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    .showOnMobile .header-phone svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .menu-extras {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    #topnav .logo .site-logo {
        height: 50px !important;
        max-width: 98px !important;
    }

    #topnav .buy-button {
        min-height: 44px;
    }

    #topnav .navbar-toggle {
        margin-top: 0 !important;
    }

    #topnav .menu-item {
        margin-top: 0 !important;
    }

    /* Hide menu arrows on mobile */
    .navigation-menu > li > .menu-arrow {
        display: none !important;
    }
}

/* Header Button Styles */
.header-btn {
    display: flex;
    padding: 8px 20px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
    align-items: center;
}

.header-btn-login {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #1C398E !important;
}

.header-btn-getstarted {
    background-color: #FEC047;
    border-color: #FEC047;
    color: #1C398E !important;
}

.header-phone {
    color: #FFFFFF;
    padding: 8px 20px;
    display: inline-block;
}


/* Override for non-sticky header */
#topnav:not(.nav-sticky) .buy-button a.header-btn,
#topnav:not(.nav-sticky) .buy-button a.header-btn-login,
#topnav:not(.nav-sticky) .buy-button a.header-btn-getstarted {
    color: #1C398E !important;
    font-weight: 400 !important;
}


/* Phone number color for sticky header */
#topnav.nav-sticky .buy-button .header-phone,
#topnav.inner-header .buy-button .header-phone {
    color: rgb(16, 43, 82) !important;
    font-weight: 400 !important;
}


/* Override for sticky header */
#topnav.nav-sticky .buy-button a.header-btn,
#topnav.nav-sticky .buy-button a.header-btn-login,
#topnav.nav-sticky .buy-button a.header-btn-getstarted {
    color: #1C398E !important;
    font-weight: 400 !important;
}


/* Override for inner header */
#topnav.inner-header .buy-button a.header-btn,
#topnav.inner-header .buy-button a.header-btn-login,
#topnav.inner-header .buy-button a.header-btn-getstarted {
    color: #1C398E !important;
    font-weight: 400 !important;
}

/* Finance Services Mega Menu */
.finance-mega-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 20px;
    cursor: pointer;
}

#topnav:not(.nav-sticky) .finance-mega-nav-button {
    color: #ffffff;
}

#topnav.nav-sticky .finance-mega-nav-button,
#topnav.inner-header .finance-mega-nav-button {
    color: rgb(16, 43, 82);
}

.finance-mega-menu {
    position: fixed;
    inset: 0;
    z-index: 9997;
    display: none;
    pointer-events: none;
}

.finance-mega-menu.is-open {
    display: block;
    pointer-events: auto;
}

.finance-mega-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 18, 42, 0.7);
}

.finance-mega-panel {
    position: absolute;
    top: 92px;
    left: var(--finance-mega-panel-left, 50%);
    transform: var(--finance-mega-panel-transform, translateX(-50%));
    width: min(1230px, calc(100vw - 48px));
    background: #f8fbff;
    border: 1px solid #dce6f5;
    border-radius: 28px;
    box-shadow: 0 22px 70px rgba(7, 20, 45, 0.25);
    padding: 30px 42px 26px;
    font-family: Inter, sans-serif;
    color: #102b52;
}

.finance-mega-mobile-head {
    display: none;
}

.finance-mega-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: #071f45;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.finance-mega-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: #edf4ff;
    color: #1f54bb;
    font-size: 28px;
}

.finance-mega-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.finance-mega-card {
    display: flex;
    flex-direction: column;
    min-height: 460px;
    padding: 20px 20px 18px;
    background: #ffffff;
    border: 1px solid #dce6f5;
    border-radius: 10px;
}

.finance-mega-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid #dce6f5;
    background: transparent;
    color: #102b52;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.finance-mega-card-heading span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.finance-mega-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #edf4ff;
    color: #1f54bb;
    font-size: 17px;
}

.finance-mega-heading-chevron {
    color: #1f54bb;
    font-size: 22px;
}

.finance-mega-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 18px;
}

.finance-mega-card-body a {
    display: block;
    width: fit-content;
    margin-bottom: 10px;
    color: #4d5d72 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: color 0.2s ease;
}

.finance-mega-card-body a:hover {
    color: #f87171 !important;
}

.finance-mega-card-body .finance-mega-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 20px;
    color: #1358c8 !important;
    font-size: 14px;
    font-weight: 800;
}

.finance-mega-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 22px;
    align-items: center;
    margin-top: 18px;
    padding: 18px 20px;
    background: #eef5ff;
    border-radius: 10px;
}

.finance-mega-benefits div {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 12px;
    align-items: center;
    text-align: left;
}

.finance-mega-benefits span {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dfeeff;
    color: #1f54bb;
    font-size: 20px;
}

.finance-mega-benefits strong,
.finance-mega-benefits small {
    color: #1358c8;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}

.finance-mega-benefits small {
    font-weight: 600;
}

.finance-mega-benefit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: #ffb23f;
    color: #102b52 !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.finance-mega-benefit-button:hover {
    background: #f5a62c;
    color: #102b52 !important;
}

.finance-mega-mobile-more,
.finance-mega-mobile-actions {
    display: none;
}

@media (max-width: 1199px) {
    .finance-mega-panel {
        width: min(1050px, calc(100vw - 32px));
        padding: 26px 26px 22px;
    }

    .finance-mega-columns {
        gap: 16px;
    }

    .finance-mega-card {
        min-height: 480px;
    }

    .finance-mega-benefits {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .finance-mega-nav-button {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 15px;
        color: rgb(16, 43, 82) !important;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .finance-mega-menu {
        z-index: 10001;
    }

    .finance-mega-menu::before {
        display: none;
    }

    .finance-mega-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 18px 18px 24px;
        background: #ffffff;
    }

    .finance-mega-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28px;
    }

    .finance-mega-mobile-logo img {
        width: 82px;
        height: auto;
    }

    .finance-mega-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 50%;
        background: #8d8f95;
        color: #ffffff;
        font-size: 18px;
        line-height: 1;
    }

    .finance-mega-title {
        margin-bottom: 16px;
        color: #102b52;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .finance-mega-title-icon {
        width: 22px;
        height: 22px;
        border-radius: 4px;
        font-size: 14px;
    }

    .finance-mega-columns {
        display: block;
    }

    .finance-mega-card {
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid #dce3ed;
    }

    .finance-mega-card-heading {
        min-height: 42px;
        padding: 0;
        border: 0;
        color: #102b52;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

    .finance-mega-card-icon {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        font-size: 13px;
    }

    .finance-mega-heading-chevron {
        transform: rotate(0deg);
        color: #102b52;
        font-size: 18px;
        transition: transform 0.2s ease;
    }

    .finance-mega-card.is-open .finance-mega-heading-chevron {
        transform: rotate(90deg);
    }

    .finance-mega-card-body {
        display: none;
        padding: 4px 0 14px 32px;
    }

    .finance-mega-card.is-open .finance-mega-card-body {
        display: flex;
    }

    .finance-mega-card-body a {
        margin-bottom: 9px;
        color: #5d697a !important;
        font-size: 10px;
        line-height: 1.3;
    }

    .finance-mega-card-body .finance-mega-view-all {
        display: none;
    }

    .finance-mega-mobile-more {
        display: block;
        margin-top: 16px;
    }

    .finance-mega-mobile-more p {
        margin: 0 0 6px;
        color: #102b52;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .finance-mega-mobile-more a {
        display: grid;
        grid-template-columns: 22px 1fr 18px;
        align-items: center;
        min-height: 42px;
        border-top: 1px solid #dce3ed;
        color: #102b52 !important;
        font-size: 10px;
        font-weight: 600;
        text-decoration: none;
    }

    .finance-mega-mobile-more a:last-child {
        border-bottom: 1px solid #dce3ed;
    }

    .finance-mega-mobile-more a i:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #edf4ff;
        color: #1f54bb;
        font-size: 13px;
    }

    .finance-mega-mobile-more a i:last-child {
        justify-self: end;
    }

    .finance-mega-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 28px 0 16px;
    }

    .finance-mega-mobile-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 34px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        text-decoration: none;
    }

    .finance-mega-signin {
        border: 1px solid #102b52;
        background: #ffffff;
        color: #102b52 !important;
    }

    .finance-mega-quote {
        border: 1px solid #ffb23f;
        background: #ffb23f;
        color: #102b52 !important;
    }

    .finance-mega-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
        padding: 12px 8px;
        border-radius: 8px;
    }

    .finance-mega-benefits div {
        grid-template-columns: 22px 1fr;
        column-gap: 6px;
    }

    .finance-mega-benefits span {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .finance-mega-benefits strong,
    .finance-mega-benefits small {
        font-size: 7px;
        line-height: 1.15;
    }

    .finance-mega-benefit-button {
        display: none;
    }

    body.finance-mega-open {
        overflow: hidden;
    }
}

@media (max-width: 380px) {
    .finance-mega-panel {
        padding-left: 13px;
        padding-right: 13px;
    }

    .finance-mega-mobile-actions {
        gap: 6px;
    }

    .finance-mega-benefits {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.finance-mega-trigger {
    position: relative;
    padding: 0 8px;
}

.finance-mega-trigger::after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: -16px;
    bottom: -28px;
    display: block;
}

.finance-mega-nav-button {
    position: relative;
    z-index: 1;
    padding: 0 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.finance-mega-title {
    font-weight: 650;
    letter-spacing: -0.025em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.finance-mega-card-heading {
    font-weight: 650;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.finance-mega-card-body a {
    margin-bottom: 14px;
    font-weight: 450;
    line-height: 1.35;
}

.finance-mega-card-body .finance-mega-view-all {
    font-weight: 650;
    letter-spacing: -0.005em;
}

.finance-mega-benefit-button {
    font-weight: 650;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
}

.finance-mega-benefits strong,
.finance-mega-benefits small {
    font-weight: 650;
}

.finance-mega-benefits small {
    font-weight: 500;
}

@media (max-width: 991px) {
    .finance-mega-panel {
        padding: 20px 18px 26px;
    }

    .finance-mega-mobile-head {
        margin-bottom: 24px;
    }

    .finance-mega-title {
        gap: 10px;
        margin-bottom: 18px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.025em;
    }

    .finance-mega-title-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        font-size: 16px;
    }

    .finance-mega-card {
        border-bottom: 1px solid #dce3ed;
    }

    .finance-mega-card-heading {
        min-height: 50px;
        font-size: 13px;
        font-weight: 650;
        letter-spacing: -0.005em;
    }

    .finance-mega-card-icon {
        width: 24px;
        height: 24px;
        border-radius: 5px;
        font-size: 15px;
    }

    .finance-mega-heading-chevron {
        font-size: 20px;
    }

    .finance-mega-card-body {
        padding: 6px 0 18px 34px;
    }

    .finance-mega-card-body a {
        margin-bottom: 12px;
        font-size: 12px;
        font-weight: 450;
        line-height: 1.45;
    }

    .finance-mega-mobile-more {
        margin-top: 20px;
    }

    .finance-mega-mobile-more p {
        margin-bottom: 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .finance-mega-mobile-more a {
        grid-template-columns: 28px 1fr 20px;
        min-height: 48px;
        font-size: 12px;
        font-weight: 550;
    }

    .finance-mega-mobile-more a i:first-child {
        width: 24px;
        height: 24px;
        border-radius: 5px;
        font-size: 15px;
    }

    .finance-mega-mobile-actions {
        gap: 10px;
        margin: 26px 0 18px;
    }

    .finance-mega-mobile-actions a {
        min-height: 40px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .finance-mega-benefits {
        gap: 10px;
        padding: 14px 10px;
    }

    .finance-mega-benefits div {
        grid-template-columns: 26px 1fr;
        column-gap: 7px;
    }

    .finance-mega-benefits span {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .finance-mega-benefits strong,
    .finance-mega-benefits small {
        font-size: 8.5px;
        line-height: 1.2;
    }
}

@media (max-width: 380px) {
    .finance-mega-card-heading {
        font-size: 12.5px;
    }

    .finance-mega-card-body a,
    .finance-mega-mobile-more a {
        font-size: 11.5px;
    }

    .finance-mega-benefits strong,
    .finance-mega-benefits small {
        font-size: 7.8px;
    }
}

/* Final mega menu responsive fixes */
.finance-mega-nav-button {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 20px;
    text-transform: none;
}

#topnav .navigation-menu {
    flex-wrap: nowrap;
    align-items: center;
}

#topnav .navigation-menu > li,
#topnav .navigation-menu > li.finance-mega-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-height: 40px;
    flex: 0 0 auto;
}

#topnav .navigation-menu > li > a,
#topnav .navigation-menu > li > .finance-mega-nav-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    min-height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: inherit;
    font-size: 18px !important;
    font-weight: 300 !important;
    letter-spacing: 0.1px;
    line-height: 20px !important;
    white-space: nowrap;
}

#topnav.nav-sticky .navigation-menu > li > .finance-mega-nav-button,
#topnav.inner-header .navigation-menu > li > .finance-mega-nav-button {
    color: rgb(16, 43, 82) !important;
}

#topnav:not(.nav-sticky):not(.inner-header) .navigation-menu > li > .finance-mega-nav-button {
    color: #ffffff !important;
}

@media (min-width: 992px) and (max-width: 1240px) {
    #topnav .navigation-menu {
        flex-wrap: nowrap;
        gap: 0;
    }

    #topnav .navigation-menu > li,
    #topnav .navigation-menu > li.finance-mega-trigger {
        min-height: 28px;
    }

    #topnav .navigation-menu > li > a,
    #topnav .navigation-menu > li > .finance-mega-nav-button {
        min-height: 28px;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 18px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 991px) {
    /*
                 * Prevent the old white mobile menu from appearing.
                 * The hamburger should only open the new full-screen mega menu.
                 */
    #navigation {
        background: transparent !important;
        box-shadow: none !important;
        padding-right: 0 !important;
    }

    #navigation > .navigation-menu {
        display: none !important;
    }

    #topnav:not(.nav-sticky) #navigation {
        background: transparent !important;
    }

    .finance-mega-menu.is-open {
        display: block !important;
    }

    .finance-mega-menu.is-open .finance-mega-panel {
        display: block !important;
    }

    /*
                 * Mobile bottom benefits bar: larger text but still compact.
                 */
    .finance-mega-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 14px 10px;
        border-radius: 10px;
    }

    .finance-mega-benefits div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        min-width: 0;
        text-align: center;
    }

    .finance-mega-benefits span {
        width: 28px;
        height: 28px;
        margin-bottom: 2px;
        font-size: 14px;
    }

    .finance-mega-benefits strong,
    .finance-mega-benefits small {
        display: block;
        width: 100%;
        color: #1358c8;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .finance-mega-benefits small {
        font-size: 9px;
        font-weight: 500;
    }
}

@media (max-width: 380px) {
    .finance-mega-benefits {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .finance-mega-benefits span {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .finance-mega-benefits strong {
        font-size: 9px;
    }

    .finance-mega-benefits small {
        font-size: 8px;
    }
}

.header_logo_bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
}

#navigation {
    flex: 1 1 auto;
    min-width: 0;
}

#topnav .dontShowOnMobile {
    flex: 0 0 auto;
    margin-left: 12px;
}

#topnav .buy-button {
    white-space: nowrap;
}

@media (min-width: 1241px) and (max-width: 1380px) {
    .header_logo_bar {
        padding-left: 28px !important;
        padding-right: 28px !important;
        gap: 10px;
    }

    #topnav .logo .site-logo {
        height: 76px;
        max-width: 150px;
    }

    #topnav .navigation-menu {
        padding-left: 12px !important;
    }

    #topnav .navigation-menu > li > a,
    #topnav .navigation-menu > li > .finance-mega-nav-button {
        font-size: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .header-phone {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
    }

    .header-btn {
        min-width: 104px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1240px) {
    .header_logo_bar {
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: 8px;
    }

    #topnav .logo .site-logo {
        height: 64px !important;
        max-width: 124px !important;
    }

    #topnav .navigation-menu {
        padding-left: 6px !important;
    }

    #topnav .navigation-menu > li > a,
    #topnav .navigation-menu > li > .finance-mega-nav-button {
        font-size: 13px !important;
        line-height: 16px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #topnav .buy-button {
        min-height: 58px;
    }

    .header-phone {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 11px;
    }

    .header-phone svg {
        width: 13px;
        height: 13px;
    }

    .header-btn {
        min-width: 86px;
        padding: 7px 10px;
        font-size: 12px;
        border-radius: 8px;
    }

    .buy-button .list-inline-item {
        margin-right: 4px !important;
    }
}

/*
             * Switch earlier to the mobile header before the desktop nav/buttons overlap.
             */
@media (max-width: 1100px) {
    .dontShowOnMobile {
        display: none !important;
    }

    .showOnMobile {
        display: flex !important;
    }

    .menu-extras {
        display: flex !important;
    }

    #navigation > .navigation-menu {
        display: none !important;
    }

    #navigation {
        background: transparent !important;
        box-shadow: none !important;
        padding-right: 0 !important;
    }

    #topnav:not(.nav-sticky) #navigation {
        background: transparent !important;
    }
}

/*
             * Remove the visible white strip/border under the header at compressed widths.
             */
@media (max-width: 1100px) {
    #topnav,
    #topnav.defaultscroll,
    #topnav.sticky {
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    #topnav.inner-header,
    #topnav.nav-sticky {
        box-shadow: none !important;
    }

    #topnav .header_logo_bar {
        border-bottom: 0 !important;
    }
}

/* Keep desktop header order fixed: logo, nav, phone/buttons */
@media (min-width: 1101px) {
    #topnav .logo {
        order: 1;
        flex: 0 0 auto;
    }

    #navigation {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
    }

    #topnav .dontShowOnMobile {
        order: 3;
        flex: 0 0 auto;
        margin-left: 12px !important;
    }

    #topnav .showOnMobile {
        display: none !important;
    }

    #topnav .menu-extras {
        order: 4;
    }

    #topnav .navigation-menu {
        justify-content: flex-start !important;
    }

    #topnav .buy-button {
        justify-content: flex-end;
    }
}

@media (min-width: 1101px) and (max-width: 1380px) {
    #topnav .dontShowOnMobile {
        margin-left: 8px !important;
    }
}

/* Final header alignment and breakpoint fixes */
@media (min-width: 1101px) {
    .header_logo_bar {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    #topnav .logo {
        order: 1;
        flex: 0 0 auto;
    }

    #navigation {
        order: 2;
        display: flex !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        align-items: center;
        padding-right: 0 !important;
    }

    #topnav .navigation-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-width: 0;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }

    #topnav .navigation-menu > li,
    #topnav .navigation-menu > li.finance-mega-trigger {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 40px !important;
    }

    #topnav .dontShowOnMobile {
        order: 3;
        display: block !important;
        flex: 0 0 auto;
        margin-left: 12px !important;
    }

    #topnav .dontShowOnMobile .buy-button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 40px !important;
        margin-bottom: 0 !important;
    }

    #topnav .showOnMobile {
        display: none !important;
    }

    #topnav .menu-extras {
        order: 4;
        display: none !important;
    }
}

@media (min-width: 1381px) and (max-width: 1450px) {
    .header_logo_bar {
        padding-left: 32px !important;
        padding-right: 32px !important;
        gap: 8px;
    }

    #topnav .logo .site-logo {
        height: 78px !important;
        max-width: 150px !important;
    }

    #topnav .navigation-menu {
        padding-left: 10px !important;
    }

    #topnav .navigation-menu > li > a,
    #topnav .navigation-menu > li > .finance-mega-nav-button {
        font-size: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .header-phone {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 13px !important;
    }

    .header-btn {
        min-width: 102px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}

/*
             * Compressed header: show phone + hamburger on the right.
             * This prevents the empty/awkward 1100px state.
             */
@media (max-width: 1100px) {
    .header_logo_bar {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 64px;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #topnav,
    #topnav .container-fluid,
    #topnav .header_logo_bar {
        max-width: 100vw !important;
    }

    #topnav .logo {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
    }

    #navigation {
        order: 5;
        flex: 0 0 0;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: visible;
        padding-right: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #navigation > .navigation-menu {
        display: none !important;
    }

    #topnav .dontShowOnMobile {
        display: none !important;
    }

    #topnav .showOnMobile {
        order: 3;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: auto !important;
        margin-right: 10px !important;
    }

    #topnav .showOnMobile .buy-button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 44px !important;
        margin-bottom: 0 !important;
        min-width: 0;
    }

    #topnav .showOnMobile .header-phone {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px;
        padding: 0 !important;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    #topnav .showOnMobile .header-phone svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    #topnav .menu-extras {
        order: 4;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #topnav .navbar-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
    }

    #topnav,
    #topnav.defaultscroll,
    #topnav.sticky,
    #topnav.inner-header,
    #topnav.nav-sticky {
        border-bottom: 0 !important;
        overflow-x: clip !important;
    }
}

@media (max-width: 420px) {
    #topnav .logo .site-logo {
        height: 46px !important;
        max-width: 88px !important;
    }

    #topnav .showOnMobile {
        margin-right: 8px !important;
    }

    #topnav .showOnMobile .header-phone {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .showOnMobile {
        margin-left: auto !important;
        margin-right: 14px !important;
    }

    .menu-extras {
        position: static !important;
        transform: none !important;
        right: auto !important;
    }
}

@media (max-width: 991px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #topnav,
    main,
    section,
    .container,
    .container-fluid,
    .row {
        max-width: 100vw;
    }
}

/*
             * Make the Finance Services hover target a real bounding box.
             */
.finance-mega-trigger {
    position: relative;
    isolation: isolate;
}

.finance-mega-trigger::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -14px;
    right: -14px;
    top: -18px;
    bottom: -34px;
    display: block;
    pointer-events: auto;
}

.finance-mega-nav-button {
    position: relative;
    z-index: 2;
}

.finance-mega-menu.is-open .finance-mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -34px;
    height: 34px;
    display: block;
}


/* ===== app/Views/home/index.php ===== */
.modal-backdrop.show {
    opacity: 0.7;
}

#fundingModal .modal-content {
    background-color: #203151;
    border-radius: 20px;
    border: none;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#fundingModal .modal-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    width: 100%;
}

#fundingModal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
    border: none;
    box-shadow: none;
}

#fundingModal .btn-close:hover {
    opacity: 0.8;
}

#fundingModal .form-control, #fundingModal .form-select {
    background: linear-gradient(90deg, #E6E6FA 0%, #FFDAB9 100%);
    border: 2px solid #000;
    border-radius: 50px;
    height: 50px;
    color: #000;
    font-weight: 500;
    padding-left: 20px;
    margin-bottom: 15px;
}

#fundingModal .btn-find {
    background-color: #FF6F61;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: 600;
    width: auto;
    min-width: 200px;
    display: block;
    margin-top: 10px;
}

#fundingModal .btn-find:hover {
    background-color: #ff5a4d;
}

.modal {
    z-index: 10055 !important;
}

body.modal-open {
    overflow: hidden;
}

.head_bal_sec {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    padding: 150px 0 65px !important;
    background: url('/assets/images/web/blogs/article-hero-bg.jpg') no-repeat center center !important;
    background-size: cover !important;
}

.hero-content-wrap {
    position: relative;
    z-index: 6;
}

.hero-cloud-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.hero-cloud {
    position: absolute;
    width: clamp(90px, 12vw, 190px);
    height: auto;
    opacity: 0.22;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.06));
    will-change: transform;
}

.hero-cloud-4 {
    bottom: 8%;
    left: 18%;
    width: clamp(100px, 11vw, 175px);
    opacity: 0.16;
    animation: heroCloudFloat 16s ease-in-out infinite;
}

.hero-cloud-5 {
    bottom: 19%;
    right: 2%;
    width: clamp(100px, 12vw, 190px);
    opacity: 0.24;
    animation: heroCloudFloat 13s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes heroCloudDriftRight {
    0% {
        transform: translate3d(-12vw, 0, 0);
    }
    100% {
        transform: translate3d(118vw, -18px, 0);
    }
}

@keyframes heroCloudDriftLeft {
    0% {
        transform: translate3d(10vw, 0, 0);
    }
    100% {
        transform: translate3d(-118vw, 16px, 0);
    }
}

@keyframes heroCloudFloat {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(18px, -14px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cloud {
        animation: none !important;
    }
}

.hero-rate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff716f;
    color: #ffffff;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 24px;
    margin-left: 4px;
}

.hero-main-title {
    color: #ffffff !important;
    font-size: clamp(38px, 4.1vw, 56px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.4px;
    font-weight: 500;
    margin-bottom: 50px !important;
    max-width: 920px;
}

.hero-main-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: clamp(22px, 2.4vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.6px;
    font-weight: 300;
    margin-top: 12px;
}

.hero-search-card {
    position: relative;
    z-index: 7;
    width: min(100%, 945px);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.hero-search-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #e5e8ef;
    background: #ffffff;
}

.hero-search-tab {
    position: relative;
    border: 0;
    border-bottom: 3px solid transparent;
    background: #ffffff;
    min-height: 52px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5565;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

.hero-search-tab:first-child {
    border-top-left-radius: 14px;
}

.hero-search-tab:last-child {
    border-top-right-radius: 14px;
}

.hero-search-tab:hover {
    color: #1265ff;
    background: #f8fbff;
}

.hero-search-tab:focus,
.hero-search-tab:active,
.hero-search-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.hero-search-tab.active {
    color: #1265ff;
    background: #f8fbff;
    border-bottom-color: #0a8fff;
}

.hero-search-body {
    padding: 26px 25px 24px;
}

.hero-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 215px;
    grid-template-areas:
            "amount term business search"
            "popular popular popular popular";
    gap: 24px;
    align-items: end;
}

.hero-field-amount {
    grid-area: amount;
}

.hero-field-term {
    grid-area: term;
}

#heroBusinessTypeField {
    grid-area: business;
}

#heroPropertyValueField {
    grid-area: business;
    display: none;
}

.hero-field-label {
    display: block;
    color: #4a5568;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 9px;
}

.hero-input-wrap {
    position: relative;
}

.hero-input-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b95a5;
    font-size: 19px;
    z-index: 2;
    pointer-events: none;
}

.hero-search-input,
.hero-search-select {
    width: 100%;
    height: 54px;
    border: 1px solid #d3d8e2;
    border-radius: 30px;
    background: #f9fafc;
    color: #343d4c;
    font-size: 16px;
    font-weight: 400;
    padding: 0 14px 0 43px;
    outline: none;
    box-shadow: none;
}

.hero-search-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.hero-search-input:focus,
.hero-search-select:focus {
    border-color: #1265ff;
    background: #ffffff;
}

.hero-search-btn {
    grid-area: search;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 30px;
    background: #ffc04c;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.2s ease;
}

.hero-search-btn:hover:not(:disabled) {
    background: #f5ad28;
    color: #111827;
}

.hero-search-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hero-popular-row {
    grid-area: popular;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.hero-popular-label {
    color: #667085;
    font-size: 13px;
    margin-right: 4px;
    white-space: nowrap;
}

.hero-popular-chip {
    border: 0;
    background: #eef5ff;
    color: #1265ff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.2s ease;
}

.hero-search-actions-divider {
    width: 100%;
    height: 1px;
    background: #d9e0eb;
    margin: 18px 0;
}

.hero-secondary-actions {
    display: grid;
    grid-template-columns: minmax(240px, 260px) 1fr;
    align-items: center;
    gap: 20px;
}

.hero-quick-quote-btn {
    width: 100%;
    min-height: 39px;
    border: 0;
    border-radius: 999px;
    background: #ff6b6f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.hero-quick-quote-btn:hover {
    background: #f95b60;
    color: #ffffff;
}

.hero-speak-expert {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hero-speak-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #144ba7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 22px;
}

.hero-speak-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hero-speak-title {
    color: #144ba7;
    font-size: 14px;
    font-weight: 800;
}

.hero-speak-subtitle {
    color: #5f6672;
    font-size: 14px;
    font-weight: 400;
    margin-top: 2px;
}

.hero-option input {
    width: 16px;
    height: 16px;
    accent-color: #1265ff;
}

.mp-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 12, 28, 0.72);
    overflow-y: auto;
}

.mp-modal.is-open {
    display: flex;
}

.mp-modal-panel {
    position: relative;
    width: min(100%, 845px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 10px;
    background: #f8f9fc;
    color: #102c52;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.28);
    padding: 58px 70px 44px;
}

.mp-modal-panel--success {
    width: min(100%, 966px);
    text-align: center;
    padding: 50px 70px 56px;
}

.mp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 44, 82, 0.06);
    color: #102c52;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.mp-modal-art {
    position: absolute;
    top: 34px;
    right: 0;
    width: 290px;
    max-width: 36%;
    pointer-events: none;
    opacity: 0.95;
}

.mp-modal-kicker {
    color: #d88a00;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.mp-modal-title {
    color: #102c52 !important;
    font-size: clamp(34px, 4vw, 38px);
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -1.1px;
    margin: 0 0 14px;
    max-width: 520px;
}

.mp-modal-copy {
    color: #102c52;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 28px;
}

.mp-funding-summary {
    position: relative;
    border: 1px solid #dde5ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(16, 44, 82, 0.06);
    padding: 22px 20px 20px;
    margin: 26px 0 24px;
    max-width: 700px;
}

.mp-funding-summary-title {
    color: #d88a00;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mp-lenders-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 4px;
    background: #dfe7f1;
    color: #102c52;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 4px 10px;
}

.mp-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mp-summary-card {
    min-height: 64px;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
    background: #ffffff;
    padding: 11px 12px;
}

.mp-summary-label {
    display: block;
    color: #667692;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.mp-summary-value {
    color: #102c52;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.mp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 16px;
    max-width: 620px;
}

.mp-form-grid--compare {
    grid-template-columns: 255px 255px;
    max-width: 540px;
}

.mp-form-field--full {
    grid-column: 1 / -1;
}

.mp-label {
    display: block;
    color: #102c52;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.mp-input,
.mp-select,
.mp-textarea {
    width: 100%;
    border: 1px solid #cbd4df;
    border-radius: 999px;
    background: #ffffff;
    color: #102c52;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    transition: 0.2s ease;
}

.mp-input,
.mp-select {
    height: 43px;
    padding: 0 31px;
}

.mp-textarea {
    min-height: 96px;
    resize: vertical;
    border-radius: 24px;
    padding: 22px 31px;
}

.mp-input::placeholder,
.mp-textarea::placeholder {
    color: #898989;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus {
    border-color: #144ba7;
}

.mp-consent {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #141827;
    font-size: 14px;
    line-height: 1.3;
    margin: 18px 0 24px;
    max-width: 620px;
}

.mp-consent input {
    width: 21px;
    height: 21px;
    accent-color: #102c52;
    flex: 0 0 auto;
}

.mp-submit-btn {
    width: min(100%, 348px);
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: #ff6b6f;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.mp-submit-btn:hover:not(:disabled) {
    background: #f95b60;
    color: #ffffff;
}

.mp-submit-btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.mp-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: center;
    max-width: 618px;
    border-radius: 28px;
    background: #e8f3ff;
    padding: 16px 18px;
    margin-top: 34px;
}

.mp-trust-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 10px;
    color: #144ba7;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
}

.mp-trust-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    color: #144ba7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.mp-success-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1px solid #19b35b;
    background: #d9f7e4;
    color: #12a052;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-bottom: 19px;
}

.mp-success-kicker {
    color: #d88a00;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mp-success-title {
    color: #102c52 !important;
    font-size: clamp(30px, 4vw, 38px);
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: -1.2px;
    margin: 0 auto 14px;
    max-width: 560px;
}

.mp-success-copy {
    color: #617087;
    font-size: 14px;
    margin-bottom: 32px;
}

.mp-success-card {
    width: min(100%, 678px);
    margin: 0 auto 24px;
    text-align: left;
    border: 1px solid #dfe6f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(16, 44, 82, 0.08);
    padding: 32px;
}

.mp-success-card h3 {
    color: #102c52;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -0.6px;
    margin: 0 0 14px;
}

.mp-success-card p {
    color: #56647d;
    font-size: 14px;
    line-height: 1.55;
    max-width: 560px;
    margin-bottom: 24px;
}

.mp-success-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 44px;
    margin-bottom: 26px;
}

.mp-success-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #102c52;
    font-size: 13px;
    font-weight: 900;
}

.mp-success-benefit-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d9f7e4;
    color: #12a052;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 900;
}

.mp-success-cta {
    width: 100%;
    min-height: 57px;
    border: 0;
    border-radius: 999px;
    background: #ff6b6f;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
}

.mp-success-cta:hover {
    background: #f95b60;
    color: #ffffff;
}

.mp-credit-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #102c52;
    font-size: 12px;
    text-align: center;
    margin-top: 23px;
}

.mp-callback-link {
    border: 0;
    background: transparent;
    color: #102c52;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    margin-top: 2px;
    padding: 0;
}

.tagline {
    position: relative !important;
    z-index: 10;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.hometagline {
    bottom: auto !important;
    margin-top: 0 !important;
}

.find-fund-sec {
    position: relative;
    z-index: 1;
    background: #fff !important;
    background-image: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hero-tab-emoji {
    font-size: 16px;
    line-height: 1;
}

.text-slider {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.text-slider .move-text {
    display: inline-block;
    margin: 0;
    padding: 0;
    animation: none !important;
    width: max-content;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.text-slider .move-text li {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.text-slider img {
    height: 60px !important;
    width: auto !important;
    max-width: 200px;
    object-fit: contain;
    vertical-align: middle;
    background-color: transparent !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.text-slider .move-text.animated {
    animation: infiniteScroll 80s linear infinite !important;
}

@keyframes infiniteScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.text-slider:hover .move-text.animated {
    animation-play-state: paused;
}

@media (max-width: 1399px) {
    .head_bal_sec {
        min-height: 700px;
        padding-top: 145px !important;
    }

    .hero-search-card {
        width: min(100%, 945px);
    }

    .hero-search-grid {
        grid-template-columns: 1fr 1fr 1fr 215px;
        gap: 24px;
    }
}

@media (max-width: 1199px) {
    .head_bal_sec {
        min-height: auto;
        padding: 145px 0 70px !important;
    }

    .hero-main-title {
        max-width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content-wrap {
        text-align: center;
    }

    .hero-search-card {
        width: 100%;
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .hero-search-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "amount term"
                "popular popular"
                "business search";
    }

    .hero-search-btn {
        grid-column: auto;
    }
}

@media (max-width: 991px) {
    .mp-modal-panel {
        padding: 46px 34px 36px;
    }

    .mp-modal-panel--success {
        padding: 44px 28px 42px;
    }

    .mp-modal-art {
        width: 230px;
        opacity: 0.45;
    }

    .mp-form-grid,
    .mp-form-grid--compare {
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .head_bal_sec {
        min-height: auto;
        padding: 72px 0 24px !important;
    }

    .hero-content-wrap {
        text-align: left;
    }

    .hero-rate-badge {
        display: none;
    }

    .hero-main-title {
        font-size: 28px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px;
        margin-bottom: 14px !important;
        text-align: left;
        margin-top: 25px !important;
    }

    .hero-main-subtitle {
        font-size: 16px !important;
        line-height: 1.18 !important;
        letter-spacing: -0.25px;
        margin-top: 8px;
    }

    .hero-search-card {
        width: 100%;
        border-radius: 18px;
    }

    .hero-search-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .hero-search-tab {
        min-height: 50px;
        font-size: 13px;
        border-bottom-width: 3px;
        padding-left: 6px;
        padding-right: 6px;
        white-space: nowrap;
        gap: 5px;
    }

    .hero-search-tab:first-child {
        border-top-left-radius: 18px;
        border-top-right-radius: 0;
    }

    .hero-search-tab:last-child {
        border-top-right-radius: 18px;
    }

    .hero-search-body {
        padding: 18px 18px 20px;
    }

    .hero-search-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
                "amount"
                "popular"
                "term"
                "business"
                "search";
        gap: 14px;
    }

    .hero-search-btn {
        grid-column: auto;
    }

    .hero-secondary-actions {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hero-speak-expert {
        justify-content: center;
    }

    .hero-search-input,
    .hero-search-select,
    .hero-search-btn {
        height: 50px;
        font-size: 16px;
        border-radius: 26px;
    }

    .hero-field-label {
        font-size: 12px;
        text-align: left;
        margin-bottom: 7px;
    }

    .hero-popular-chip {
        font-size: 11px;
        padding: 6px 10px;
    }

    .hero-popular-row {
        gap: 6px;
    }

    .hero-popular-label {
        display: none;
    }

    .mp-modal {
        padding: 10px;
        align-items: flex-start;
    }

    .mp-modal-panel,
    .mp-modal-panel--success {
        width: 100%;
        max-height: none;
        min-height: calc(100vh - 20px);
        border-radius: 8px;
        padding: 42px 20px 30px;
    }

    .mp-modal-art {
        width: 190px;
        max-width: 48%;
        top: 52px;
        opacity: 0.28;
    }

    .mp-modal-title {
        font-size: 31px !important;
        max-width: 100%;
    }

    .mp-modal-copy {
        max-width: 100%;
    }

    .mp-funding-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 18px 14px;
    }

    .mp-funding-summary-title {
        margin-bottom: 0;
        margin-right: auto;
    }

    .mp-lenders-badge {
        position: static;
        display: inline-flex;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .mp-summary-grid {
        flex-basis: 100%;
    }

    .mp-summary-grid,
    .mp-form-grid,
    .mp-form-grid--compare,
    .mp-trust-strip,
    .mp-success-benefits {
        grid-template-columns: 1fr;
    }

    .mp-input,
    .mp-select {
        height: 43px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .mp-textarea {
        padding-left: 22px;
        padding-right: 22px;
    }

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

    .mp-trust-strip {
        border-radius: 22px;
        gap: 12px;
    }

    .mp-success-card {
        padding: 24px 18px;
    }

    .mp-success-cta {
        min-height: 52px;
        font-size: 14px;
        text-align: center;
    }
}

@media (max-width: 430px) {
    .hero-search-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .hero-search-tab {
        min-height: 48px;
        font-size: 12px;
        white-space: nowrap;
    }

    .hero-search-tab:first-child {
        border-top-left-radius: 18px;
        border-top-right-radius: 0;
    }

    .hero-search-tab:last-child {
        border-top-right-radius: 18px;
    }
}

@media (max-width: 380px) {
    .head_bal_sec {
        padding-top: 66px !important;
    }

    .hero-main-title {
        font-size: 28px !important;
    }

    .hero-main-subtitle {
        font-size: 16px !important;
    }

    .hero-search-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mp-modal-panel,
    .mp-modal-panel--success {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* === Modal/hero polish overrides - safe to keep at the end of this style block === */
.hero-search-btn {
    color: #111827;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-search-btn:hover:not(:disabled) {
    color: #111827;
}

.hero-quick-quote-btn,
.mp-submit-btn,
.mp-success-cta {
    background: #ff716f;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-quick-quote-btn:hover,
.mp-submit-btn:hover:not(:disabled),
.mp-success-cta:hover {
    background: #ff6361;
}

.hero-speak-title {
    font-weight: 700;
}

.hero-speak-subtitle {
    font-weight: 400;
}

.mp-modal-kicker,
.mp-funding-summary-title,
.mp-success-kicker {
    font-weight: 700;
}

.mp-modal-title,
.mp-success-title {
    font-weight: 550;
}

.mp-modal-copy,
.mp-success-copy,
.mp-success-card p {
    font-weight: 400;
}

.mp-modal-copy strong {
    font-weight: 700;
}

#compareDealsModal .mp-modal-art {
    z-index: 0;
    pointer-events: none;
}

#compareDealsModal .mp-modal-kicker,
#compareDealsModal .mp-modal-title,
#compareDealsModal .mp-modal-copy,
#compareDealsModal .mp-funding-summary,
#compareDealsModal form {
    position: relative;
    z-index: 2;
}

#compareDealsModal .mp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.mp-lenders-badge {
    font-weight: 700;
    line-height: 1;
    padding: 4px 10px;
}

.mp-summary-label,
.mp-label {
    font-weight: 700;
}

.mp-summary-value,
.mp-success-card h3,
.mp-success-benefit {
    font-weight: 700;
}

.mp-input,
.mp-select,
.mp-textarea {
    font-weight: 400;
}

.mp-input::placeholder,
.mp-textarea::placeholder {
    color: #898989;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.mp-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 54px;
    color: #898989;
    background-color: #ffffff;
    background-image: linear-gradient(45deg, transparent 50%, #8b95a5 50%),
    linear-gradient(135deg, #8b95a5 50%, transparent 50%);
    background-position: calc(100% - 32px) 50%,
    calc(100% - 25px) 50%;
    background-size: 7px 7px,
    7px 7px;
    background-repeat: no-repeat;
}

.mp-select.has-value {
    color: #102c52;
}

.mp-input:invalid:not(:placeholder-shown),
.mp-textarea:invalid:not(:placeholder-shown) {
    border-color: #ff716f;
}

.mp-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mp-success-icon i {
    display: block;
    line-height: 1;
    transform: translateY(1px);
}

.mp-callback-link {
    font-weight: 600;
}

@media (max-width: 767px) {
    .mp-select {
        padding-right: 50px;
        background-position: calc(100% - 30px) 50%,
        calc(100% - 23px) 50%;
    }
}

/* === Final hero/modal polish overrides === */

.hero-search-btn {
    font-size: 14px;
}

#quickQuoteModal .mp-modal-panel {
    overflow: hidden;
}

#quickQuoteModal .mp-modal-art {
    z-index: 0;
    opacity: 0.22;
    pointer-events: none;
}

#quickQuoteModal .mp-modal-kicker,
#quickQuoteModal .mp-modal-title,
#quickQuoteModal .mp-modal-copy,
#quickQuoteModal form,
#quickQuoteModal .mp-modal-close {
    position: relative;
    z-index: 2;
}

#quickQuoteModal .mp-form-grid {
    max-width: none;
    width: 100%;
}

.mp-input::placeholder,
.mp-textarea::placeholder {
    color: #a7adb8;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.mp-select {
    font-style: italic;
}

.mp-select.has-value {
    font-style: normal;
}

.mp-submit-success-animate .mp-modal-panel--success {
    animation: mpSuccessPanelPop 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mp-submit-success-animate .mp-success-icon {
    animation: mpSuccessIconPop 780ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.mp-submit-success-animate .mp-success-icon::after {
    content: "";
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid rgba(25, 179, 91, 0.32);
    animation: mpSuccessRipple 950ms ease-out 180ms both;
}

.mp-submit-success-animate .mp-success-kicker,
.mp-submit-success-animate .mp-success-title,
.mp-submit-success-animate .mp-success-copy {
    animation: mpSuccessFadeUp 620ms ease-out both;
}

.mp-submit-success-animate .mp-success-title {
    animation-delay: 120ms;
}

.mp-submit-success-animate .mp-success-copy {
    animation-delay: 190ms;
}

.mp-submit-success-animate .mp-success-card {
    animation: mpSuccessCardSlide 700ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

@keyframes mpSuccessPanelPop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.975);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mpSuccessIconPop {
    0% {
        opacity: 0;
        transform: scale(0.45) rotate(-10deg);
    }
    65% {
        opacity: 1;
        transform: scale(1.08) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes mpSuccessRipple {
    0% {
        opacity: 0.75;
        transform: scale(0.72);
    }
    100% {
        opacity: 0;
        transform: scale(1.65);
    }
}

@keyframes mpSuccessFadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mpSuccessCardSlide {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-submit-success-animate .mp-modal-panel--success,
    .mp-submit-success-animate .mp-success-icon,
    .mp-submit-success-animate .mp-success-icon::after,
    .mp-submit-success-animate .mp-success-kicker,
    .mp-submit-success-animate .mp-success-title,
    .mp-submit-success-animate .mp-success-copy,
    .mp-submit-success-animate .mp-success-card {
        animation: none !important;
    }
}

@media (max-width: 767px) {
    .hero-search-btn {
        font-size: 14px;
    }

    #quickQuoteModal .mp-modal-art {
        opacity: 0.16;
    }
}

/* === Quick quote modal fixes === */

.mp-input::placeholder,
.mp-textarea::placeholder {
    font-style: normal;
}

.mp-select {
    font-style: normal;
}

#quickQuoteModal .mp-modal-panel {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

#quickQuoteModal .mp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    margin: 0;
    z-index: 10;
}

#quickQuoteModal .mp-modal-art {
    top: 34px;
    right: 0;
    width: 290px;
    max-width: 36%;
    opacity: 0.95;
    z-index: 0;
    pointer-events: none;
}

#quickQuoteModal .mp-modal-kicker,
#quickQuoteModal .mp-modal-title,
#quickQuoteModal .mp-modal-copy,
#quickQuoteModal form {
    position: relative;
    z-index: 2;
}

#quickQuoteModal .mp-input,
#quickQuoteModal .mp-select,
#quickQuoteModal .mp-textarea {
    position: relative;
    z-index: 3;
    background-color: #ffffff;
}

@media (max-width: 991px) {
    #quickQuoteModal .mp-modal-art {
        width: 230px;
        max-width: 34%;
        opacity: 0.95;
    }
}

@media (max-width: 767px) {
    #quickQuoteModal .mp-modal-close {
        top: 12px;
        right: 12px;
    }

    #quickQuoteModal .mp-modal-art {
        width: 170px;
        max-width: 44%;
        top: 56px;
        right: -18px;
        opacity: 0.55;
    }
}

/* === Circular privacy checkbox styling === */
.mp-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 21px;
    height: 21px;
    min-width: 21px;
    border: 2px solid #727985;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.mp-consent input[type="checkbox"]::after {
    content: "";
    width: 7px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    margin-top: -2px;
    transition: transform 0.16s ease;
}

.mp-consent input[type="checkbox"]:checked {
    border-color: #102c52;
    background: #102c52;
}

.mp-consent input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

.mp-consent input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16, 44, 82, 0.16);
}


/* ===== app/Views/home/blog_details.php ===== */
/* General Styles */
.accordion .accordion-item {
    -webkit-box-shadow: none;
    box-shadow: none;
}


/* Sidebar Styles */
.bsearch_box {
    border-radius: 10px;
    overflow: hidden;
}

.border-gray {
    border: 1px solid #eaeaea;
}

.bg-blue2 {
    background-color: #102b52 !important;
}


/* Search Box Input Styling to Match Original */
.bsearch_box .form-control {
    border: none;
    height: 45px;
    padding-right: 40px; /* Space for icon */
}


/* Sidebar Recent Post Styles (scoped: differs from the .short_blog_box layout on blogs.php) */
.related-post-box {
    display: flex;
    flex-direction: column; /* Stack image on top of content */
    margin-bottom: 25px;
}

.related-post-box img {
    width: 100%;
    height: 150px; /* Adjust height as needed */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px; /* Space below image */
    margin-right: 0;
}

/* FIX: Force Arrow Size to be Small */
.rightarrow {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

.related-post-box .blog-text p.text-muted {
    font-size: 13px;
    margin-bottom: 2px;
}

.related-post-box .blog-text p.text-dark {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
}

/* Category List Styles */
.blogcat li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #102b52;
    font-weight: 500;
}

.blogcat li span:first-child {
    margin-right: 10px;
    color: #2f55d4;
}

/* The + sign */

/* Button Visibility Fix (scoped: differs from the red .btn-funding on service pages) */
.btn-funding.btn-funding-white {
    background-color: #ffffff !important;
    color: #102b52 !important; /* Force Blue Text */
    font-weight: 600;
    border: 2px solid #ffffff !important;
}

.btn-funding.btn-funding-white:hover {
    background-color: transparent !important;
    color: #ffffff !important; /* White Text on Hover */
}


/* Hide any duplicate images embedded in the content if they match the main image style */
.blog-content img.w-100.rounded.mb-4 {
    display: none;
}


/* Hide Categories and Tag Cloud Blocks */
.sidebar-categories, .sidebar-tags {
    display: none !important;
}

/* Mobile Fixes */
@media (max-width: 991px) {
    .font-size-65 {
        font-size: 32px !important;
        line-height: 1.2;
    }
}


/* ===== app/Views/home/blogs.php ===== */
/* Reuse styles from original static file */
.bbannersec {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 100px; /* Reduced top padding to push content up */
    padding-bottom: 100px; /* Adjusted bottom padding */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center; /* Center Vertically */
    justify-content: center; /* Center Horizontally */
    text-align: center; /* Text Center */
}

.blog-banner-title {
    font-size: 50px;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.blog-banner-subtitle {
    font-size: 20px;
    color: #fff;
    position: relative;
    z-index: 2;
}


/* Background Images */
.bbimg1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    max-width: 100%;
    opacity: 0.4;
}

.bbimg2 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    max-width: 100%;
    opacity: 0.4;
}

/* Blog Text Styles */
.blog-text p.text-muted {
    font-size: 14px;
    margin-bottom: 5px;
}

.blog-text p.text-dark {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.blog-text p:last-child {
    font-size: 14px;
    color: #888;
}


/* Category Button Styles */
.cat-border {
    border: 1px solid #ddd;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.cat-border:hover, .cat-border:active, .cat-border:focus {
    background: #102b52;
    color: #ffffff !important; /* Ensure text turns white on hover */
    border-color: #102b52;
}


.short_blog_box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.short_blog_box img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
}


/* FIX: Specific size for arrow icon in side list */
.short_blog_box .rightarrow {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin: 0;
    border-radius: 0;
}


.bimg_box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.bimg_box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.bimg_box:hover img {
    transform: scale(1.05);
}


/* UPDATED: Added color: #000 to make text visible against white background */
.bdate {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    color: #000000 !important;
}


/* General arrow styling for bottom grids */
.rightarrow {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Ensure contained fit */

/* Mobile Fixes */
@media (max-width: 991px) {
    .bbannersec {
        padding-top: 80px; /* Reduced from 120px to push content up */
        padding-bottom: 60px; /* Reduced to keep hero compact */
        background-color: #102b52;
        text-align: center !important; /* Force center align on mobile too */
    }

    .blog-banner-title {
        font-size: 32px;
    }

    .tiny-three-item-cat {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
    }

    .tiny-slide {
        flex: 0 0 auto;
    }

    .text-left {
        text-align: left !important;
    }

    .bbimg1, .bbimg2 {
        display: none;
    }

    /* Push Categories down on mobile */
    .categories-section {
        margin-top: 40px !important;
    }
}


/* ===== app/Views/home/lender_details.php ===== */
/* --- Key Facts Box --- */
.key-facts-panel {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.fact-label {
    font-weight: 700;
    color: #102b52;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fact-value {
    font-size: 24px;
    font-weight: 600;
    color: #2f55d4;
    margin-top: 5px;
}

.lender-logo-large {
    max-height: 100px;
    width: auto;
    margin-bottom: 25px;
    display: block;
}


/* --- Lender Content Styles --- */
.lender-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.lender-content ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #495057;
}

.lender-content ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2f55d4;
    font-weight: bold;
    font-size: 20px;
}

.lender-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #495057;
    margin-bottom: 20px;
}

.lender-content h4, .lender-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
}


/* ===== app/Views/home/privacy_policy.php ===== */
.privacy-content h3 {
    color: #102b52;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 24px;
}

.privacy-content h4 {
    color: #102b52;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
}

.privacy-content p {
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 15px;
}

.privacy-content ul, .privacy-content ol {
    color: #6c757d;
    margin-bottom: 15px;
    padding-left: 20px;
}

.privacy-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.privacy-content strong {
    color: #333;
}


/* ===== app/Views/home/services.php ===== */
.text-slider {
    margin: 9px auto;
}

.service_acc .accordion-item .accordion-button:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    transform: rotate(0deg);
    background: url("assets/images/web/right_arrow.svg") no-repeat center/contain;
}

.accordion .accordion-item .accordion-button.collapsed:before {
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
}

.service_acc .accordion-item .accordion-button:not(.collapsed)::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.frmhiddenfields {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.frmhiddenfields.show {
    max-height: 500px; /* set big enough to fit content */
}

.accordion-body {
    text-align: left;
}

.accordion .accordion-item .accordion-button.collapsed {
    color: #212529 !important;
    font-size: 16px !important;
}

.accordion .accordion-item .accordion-button:not(.collapsed) {
    color: #2f55d4 !important;
    font-size: 16px !important;
}


/* ===== app/Views/home/service_template.php ===== */
/* --- NEW MATCH LENDERS CARD STYLES --- */
.match-lenders-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 40px;
    max-width: 514px;
    width: 100%;
    box-sizing: border-box;
    color: #0f1c35;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.match-lenders-card h3 {
    font-size: 26px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    color: #0f1c35;
}

.match-lenders-card p {
    font-size: 15px;
    line-height: 1.5;
    color: #475569;
    margin-top: 0;
    margin-bottom: 25px;
}

.btn-funding {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #f87171;
    color: white !important;
    text-decoration: none;
    padding: 16px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(248, 113, 113, 0.4);
    transition: background-color 0.2s, transform 0.1s;
    box-sizing: border-box;
}

.btn-funding:hover {
    background-color: #ef4444;
    transform: translateY(-1px);
    color: white !important;
}

.features-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #0f1c35;
}

.features-row-top span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 20px 0;
}

.features-list-bottom {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list-bottom li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #334155;
    margin-bottom: 12px;
}

.features-list-bottom li:last-child {
    margin-bottom: 0;
}

.card-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.card-footer a {
    color: #0f1c35;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}

.card-footer a:hover {
    text-decoration: underline;
}

.card-footer .separator {
    color: #cbd5e1;
}

.icon-green {
    color: #059669;
}

.icon-blue {
    color: #93c5fd;
}


/* Accordion Customization */
.service_acc .accordion-item .accordion-button:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    transform: rotate(0deg);
    background: url("/assets/images/web/right_arrow.svg") no-repeat center/contain;
}

.accordion .accordion-item .accordion-button.collapsed:before {
    transform: rotate(0deg) !important;
}

.service_acc .accordion-item .accordion-button:not(.collapsed)::before {
    transform: rotate(90deg);
}

/* Images */
.tab-image {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.text-slider img {
    height: 60px !important;
    width: auto !important;
    max-width: 200px;
    object-fit: contain;
    vertical-align: middle;
}

.frmbox {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 30px;
}

.sherosec {
    margin-bottom: 5px !important;
}

/* Slider Animation */
.text-slider {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.text-slider .move-text {
    display: inline-block;
    margin: 0;
    padding: 0;
    animation: none !important;
    width: max-content;
}

.text-slider .move-text li {
    display: inline-block;
    vertical-align: middle;
}


/* ===== app/Views/guides/index.php ===== */
/* Reuse Hero Styles (scoped to .guides-hero: differs from the .bbannersec hero on blogs.php) */
.guides-hero.bbannersec {
    background-color: #102b52; /* Fallback color */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 150px;
    padding-bottom: 150px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
}

/* Ensure text is above background elements */
.guides-hero-inner {
    position: relative;
    width: 100%;
}

.guides-hero .blog-banner-title {
    font-size: 50px;
    margin-bottom: 20px;
    position: relative;
    z-index: 20;
    color: #fff !important;
}

.guides-hero .blog-banner-title.guides-hero-title {
    z-index: 40;
}

.guides-hero .blog-banner-subtitle.blog-banner-subtitle--guides {
    font-size: 20px;
    color: #fff !important;
    position: relative;
    z-index: 40;
    display: block;
    margin-top: 15px;
    margin-bottom: 0;
    opacity: 1;
}

.guides-hero-badge {
    position: relative;
    z-index: 40;
    display: inline-block;
}

/* Background Images in Hero */
.guides-hero .bbimg1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    max-width: 100%;
    opacity: 0.4;
    pointer-events: none;
}

.guides-hero .bbimg2 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    max-width: 100%;
    opacity: 0.4;
    pointer-events: none;
}

/* Ensure content is above images */
.guides-hero .hero-content-wrapper {
    position: relative;
    z-index: 20;
    width: 100%;
}

/* Card Styling */
.guide-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(16, 43, 82, 0.1);
    border-color: transparent;
}

.guide-title {
    font-size: 20px;
    font-weight: 700;
    color: #102b52;
    margin-bottom: 15px;
    line-height: 1.4;
}

.guide-desc {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes button to bottom */
}

.read-more-btn {
    color: #2f55d4;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
}

.read-more-btn i {
    margin-left: 5px;
    transition: margin 0.3s ease;
}

.read-more-btn:hover i {
    margin-left: 10px;
}


/* Mobile Fixes (scoped to .guides-hero so these don't leak onto every page's
       .text-center / .container / h1 / p) */
@media (max-width: 991px) {
    .guides-hero.bbannersec {
        padding-top: 100px !important;
        padding-bottom: 80px !important;
        min-height: auto !important;
        height: auto !important;
        display: block !important; /* Disable flex vertical centering to prevent squashing */
        background-color: #102b52 !important;
        overflow: visible !important; /* Allow content to show */
    }

    .guides-hero .blog-banner-title {
        font-size: 36px;
        margin-top: 0 !important;
    }

    /* FORCE LEFT ALIGNMENT ON MOBILE */
    .guides-hero .mobile-text-left {
        text-align: left !important;
    }

    .guides-hero .text-center {
        text-align: left !important;
    }

    .guides-hero .col-lg-10 {
        text-align: left !important;
    }

    .guides-hero .col-12 {
        text-align: left !important;
    }

    .guides-hero .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .guides-hero .bbimg1, .guides-hero .bbimg2 {
        opacity: 0.1;
        z-index: 0;
        display: none; /* Hide decorative images on mobile to ensure clean text */
    }

    .guides-hero .hero-content-wrapper {
        z-index: 30;
        padding-top: 40px;
    }

    .guides-hero .badge, .guides-hero h1, .guides-hero p {
        position: relative;
        z-index: 30;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ===== app/Views/guides/guide_details.php ===== */
/* Hero Section with Dynamic Background */
.guide-hero-sec {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 150px;
    padding-bottom: 100px;
    margin-top: 80px; /* Default desktop offset */
}

/* Dark Overlay for readability */
.guide-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(16, 43, 82, 0.9) 0%, rgba(16, 43, 82, 0.7) 100%);
    z-index: 1;
}

.guide-hero-content {
    position: relative;
    z-index: 2;
}

/* Navigation Arrows in Hero */
.hero-nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    margin: 0 15px;
}

.hero-nav-link:hover {
    color: #fff;
}

.hero-nav-link i {
    font-size: 18px;
}

/* Content Styling */
.guide-content {
    text-align: left; /* Ensure desktop is left aligned */
}

.guide-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #495057;
    margin-bottom: 20px;
}

.guide-content h2, .guide-content h3, .guide-content h4, .guide-content h5 {
    color: #102b52;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left; /* Ensure headings are left aligned */
}


.guide-content h4 {
    font-size: 30px;
}

.guide-content h5 {
    font-size: 24px;
}

.guide-content ul, .guide-content ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.guide-content li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #495057;
}

.guide-content ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2f55d4;
    font-weight: bold;
    font-size: 20px;
}

/* Bottom Navigation Styling */
.guide-footer-nav {
    border-top: 1px solid #eaeaea;
    padding-top: 30px;
    margin-top: 50px;
}

.nav-box {
    display: block;
    padding: 20px;
    border-radius: 8px;
    background: #f8f9fa;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.nav-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.nav-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    display: block;
    margin-bottom: 5px;
}

.nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #102b52;
    display: block;
    line-height: 1.4;
}


/* Mobile Adjustments */
@media (max-width: 991px) {
    .guide-hero-sec {
        /* Increase top margin to prevent navbar overlapping content */
        margin-top: 100px;
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .guide-details-page .font-size-50 {
        font-size: 32px !important;
        line-height: 1.3;
    }

    /* Force Left Alignment on Mobile for Hero Elements */
    .guide-hero-content .text-center,
    .guide-hero-content .col-lg-10,
    .guide-hero-content .col-12 {
        text-align: left !important;
    }

    /* Align Hero Nav Links Left */
    .guide-details-page .hero-nav-link {
        margin: 0 15px 0 0;
        justify-content: flex-start;
    }

    /* Breadcrumb Left Align */
    .guide-details-page .breadcrumb {
        justify-content: flex-start !important;
        padding-left: 0;
    }

    /* Ensure Container padding (scoped: a bare .container override here would
           leak this 20px mobile padding onto every page's containers) */
    .guide-details-page .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Ensure Guide Content is Left Aligned */
    .guide-content {
        text-align: left !important;
    }
}


/* ===== app/Views/lenders/index.php ===== */
/* Custom CSS for Lender Cards */
.lender-card-wrapper {
    padding: 15px;
}

.lenders-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}

.lenders-card:hover {
    box-shadow: 0 10px 25px rgba(60, 72, 88, 0.15);
    border-color: transparent;
    transform: translateY(-5px);
}

.lender-logo-container {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 5px;
}

.lender-logo {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.lender-name {
    font-weight: 700;
    color: #212529;
    margin-bottom: 10px;
    text-align: center;
}

.lender-desc {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
}

.view-profile-link {
    text-align: center;
    margin-top: auto;
    font-weight: 600;
    color: #2f55d4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-profile-link:hover {
    text-decoration: underline;
}

.view-profile-link i {
    font-size: 18px;
    margin-left: 5px;
}


/* ===== app/Views/layouts/quick_quote_modal.php ===== */
.hero-quick-quote-btn {
    min-height: 39px;
    border: 0;
    border-radius: 999px;
    background: #ff716f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    transition: 0.2s ease;
    cursor: pointer;
}

.hero-quick-quote-btn:hover {
    background: #ff6361;
    color: #ffffff;
}

/* Resets browser default button chrome for CTAs that were plain text links
   (no .btn-* styling of their own) before being converted to <button>. */
.mp-plain-trigger {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

@media (max-width: 767px) {
    .mp-modal {
        padding: 10px;
        align-items: flex-start;
    }

    .mp-modal-panel,
    .mp-modal-panel--success {
        width: 100%;
        max-height: none;
        min-height: calc(100vh - 20px);
        border-radius: 8px;
        padding: 42px 20px 30px;
    }

    .mp-modal-art {
        width: 190px;
        max-width: 48%;
        top: 52px;
        opacity: 0.28;
    }

    .mp-modal-title {
        font-size: 31px !important;
        max-width: 100%;
    }

    .mp-modal-copy {
        max-width: 100%;
    }

    .mp-funding-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 18px 14px;
    }

    .mp-funding-summary-title {
        margin-bottom: 0;
        margin-right: auto;
    }

    .mp-lenders-badge {
        position: static;
        display: inline-flex;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .mp-summary-grid {
        flex-basis: 100%;
    }

    .mp-summary-grid,
    .mp-form-grid,
    .mp-form-grid--compare,
    .mp-trust-strip,
    .mp-success-benefits {
        grid-template-columns: 1fr;
    }

    .mp-input,
    .mp-select {
        height: 43px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .mp-textarea {
        padding-left: 22px;
        padding-right: 22px;
    }

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

    .mp-trust-strip {
        border-radius: 22px;
        gap: 12px;
    }

    .mp-success-card {
        padding: 24px 18px;
    }

    .mp-success-cta {
        min-height: 52px;
        font-size: 14px;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .mp-modal-panel,
    .mp-modal-panel--success {
        padding-left: 16px;
        padding-right: 16px;
    }
}

#globalQuickQuoteModal .mp-modal-panel {
    overflow: hidden;
}

#globalQuickQuoteModal .mp-modal-art {
    z-index: 0;
    opacity: 0.22;
    pointer-events: none;
}

#globalQuickQuoteModal .mp-modal-kicker,
#globalQuickQuoteModal .mp-modal-title,
#globalQuickQuoteModal .mp-modal-copy,
#globalQuickQuoteModal form,
#globalQuickQuoteModal .mp-modal-close {
    position: relative;
    z-index: 2;
}

#globalQuickQuoteModal .mp-form-grid {
    max-width: none;
    width: 100%;
}

@media (max-width: 767px) {
    #globalQuickQuoteModal .mp-modal-art {
        opacity: 0.16;
    }
}

#globalQuickQuoteModal .mp-modal-panel {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

#globalQuickQuoteModal .mp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    margin: 0;
    z-index: 10;
}

#globalQuickQuoteModal .mp-modal-art {
    top: 34px;
    right: 0;
    width: 290px;
    max-width: 36%;
    opacity: 0.95;
    z-index: 0;
    pointer-events: none;
}

#globalQuickQuoteModal .mp-modal-kicker,
#globalQuickQuoteModal .mp-modal-title,
#globalQuickQuoteModal .mp-modal-copy,
#globalQuickQuoteModal form {
    position: relative;
    z-index: 2;
}

#globalQuickQuoteModal .mp-input,
#globalQuickQuoteModal .mp-select,
#globalQuickQuoteModal .mp-textarea {
    position: relative;
    z-index: 3;
    background-color: #ffffff;
}

@media (max-width: 991px) {
    #globalQuickQuoteModal .mp-modal-art {
        width: 230px;
        max-width: 34%;
        opacity: 0.95;
    }
}

@media (max-width: 767px) {
    #globalQuickQuoteModal .mp-modal-close {
        top: 12px;
        right: 12px;
    }

    #globalQuickQuoteModal .mp-modal-art {
        width: 170px;
        max-width: 44%;
        top: 56px;
        right: -18px;
        opacity: 0.55;
    }
}

/* ===== Utility classes generated from former inline style="" attributes ===== */

/* Background images (paths are site-root-relative, safe regardless of environment) */
.bg-full-cloud {
    background-image: url('/assets/images/web/full-cloud.svg');
    background-repeat: no-repeat;
}

.bg-tab-bg {
    background-image: url('/assets/images/web/tab-bg.svg');
    background-size: cover;
    background-position: inherit;
    background-repeat: no-repeat;
    padding: 25px 0;
}

.bg-speedbg {
    background-image: url('/assets/images/web/services/speedbg.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 199px;
    padding: 20px;
}

.bg-accessbg {
    background-image: url('/assets/images/web/services/accessbg.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 199px;
    padding: 20px;
}

.bg-supportbg {
    background-image: url('/assets/images/web/services/supportbg.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 199px;
    padding: 20px;
}

.bg-sbox-1 {
    background-image: url('/assets/images/web/services/sbox/1.webp');
}

.bg-sbox-2 {
    background-image: url('/assets/images/web/services/sbox/2.webp');
}

.bg-sbox-3 {
    background-image: url('/assets/images/web/services/sbox/3.webp');
}

.bg-sbox-4 {
    background-image: url('/assets/images/web/services/sbox/4.webp');
}

.bg-sbox-5 {
    background-image: url('/assets/images/web/services/sbox/5.webp');
}

.bg-sbox-6 {
    background-image: url('/assets/images/web/services/sbox/6.webp');
}

.bg-sbox-7 {
    background-image: url('/assets/images/web/services/sbox/7.webp');
}

.bg-sbox-8 {
    background-image: url('/assets/images/web/services/sbox/8.webp');
}

.bg-blog-header {
    background-image: url('/assets/images/web/blogs/blog_header.svg');
}

.bg-bannerbg {
    background-image: url('/assets/images/web/bannerbg.svg');
}

.bg-cloud-contact-right {
    background: url('/assets/images/web/cloude.svg');
    background-repeat: no-repeat;
    background-size: 15% 77% !important;
    background-position: 100% 0 !important;
    padding-bottom: 0px !important;
}

.bg-cloud-contact-left {
    background: url('/assets/images/web/cloud_left.svg');
    background-repeat: no-repeat;
    background-size: 10% 40% !important;
    background-position: 0% 0 !important;
}

.bg-legal-hero {
    background: #f8f9fc;
    padding-top: 150px;
    padding-bottom: 100px;
}

/* Service box (.scbox) variants used on service_template.php */
.scbox-centered {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scbox-link-lg {
    font-size: 24px;
    font-weight: 700;
}

.scbox-link-md {
    font-size: 22px;
    font-weight: 700;
}

/* Absolutely-positioned icon overlays for the speed/access/support boxes */
.img-abs-speed {
    position: absolute;
    top: -109px;
    right: 7%;
}

.img-abs-access {
    position: absolute;
    top: -109px;
    right: 0%;
}

.img-abs-support {
    position: absolute;
    top: -111.5px;
    right: -7%;
}

.link-raised {
    position: relative;
    z-index: 10;
    display: inline-block;
}

/* Small one-off utilities */
.w-fit-content {
    width: fit-content;
}

.btn-block-noline {
    display: block;
    text-decoration: none;
}

.pb-0-imp {
    padding-bottom: 0;
}

.border-strong {
    border: 1px solid rgba(110, 110, 110, 1) !important;
}

.btn-subscribe-flat {
    padding: 0;
    height: 39px;
    border-radius: 0;
    margin-top: 20px;
}

.btn-subscribe-pill {
    height: 39px;
    border-radius: 50px;
}

.ssb-inline-btn {
    background: none;
    border: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Blogs listing page */
.featured-blog-img {
    max-height: 400px;
    object-fit: cover;
}

.blog-card-title {
    font-size: 16px;
    line-height: 1.3;
}

.blog-card-title-lg {
    line-height: 1.2;
}

.alert-contact-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 10px;
    border-radius: 5px;
}

.alert-contact-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 10px;
    border-radius: 5px;
}

/* Blog sidebar widget (app/Views/home/blog_sidebar.php) */
.search-box-rounded {
    border-radius: 15px;
}

.recent-post-box-border {
    border-color: #f1f1f1 !important;
}

.search-form-wrap {
    z-index: 10;
}

.search-input-pill {
    height: 50px;
    padding-left: 20px;
    padding-right: 55px;
    position: relative;
    z-index: 1;
}

.search-submit-btn {
    background: none;
    border: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    padding: 10px;
}

.recent-post-thumb-wrap {
    width: 70px;
}

.recent-post-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}

.recent-post-date {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recent-post-title {
    font-size: 14px;
    line-height: 1.3;
    color: #102b52;
}

/* Header / footer */
.buy-button-ml0 {
    margin-left: 0px !important;
}

/* Initial hidden state for JS-toggled elements (must NOT use !important,
   since the show/hide JS sets element.style.display directly) */
.js-hidden-init {
    display: none;
}

/* =========================================================================
   Blog Article page (app/Views/home/blog_details.php)
   Prefixed `.bd-` throughout so nothing here collides with the blog LISTING
   page (blogs.php / .bbannersec) or the shared sidebar partials.
   ========================================================================= */

/* ---- Hero ---- */
.bd-hero {
    position: relative;
    overflow: hidden;
    padding: 168px 0 0;
    /* Plain "bottom" crops the image's overflow entirely off the top,
       which puts the hot-air balloon artwork right at the very top edge
       — directly behind the transparent nav's phone number. Shift the
       crop window up (reveal more sky, less of the mountains) so there's
       a clear gap between the nav and the balloon. This hero is taller
       than .bl-hero's (no bottom padding vs 90px), so it needs a smaller
       offset than .bl-hero to land the balloon in the same visual spot. */
    background: url('/assets/images/web/blogs/article-hero-bg.jpg') no-repeat center calc(100% + 77px);
    background-color: #04309d;
    background-size: cover;
}

.bd-hero-inner {
    position: relative;
    z-index: 2;
    padding-bottom: 90px;
}

.bd-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.bd-breadcrumbs a,
.bd-breadcrumbs span {
    text-decoration: none;
}

/* The current-page crumb is the CMS title (blog/guide/lender/service name)
   rather than a short static label, so it has no guaranteed length. Badges
   default to white-space:nowrap with no max-width, so a long title sizes
   itself past the viewport instead of shrinking to fit — flex-wrap on
   .bd-breadcrumbs only wraps whole pills onto a new line, it doesn't let
   an individual pill's own text wrap. Force it to wrap within the pill
   and cap it to the row's width so long titles never run off-screen. */
.bd-breadcrumbs span {
    white-space: normal;
    max-width: 100%;
    word-break: break-word;
}

.bd-hero-title {
    color: #ffffff;
    font-size: clamp(34px, 4vw, 55px);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 26px;
}

.bd-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    margin-bottom: 28px;
}

.bd-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bd-hero-meta .bd-meta-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.4);
}

.bd-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bd-hero-tag {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 30px;
    background: rgba(43, 101, 182, 1);
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
}

.bd-hero-photo-wrap {
    position: relative;
    z-index: 2;
}

.bd-hero-photo {
    width: 100%;
    height: 412px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(5, 20, 60, 0.28);
}

.bd-hero-photo.no-image {
    background: linear-gradient(180deg, #3c629f 0%, #b4acca 100%);
}

/* Lender hero uses a logo, not a photo — a plain white card with the logo
   centred and contained (never cropped) reads better than object-fit:cover
   would on a transparent-background brand mark. */
.bd-hero-logo-card {
    width: 100%;
    height: 412px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(5, 20, 60, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.bd-hero-logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 991px) {
    .bd-hero {
        padding-top: 140px;
    }
    .bd-hero-photo,
    .bd-hero-logo-card {
        height: 260px;
        margin-top: 24px;
    }
}

/* ---- Lender detail sidebar (app/Views/home/lender_details.php) ---- */
.bd-lender-facts {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.bd-lender-facts li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f6;
    font-size: 14.5px;
}

.bd-lender-facts li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.bd-lender-facts span {
    color: #6b7890;
}

.bd-lender-facts strong {
    color: #102c52;
    font-weight: 700;
}

/* ---- Guide prev/next navigation (app/Views/guides/guide_details.php) ---- */
.bd-guide-nav-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    padding: 22px 26px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bd-guide-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(16, 44, 82, 0.12);
}

.bd-guide-nav-next {
    text-align: right;
    align-items: flex-end;
}

.bd-guide-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2b65b6;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.bd-guide-nav-title {
    color: #102c52;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

/* =========================================================================
   About page (app/Views/home/about.php)
   ========================================================================= */

.mp-about-check {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.mp-about-check-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #102c52;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-about-check-title {
    color: #102c52;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mp-about-check-desc {
    color: #6b7890;
    font-size: 15px;
    line-height: 1.6;
}

.mp-about-banner img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(16, 44, 82, 0.1);
}

.mp-value-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
}

.mp-value-title {
    color: #102c52;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.mp-value-desc {
    color: #6b7890;
    font-size: 15px;
    line-height: 1.65;
}

.mp-leader-card {
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
}

.mp-leader-photo {
    height: 220px;
    background: #f7f9fc;
}

.mp-leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-leader-body {
    padding: 20px;
}

.mp-leader-name {
    color: #102c52;
    font-size: 18px;
    font-weight: 700;
}

.mp-leader-role {
    color: #6b7890;
    font-size: 14px;
    margin-bottom: 12px;
}

.mp-leader-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2b65b6;
    font-size: 13.5px;
    font-weight: 600;
}

/* "Our Story" — a dark-bg accordion, styled as light cards floating on
   the gradient rather than the default Bootstrap accordion look. */
.mp-story-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
}

.mp-story-item + .mp-story-item {
    margin-top: 12px;
}

.mp-story-item .accordion-button {
    background: transparent;
    color: #ffffff;
    font-size: 16.5px;
    font-weight: 700;
    padding: 20px 24px;
    box-shadow: none;
}

.mp-story-item .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.08);
}

.mp-story-item .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(2);
}

.mp-story-item .accordion-body {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.7;
    padding: 0 24px 22px;
}

.mp-testimonial-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
}

.mp-testimonial-quote {
    color: #45526b;
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.75;
    margin-bottom: 18px;
}

.mp-testimonial-name {
    color: #102c52;
    font-weight: 700;
}

.mp-testimonial-role {
    color: #8a97ab;
    font-size: 13.5px;
}

/* ---- Content layout ----
   Same light grey-blue backdrop as .bd-faq, with the article body and the
   sidebar sitting on it as two clearly separate white panels/cards. */
.bd-article-section {
    background: #f7f9fc;
    padding: 70px 0;
}

.bd-article-panel {
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
}

@media (max-width: 767px) {
    .bd-article-panel {
        padding: 26px 22px;
    }
}

/* Custom CMS blocks (render_blocks()) render inside .bd-content — either
   the blog article panel, or (service_template.php) directly on the page
   background — but each block wraps itself in a Bootstrap .container,
   which fights the wrapper's own width. Neutralise that here without
   touching render_blocks() itself, since other pages call it outside any
   narrow column and rely on the default. */
.bd-content [class^="block-"].container,
.bd-content [class*=" block-"].container {
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Flex layouts inside these blocks (e.g. an image+text "split" panel) were
   built assuming the wide, full-page container they normally render in.
   Squeezed into a narrower wrapper, their flex children refuse to shrink
   below their content's intrinsic size (the default `min-width: auto` on
   flex items) and push the row wider than the wrapper. Reset it. */
.bd-content [class^="block-"].container * {
    min-width: 0;
}

.bd-content [class^="block-"].container img {
    max-width: 100%;
    height: auto;
}

.bd-content,
.bd-content * {
    font-family: 'Inter', sans-serif !important;
}

.bd-content {
    color: #45526b;
    font-size: 17px;
    line-height: 1.85;
}

.bd-content > p {
    margin-bottom: 26px;
}

.bd-content > p:first-of-type {
    font-size: 19px;
    line-height: 1.75;
    color: #33415c;
}

.bd-content h1,
.bd-content h2,
.bd-content h3,
.bd-content h4 {
    color: #102c52;
    font-weight: 700;
    line-height: 1.3;
}

/* CMS content ships headings with their own inline font-size (commonly
   36px for h1/h2, 22px for h3) which otherwise beats these rules and
   makes body headings read far larger than the rest of the page —
   !important pins them back to this component's own type scale. */
.bd-content h1,
.bd-content h2 {
    font-size: 30px !important;
    margin: 46px 0 20px;
    padding-top: 4px;
}

.bd-content h3 {
    font-size: 23px !important;
    margin: 36px 0 16px;
}

.bd-content h4 {
    font-size: 19px !important;
    margin: 28px 0 14px;
}

.bd-content > *:first-child {
    margin-top: 0;
}

.bd-content strong {
    color: #102c52;
    font-weight: 700;
}

.bd-content a {
    color: #2b65b6;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(43, 101, 182, 0.35);
    text-underline-offset: 2px;
}

.bd-content a:hover {
    text-decoration-color: rgba(43, 101, 182, 0.8);
}

.bd-content ul,
.bd-content ol {
    margin: 0 0 26px;
    padding-left: 4px;
}

.bd-content ul {
    list-style: none;
}

.bd-content ul > li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
}

.bd-content ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2b65b6;
}

.bd-content ol {
    padding-left: 22px;
}

.bd-content ol > li {
    padding-left: 6px;
    margin-bottom: 12px;
}

.bd-content li > ul,
.bd-content li > ol {
    margin-top: 12px;
    margin-bottom: 0;
}

.bd-content blockquote {
    margin: 32px 0;
    padding: 20px 26px;
    border-left: 4px solid #2b65b6;
    background: #f5f8fd;
    border-radius: 0 12px 12px 0;
    color: #33415c;
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
}

/* CMS content ships its own image classes (mp-img2col-*, mp-split2-image…)
   with a flatter 6px radius via their embedded <style> tag, which — same
   specificity, later in the document — wins over this rule without
   !important, giving the page a mix of curves. Force the one curve. */
.bd-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px !important;
    margin: 30px 0;
    box-shadow: 0 16px 40px rgba(16, 44, 82, 0.1);
}

/* Some articles embed their own "split" callout panels (class names like
   mp-split-block / mp-split-block2) — either inline in the article body or,
   more commonly, in a separate custom content block below it — with their
   own inline <style> tag shipping a flat grey background/border. Strip that
   so the panel sits flush with the rest of the article instead of reading
   as a boxed-off, differently-coloured section. */
.bd-content [class*="split-block"],
.block-text [class*="split-block"] {
    background: transparent !important;
    border: 0 !important;
}

.bd-content hr {
    border: 0;
    border-top: 1px solid #e7ecf4;
    margin: 40px 0;
}

/* CMS-authored tables ship fully inline-styled (square corners, solid navy
   th background, per-cell borders) — !important the whole thing back to
   the same rounded-card language as the rest of the page. border-collapse
   has to stay "separate" (not the CMS's own "collapse") for the table's
   own border-radius/overflow to actually clip the corners. */
.bd-content table {
    width: 100% !important;
    margin: 26px 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 15.5px !important;
    border: 1px solid #e7ecf4 !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.bd-content table th,
.bd-content table td {
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #e7ecf4 !important;
    text-align: left !important;
    background: transparent !important;
    color: #45526b !important;
    font-weight: 400 !important;
}

.bd-content table tr:last-child th,
.bd-content table tr:last-child td {
    border-bottom: 0 !important;
}

.bd-content table th {
    background: #f5f8fd !important;
    color: #102c52 !important;
    font-weight: 700 !important;
}

/* =========================================================================
   CMS content colour normalisation
   Blog/service custom_blocks (rendered via render_blocks()) were authored
   with an ad-hoc teal/green accent (#0F6E56 family) that doesn't match the
   site's actual navy/blue palette, so it reads as a foreign block dropped
   onto the page. Content ships as raw stored HTML — often with its own
   embedded <style> tag using a page-specific class prefix (mp-pfhub-,
   mp-bimbo-, mp-hmo-, mp-faq36-, etc. — one per page) built from the same
   ~17-name suffix convention (-item, -trigger, -icon, -label, -content,
   -q-text, -list…). Recolour it here rather than editing every stored
   page: by suffix for those component classes (the prefix differs per
   page, the suffix doesn't), and by [style*="…"] substring match for
   elements styled with plain inline attributes. Everything needs
   !important since the content's own <style> tag renders after site.css
   in the document and would otherwise win any same-specificity tie.
   Scoped under .bd-content so it can't affect anything outside CMS body
   content. */

/* --- Inline-styled elements (quick-answer boxes, disclosure, dot bullets, body links) --- */
.bd-content [style*="color:#0F6E56" i],
.bd-content [style*="color: #0F6E56" i] {
    color: #2b65b6 !important;
}

.bd-content [style*="background:#0F6E56" i],
.bd-content [style*="background: #0F6E56" i] {
    background: #2b65b6 !important;
}

.bd-content [style*="border-left:4px solid #0F6E56" i],
.bd-content [style*="border-left:5px solid #0F6E56" i] {
    border-left-color: #2b65b6 !important;
}

.bd-content [style*="color:#085041" i],
.bd-content [style*="color: #085041" i] {
    color: #102c52 !important;
}

.bd-content [style*="background:#E1F5EE" i],
.bd-content [style*="background: #E1F5EE" i] {
    background: #eef4fb !important;
}

/* --- Embedded "hub"/FAQ accordion component family (mp-{prefix}-*) --- */
.bd-content [class*="-icon"] {
    border-color: #2b65b6 !important;
}

.bd-content [class*="-icon"]::before,
.bd-content [class*="-icon"]::after {
    background: #2b65b6 !important;
}

/* Expanded state fills the same circle solid and turns its bar(s) white
   for contrast — recolour the fill too, and keep the bars white instead
   of inheriting the (now blue) default bar colour above. */
.bd-content [class*="-trigger"][aria-expanded="true"] [class*="-icon"] {
    background: #2b65b6 !important;
}

.bd-content [class*="-trigger"][aria-expanded="true"] [class*="-icon"]::before,
.bd-content [class*="-trigger"][aria-expanded="true"] [class*="-icon"]::after {
    background: #ffffff !important;
}

.bd-content [class$="-faq-label"] {
    background: #2b65b6 !important;
}

.bd-content [class*="-trigger"]:hover {
    background: #f8fbff !important;
}

.bd-content [class*="-trigger"][aria-expanded="true"] {
    background: #eef4fb !important;
}

.bd-content [class*="-trigger"][aria-expanded="true"] [class*="-text"] {
    color: #102c52 !important;
}

.bd-content [class$="-content"] {
    background: #eef4fb !important;
    border-top-color: #dbe6f5 !important;
}

.bd-content [class*="-item"]:has([aria-expanded="true"]) {
    border-color: #2b65b6 !important;
    box-shadow: 0 2px 12px rgba(43, 101, 182, 0.12) !important;
}

.bd-content [class*="-list"] li::before {
    background: #2b65b6 !important;
}

/* Shape: the numbered "hub" accordion (mp-{prefix}-acc, e.g. the "four
   investor profiles" list) ships with a tight 6px radius and a plain grey
   border that reads as a foreign component next to the site's own
   14-16px-radius, shadowed cards (.bd-article-panel, .hm-solution-card…)
   — round it out and give it the same soft shadow to match. */
.bd-content [class$="-acc"] {
    border-radius: 14px !important;
    border-color: #e7ecf4 !important;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06) !important;
}

.bd-content [class*="-item"] {
    border-color: #e7ecf4 !important;
}

.bd-sidebar-card {
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
}

.bd-sidebar-cta h4 {
    color: #102c52;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}

.bd-sidebar-cta p {
    color: #4b5a72;
    font-size: 15px;
    margin-bottom: 20px;
}

.bd-sidebar-cta .btn {
    width: 100%;
    text-align: center;
    letter-spacing: 0.3px;
}

.bd-related-heading {
    color: #102c52;
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 18px;
}

.bd-related-card {
    display: block;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 20px;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bd-related-hidden {
    display: none;
}

.bd-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(16, 44, 82, 0.12);
}

.bd-related-thumb {
    position: relative;
    height: 130px;
}

.bd-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bd-related-thumb.no-image,
.bl-card-thumb.no-image {
    background: linear-gradient(180deg, #3c629f 0%, #b4acca 100%);
}

.bd-related-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43, 101, 182, 0.55) 0%, rgba(255, 255, 255, 0) 75%);
}

.bd-related-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #e8f9f0;
    color: #0e6640;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
}

/* Related-lender variant: a logo on white instead of a cropped photo, so
   the photo-darkening gradient and cover-fit need to be turned off. */
.bd-related-thumb.lender-logo {
    background: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
}

.bd-related-thumb.lender-logo::after {
    display: none;
}

.bd-related-thumb.lender-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bd-related-body {
    padding: 18px 20px 20px;
}

.bd-related-title {
    color: #102c52;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-related-excerpt {
    color: #7c8aa0;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-related-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #eef1f6;
    font-size: 12.5px;
    color: #8a97ab;
}

.bd-related-footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---- FAQ ---- */
.bd-faq {
    background: #f7f9fc;
    padding: 90px 0;
}

.bd-faq-eyebrow {
    color: #f97171;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.bd-faq-heading {
    color: #102c52;
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
}

.bd-faq-intro {
    color: #6b7890;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 380px;
}

.bd-faq-open {
    background: #ffffff;
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 16px 40px rgba(16, 44, 82, 0.08);
    margin-bottom: 16px;
}

.bd-faq-open-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bd-faq-open-q {
    color: #102c52;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-faq-close-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #102c52;
    color: #fff;
    border: 0;
    font-size: 14px;
    line-height: 1;
}

.bd-faq-open-a {
    color: #6b7890;
    font-size: 15px;
    line-height: 1.7;
    margin: 14px 0 0;
}

.bd-faq-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.bd-faq-item .accordion-button,
.bd-faq-item .accordion-button:not(.collapsed) {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #ffffff;
    border: 0;
    box-shadow: none;
    padding: 20px 22px;
    text-align: left;
    color: #102c52;
    font-size: 15.5px;
    font-weight: 700;
}

.bd-faq-item .accordion-button:focus {
    box-shadow: none;
}

.bd-faq-item .accordion-button::after {
    content: "+";
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f4f9;
    color: #102c52;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.bd-faq-item .accordion-button[aria-expanded="true"]::after {
    content: "\2212";
}

.bd-faq-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bd-faq-item .accordion-body {
    padding: 0 22px 20px 50px;
    color: #6b7890;
    font-size: 15px;
    line-height: 1.7;
}

.bd-faq-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(90deg, #e7f0fd 0%, #eef4fc 100%);
    border-radius: 14px;
    padding: 22px 28px;
    margin-top: 20px;
}

.bd-faq-cta h5 {
    color: #102c52;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.bd-faq-cta p {
    color: #6b7890;
    font-size: 14px;
    margin: 0;
}

/* justify-content:space-between only spreads the text block and button
   apart when they share a row; once flex-wrap drops the button onto its
   own row (mobile), a wrapped row with a single item sits at flex-start
   instead of centering, so both blocks hug the left padding instead of
   sitting in the middle of the card even though their own text is
   text-align:center. Stack and center them explicitly instead. */
@media (max-width: 767px) {
    .bd-faq-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* ---- How does it work (dark gradient) ---- */
.bd-hiw {
    background: linear-gradient(120deg, #12207e 0%, #1a3ac2 45%, #2c1e78 100%);
    padding: 80px 0;
    text-align: center;
}

.bd-hiw-heading {
    color: #ffffff;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 700;
    margin-bottom: 10px;
}

.bd-hiw-sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    margin-bottom: 50px;
}

.bd-hiw-icon {
    width: 92px;
    height: 92px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 38px;
}

.bd-hiw-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fcd063;
    color: #102c52;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.bd-hiw-step h5 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.bd-hiw-step p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 320px;
    margin: 0 auto;
}

/* ---- Quote / Contact ---- */
.bd-quote {
    background: #f7f9fc;
    padding: 90px 0;
}

.bd-quote-eyebrow {
    color: #2b65b6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bd-quote-heading {
    color: #102c52;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 26px;
}

.bd-quote-label {
    display: block;
    color: #7c8aa0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bd-quote-field {
    margin-bottom: 20px;
}

.bd-quote-field input,
.bd-quote-field select,
.bd-quote-field textarea {
    width: 100%;
    border: 1px solid #e2e7f0;
    background: #ffffff;
    border-radius: 30px;
    padding: 14px 20px;
    font-size: 14px;
    color: #33415c;
}

.bd-quote-field textarea {
    border-radius: 18px;
    min-height: 110px;
    resize: vertical;
}

.bd-quote-field input::placeholder,
.bd-quote-field select,
.bd-quote-field textarea::placeholder {
    color: #a7b0c0;
    text-transform: uppercase;
    font-size: 12.5px;
    letter-spacing: 0.3px;
}

.bd-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.bd-contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(43, 101, 182, 1);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.bd-contact-item strong {
    color: #102c52;
}

.bd-contact-item span, .bd-contact-item p {
    color: #4b5a72;
    font-size: 14.5px;
    margin: 0;
    line-height: 1.6;
}

/* The rule above also matches the icon-wrapping <span class="bd-contact-icon">
   since it's a span inside .bd-contact-item, and its two-class selector beats
   .bd-contact-icon's own `color: #fff` — put the icon back to white. */
.bd-contact-item span.bd-contact-icon {
    color: #ffffff;
}

/* =========================================================================
   Blog LISTING page (app/Views/home/blogs.php)
   Prefixed `.bl-` — parallel to, but deliberately separate from, the `.bd-`
   article-detail styles above so the two pages can evolve independently.
   ========================================================================= */

.bl-hero {
    position: relative;
    overflow: hidden;
    min-height: 680px;
    padding: 168px 0 90px;
    /* Plain "bottom" crops the image's overflow entirely off the top,
       which puts the hot-air balloon artwork right at the very top edge
       — directly behind the transparent nav's phone number. Shift the
       crop window up (reveal more sky, less of the mountains) so there's
       a clear gap between the nav and the balloon. This class is shared
       across pages with very different amounts of hero copy (a two-line
       title vs. title + subtitle + three feature chips), and the crop
       amount is a function of this box's own height — without a floor,
       the shorter pages compress enough that the balloon creeps back up
       towards the nav. The min-height keeps every page's crop identical. */
    background: url('/assets/images/web/blogs/article-hero-bg.jpg') no-repeat center calc(100% + 110px);
    background-color: #04309d;
    background-size: cover;
}

.bl-hero-inner {
    position: relative;
    z-index: 2;
}

.bl-hero-title {
    color: #ffffff;
    font-size: clamp(34px, 4.4vw, 55px);
    font-weight: 700;
    line-height: 1.15;
    margin: 22px 0 20px;
    max-width: 700px;
}

.bl-hero-sub {
    color: rgba(255, 255, 255, 0.9);
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 700px;
}

.bl-hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(43, 101, 182, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 14.5px;
    padding: 11px 20px;
    border-radius: 30px;
    margin: 0 10px 10px 0;
}

.bl-hero-feature i {
    font-size: 17px;
}

@media (max-width: 767px) {
    .bl-hero {
        min-height: 0;
    }
}

/* Partner logo marquee */
.bl-logos {
    background: #ffffff;
    padding: 30px 0;
    overflow: hidden;
}

.bl-logos .move-text {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
}

.bl-logos .move-text li img {
    height: 28px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(1);
}

/* Category filter */
.bl-categories {
    padding: 70px 0 20px;
}

.bl-categories-heading {
    color: #102c52;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 26px;
}

.bl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.bl-filter-pill {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #e2e7f0;
    color: #33415c;
    font-size: 14.5px;
    font-weight: 500;
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bl-filter-pill:hover {
    border-color: #2b65b6;
    color: #2b65b6;
}

.bl-filter-pill.is-active {
    background: #2b65b6;
    border-color: #2b65b6;
    color: #ffffff;
}

/* Article grid (mirrors .bd-related-card, sized up for a full grid) */
.bl-grid {
    padding-bottom: 30px;
}

/* Vertical gutter lives on the column, not the card — a margin on a
   height:100%-stretched flex child doesn't reliably grow the row height,
   which is what left rows touching. */
.bl-grid-item {
    margin-bottom: 30px;
}

.bl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(16, 44, 82, 0.12);
}

.bl-card-thumb {
    position: relative;
    height: 220px;
    flex-shrink: 0;
}

.bl-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bl-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: #e8f9f0;
    color: #0e6640;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
}

.bl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.bl-card-title {
    color: #102c52;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 10px;
    min-height: 49px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-card-excerpt {
    color: #7c8aa0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
    min-height: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef1f6;
    font-size: 13px;
    color: #8a97ab;
}

.bl-card-footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 767px) {
    .bl-card-thumb {
        height: 180px;
    }
}

/* ---- Lender card (app/Views/lenders/index.php) ----
   Same .bl-card shell as the article grid, but the thumb is a logo panel
   instead of a photo, and the footer shows a lending stat instead of a
   date/read-time pair. */
.bl-lender-logo {
    position: relative;
    height: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fc;
    border-bottom: 1px solid #eef1f6;
    padding: 20px 30px;
}

.bl-lender-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bl-lender-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.bl-lender-tag {
    background: #eef4fb;
    color: #2b65b6;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.bl-lender-cta {
    color: #2b65b6;
    font-weight: 700;
}

/* =========================================================================
   Homepage additions (app/Views/home/index.php)
   Prefixed `.hm-` throughout.
   ========================================================================= */

.hm-solutions {
    background: #f5f8fd;
    padding: 80px 0;
}

.hm-solutions-heading {
    color: #102c52;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}

.hm-solutions-sub {
    color: #6b7890;
    font-size: 16px;
    max-width: 560px;
    margin-bottom: 36px;
}

.hm-solution-card {
    position: relative;
    display: block;
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    height: 100%;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(16, 44, 82, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hm-solution-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(16, 44, 82, 0.1);
}

.hm-solution-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 34px;
}

.hm-solution-icon.c-blue   { background: #e6f0fd; color: #2b65b6; }
.hm-solution-icon.c-green  { background: #e8f9f0; color: #1fa96b; }
.hm-solution-icon.c-orange { background: #fdece3; color: #e08a2c; }
.hm-solution-icon.c-purple { background: #f1ecfa; color: #8a4fd6; }
.hm-solution-icon.c-teal   { background: #e3f7f7; color: #159090; }

.hm-solution-title {
    color: #102c52;
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hm-solution-desc {
    color: #8a97ab;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.hm-solution-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e7ecf4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a97ab;
    font-size: 14px;
}

.hm-solutions-links {
    margin-top: 30px;
}

.hm-solutions-links a {
    color: #2b65b6;
    font-weight: 600;
    font-size: 15px;
    margin-right: 32px;
}

/* "All Finance Types" categorised grid */
.hm-types-group {
    margin-bottom: 46px;
}

.hm-types-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #102c52;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hm-type-card {
    display: block;
    background: #f5f7fa;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    text-decoration: none;
    transition: background 0.15s ease;
}

.hm-type-card:hover {
    background: #eef2f8;
}

.hm-type-title {
    color: #102c52;
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hm-type-desc {
    color: #8a97ab;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* "Why Borrowers choose Money Pilot" intro */
.hm-why-heading {
    color: #102c52;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 8px;
}

.hm-why-sub {
    color: #6b7890;
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}

/* "Read Our Latest Articles" — featured post + two side posts */
.hm-articles {
    background: #f5f8fd;
    padding: 80px 0;
}

.hm-articles-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.hm-articles-eyebrow {
    color: #2b65b6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hm-articles-heading {
    color: #102c52;
    font-size: 34px;
    font-weight: 800;
    margin: 0;
}

.hm-articles-link {
    color: #2b65b6;
    font-weight: 600;
    font-size: 15px;
}

/* Same issue as .bd-faq-cta: justify-content:space-between only spreads
   the heading block and "View all articles" link apart while they share
   a row. Once flex-wrap drops the link onto its own row (mobile), a
   wrapped row with a single item sits at flex-start, so the link hugs
   the left edge instead of centering under the already-centered heading. */
@media (max-width: 767px) {
    .hm-articles-header {
        flex-direction: column;
        align-items: center;
    }
}

.hm-articles-filters {
    margin-bottom: 36px;
}

.hm-featured-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hm-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(16, 44, 82, 0.12);
}

.hm-featured-thumb {
    position: relative;
    flex: 0 0 320px;
    height: 320px;
}

.hm-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-featured-thumb.no-image {
    background: linear-gradient(180deg, #3c629f 0%, #b4acca 100%);
}

.hm-featured-new {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: #f97171;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
}

/* The card is stretched to match the side column's height (2 side-cards +
   the guides promo) — taller than a fixed 320px image + compact text
   block leaves at its natural size, so let the text block grow to fill
   that leftover space instead: the body flexes to fill the card, the
   excerpt flexes to fill the body, and the footer stays pinned to the
   bottom regardless of how much room the excerpt ends up using. */
.hm-featured-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 28px 30px 26px;
}

.hm-featured-title {
    color: #102c52;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
}

/* Sized to its actual text, not flex-stretched — flex-growing this to
   fill the body just made an oversized empty box (the clamped text sits
   at the top, dead space below it, same problem as before one level in).
   The PHP side now pulls a long, real excerpt from the article body, and
   the footer's margin-top:auto (below) takes up whatever's left over. */
.hm-featured-excerpt {
    color: #5b6b82;
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 22;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
    font-size: 13.5px;
    color: #8a97ab;
}

.hm-featured-footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hm-side-card {
    display: block;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 20px;
    box-shadow: 0 12px 30px rgba(16, 44, 82, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hm-side-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(16, 44, 82, 0.12);
}

.hm-side-thumb {
    position: relative;
    height: 150px;
}

.hm-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-side-thumb.no-image {
    background: linear-gradient(180deg, #3c629f 0%, #b4acca 100%);
}

.hm-guides-promo {
    background: #e9f0fc;
    border-radius: 14px;
    padding: 24px;
}

.hm-guides-promo h5 {
    color: #102c52;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.hm-guides-promo p {
    color: #5b6b82;
    font-size: 14px;
    margin-bottom: 18px;
}

@media (max-width: 991px) {
    .hm-featured-thumb {
        flex-basis: 240px;
        height: 240px;
    }
}

/* =========================================================================
   Service / category template (app/Views/home/service_template.php)
   Prefixed `.sv-` — reuses .bd-/.bl-/.hm- components where the design is
   identical (hero feature chips, breadcrumbs, FAQ, quote/contact, article
   grid, article-panel content card) and only adds classes for the parts
   unique to this template (hero photo, intro, tabs, category grid).
   ========================================================================= */

.sv-hero {
    position: relative;
    overflow: hidden;
    padding: 168px 0 100px;
    background: url('/assets/images/web/services/hero-sunset-mountains.jpg') no-repeat center center;
    background-size: cover;
}

.sv-hero-features {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* The service hero's funding card sits in a narrower column than the
   homepage hero, so it always uses the single-column field stack that
   .hero-search-grid otherwise only switches to below 767px. */
.sv-hero .hero-search-card {
    width: 100%;
}

.sv-hero .hero-search-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
            "amount"
            "popular"
            "term"
            "business"
            "search";
    gap: 18px;
}

.sv-hero .hero-secondary-actions {
    grid-template-columns: 1fr;
    gap: 14px;
}

/* The narrower single-column card here doesn't have room for the popular
   amount chips at their homepage padding/gap — the last one wraps onto
   its own line. Tighten both just enough to keep all five on one row. */
.sv-hero .hero-popular-row {
    gap: 6px;
}

.sv-hero .hero-popular-chip {
    padding: 7px 10px;
}

@media (max-width: 991px) {
    .sv-hero {
        padding: 140px 0 70px;
    }
}

/* ---- Intro (image + copy) ---- */
.sv-intro {
    background: #eef4fb;
    padding: 90px 0;
}

.sv-eyebrow {
    color: #2b65b6;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sv-intro-heading {
    color: #102c52;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 18px;
}

.sv-intro-para {
    color: #45526b;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.sv-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

/* ---- Tabs (What is X? / Why choose Money Pilot? / When to use X?) ---- */
.sv-tabs {
    padding: 90px 0 40px;
}

.sv-tabs-nav {
    display: flex;
    background: #eef1f6;
    border-radius: 14px;
    padding: 8px;
    gap: 8px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.sv-tab-btn {
    flex: 1 1 0;
    min-width: 200px;
    border: 0;
    background: transparent;
    color: #45526b;
    font-size: 15px;
    font-weight: 700;
    padding: 16px 20px;
    border-radius: 10px;
    transition: 0.2s ease;
}

.sv-tab-btn:hover {
    color: #102c52;
}

.sv-tab-btn.active {
    background: #102c52;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 44, 82, 0.18);
}

.sv-tab-panel {
    display: none;
}

.sv-tab-panel.active {
    display: block;
}

.sv-tab-heading {
    color: #102c52;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 18px;
}

.sv-tab-list {
    margin: 0 0 22px;
    padding-left: 0;
    list-style: none;
}

.sv-tab-list li {
    position: relative;
    padding-left: 26px;
    color: #45526b;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 6px;
}

.sv-tab-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2b65b6;
}

.sv-tab-outro {
    color: #102c52;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 22px;
}

.sv-tab-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.sv-tab-img {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(16, 44, 82, 0.12);
}

.sv-tab-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- "We Fund..." transition/together section ---- */
.sv-transition {
    padding: 40px 0 90px;
}

.sv-transition-heading {
    color: #102c52;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    margin-bottom: 18px;
}

.sv-transition-para {
    color: #45526b;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 16px;
    white-space: pre-line;
}

/* ---- Category quick-links grid (reuses .hm-solution-card) ---- */
.sv-services {
    background: #f7f9fc;
    padding: 90px 0;
}

.sv-services-heading {
    color: #102c52;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 800;
    margin-bottom: 12px;
}

.sv-services-sub {
    color: #6b7890;
    font-size: 16px;
    margin-bottom: 10px;
    max-width: 640px;
}

.sv-services-group {
    margin-top: 40px;
}

.sv-services-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 36px;
}

.sv-services-links a {
    color: #2b65b6;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.sv-services-links a:hover {
    text-decoration: underline;
}