/*
 * SBMPC inner-page art direction
 * A high-contrast adaptation of Porto Marketing 1 for both the modern and
 * legacy page templates that still exist in this site.
 */
:root {
    --sb-navy: #071f33;
    --sb-blue: #0b4f8a;
    --sb-violet: #6639e6;
    --sb-magenta: #9827d8;
    --sb-orange: #f28c28;
    --sb-lavender: #eee9ff;
    --sb-mint: #dff5ee;
    --sb-peach: #ffe5c7;
    --sb-sky: #deefff;
    --sb-paper: #f7f5ff;
    --sb-ink: #132c40;
    --sb-copy: #40566a;
}

html { scroll-padding-top: 110px; }

body {
    background: var(--sb-paper) !important;
    color: var(--sb-ink);
}

body,
p,
li,
td,
th,
input,
textarea,
select,
button { font-family: Poppins, Arial, sans-serif; }

p,
.section-description,
.about-description,
.service-description,
.loan-content p,
.news-content p {
    color: var(--sb-copy);
    line-height: 1.78;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.hero-title { font-family: Lexend, Poppins, sans-serif; }

/* Modern image heroes */
.hero-section {
    isolation: isolate;
    min-height: 600px !important;
    background-color: var(--sb-navy) !important;
}

.hero-section::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -8%;
    bottom: -32%;
    width: 42vw;
    height: 42vw;
    min-width: 430px;
    min-height: 430px;
    border: 72px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    pointer-events: none;
}

.hero-section .container { position: relative; z-index: 3; }

.hero-overlay {
    z-index: 1;
    background: linear-gradient(90deg, rgba(7, 31, 51, .97) 0%, rgba(26, 42, 90, .88) 48%, rgba(80, 38, 143, .34) 100%) !important;
}

.hero-title {
    max-width: 900px;
    text-wrap: balance;
    text-shadow: 0 8px 35px rgba(0, 0, 0, .24);
}

.hero-description { color: rgba(255, 255, 255, .88) !important; }

.hero-badge {
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .15) !important;
}

.hero-proof-pill {
    width: fit-content;
    margin-top: 1.2rem;
    padding: .65rem 1rem;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(7, 31, 51, .45);
    color: #fff;
    font-family: Lexend, Poppins, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.hero-proof-pill span { margin-inline: .35rem; color: #f28c28; }

/* Legacy page titles get the same dramatic page-opening treatment. */
.breadcrumb-area {
    position: relative;
    isolation: isolate;
    min-height: 400px;
    margin-top: 92px;
    display: flex;
    align-items: center;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%);
    background-position: center !important;
}

.breadcrumb-area::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(105deg, rgba(7, 31, 51, .97), rgba(11, 79, 138, .78) 55%, rgba(102, 57, 230, .45));
}

.breadcrumb-area > * { position: relative; z-index: 2; }

.breadcrumb-area h2,
.breadcrumb-area .breadcrumb-content h2 {
    color: #fff !important;
    font-family: Lexend, Poppins, sans-serif;
    font-size: clamp(2.7rem, 7vw, 5.5rem) !important;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1;
    text-shadow: 0 8px 35px rgba(0, 0, 0, .22);
}

.breadcrumb-area .breadcrumb,
.breadcrumb-area .breadcrumb a,
.breadcrumb-area .breadcrumb-item,
.breadcrumb-area p { color: rgba(255, 255, 255, .86) !important; }

/* Alternating colored editorial sections, based on Marketing 1 inner pages. */
.about-section,
.about-area,
.souvenier-viewer-section { background: var(--sb-mint) !important; }

.services-section,
.features-area { background: var(--sb-lavender) !important; }

.loans-section { background: linear-gradient(135deg, #e4f1ff, #eee8ff) !important; }

.about-section,
.services-section,
.loans-section,
.statistics-section,
.about-area,
.features-area,
.souvenier-viewer-section {
    position: relative;
    overflow: hidden;
}

.about-section::before,
.services-section::before,
.loans-section::before,
.about-area::before,
.features-area::before {
    content: "";
    position: absolute;
    top: -170px;
    right: -130px;
    width: 360px;
    height: 360px;
    border: 55px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    pointer-events: none;
}

.about-section > .container,
.services-section > .container,
.loans-section > .container,
.statistics-section > .container,
.about-area > .container,
.features-area > .container { position: relative; z-index: 1; }

.section-badge {
    background: #fff !important;
    color: var(--sb-violet) !important;
    box-shadow: 0 10px 30px rgba(71, 49, 136, .08);
}

.section-badge i { color: var(--sb-orange) !important; }

.section-title {
    color: var(--sb-navy) !important;
    text-wrap: balance;
}

.section-header { position: relative; z-index: 1; }

/* Content panels and cards carry color, instead of dissolving into white. */
.about-content {
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 24px 65px rgba(18, 48, 70, .08);
}

.service-card,
.loan-card,
.stat-card,
.news-item,
.contact-info-item,
.single-feature-area,
.single-team-member-area,
.single-blog-area {
    border: 1px solid rgba(54, 55, 112, .10) !important;
    border-radius: 1.35rem !important;
    box-shadow: 0 18px 48px rgba(33, 33, 82, .08) !important;
}

.services-grid > :nth-child(4n + 1),
.loans-grid > :nth-child(4n + 1),
.news-grid > :nth-child(4n + 1) { background: #fff !important; }

.services-grid > :nth-child(4n + 2),
.loans-grid > :nth-child(4n + 2),
.news-grid > :nth-child(4n + 2) { background: var(--sb-mint) !important; }

.services-grid > :nth-child(4n + 3),
.loans-grid > :nth-child(4n + 3),
.news-grid > :nth-child(4n + 3) { background: var(--sb-peach) !important; }

.services-grid > :nth-child(4n),
.loans-grid > :nth-child(4n),
.news-grid > :nth-child(4n) { background: var(--sb-sky) !important; }

.service-card:hover,
.loan-card:hover,
.news-item:hover {
    transform: translateY(-9px);
    border-color: rgba(102, 57, 230, .22) !important;
    box-shadow: 0 28px 70px rgba(56, 40, 125, .15) !important;
}

.service-icon,
.stat-icon {
    background: linear-gradient(135deg, var(--sb-violet), var(--sb-magenta)) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(102, 57, 230, .22);
}

.service-icon i,
.stat-icon i { color: #fff !important; }

.loan-content h3,
.service-card h3,
.news-item h3 { color: var(--sb-navy); }

.about-content,
.loan-card,
.service-card,
.contact-info-item {
    overflow-wrap: anywhere;
}

.allied-service-card,
.allied-service-card .loan-content {
    background: linear-gradient(145deg, #fff0d9, #ffe1b9) !important;
}

.location-type {
    background: var(--sb-violet) !important;
    color: #fff !important;
}

/* Marketing 1 uses a dark impact band to reset contrast between light sections. */
.statistics-section {
    background: var(--sb-navy) !important;
    color: #fff;
}

.statistics-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(102, 57, 230, .34), transparent 32%),
        radial-gradient(circle at 92% 80%, rgba(11, 112, 168, .34), transparent 28%);
    pointer-events: none;
}

.statistics-section .section-title,
.statistics-section h2,
.statistics-section h3 { color: #fff !important; }

.statistics-section p,
.statistics-section .section-description { color: rgba(255, 255, 255, .72) !important; }

.statistics-section .stat-card {
    border-color: rgba(255, 255, 255, .13) !important;
    background: rgba(255, 255, 255, .075) !important;
    backdrop-filter: blur(8px);
}

.statistics-section .stat-number { color: #fff !important; }

/* Keep tables and long-form content highly readable. */
table {
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 16px 40px rgba(20, 41, 69, .08);
}

table thead,
table th {
    background: var(--sb-navy) !important;
    color: #fff !important;
}

table td { color: #30485b !important; }

table tr:nth-child(even) td { background: #f0edff; }

/* Strong gradient call-to-action, mirroring the reference theme. */
.cta-section {
    background: linear-gradient(118deg, var(--sb-violet), var(--sb-magenta)) !important;
    color: #fff;
}

.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .19), transparent 30%);
    pointer-events: none;
}

.cta-section h2,
.cta-section h3,
.cta-section p { color: #fff !important; }

.cta-section .btn-primary,
.cta-section .btn-secondary {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--sb-violet) !important;
}

.newsletter-section {
    background: linear-gradient(110deg, var(--sb-mint), var(--sb-lavender), var(--sb-peach)) !important;
}

.newsletter-content {
    border: 1px solid rgba(255, 255, 255, .84) !important;
    background: rgba(255, 255, 255, .73) !important;
    box-shadow: 0 25px 70px rgba(45, 39, 102, .10);
}

.newsletter-text h2 {
    color: var(--sb-navy) !important;
}

.newsletter-text p {
    color: var(--sb-copy) !important;
}

.newsletter-actions .btn-primary {
    border-color: var(--sb-violet) !important;
    background: var(--sb-violet) !important;
    color: #fff !important;
}

.newsletter-actions .btn-primary:hover,
.newsletter-actions .btn-primary:focus {
    border-color: var(--sb-navy) !important;
    background: var(--sb-navy) !important;
    color: #fff !important;
}

.newsletter-actions .btn-secondary {
    border: 2px solid var(--sb-navy) !important;
    background: #fff !important;
    color: var(--sb-navy) !important;
}

.newsletter-actions .btn-secondary:hover,
.newsletter-actions .btn-secondary:focus {
    border-color: var(--sb-violet) !important;
    background: var(--sb-lavender) !important;
    color: var(--sb-violet) !important;
}

.btn-primary,
.member-login-btn {
    background: var(--sb-violet) !important;
    color: #fff !important;
}

.btn-primary:hover,
.member-login-btn:hover { background: var(--sb-navy) !important; }

.btn-outline { border-width: 2px; }

.footer-area {
    background: var(--sb-navy) !important;
    border-top: 8px solid var(--sb-violet);
}

/* Legacy content areas were especially flat; give them breathing room and panels. */
.about-area,
.features-area { padding-block: 6rem !important; }

.about-area .row,
.features-area .row { position: relative; z-index: 1; }

.about-area .single-about-area,
.about-area .about-content,
.features-area .single-feature-area {
    background: rgba(255, 255, 255, .76);
    border-radius: 1.25rem;
}

.faq-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--sb-sky), var(--sb-lavender));
}

.faq-list {
    width: min(900px, 100%);
    margin: 2.5rem auto 0;
    display: grid;
    gap: 1rem;
}

.faq-list details {
    overflow: hidden;
    border: 1px solid rgba(54, 55, 112, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 36px rgba(33, 33, 82, .07);
}

.faq-list summary {
    position: relative;
    padding: 1.25rem 3.5rem 1.25rem 1.4rem;
    color: var(--sb-navy);
    font-family: Lexend, Poppins, sans-serif;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 1.35rem;
    color: var(--sb-violet);
    font-size: 1.5rem;
    transform: translateY(-50%);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] { border-color: rgba(102, 57, 230, .35); }
.faq-list details p { margin: 0; padding: 0 1.4rem 1.35rem; }

.sbmpc-error-page {
    min-height: calc(100vh - 92px);
    margin-top: 92px;
    padding: clamp(5rem, 12vw, 9rem) 0;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(102, 57, 230, .18), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(242, 140, 40, .2), transparent 28%),
        var(--sb-paper);
}

.sbmpc-error-page .container { max-width: 760px; }
.sbmpc-error-code {
    margin: 0 0 .5rem;
    color: var(--sb-violet);
    font: 800 clamp(5rem, 18vw, 10rem)/.9 Lexend, sans-serif;
}
.sbmpc-error-page h1 { color: var(--sb-navy); font-size: clamp(2rem, 6vw, 4rem); }
.sbmpc-error-page > .container > p:not(.sbmpc-error-code) { max-width: 640px; margin: 1rem auto 2rem; }
.sbmpc-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.sbmpc-error-footer { padding: 1.25rem; background: var(--sb-navy); text-align: center; }
.sbmpc-error-footer p { margin: 0; color: rgba(255, 255, 255, .72); }

@media (max-width: 1120px) {
    .breadcrumb-area { margin-top: 82px; }
    .about-content {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2.5rem !important;
    }
    .about-text,
    .about-image { width: 100%; min-width: 0; }
}

@media (max-width: 768px) {
    .hero-section { min-height: 540px !important; }
    .breadcrumb-area { min-height: 340px; }
    .about-content { padding: 1.25rem; gap: 1.75rem !important; }
    .hero-proof-pill { white-space: normal; }
    .services-grid,
    .loans-grid,
    .statistics-grid,
    .news-grid,
    .footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .service-card,
    .loan-card,
    .stat-card,
    .news-item { width: 100%; min-width: 0; }
    .loan-content,
    .service-card { padding: 1.35rem !important; }
    .loan-image { height: 210px !important; }
    .cta-actions,
    .newsletter-actions { width: 100%; }
    .cta-actions .btn,
    .newsletter-actions .btn { width: 100%; justify-content: center; }
    table { display: block; max-width: 100%; overflow-x: auto; }
    input,
    select,
    textarea { max-width: 100%; }
    .section-title { font-size: clamp(2rem, 10vw, 3rem) !important; }
    .faq-section { padding: 4.5rem 0; }
    .sbmpc-error-page { min-height: calc(100vh - 82px); margin-top: 82px; }
}