/* ============================================================
   VISIONARY PATH SERVICES — Master Design System & UI Consistency
   Enterprise FinTech Production Standard · September 2026
   ============================================================ */

/* ─────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — All CSS custom properties are defined in
   css/design-system.css which loads before this file.
   Do NOT re-define tokens here. Use var() to reference them.
   ───────────────────────────────────────────────────────────────────── */

/* ── Global Container & Section Rhythm Normalization ── */
.container {
    width: min(100% - 32px, var(--container-width, 1200px)) !important;
    margin-inline: auto !important;
}

@media (max-width: 480px) {
    .container {
        width: min(100% - 24px, var(--container-width, 1200px)) !important;
    }
}

.section,
.section-pad {
    padding: var(--space-section, 44px) 0;
}

@media (max-width: 768px) {
    .section,
    .section-pad {
        padding: var(--space-section-mobile, 22px) 0;
    }
}




/* ──────────────────────────────────────────────────────────
   1. TYPOGRAPHY FOUNDATION  
   Body bumped to 16px (WCAG AA minimum for body text).
   Line height kept at 1.65 for comfortable scan rhythm.
   ────────────────────────────────────────────────────────── */

body {
    font-size: 16px;          /* was 15px — below readable threshold */
    line-height: 1.65;
    color: #1e293b;           /* slightly richer than #334155 for contrast */
}

/* Heading rhythm — tighter only for display headings */
h1, h2, h3 {
    line-height: 1.2;
}
h4, h5, h6 {
    line-height: 1.35;
}

/* Body paragraphs: give them room */
p {
    max-width: 72ch;          /* optimal reading measure */
    line-height: 1.7;
}

/* Section-level subtitle text — was 14.5–15px, now 16px */
.exact-hero-lead,
.bridging-sub,
.why-sub,
.section-sub,
.pan-india-sub {
    font-size: 16px;
    line-height: 1.7;
    color: #374151;           /* #64748b was 4.5:1 – borderline; this is 7:1 */
}

/* ──────────────────────────────────────────────────────────
   2. TOP BAR  
   Current 12.5px is too small for mission-critical contact.
   ────────────────────────────────────────────────────────── */

.top-bar {
    font-size: 13.5px;
}

.contact-num {
    font-size: 14px;
    font-weight: 700;
}

.top-bar-right a {
    font-size: 14px;
}

/* ──────────────────────────────────────────────────────────
   3. NAVIGATION  
   Nav links at 13.5px are legible but tight on 1024px.
   Bump to 14px. Dropdown text sizes lifted to readable floor.
   ────────────────────────────────────────────────────────── */

.nav-links a {
    font-size: 14px;
}

/* Mega dropdown card titles */
.mega-loan-title {
    font-size: 14px;
}

/* Mega dropdown descriptions — was 11px, well below any standard */
.mega-loan-desc {
    font-size: 13px;
    color: #475569;           /* lifted from #64748b for readability */
}

/* Country names in mega dropdown */
.country-name {
    font-size: 13px;
}

/* Mega footer labels */
.mega-footer-note {
    font-size: 12.5px;
}
.mega-footer-cta {
    font-size: 13px;
}
.mega-header-title {
    font-size: 12px;
}
.mega-header-pill {
    font-size: 11px;
}

/* More dropdown items */
.more-dropdown-item {
    font-size: 14px;
}

/* Logo sub-tagline — currently 9.5px, unreadable */
.logo-sub,
.logo-tagline {
    font-size: 10.5px;
    letter-spacing: 0.3px;
}

/* ──────────────────────────────────────────────────────────
   4. HERO SECTION (INSTITUTIONAL FINTECH POLISH)
   ────────────────────────────────────────────────────────── */

.exact-hero {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
}

.exact-hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 520px;
    padding: 56px 0 64px;
}

.exact-hero-content {
    flex: 1 1 540px;
    max-width: 580px;
    position: relative;
    z-index: 2;
}

.exact-hero-visual {
    flex: 1 1 480px;
    max-width: 540px;
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.exact-hero-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-wrap: balance;
    margin-bottom: 16px;
    color: var(--color-primary, #0a1d37) !important;
}

.hero-highlight {
    color: var(--color-orange, #FF5A00) !important;
    font-weight: 800;
}

.exact-hero-lead {
    font-size: 16px;
    color: #334155;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 18px;
    text-wrap: pretty;
}

.hero-supporting-block {
    background: rgba(248, 250, 252, 0.85);
    border-left: 3.5px solid #047857;
    border-radius: 0 12px 12px 0;
    padding: 12px 18px;
    margin-bottom: 22px;
}

.hero-supporting-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vps-navy, #0a1d37);
    line-height: 1.35;
    margin-bottom: 4px;
}

.hero-supporting-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

.hero-loan-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.hero-loan-pill {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(10, 29, 55, 0.04);
    border: 1px solid rgba(10, 29, 55, 0.1);
    color: var(--vps-navy);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-loan-pill i {
    color: var(--vps-green);
    font-size: 12px;
}

.hero-loan-pill:hover {
    background: #ecfdf5;
    border-color: var(--vps-green);
    color: var(--vps-green-dark);
    transform: translateY(-2px);
}

.exact-hero-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.btn-hero-primary {
    background: var(--vp-orange-gradient, linear-gradient(135deg, #FF5A00 0%, #FF8A00 100%)) !important;
    color: #ffffff !important;
    padding: 13.5px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(255, 90, 0, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.btn-hero-primary:hover {
    background: linear-gradient(135deg, #E04F00 0%, #FF7A00 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.38);
    color: #ffffff !important;
}

.btn-hero-primary:active,
.btn-hero-secondary:active {
    transform: scale(0.98);
}

.btn-hero-secondary {
    background: #ffffff;
    border: 1.5px solid #0e3875;
    color: #0e3875;
    padding: 12.5px 26px;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(14, 56, 117, 0.06);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-secondary:hover {
    border-color: #092652;
    color: #092652;
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 56, 117, 0.15);
}

.btn-hero-secondary i {
    color: #0e3875;
}

/* Hero Trust Strip */
.hero-trust-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #475569;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.trust-icon-green {
    color: var(--vps-green);
    font-size: 14px;
}

.trust-icon-blue {
    color: var(--vps-blue);
    font-size: 14px;
}

.hero-trust-sep {
    color: #cbd5e1;
}

/* ── Hero Visual Artwork (Right Column Matching Reference Design) ── */
.hero-visual-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-visual-img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 24px;
    filter: drop-shadow(0 20px 40px rgba(10, 29, 55, 0.12));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-frame:hover .hero-visual-img {
    transform: translateY(-4px) scale(1.01);
}

.hero-floating-pill {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 12px 28px rgba(10, 29, 55, 0.12);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vps-navy, #0a1d37);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.hero-floating-pill .floating-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #047857;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hero-floating-pill.pill-top {
    top: 20px;
    left: -10px;
}

.hero-floating-pill.pill-bottom {
    bottom: 24px;
    right: -10px;
}

.exact-hero-safety {
    font-size: 13px;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 20px;
}

.exact-hero-safety i {
    color: #047857;
    font-size: 13px;
}

/* Pillar labels — was 13.5px, legible but let's polish */
.pillar-label {
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 992px) {
    .exact-hero-grid {
        flex-direction: column;
        align-items: center;
        gap: 36px;
        padding: 40px 0 48px;
    }
    .exact-hero-content {
        max-width: 100%;
    }
    .exact-hero-visual {
        max-width: 520px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-supporting-block {
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        max-width: 480px;
    }
    .hero-loan-pills {
        justify-content: center;
    }
    .hero-trust-strip {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .hero-floating-pill.pill-top {
        top: 10px;
        left: 8px;
        font-size: 11px;
        padding: 5px 12px;
    }
    .hero-floating-pill.pill-bottom {
        bottom: 10px;
        right: 8px;
        font-size: 11px;
        padding: 5px 12px;
    }
    .hero-floating-pill .floating-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .exact-hero-title {
        font-size: 28px;
    }
    .exact-hero-lead {
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .hero-floating-pill {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────
   5. SECTION HEADINGS & EYEBROWS  
   ────────────────────────────────────────────────────────── */

.section-title {
    font-size: clamp(26px, 3.5vw, 38px);
}

.eyebrow-text,
.brand-eyebrow .eyebrow-text {
    font-size: 13px;
}

.why-top-eyebrow {
    font-size: 13px;
}

.handwritten-note {
    font-size: 14px;
}

/* ──────────────────────────────────────────────────────────
   6. CARD BODY TEXT  
   Most cards use 12–12.5px for descriptions — lifted to 13.5px.
   This is the single biggest readability fix on the site.
   ────────────────────────────────────────────────────────── */

/* Pan India cards */
.pan-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
}

.pan-card h3 {
    font-size: 15.5px;
}

/* Why VPS 9 cards */
.why-feature-card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #475569;
}

.why-feature-card h4 {
    font-size: 15.5px;
}

/* Bridge cards */
.bridge-points li {
    font-size: 14.5px;
    line-height: 1.6;
}

.disclosure-text {
    font-size: 14px;
    line-height: 1.6;
}

/* Core cards (About, Services) */
.core-card p {
    font-size: 14.5px;
    line-height: 1.7;
}

.core-card h3 {
    font-size: 18.5px;
}

/* Docs card lists */
.check-bullet-list li {
    font-size: 15px;
}

.doc-checklist li {
    font-size: 14px;
}

/* Country stat label */
.country-stat-lbl {
    font-size: 12px;   /* uppercase + tracking makes 12px readable */
}

/* ──────────────────────────────────────────────────────────
   7. FAQ COMPONENT  
   ────────────────────────────────────────────────────────── */

.faq-question {
    font-size: 16px;
    line-height: 1.5;
}

.faq-answer {
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
}

/* ──────────────────────────────────────────────────────────
   8. FOOTER  
   Footer link text at 13px and about text at 13px both
   suffer from low contrast on the dark navy bg. Lift contrast.
   ────────────────────────────────────────────────────────── */

.footer-about-text,
.footer-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);   /* was 0.7 — too faint */
    line-height: 1.7;
}

.footer-col h4 {
    font-size: 15px;
}

.footer-col ul li a,
.footer-links li a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);   /* was 0.72 */
}

.footer-col ul li a:hover,
.footer-links li a:hover {
    color: #ffffff;
}

.contact-list li {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);   /* was 0.75 */
}

.footer-logo-name,
.footer-brand .logo-name {
    font-size: 16px;
}

.footer-logo-tagline,
.footer-brand .logo-sub {
    font-size: 11px;
    color: #6ee7b7;   /* slightly brighter green on dark */
}

.footer-bottom-inner {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.70);   /* was 0.55 — too faint */
}

.two-col-list li a {
    font-size: 13px !important;   /* was 12px */
}

/* ──────────────────────────────────────────────────────────
   9. POPUP MODAL  
   ────────────────────────────────────────────────────────── */

.popup-left-desc {
    font-size: 13.5px;
    line-height: 1.6;
}

.feature-text-wrap strong {
    font-size: 13.5px;
}

.feature-text-wrap span {
    font-size: 12px;
    color: #475569;   /* was #64748b — borderline on white */
}

.popup-form-header h4 {
    font-size: 21px;
}

.popup-form-header p {
    font-size: 13.5px;
    color: #475569;
}

.form-group label,
.form-label-regular {
    font-size: 13px;
    color: #1e293b;
}

.input-icon-wrap input,
.input-icon-wrap textarea {
    font-size: 15px;   /* was 13px — iOS auto-zoom threshold is 16px; near-16 is safe */
    color: #0f172a;
}

.popup-safe {
    font-size: 12px;
    color: #475569;
}

/* ──────────────────────────────────────────────────────────
   10. PAGE HERO (inner pages)  
   The .page-hero p text contrast at rgba(255,255,255,0.85)
   on gradient is fine, but size was sometimes 1rem = 16px. Keep.
   ────────────────────────────────────────────────────────── */

.page-hero p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.90);   /* boosted from 0.85 */
}

.page-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.breadcrumb {
    font-size: 13.5px;
}

/* ──────────────────────────────────────────────────────────
   11. INNER PAGE SECTIONS (shared across services/loan pages)
   ────────────────────────────────────────────────────────── */

/* Purpose section */
.purpose-text p {
    font-size: 16.5px;
    line-height: 1.8;
}

/* Section sub text for all inner pages */
.section-sub {
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
}

/* ──────────────────────────────────────────────────────────
   12. EMI CALCULATOR  
   ────────────────────────────────────────────────────────── */

.emi-inputs-col h3 {
    font-size: 26px;
}

.emi-inputs-col p {
    font-size: 15px;
    color: #475569;
}

.emi-label-row label {
    font-size: 15px;
}

.emi-breakdown-row {
    font-size: 15px;
}

.emi-bar-legend {
    font-size: 13px;
    color: #475569;
}

/* ──────────────────────────────────────────────────────────
   13. FINANCIAL TOOLS / CALCULATORS  
   ────────────────────────────────────────────────────────── */

.calc-pane-title {
    font-size: 1.55rem;
}

.calc-label {
    font-size: 1rem;
}

.calc-val-input {
    font-size: 1.2rem;
}

.calc-result-sub {
    font-size: 1rem;
}

.calc-breakdown-row {
    font-size: 1rem;
}

.calc-breakdown-row.total-row {
    font-size: 1.1rem;
}

.calc-disclaimer {
    font-size: 0.78rem;
    line-height: 1.6;
    color: #64748b;
}

/* ──────────────────────────────────────────────────────────
   14. MARQUEE / LENDER CARDS  
   ────────────────────────────────────────────────────────── */

.home-marquee-label,
.marquee-label {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
    justify-content: center !important;
}

.marquee-card-badge {
    font-size: 0.72rem;   /* was 0.68rem — just below readable floor */
}

/* ──────────────────────────────────────────────────────────
   15. BUTTONS — size and touch targets  
   ────────────────────────────────────────────────────────── */

.btn {
    font-size: 14px;
    min-height: 44px;   /* Apple HIG / WCAG 2.5.5 minimum touch target */
}

.btn-hero-primary {
    font-size: 15.5px;
    padding: 14px 32px;
}

.btn-hero-secondary {
    font-size: 14.5px;
    padding: 13px 28px;
}

.btn-primary,
.btn-eligibility {
    font-size: 14px;
    padding: 10px 22px;
}

.btn-whatsapp-nav {
    font-size: 13px;
}

.btn-lg {
    font-size: 15.5px;
}

.btn-calc-deal {
    font-size: 1.05rem;
    padding: 16px 28px;
}

/* ──────────────────────────────────────────────────────────
   16. INLINE-STYLE PAGE OVERRIDES  
   Services, Contact, Partner pages use <style> blocks with
   small px values. These global selectors beat specificity.
   ────────────────────────────────────────────────────────── */

/* Services page inline overrides */
.service-card h3 {
    font-size: 19px !important;
}

.service-card p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}

.service-link {
    font-size: 14px !important;
}

.process-card h3 {
    font-size: 16.5px !important;
}

.process-card p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

.loan-col h4 {
    font-size: 15.5px !important;
}

.loan-col ul li {
    font-size: 14px !important;
    line-height: 1.65 !important;
}

.cta-strip h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
}

.cta-strip p {
    font-size: 16px !important;
}

/* Contact page inline overrides */
.contact-left > p,
.contact-form-col > p {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
}

.method-info h4 {
    font-size: 16px !important;
}

.method-info a {
    font-size: 16px !important;
}

.method-info p {
    font-size: 14px !important;
    color: #475569 !important;   /* was var(--slate-300) = #cbd5e1 on white — very low contrast */
}

.form-group label {
    font-size: 14px !important;
}

.input-icon-wrap input,
.input-icon-wrap textarea {
    font-size: 16px !important;  /* prevents iOS zoom on focus */
}

/* ──────────────────────────────────────────────────────────
   17. MUTED / SECONDARY TEXT CONTRAST FIX  
   --text-muted = #64748b has 4.5:1 contrast on white which
   only passes AA for large text (18px+). For 13-14px body
   text this is a fail. Bring all muted instances above 4.7:1.
   ────────────────────────────────────────────────────────── */

.text-muted,
.section-sub,
.pan-india-sub,
.why-sub,
.exact-hero-safety {
    color: #475569 !important;   /* 7.1:1 on white */
}

/* Card muted text */
.pan-card p,
.why-feature-card p {
    color: #4b5563 !important;   /* 7.4:1 on white */
}

/* ──────────────────────────────────────────────────────────
   18. BLOG PAGE  
   ────────────────────────────────────────────────────────── */

.blog-card h3,
.blog-card-title {
    font-size: 18px;
    line-height: 1.4;
}

.blog-card p,
.blog-card-excerpt {
    font-size: 14.5px;
    line-height: 1.7;
    color: #374151;
}

.blog-card-meta,
.blog-meta {
    font-size: 13px;
    color: #475569;
}

/* ──────────────────────────────────────────────────────────
   19. DISCLAIMER / PRIVACY / TERMS — legal pages  
   Legal text needs to be the MOST readable.
   ────────────────────────────────────────────────────────── */

.legal-section p,
.privacy-content p,
.terms-content p,
main p {
    font-size: 15.5px;
    line-height: 1.85;
    color: #1e293b;
    max-width: 76ch;
}

main h2 {
    font-size: clamp(22px, 2.8vw, 30px);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

main h3 {
    font-size: clamp(18px, 2vw, 22px);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

main ul li,
main ol li {
    font-size: 15.5px;
    line-height: 1.8;
    color: #1e293b;
    margin-bottom: 8px;
}

/* ──────────────────────────────────────────────────────────
   20. ABOUT PAGE  
   ────────────────────────────────────────────────────────── */

.about-hero-title {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(2.2rem, 4.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.about-section-title {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.about-hero-lead,
.about-section-sub {
    text-wrap: pretty;
}

.about-stat-number,
.focus-card-num,
.step-pill,
.floating-badge-val {
    font-variant-numeric: tabular-nums;
}

.our-purpose-label h2 {
    font-size: clamp(30px, 4vw, 42px);
    text-wrap: balance;
}

.purpose-text p {
    font-size: 16.5px;
    line-height: 1.85;
    color: #1e293b;
    text-wrap: pretty;
}

/* ──────────────────────────────────────────────────────────
   21. PARTNER-WITH-US PAGE  
   ────────────────────────────────────────────────────────── */

.partner-card h3,
.partner-benefit h3 {
    font-size: 18px;
}

.partner-card p,
.partner-benefit p {
    font-size: 14.5px;
    line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────
   22. CTA SECTIONS  
   ────────────────────────────────────────────────────────── */

.cta-section h2 {
    font-size: clamp(26px, 3.8vw, 40px);
}

.cta-section p {
    font-size: 17px;
    line-height: 1.7;
}

.dream-heading {
    font-size: 26px;
    line-height: 1.3;
}

.dream-note-text {
    font-size: 14px;
}

/* ──────────────────────────────────────────────────────────
   23. RESPONSIVE ADJUSTMENTS — readability maintained  
   ────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    body { font-size: 16px; }

    .exact-hero-lead { font-size: 16px; }
    .bridging-sub { font-size: 15px; }
    .section-sub { font-size: 15px; }

    .faq-question { font-size: 15.5px; }
    .faq-answer { font-size: 14.5px; }

    .footer-about-text,
    .footer-desc { font-size: 13.5px; }

    .footer-col ul li a,
    .footer-links li a { font-size: 13.5px; }
}

@media (max-width: 768px) {
    body { font-size: 16px; }  /* Never shrink below 16px */

    .page-hero p { font-size: 16px; }
    .exact-hero-lead { font-size: 16px; }

    .pan-card p { font-size: 14px; }
    .why-feature-card p { font-size: 14px; }
    .bridge-points li { font-size: 14px; }

    .faq-question { font-size: 15px; }
    .faq-answer { font-size: 14px; }

    main p { font-size: 15px; }
    main ul li, main ol li { font-size: 15px; }

    .cta-section p { font-size: 16px; }
    .dream-heading { font-size: 22px; }

    .contact-list li { font-size: 13.5px; }
    .footer-col ul li a,
    .footer-links li a { font-size: 13px; }
}

@media (max-width: 480px) {
    .hero-loan-pill { font-size: 12.5px; }
    .pan-card h3 { font-size: 15px; }
    .why-feature-card h4 { font-size: 15px; }
    .mega-loan-title { font-size: 13.5px; }
}

/* ──────────────────────────────────────────────────────────
   24. INTERACTION STATES — visible & accessible  
   ────────────────────────────────────────────────────────── */

/* Larger focus ring for better keyboard visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18) !important;
}

/* Selection highlight */
::selection {
    background: #dbeafe;
    color: #1e40af;
}

/* ──────────────────────────────────────────────────────────
   25. UTILITY — spacing breathing room  
   Cards that are dense get a touch more internal padding.
   ────────────────────────────────────────────────────────── */

.why-feature-card {
    padding: 28px 24px;
}

.pan-card {
    padding: 24px 22px;
}

.core-card {
    padding: 34px 26px;
}

.bridge-card {
    padding: 34px 32px;
}

/* ──────────────────────────────────────────────────────────
   26. SCROLLBAR — polished & branded  
   ────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ──────────────────────────────────────────────────────────
   27. LENDER DETAIL CARDS (Partner Lenders Page)
   Ensures sharp typography, contrast & touch targets
   ────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   27. LENDER DETAIL CARDS (Partner Lenders Page)
   Streamlined compact typography tokens
   ────────────────────────────────────────────────────────── */

.lic-name {
    font-size: 0.86rem;
    color: var(--color-navy, #0B1F33);
}

.lic-tagline {
    font-size: 0.65rem;
    color: #64748B;
}

.lic-rate-pill {
    font-size: 0.68rem;
    letter-spacing: 0.1px;
}

.lic-label {
    font-size: 0.70rem;
    color: #64748B;
    font-weight: 500;
}

.lic-value {
    font-size: 0.72rem;
    color: var(--color-navy, #0B1F33);
    font-weight: 700;
}

.lic-cta {
    font-size: 0.76rem;
    min-height: 32px;
}

/* ──────────────────────────────────────────────────────────
   28. GLOBAL BUTTON PRIMITIVES & HARMONIZATION
   Enforces consistent height, padding, radius, and states
   ────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    text-align: center;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
}

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

.btn-primary,
.btn-eligibility,
.btn-submit-enquiry {
    background: var(--color-orange-gradient) !important;
    color: var(--color-white) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.28) !important;
}

.btn-primary:hover,
.btn-eligibility:hover,
.btn-submit-enquiry:hover {
    background: linear-gradient(135deg, #E04F00 0%, #FF7A00 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(255, 90, 0, 0.38) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 14px rgba(10, 29, 55, 0.16);
}

.btn-secondary:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 6px 18px rgba(10, 29, 55, 0.24);
}

.btn-outline {
    background: transparent !important;
    color: var(--color-green) !important;
    border-color: var(--color-green) !important;
}

.btn-outline:hover {
    background: var(--color-green-bg) !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--color-text-body) !important;
    border-color: transparent !important;
}

.btn-ghost:hover {
    background: var(--color-bg-subtle) !important;
}

.btn-whatsapp,
.btn-whatsapp-nav {
    background: #17803d !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(23, 128, 61, 0.28) !important;
}

.btn-whatsapp:hover,
.btn-whatsapp-nav:hover {
    background: #15803d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(23, 128, 61, 0.4) !important;
}

/* ──────────────────────────────────────────────────────────
   29. GLOBAL CARD PRIMITIVES & ELEVATION
   ────────────────────────────────────────────────────────── */

.card,
.service-card,
.loan-card,
.country-card,
.lender-card,
.testimonial-card,
.calculator-card,
.info-card,
.blog-card,
.stat-card,
.pan-card,
.why-feature-card,
.bridge-card,
.core-card,
.partner-card,
.country-stat-box,
.process-card {
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover,
.service-card:hover,
.loan-card:hover,
.country-card:hover,
.lender-card:hover,
.testimonial-card:hover,
.calculator-card:hover,
.info-card:hover,
.blog-card:hover,
.stat-card:hover,
.pan-card:hover,
.why-feature-card:hover,
.bridge-card:hover,
.core-card:hover,
.partner-card:hover,
.country-stat-box:hover,
.process-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

/* ──────────────────────────────────────────────────────────
   30. LENDER FILTER TOOLBAR (Partner Lenders UX Engine)
   ────────────────────────────────────────────────────────── */

.lender-filters-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-xl, 24px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 24px 28px;
    margin: 0 0 44px;
}

.lender-filters-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}

.lender-search-box {
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 440px;
}

.lender-search-box input {
    width: 100%;
    height: 44px;
    padding: 10px 16px 10px 42px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lender-search-box input:focus {
    background: #ffffff;
    border-color: var(--color-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.lender-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.lender-results-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.lender-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-green-bg);
    color: var(--color-green-dark);
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 50px;
    border: 1px solid rgba(26, 156, 78, 0.2);
}

.btn-clear-filters {
    background: transparent;
    border: none;
    color: var(--color-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-clear-filters:hover {
    background: var(--color-blue-bg);
    text-decoration: underline;
}

.filter-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    min-width: 120px;
    padding-top: 8px;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.lender-filter-btn {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}

.lender-filter-btn:hover {
    background: #ffffff;
    border-color: var(--color-border-strong);
    color: var(--color-primary);
}

.lender-filter-btn.active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(10, 29, 55, 0.16);
}

.lenders-empty-state {
    text-align: center;
    padding: 56px 20px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1.5px dashed var(--color-border-strong);
    margin: 32px 0;
}

.lenders-empty-state i {
    font-size: 40px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.lenders-empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.lenders-empty-state p {
    font-size: 14px;
    color: var(--color-text-muted);
    max-width: 440px;
    margin: 0 auto 20px;
}

/* ──────────────────────────────────────────────────────────
   31. FINANCIAL TOOLS / CALCULATOR STANDARDIZATION
   ────────────────────────────────────────────────────────── */

.calc-tabs-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--color-bg);
    padding: 6px;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--color-border);
    margin-bottom: 28px;
}

.calc-tab-btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 18px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-md, 12px);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.calc-tab-btn:hover {
    color: var(--color-primary);
}

.calc-tab-btn.active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}

.calc-panel-card {
    background: var(--color-white);
    border-radius: var(--radius-xl, 24px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 36px 32px;
}

.calc-input-group {
    margin-bottom: 24px;
}

.calc-input-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-body);
    margin-bottom: 10px;
}

.calc-input-val {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.calc-slider {
    width: 100%;
    height: 7px;
    border-radius: 6px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: #e2e8f0;
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-green);
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: var(--color-green-dark);
}

.calc-result-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg, 16px);
    padding: 30px 26px;
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

.calc-result-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}

.calc-result-main {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    color: #4ade80;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-bottom: 20px;
}

/* Landing Page Calculator Result Card Enhancement */
.calc-result-card {
    background: linear-gradient(145deg, #0a1d37 0%, #0d274c 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    padding: 34px 28px !important;
    box-shadow: 0 16px 40px -8px rgba(10, 29, 55, 0.3) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calc-result-sub {
    color: #94a3b8 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: center;
    margin-bottom: 6px;
}

.calc-result-hero {
    color: #22c55e !important;
    font-size: clamp(2.2rem, 3.2vw, 2.9rem) !important;
    font-weight: 900 !important;
    text-align: center;
    font-variant-numeric: tabular-nums !important;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(34, 197, 94, 0.25);
}

.calc-breakdown-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.calc-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #cbd5e1 !important;
}

.calc-breakdown-row span:last-child {
    font-weight: 800;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums;
}

.calc-breakdown-row.total-row {
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2) !important;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff !important;
}

.calc-breakdown-row.total-row span:last-child {
    font-size: 1.25rem !important;
    color: #38bdf8 !important;
    font-weight: 900 !important;
}

.btn-calc-deal {
    background: linear-gradient(135deg, var(--vps-green) 0%, var(--vps-green-dark) 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(26, 156, 78, 0.35) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    cursor: pointer;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
}

.btn-calc-deal:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(26, 156, 78, 0.45) !important;
    color: #ffffff !important;
}

.btn-calc-deal:active {
    transform: scale(0.98) !important;
}

.calc-disclaimer {
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    text-align: center;
    margin-top: 12px;
}

/* ──────────────────────────────────────────────────────────
   31.5 LANDING PAGE SECTIONS ELEVATION
   ────────────────────────────────────────────────────────── */

/* Pan-India Guidance Box (Matches Master Reference Design) */
.pan-india-section {
    padding: 64px 0 !important;
    background: #ffffff !important;
}

.pan-india-box {
    background: #f1fdf6 !important;
    border: 1px solid rgba(22, 163, 74, 0.22) !important;
    border-radius: 28px !important;
    padding: 48px 46px !important;
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.06) !important;
    display: flex !important;
    gap: 40px !important;
    align-items: center !important;
    overflow: hidden !important;
}

.pan-india-header {
    flex: 0 0 340px !important;
    max-width: 360px !important;
    min-width: 0 !important;
}

.pan-india-header .brand-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

.pan-india-header .green-bar {
    display: inline-block !important;
    width: 22px !important;
    height: 3.5px !important;
    background: #16a34a !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

.pan-india-header .eyebrow-text {
    color: #0b1f33 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.pan-india-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(26px, 2.7vw, 34px) !important;
    font-weight: 800 !important;
    color: #0b1f33 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
    text-wrap: balance !important;
}

.pan-india-title .green-highlight {
    color: #047857 !important;
    display: inline !important;
}

.pan-india-sub {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.62 !important;
    margin-bottom: 0 !important;
    text-wrap: pretty !important;
}

.pan-india-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.pan-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 24px 22px !important;
    position: relative !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.pan-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(11, 31, 51, 0.09) !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
}

.pan-card-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #ecfdf6 !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.pan-card-badge.blue-badge {
    background: #eff5fd !important;
    color: #215bdc !important;
}

.pan-card-num {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: #cfd8e3 !important;
    line-height: 1 !important;
}

.pan-card h3 {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0b1f33 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 6px 0 !important;
}

.pan-card p {
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}


/* Bridging The Gap Section */
.bridge-card {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(10, 29, 55, 0.05) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.bridge-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px -4px rgba(10, 29, 55, 0.12) !important;
}

.disclosure-banner {
    background: #ffffff !important;
    border: 1px solid rgba(26, 156, 78, 0.25) !important;
    border-left: 4px solid var(--vps-green) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(10, 29, 55, 0.04) !important;
}

/* Why VPS Section */
.why-feature-card {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(10, 29, 55, 0.04) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.why-feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px -4px rgba(10, 29, 55, 0.1) !important;
    border-color: #cbd5e1 !important;
}

.w-num {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
}

.handwritten-note {
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(10, 29, 55, 0.06) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.handwritten-note.right-note {
    border-color: rgba(26, 156, 78, 0.25) !important;
    background: #f0fdf4 !important;
    color: var(--vps-green-dark) !important;
}

/* Bottom Dream Banner */
.bottom-dream-banner {
    background: linear-gradient(135deg, #0a1d37 0%, #102a50 50%, #0d2342 100%) !important;
    border-radius: 24px !important;
    padding: 38px 42px !important;
    box-shadow: 0 20px 48px rgba(10, 29, 55, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-dream-primary {
    background: linear-gradient(135deg, var(--vps-green) 0%, var(--vps-green-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(26, 156, 78, 0.4) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.btn-dream-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(26, 156, 78, 0.5) !important;
}

.btn-dream-outline {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 13px 26px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.btn-dream-outline:hover {
    background: #ffffff !important;
    color: var(--vps-navy) !important;
    transform: translateY(-2px) !important;
}

.dream-pill {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

/* ──────────────────────────────────────────────────────────
   32. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ──────────────────────────────────────────────────────────
   33. GLOBAL HERO SECTION & LANDING PAGE GRADE PRIMITIVES
   Harmonizes hero height, ambient glow, typography, snapshot cards,
   trust strips, and card primitives globally across all routes.
   ────────────────────────────────────────────────────────── */

.page-hero,
header.page-hero,
section.page-hero,
.legal-hero,
.blog-hub-hero,
.blog-header {
    background: linear-gradient(140deg, #071524 0%, #0B1F33 45%, #123A63 85%, #0B1F33 100%) !important;
    padding: 72px 0 60px !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
}

.page-hero::before,
header.page-hero::before,
section.page-hero::before,
.legal-hero::before,
.blog-hub-hero::before,
.blog-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 18% 25%, rgba(255, 90, 0, 0.08) 0%, transparent 45%),
                radial-gradient(circle at 82% 65%, rgba(18, 58, 99, 0.22) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.page-hero-inner,
.legal-hero-inner,
.exact-hero-container {
    position: relative !important;
    z-index: 2 !important;
}

/* 2-Column Responsive Hero Grid for Subpages */
.page-hero-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 48px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 900px) {
    .page-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
}

.page-hero-content {
    text-align: left !important;
}

.page-hero-center,
.page-hero-center .page-hero-content {
    text-align: center !important;
    max-width: 820px !important;
    margin-inline: auto !important;
}

/* Breadcrumbs with high-contrast active state */
.breadcrumb,
.page-hero .breadcrumb,
.legal-hero .breadcrumb,
.breadcrumbs {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.76) !important;
    margin-bottom: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.breadcrumb a,
.page-hero .breadcrumb a,
.legal-hero .breadcrumb a,
.breadcrumbs a {
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.breadcrumb a:hover,
.page-hero .breadcrumb a:hover,
.legal-hero .breadcrumb a:hover,
.breadcrumbs a:hover {
    color: #34d399 !important;
    text-decoration: underline !important;
}

.breadcrumb strong,
.breadcrumb span,
.breadcrumbs strong,
.breadcrumbs span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Section Eyebrow Labels */
.section-label,
.section-eyebrow,
.why-top-eyebrow {
    color: var(--color-green-dark, #15803d) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
    line-height: 1.3 !important;
}

/* Glowing Pill Eyebrow on Dark Banners */
.page-hero .brand-eyebrow,
.about-hero .brand-eyebrow,
.legal-hero .brand-eyebrow,
.blog-hub-hero .brand-eyebrow,
.blog-header .brand-eyebrow,
.cta-section .brand-eyebrow,
.cta-strip .brand-eyebrow,
.page-hero-eyebrow,
.hub-eyebrow,
.about-eyebrow-tag,
.page-hero .section-label,
.legal-hero .section-label,
.cta-section .section-label,
.cta-strip .section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(52, 211, 153, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.32) !important;
    color: #34d399 !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-full, 9999px) !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}

.page-hero-inner .brand-eyebrow,
.blog-hub-hero .brand-eyebrow {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 14px !important;
}

.page-hero .brand-eyebrow .pulse-dot,
.about-hero .brand-eyebrow .pulse-dot,
.legal-hero .brand-eyebrow .pulse-dot,
.blog-hub-hero .brand-eyebrow .pulse-dot,
.blog-header .brand-eyebrow .pulse-dot,
.page-hero-eyebrow .pulse-dot,
.hub-eyebrow .pulse-dot,
.about-eyebrow-tag .badge-dot,
.snapshot-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #34d399 !important;
    box-shadow: 0 0 8px #34d399 !important;
    animation: pulseDot 2s infinite !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Light Surface Hero Eyebrow Pill (Homepage .exact-hero) */
.exact-hero .brand-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #15803d !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-full, 9999px) !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}

.exact-hero .brand-eyebrow .eyebrow-text {
    color: #15803d !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

.exact-hero .brand-eyebrow .pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #15803d !important;
    box-shadow: 0 0 8px rgba(21, 128, 61, 0.4) !important;
    animation: pulseDot 2s infinite !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Light Surface Section Eyebrows (PAN India & Bridging the Gap) */
.pan-india-header .brand-eyebrow,
.bridging-inner .brand-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
}

.pan-india-header .brand-eyebrow .eyebrow-text,
.bridging-inner .brand-eyebrow .eyebrow-text {
    color: #0a1d37 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

.pan-india-header .green-bar,
.bridging-inner .green-bar,
.brand-eyebrow .green-bar {
    display: inline-block !important;
    width: 24px !important;
    height: 3px !important;
    background: #047857 !important;
    border-radius: 2px !important;
}

@keyframes pulseDot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.75;
    }
}

/* High-Contrast Headings and Emerald Highlights (WCAG 2.2 AA Compliant) */
.page-hero h1,
header.page-hero h1,
.legal-hero h1,
.hub-title,
.blog-title {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 16px !important;
    text-wrap: balance !important;
}

/* 1. Default & Light Surfaces: Deep Rich Emerald (Contrast 5.3:1+ on #ffffff / #f8fafc) */
.green-highlight,
.exact-hero-title .green-highlight,
.section-title .green-highlight,
.pan-india-title .green-highlight,
.bridging-title .green-highlight,
.why-main-title .green-highlight,
.popup-title .green-highlight {
    color: #047857 !important;
    display: inline !important;
    font-weight: inherit !important;
}

/* 2. Dark Hero Banners: Vibrant High-Contrast Mint (Contrast 8.5:1+ against #0a1d37 / #061325) */
.page-hero .green-highlight,
.page-hero h1 .green-highlight,
header.page-hero .green-highlight,
.legal-hero .green-highlight,
.legal-hero h1 .green-highlight,
.blog-hub-hero .green-highlight,
.blog-header .green-highlight,
.blog-title .green-highlight,
.cta-section .green-highlight,
.cta-strip .green-highlight,
.dark-bg .green-highlight,
.hero-green-highlight,
.disclaimer-accordion .green-highlight {
    color: #34d399 !important;
    display: inline !important;
    font-weight: inherit !important;
}

.page-hero p,
.legal-hero p,
.blog-header p,
.blog-hub-hero p,
.hub-sub {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    text-wrap: pretty !important;
    margin-bottom: 20px !important;
}

/* Dark Hero Trust Strip */
.page-hero .hero-trust-strip,
.about-hero .hero-trust-strip,
.legal-hero .hero-trust-strip,
.blog-hub-hero .hero-trust-strip,
.blog-header .hero-trust-strip {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin-top: 22px !important;
}

.page-hero-center .hero-trust-strip,
.page-hero-inner .hero-trust-strip {
    justify-content: center !important;
    margin-top: 28px !important;
}

.page-hero .hero-trust-item,
.about-hero .hero-trust-item,
.legal-hero .hero-trust-item,
.blog-hub-hero .hero-trust-item,
.blog-header .hero-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.page-hero .hero-trust-item strong,
.about-hero .hero-trust-item strong,
.legal-hero .hero-trust-item strong,
.blog-hub-hero .hero-trust-item strong,
.blog-header .hero-trust-item strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.hero-trust-item .trust-icon-green,
.hero-trust-item i.fa-shield-halved,
.hero-trust-item i.fa-shield-alt,
.hero-trust-item i.fa-lock {
    color: #34d399 !important;
}

.hero-trust-item .trust-icon-blue,
.hero-trust-item i.fa-building-columns {
    color: #60a5fa !important;
}

.page-hero .hero-trust-sep,
.about-hero .hero-trust-sep,
.legal-hero .hero-trust-sep,
.blog-hub-hero .hero-trust-sep,
.blog-header .hero-trust-sep {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Light Surface Hero Trust Strip (Homepage .exact-hero) */
.exact-hero .hero-trust-strip {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    color: #475569 !important;
    margin-top: 22px !important;
}

.exact-hero .hero-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #475569 !important;
}

.exact-hero .hero-trust-item span,
.exact-hero .hero-trust-strip span {
    color: #475569 !important;
}

.exact-hero .hero-trust-item strong,
.exact-hero .hero-trust-strip strong {
    color: #0a1d37 !important;
    font-weight: 700 !important;
}

.exact-hero .hero-trust-item .trust-icon-green,
.exact-hero .hero-trust-item i.trust-icon-green,
.exact-hero .hero-trust-strip .trust-icon-green,
.exact-hero .hero-trust-strip i.fa-shield-halved,
.exact-hero .hero-trust-strip i.fa-lock {
    color: #047857 !important;
}

.exact-hero .hero-trust-item .trust-icon-blue,
.exact-hero .hero-trust-item i.trust-icon-blue,
.exact-hero .hero-trust-strip .trust-icon-blue,
.exact-hero .hero-trust-strip i.fa-building-columns {
    color: #1a56db !important;
}

.exact-hero .hero-trust-sep,
.exact-hero .hero-trust-strip .hero-trust-sep {
    color: #94a3b8 !important;
}

/* Dark Hero Action Buttons */
.hero-btns {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 22px !important;
    margin-bottom: 20px !important;
}

.page-hero-center .hero-btns {
    justify-content: center !important;
}

.btn-hero-primary,
.page-hero .btn-primary,
.page-hero .btn-hero-primary,
.about-hero .btn-hero-primary,
.legal-hero .btn-hero-primary,
.blog-hub-hero .btn-hero-primary {
    background: linear-gradient(135deg, #FF5A00 0%, #E04E00 100%) !important;
    color: #ffffff !important;
    padding: 13px 28px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full, 9999px) !important;
    box-shadow: 0 4px 18px rgba(255, 90, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.btn-hero-primary:hover,
.page-hero .btn-primary:hover,
.page-hero .btn-hero-primary:hover,
.about-hero .btn-hero-primary:hover,
.legal-hero .btn-hero-primary:hover,
.blog-hub-hero .btn-hero-primary:hover {
    background: linear-gradient(135deg, #E04E00 0%, #C43E00 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.45) !important;
    color: #ffffff !important;
}

.page-hero .btn-hero-secondary,
.page-hero .btn-secondary,
.page-hero .btn-whatsapp,
.about-hero .btn-hero-secondary,
.legal-hero .btn-hero-secondary,
.blog-hub-hero .btn-hero-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 13px 26px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-full, 9999px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.page-hero .btn-hero-secondary:hover,
.page-hero .btn-secondary:hover,
.page-hero .btn-whatsapp:hover,
.about-hero .btn-hero-secondary:hover,
.legal-hero .btn-hero-secondary:hover,
.blog-hub-hero .btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Light Surface Homepage Hero Action Buttons (.exact-hero) */
.exact-hero .btn-hero-primary,
.exact-hero button.btn-hero-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    padding: 13px 28px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full, 9999px) !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.exact-hero .btn-hero-primary:hover,
.exact-hero button.btn-hero-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
}

.exact-hero .btn-hero-secondary,
.exact-hero a.btn-hero-secondary,
.exact-hero .btn.btn-hero-secondary,
.exact-hero-actions .btn-hero-secondary {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0a1d37 !important;
    padding: 13px 26px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-full, 9999px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 1px 3px rgba(10, 29, 55, 0.08) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.exact-hero .btn-hero-secondary:hover,
.exact-hero a.btn-hero-secondary:hover,
.exact-hero .btn.btn-hero-secondary:hover,
.exact-hero-actions .btn-hero-secondary:hover {
    border-color: #0a1d37 !important;
    background: #f8fafc !important;
    color: #0a1d37 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(10, 29, 55, 0.12) !important;
}

.exact-hero .btn-hero-secondary i,
.exact-hero a.btn-hero-secondary i,
.exact-hero .btn.btn-hero-secondary i,
.exact-hero-actions .btn-hero-secondary i {
    color: #047857 !important;
}

/* Master Reusable Hero Snapshot Card */
.hero-snapshot-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
    padding: 24px 22px !important;
    color: var(--color-primary, #0a1d37) !important;
    text-align: left !important;
}

.snapshot-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.snapshot-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--color-orange, #FF5A00) !important;
    background: #FFF1E8 !important;
    border: 1px solid rgba(255, 90, 0, 0.25) !important;
    border-radius: 9999px !important;
    padding: 4px 10px !important;
}

.snapshot-highlight {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--color-navy, #0B1F33) !important;
}

.snapshot-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.snapshot-stat {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
}

.snapshot-stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
}

.snapshot-stat-val {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0a1d37 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
}

.snapshot-stat-note {
    font-size: 11px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.snapshot-lenders-footer {
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.snapshot-footer-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.snapshot-lender-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.snap-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #0a1d37 !important;
}

/* Master Universal Service & Feature Cards */
.service-card,
.feature-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 32px 26px !important;
    box-shadow: 0 4px 20px rgba(10, 29, 55, 0.06) !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
}

.service-card::before,
.feature-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0B1F33, #FF5A00) !important;
}

.service-card:hover,
.feature-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(10, 29, 55, 0.12) !important;
    border-color: #10b981 !important;
}

.service-icon,
.feature-icon {
    width: 58px !important;
    height: 58px !important;
    background: #ecfdf5 !important;
    color: #15803d !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin-bottom: 18px !important;
    border: 1px solid #a7f3d0 !important;
}

/* Master Universal Country Cards */
.country-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px 18px !important;
    text-align: center !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(10, 29, 55, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    display: block !important;
}

.country-card:hover {
    background: #ffffff !important;
    border-color: #10b981 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 32px rgba(10, 29, 55, 0.12) !important;
}

.country-card .country-flag {
    font-size: 2.6rem !important;
    margin-bottom: 10px !important;
    display: block !important;
    line-height: 1 !important;
}

.country-card .country-name {
    color: #0a1d37 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

/* Services Dropdown Mega-Menu Destinations Grid */
.mega-dropdown {
    width: 724px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 18px 24px 0 24px !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .mega-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 16px 14px !important;
    }
    .mega-body {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.mega-body {
    display: grid !important;
    grid-template-columns: 275px 1fr !important;
    gap: 24px !important;
}

.mega-col-loans {
    border-right: 1px solid #f1f5f9 !important;
    padding-right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
}

.mega-col-countries {
    padding-right: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.mega-countries-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
    width: 100% !important;
}

.mega-country-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background var(--transition-fast) !important;
    box-sizing: border-box !important;
}

.mega-country-link:hover {
    background: #f1f5f9 !important;
    transform: none !important;
}

.mega-country-link .country-flag {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: auto !important;
}

.mega-country-link .country-flag img,
.country-flag .flag-icon,
.flag-icon {
    width: 20px !important;
    height: 14px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.mega-country-link .country-name {
    font-family: var(--font-display) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--navy, #0a1d37) !important;
    white-space: nowrap !important;
    display: inline !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.mega-country-link:hover .country-name {
    color: var(--color-secondary, #1a56db) !important;
}

.mega-footer {
    margin: 16px -24px 0 -24px !important;
    padding: 12px 24px !important;
}

/* Master Universal High-Impact CTA Banner */
.cta-section,
.cta-strip {
    background: linear-gradient(140deg, #061325 0%, #0a1d37 40%, #0d2b5e 80%, #043826 100%) !important;
    padding: 72px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

.cta-section::before,
.cta-strip::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 20% 50%, rgba(52, 211, 153, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(29, 78, 216, 0.14) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.cta-section h2,
.cta-strip h2 {
    color: #ffffff !important;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
}

.cta-section p,
.cta-strip p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px !important;
    max-width: 620px !important;
    margin: 0 auto 28px !important;
    line-height: 1.65 !important;
    text-wrap: pretty !important;
}

.cta-btns {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ──────────────────────────────────────────────────────────
   34. FORM INPUTS & SELECTS ACCESSIBILITY
   ────────────────────────────────────────────────────────── */

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
    font-family: var(--font-body);
    font-size: 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    padding: 10px 14px;
    color: var(--color-text);
    background: #ffffff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

/* ──────────────────────────────────────────────────────────
   35. MOBILE-FIRST RESPONSIVENESS OVERRIDES
   Ensures zero horizontal overflow and readable text at 320px–480px
   ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .page-hero,
    header.page-hero,
    section.page-hero,
    .legal-hero {
        padding: 52px 0 40px !important;
    }

    .hero-btns {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .hero-btns .btn {
        flex: 1 1 0px;
        width: auto;
        min-width: 0;
        justify-content: center;
    }

    .lender-filters-wrapper {
        padding: 18px 16px;
    }

    .filter-label {
        min-width: 100%;
        margin-bottom: 6px;
    }

    .table-responsive {
        margin: 18px 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .page-hero h1,
    header.page-hero h1,
    .legal-hero h1 {
        font-size: clamp(2rem, 5vw + 0.8rem, 2.5rem) !important;
    }

    .section-title {
        font-size: 1.65rem !important;
    }

    .calc-tabs-bar {
        flex-direction: column;
    }

    .calc-panel-card {
        padding: 24px 18px !important;
    }
}

/* ──────────────────────────────────────────────────────────
   36. STANDARDIZED CARD SYSTEM MODIFIERS & A11Y PRIMITIVES
   ────────────────────────────────────────────────────────── */

/* Card system modifiers (Section 10) */
.card--elevated {
    box-shadow: var(--shadow-md) !important;
    background: var(--color-surface, #ffffff) !important;
}

.card--outlined {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface, #ffffff) !important;
}

.card--interactive {
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
}

.card--interactive:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
}

.card--featured {
    border-color: var(--color-green) !important;
    position: relative;
}

/* Accessible focus indicators (Section 12) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-blue) !important;
    outline-offset: 2px !important;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -120px;
    left: 16px;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    z-index: 100000;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--color-accent);
}

/* Minimum 44px touch target guidelines */
.btn,
.nav-links > li > a,
.popup-close,
.floating-eligibility-btn,
.whatsapp-float,
.calc-tab-btn,
.lender-filter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Hamburger: touch target on mobile only — hidden on desktop */
@media (max-width: 900px) {
    .hamburger {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ──────────────────────────────────────────────────────────
   37. BRAND PALETTE STRICT ENFORCEMENT
   Guarantees Navy (#0a1d37), Blue (#1a56db), Green (#1a9c4e),
   and Neutrals (#ffffff, #f8fafc, #f1f5f9, #e2e8f0, #cbd5e1).
   Eliminates all unharmonized pinks, purples, oranges, and cyans.
   ────────────────────────────────────────────────────────── */

.badge-pvt {
    background: #f1f5f9 !important;
    color: var(--color-primary, #0a1d37) !important;
    border: 1px solid var(--color-border-strong, #cbd5e1) !important;
}

.badge-intl {
    background: var(--color-blue-bg, #eff6ff) !important;
    color: var(--color-secondary, #1a56db) !important;
    border: 1px solid #bfdbfe !important;
}

.badge-nbfc {
    background: var(--color-green-bg, #ecfdf5) !important;
    color: var(--color-success, #15803d) !important;
    border: 1px solid #a7f3d0 !important;
}

.badge-psu {
    background: var(--color-blue-bg, #eff6ff) !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

/* Master Icon Tints */
.ic-blue,
.ic-orange,
.ic-sky {
    background: #eff6ff !important;
    color: #1a56db !important;
}

.ic-green,
.ic-teal {
    background: #ecfdf5 !important;
    color: #1a9c4e !important;
}

.ic-purple,
.ic-red,
.ic-yellow,
.ic-pink {
    background: #f8fafc !important;
    color: #0a1d37 !important;
}

/* ──────────────────────────────────────────────────────────
   38. INSTITUTIONAL FINANCIAL COMPARISON TABLE SYSTEM
   Provides structured, scan-friendly, mobile-safe data presentation
   ────────────────────────────────────────────────────────── */

.comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    margin: 32px 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14.5px;
    text-align: left;
    min-width: 600px;
}

.comparison-table th {
    background: var(--color-primary);
    color: #ffffff;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.comparison-table th:first-child {
    border-top-left-radius: var(--radius-lg, 16px);
}

.comparison-table th:last-child {
    border-top-right-radius: var(--radius-lg, 16px);
}

.comparison-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-body);
    vertical-align: middle;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:nth-child(even) td {
    background: #f8fafc;
}

.comparison-table tr:hover td {
    background: #f1f5f9;
}

.table-cell-highlight {
    font-weight: 700;
    color: var(--color-primary);
}

.table-badge-green {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ecfdf5;
    color: #15803d;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12.5px;
    border: 1px solid #a7f3d0;
}

.table-badge-blue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    color: #1a56db;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12.5px;
    border: 1px solid #bfdbfe;
}

/* ──────────────────────────────────────────────────────────
   39. PROCESS & TIMELINE NORMALIZATION
   Structured editorial pacing instead of generic cards
   ────────────────────────────────────────────────────────── */

.process-step {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg, 16px) !important;
    padding: 28px 24px !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
    text-align: left;
}

.process-step:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--color-border-strong) !important;
}

.step-icon,
.process-emoji {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: #eff6ff !important;
    color: var(--color-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    margin-bottom: 16px !important;
}

.process-step h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: 8px !important;
}

.process-step p {
    font-size: 14.5px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   40. SPEC CARDS & COUNTRY DATA PRESENTATION
   Institutional fintech styling for higher education metrics
   ────────────────────────────────────────────────────────── */

.country-stat-box {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg, 16px) !important;
    padding: 24px 20px !important;
    text-align: center !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
}

.country-stat-box:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--color-secondary) !important;
}

.country-stat-val {
    font-size: clamp(1.15rem, 1.4vw, 1.35rem) !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}

.country-stat-lbl {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.uni-tag {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm, 8px) !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.uni-tag:hover {
    border-color: var(--color-secondary) !important;
    background: #eff6ff !important;
    transform: translateY(-2px) !important;
}

/* ──────────────────────────────────────────────────────────
   41. LOAN CARDS & OPTIONS CLEAN REFINEMENT
   Replaces loud unharmonized gradient blocks with crisp institutional cards
   ────────────────────────────────────────────────────────── */

.loan-option-card,
.loan-card,
.mbbs-card {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
    position: relative;
    overflow: hidden;
}

.loan-option-card:hover,
.loan-card:hover,
.mbbs-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--color-border-strong) !important;
}

/* ──────────────────────────────────────────────────────────
   42. EDITORIAL MEASURE & BLOG CONTENT POLISH
   Optimal readability at 72ch with clear heading scale
   ────────────────────────────────────────────────────────── */

.article-content,
.blog-content,
.legal-content {
    max-width: 72ch;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-body);
}

.article-content h2,
.blog-content h2,
.legal-content h2 {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 40px;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.article-content h3,
.blog-content h3,
.legal-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 32px;
    margin-bottom: 14px;
}

.article-content p,
.blog-content p,
.legal-content p {
    margin-bottom: 20px;
}

.article-content ul,
.blog-content ul,
.legal-content ul {
    margin-bottom: 24px;
    padding-left: 20px;
}

.article-content li,
.blog-content li,
.legal-content li {
    margin-bottom: 8px;
    line-height: 1.65;
}

.btn-cta-gold,
.hero-tab {
    border-radius: var(--radius-sm, 10px) !important;
}

.blog-tag {
    border-radius: 6px !important;
}

/* ──────────────────────────────────────────────────────────
   43. MASTER TYPOGRAPHY & TEXT SPACING ENGINE
   Enforces consistent Manrope (Display) & Inter (Body) typography,
   proportional letter-spacing, optimal line-heights, and harmonic vertical rhythm.
   ────────────────────────────────────────────────────────── */

/* 1. Universal Font Family Consistency */
html,
body,
button,
input,
select,
textarea,
optgroup {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
}

/* 2. Global Headings Scale & Balance */
h1,
.exact-hero-title,
.page-hero h1,
header.page-hero h1,
.legal-hero h1 {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance !important;
}

h2,
.section-title,
.why-main-title,
.pan-india-title,
.bridging-title,
.section-heading {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
}

h3,
.tools-heading,
.popup-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.015em !important;
}

h4, h5, h6 {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    letter-spacing: -0.01em !important;
}

/* 3. Section Lead Text & Subtitles */
.section-sub,
.exact-hero-lead,
.why-sub,
.pan-india-sub,
.bridging-sub {
    font-size: clamp(15px, 1.15vw, 16.5px) !important;
    line-height: 1.68 !important;
    letter-spacing: -0.005em !important;
    color: var(--color-text-muted, #475569) !important;
    text-wrap: pretty !important;
}

/* 4. Body Copy & General Paragraph Spacing */
p {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    letter-spacing: -0.005em !important;
    text-wrap: pretty !important;
}

/* 5. Card Text Rhythm & Hierarchy */
.core-card h3,
.why-feature-card h4,
.pan-card h3,
.service-card h3,
.loan-card h3,
.mbbs-card h3,
.process-card h3,
.step-card h3,
.docs-card h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
}

.core-card p,
.why-feature-card p,
.pan-card p,
.service-card p,
.loan-card p,
.mbbs-card p,
.process-card p,
.step-card p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--color-text-muted, #475569) !important;
    letter-spacing: -0.005em !important;
}

/* 6. List Items & Checklist Rhythm */
.doc-checklist li,
.check-bullet-list li,
.bridge-points li,
.why-list li,
.check-list li,
.loan-col ul li {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    letter-spacing: -0.005em !important;
}

/* 7. Buttons Typography & Tracking */
.btn,
button.btn,
a.btn,
.btn-primary,
.btn-secondary,
.btn-whatsapp,
.btn-eligibility,
.btn-cta-gold {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

.btn-lg {
    font-size: 15.5px !important;
    font-weight: 700 !important;
}

/* 8. Form Controls Typography */
.form-group label,
label {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

input,
select,
textarea {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

input::placeholder,
textarea::placeholder {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    color: #94a3b8 !important;
    letter-spacing: normal !important;
}

/* 9. Financial Metrics & Numerals Tabular Alignment */
.stat-number,
.country-stat-val,
.calc-result-hero,
.calc-val-input,
.emi-result-amount,
.emi-val-badge,
.pan-card-num,
.contact-num,
.marquee-card-badge {
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.015em !important;
}

/* ==========================================================================
   34. INSTITUTIONAL REGULATORY DISCLAIMER DROPDOWN / ACCORDION
   Seamless Dark FinTech Design replacing jarring white block
   ========================================================================== */
.site-disclaimer-wrap {
    background: #061325 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative;
    z-index: 10;
    transition: background 0.25s ease;
}

.disclaimer-accordion {
    width: 100%;
}

.disclaimer-trigger {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 13px 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.disclaimer-trigger::-webkit-details-marker {
    display: none !important;
}

.disclaimer-trigger-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.disclaimer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #34d399;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.disclaimer-badge i {
    font-size: 0.8rem;
}

.disclaimer-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: -0.01em;
}

.disclaimer-hint {
    color: #E2E8F0 !important;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

.disclaimer-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #F8FAFC !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.disclaimer-trigger:hover .disclaimer-toggle-pill {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.disclaimer-toggle-pill i {
    font-size: 0.72rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.disclaimer-accordion[open] .disclaimer-toggle-pill i {
    transform: rotate(180deg);
}

.disclaimer-content {
    padding: 20px 24px;
    background: rgba(10, 29, 55, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 20px;
    animation: disclaimerFadeDown 0.25s ease-out;
}

@keyframes disclaimerFadeDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.disclaimer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .disclaimer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .disclaimer-hint {
        display: none;
    }
    .disclaimer-trigger {
        padding: 11px 0 !important;
    }
}

.disclaimer-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.disclaimer-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.disclaimer-item-text,
.disclaimer-content p,
.disclaimer-content {
    color: #F8FAFC !important;
    font-size: 0.84rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

.disclaimer-item-text strong,
.disclaimer-content strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.disclaimer-footer-bar {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.disclaimer-footer-note {
    color: #F1F5F9 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

.disclaimer-link-btn {
    color: #34d399;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}

.disclaimer-link-btn:hover {
    color: #6ee7b7;
    gap: 9px;
    text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────
   Popup Modal Protective Terms Note (WCAG 2.2 AA Standard)
   ────────────────────────────────────────────────────────── */
.popup-terms-note {
    font-size: 0.76rem !important;
    color: #475569 !important;
    text-align: center !important;
    margin-top: 8px !important;
    line-height: 1.45 !important;
}

.popup-terms-note a {
    color: #0a1d37 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Global Mobile Overflow Guard */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}


/* ══════════════════════════════════════════════════════════════════════
   P0 BUG FIXES — Previously missing CSS rules that caused silent failures
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   FIX 1: Scroll Reveal Animation System (.motion-init / .motion-revealed)
   motion-ux.js adds these classes via IntersectionObserver but no CSS
   was ever defined for them — causing scroll animations to SILENTLY FAIL
   on all 27 pages. This fix makes the animations actually work.
   ───────────────────────────────────────────────────────────────────── */

.motion-init {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
}

.motion-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Framer Motion Reading Progress Bar */
#scrollProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0% 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #10b981 0%, #059669 40%, #1d4ed8 100%);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
    z-index: 10005;
    pointer-events: none;
    will-change: transform;
}

/* Hardware accelerated elements for silky 120fps motion */
.pan-card,
.pillar-item,
.why-feature-card,
.country-card,
.core-card,
.mbbs-card,
.lender-card,
.process-step,
.process-card,
.loan-card,
.loan-option-card,
.service-card,
.who-card,
.step-card,
.docs-card,
.faq-item,
.blog-card,
.contact-method-card,
.country-stat-box,
.uni-tag {
    will-change: transform, opacity;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-consultation,
.btn-submit-enquiry,
.calc-tab-btn,
.emi-preset-btn,
.floating-eligibility-btn {
    will-change: transform, box-shadow;
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    .motion-init {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .motion-revealed {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   FIX 2: Navbar Scroll Elevation State (.navbar.scrolled-elevated)
   motion-ux.js adds this class when scrollY > 20px but no CSS existed
   to define the elevated state — so nothing ever changed on scroll.
   ───────────────────────────────────────────────────────────────────── */

.navbar.scrolled-elevated {
    box-shadow: 0 4px 24px -4px rgba(10, 29, 55, 0.10), 0 1px 0 rgba(226, 232, 240, 0.6) !important;
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    background: rgba(255, 255, 255, 0.96) !important;
    transition: box-shadow 0.25s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
                background 0.25s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   EXTRACTED PAGE STYLES — Shared component CSS extracted from
   per-page inline <style> blocks. Pages no longer need inline styles.
   ───────────────────────────────────────────────────────────────────── */

/* ── Services Page Components ── */
.services-section {
    padding: var(--space-section, 72px) 0;
    background: var(--color-bg, #f8fafc);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.process-section {
    padding: var(--space-section, 72px) 0;
    background: var(--color-surface, #ffffff);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 50px;
}

.loan-types-section {
    padding: var(--space-section, 72px) 0;
    background: linear-gradient(140deg, #061325 0%, #0a1d37 40%, #0d2b5e 100%);
}

.loan-types-section .section-title { color: #ffffff; }
.loan-types-section .section-sub { color: rgba(255, 255, 255, 0.85); }

.loan-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    margin-top: 50px;
}

.loan-col h4 {
    color: #34d399;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(52, 211, 153, 0.3);
    padding-bottom: 8px;
}

.loan-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.loan-col ul li {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

.loan-col ul li a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    transition: color var(--transition-fast, 0.15s);
}

.loan-col ul li a:hover {
    color: #34d399;
    text-decoration: underline;
}

.loan-col ul li::before {
    content: '›';
    color: #34d399;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}


/* ── Abroad Loans / Inner Page Two-Column Layout ── */
.intro-section {
    padding: var(--space-section, 72px) 0;
    background: var(--color-surface, #ffffff);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 768px) {
    .two-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.intro-img {
    width: 100%;
    border-radius: var(--radius-xl, 24px);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}

.intro-text h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--color-primary, #0a1d37);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
}

.intro-text p {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--color-text-body, #1e293b);
    margin-bottom: 20px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--color-text-body, #1e293b);
    line-height: 1.6;
}

.check-list li::before {
    content: '✓';
    color: var(--color-green-dark, #047857);
    font-weight: 700;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}


/* ── Countries Section (Inner Pages) ── */
.countries-section {
    padding: var(--space-section, 72px) 0;
    background: var(--color-bg, #f8fafc);
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 40px;
}


/* ── Process Steps (Inner Pages) ── */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 40px;
}


/* ── Blog Hub Grid ── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    margin-top: 40px;
}


/* ── Article Page Layout ── */
.article-hero {
    padding: var(--space-section, 72px) 0 var(--space-section-mobile, 44px);
}

.article-body {
    padding: var(--space-section-mobile, 44px) 0 var(--space-section, 72px);
}

.article-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 1024px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

.article-sidebar {
    position: sticky;
    top: 96px;
}


/* ── Country Page Stats Grid ── */
.country-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 32px 0;
}

.universities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}


/* ── Contact Page ── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.contact-methods-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.contact-method-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    padding: 20px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
}

.contact-method-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border-strong, #cbd5e1);
}

.contact-method-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-green-bg, #ecfdf5);
    color: var(--color-green-dark, #047857);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.method-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, #0a1d37);
    margin-bottom: 4px;
}

.method-info p {
    font-size: 13.5px;
    color: var(--color-text-muted, #475569);
    line-height: 1.5;
    margin: 0;
}

.method-info a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-primary, #0a1d37);
    text-decoration: none;
    transition: color var(--transition-fast, 0.15s);
}

.method-info a:hover {
    color: var(--color-green-dark, #047857);
}

/* ==========================================================================
   VISIONARY PATH SERVICES — ABROAD EDUCATION LOANS DESIGN SYSTEM UPGRADE
   Strict Brand Identity: Deep Navy (#0B1F33) + Brand Orange (#FF5A00) + White
   ========================================================================== */

/* ── Typography & Global Elements ── */
.vps-page-wrap {
    font-family: var(--vp-font-sans, 'Manrope', 'Inter', sans-serif);
    color: var(--vp-text, #172B3F);
    background-color: #FFFFFF;
}

.vps-orange-text {
    color: var(--vp-orange, #FF5A00) !important;
}

.vps-navy-text {
    color: var(--vp-navy, #0B1F33) !important;
}

/* Handwritten Brand Accents (Caveat / Editorial Signature) */
.vps-handwriting {
    font-family: var(--vp-font-handwriting, 'Caveat', cursive, sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: rotate(-3deg);
    position: relative;
    user-select: none;
    line-height: 1.2;
}

.vps-handwriting-hero {
    position: absolute;
    top: 24px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 30px;
    box-shadow: 0 8px 24px rgba(11, 31, 51, 0.12);
    border: 1px solid var(--vp-border, #DCE4EA);
    z-index: 5;
    transform: rotate(-3deg);
    font-size: 20px;
}

.vps-handwriting .hw-accent {
    color: var(--vp-orange, #FF5A00);
}

.vps-handwriting-final {
    color: #FFFFFF;
    font-size: 24px;
    transform: rotate(-2deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.vps-handwriting-final .hw-accent {
    color: #FFA566;
}

/* Section Eyebrow Badge */
.vps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--vp-orange, #FF5A00);
    background: var(--vp-orange-light, #FFF1E8);
    padding: 6px 14px;
    border-radius: 24px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 90, 0, 0.15);
}

.vps-eyebrow-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--vp-orange, #FF5A00);
    animation: vpsDotPulse 2s infinite ease-in-out;
}

@keyframes vpsDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* Section Header Typography */
.vps-section-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 52px;
}

.vps-section-header.text-left {
    text-align: left;
    margin-left: 0;
}

.vps-section-header h2 {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.vps-header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px auto 16px;
}

.vps-section-header.text-left .vps-header-divider {
    justify-content: flex-start;
}

.vps-divider-line {
    width: 48px;
    height: 3px;
    background: var(--vp-orange-gradient);
    border-radius: 2px;
}

.vps-divider-dot {
    width: 6px;
    height: 6px;
    background: var(--vp-orange, #FF5A00);
    border-radius: 50%;
}

.vps-section-header p.vps-section-sub {
    font-size: 16px;
    color: var(--vp-muted, #667085);
    line-height: 1.7;
    margin: 0;
}

/* ── Button Hierarchy ── */
.btn-vps-primary {
    background: var(--vp-orange-gradient);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.2px;
}

.btn-vps-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 90, 0, 0.38);
    background: linear-gradient(135deg, #E04F00 0%, #FF7A00 100%);
    color: #FFFFFF !important;
}

.btn-vps-primary:active {
    transform: translateY(0);
}

.btn-vps-secondary {
    background: #FFFFFF;
    color: var(--vp-navy, #0B1F33) !important;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1.5px solid var(--vp-navy, #0B1F33);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}

.btn-vps-secondary:hover {
    background: var(--vp-navy, #0B1F33);
    color: #FFFFFF !important;
    border-color: var(--vp-navy, #0B1F33);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(11, 31, 51, 0.15);
}

.btn-vps-navy {
    background: var(--vp-navy, #0B1F33);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-vps-navy:hover {
    background: var(--vp-orange, #FF5A00);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.3);
}

/* ── 1. Hero Section ── */
.vps-hero {
    position: relative;
    background: #FFFFFF;
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(255, 90, 0, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 92% 85%, rgba(11, 31, 51, 0.03) 0%, transparent 45%);
    padding: 64px 0 88px;
    overflow: hidden;
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

/* Subtle World Map Dot Texture (3-5% Opacity) */
.vps-hero-worldmap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.045;
    background-image: radial-gradient(#0B1F33 1.2px, transparent 1.2px);
    background-size: 24px 24px;
}

/* Halftone Dot Texture Motif */
.vps-halftone-motif {
    position: absolute;
    width: 140px;
    height: 140px;
    background-image: radial-gradient(#FF5A00 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 1;
}

.vps-halftone-motif.top-left {
    top: -20px;
    left: -20px;
}

.vps-halftone-motif.bottom-right {
    bottom: 20px;
    right: 20px;
}

/* Curved Brand Bands */
.vps-hero-swoosh {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border: 36px solid rgba(255, 90, 0, 0.05);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.vps-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.vps-hero-content {
    max-width: 640px;
}

.vps-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    margin-bottom: 18px;
}

.vps-breadcrumb a {
    color: var(--vp-navy, #0B1F33);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.vps-breadcrumb a:hover {
    color: var(--vp-orange, #FF5A00);
}

.vps-breadcrumb-sep {
    color: var(--vp-border, #DCE4EA);
}

.vps-hero-title {
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 18px;
}

.vps-hero-lead {
    font-size: 17px;
    color: var(--vp-muted, #667085);
    line-height: 1.68;
    margin-bottom: 30px;
    max-width: 580px;
}

.vps-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.vps-dest-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 8px;
    font-size: 13px;
    color: var(--vp-navy, #0B1F33);
    font-weight: 600;
    margin-bottom: 24px;
    width: fit-content;
}

.vps-dest-ticker-icon {
    color: var(--vp-orange, #FF5A00);
    font-size: 14px;
}

.vps-hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--vp-navy, #0B1F33);
    font-weight: 600;
    padding-top: 18px;
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.vps-trust-item i {
    color: var(--vp-orange, #FF5A00);
}

.vps-trust-sep {
    color: var(--vp-border, #DCE4EA);
}

/* Hero Right Visual Presentation */
.vps-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vps-hero-img-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: 20px;
    overflow: visible;
}

.vps-hero-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 48px rgba(11, 31, 51, 0.12);
    border: 1px solid rgba(220, 228, 234, 0.8);
    position: relative;
    z-index: 2;
}

/* Floating Trust Badge on Image */
.vps-hero-float-badge {
    position: absolute;
    bottom: -16px;
    left: 20px;
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(11, 31, 51, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 4;
}

.vps-float-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vps-float-badge-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    display: block;
    line-height: 1.2;
}

.vps-float-badge-sub {
    font-size: 12px;
    color: var(--vp-muted, #667085);
}

/* ── 2. Why Choose Us Section (4 Cards) ── */
.vps-why-section {
    padding: 88px 0;
    background: #FFFFFF;
}

.vps-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.vps-why-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.vps-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(11, 31, 51, 0.08);
    border-color: rgba(255, 90, 0, 0.35);
}

.vps-why-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--vp-orange-gradient);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.vps-why-card:hover::after {
    opacity: 1;
}

.vps-card-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
    transition: transform 0.25s ease;
}

.vps-why-card:hover .vps-card-icon-box {
    transform: scale(1.08);
}

.vps-why-card h3 {
    font-size: 17.5px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 10px;
    line-height: 1.35;
}

.vps-why-card p {
    font-size: 14.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.6;
    margin: 0;
}

/* ── 3. What is an Abroad Education Loan Section ── */
.vps-explain-section {
    padding: 88px 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

.vps-explain-intro {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 18px;
    padding: 36px 40px;
    margin-bottom: 48px;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.04);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.vps-explain-text {
    flex: 1;
}

.vps-explain-text h2 {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 14px;
    line-height: 1.25;
}

.vps-explain-text p {
    font-size: 16px;
    color: var(--vp-muted, #667085);
    line-height: 1.7;
    margin: 0;
}

.vps-explain-annotation {
    flex-shrink: 0;
    text-align: right;
}

.vps-explain-highlight-badge {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.04);
}

.vps-highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FFF4ED;
    color: #FF5A00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vps-highlight-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #0B1F33;
    line-height: 1.3;
}

.vps-highlight-sub {
    display: block;
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
    margin-top: 2px;
}

/* ── 4. Expenses Covered (5 Cards) ── */
.vps-expenses-header {
    text-align: center;
    margin-bottom: 32px;
}

.vps-expenses-header h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 6px;
}

.vps-expenses-header span.policy-tag {
    font-size: 14px;
    color: var(--vp-muted, #667085);
    font-weight: 500;
}

.vps-expenses-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.vps-expense-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 14px;
    padding: 24px 18px;
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vps-expense-card:nth-child(2),
.vps-expense-card:nth-child(4) {
    background: #FFFDFB;
}

.vps-expense-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 31, 51, 0.06);
    border-color: rgba(255, 90, 0, 0.35);
}

.vps-expense-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
}

.vps-expense-card h4 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 8px;
    line-height: 1.3;
}

.vps-expense-card p {
    font-size: 13px;
    color: var(--vp-muted, #667085);
    line-height: 1.5;
    margin: 0;
}

.vps-expense-note {
    text-align: center;
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    font-style: italic;
    margin-top: 16px;
}

/* ── 5. Popular Study Destinations (8 Cards, 4 Columns) ── */
.vps-dest-section {
    padding: 88px 0;
    background: #FFFFFF;
}

.vps-dest-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.vps-dest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.vps-dest-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    color: inherit;
}

.vps-dest-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(11, 31, 51, 0.09);
    border-color: rgba(255, 90, 0, 0.4);
}

.vps-dest-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 60%; /* ~16:10 aspect ratio */
    overflow: hidden;
    background: #F1F5F9;
}

.vps-dest-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vps-dest-card:hover .vps-dest-img-wrap img {
    transform: scale(1.04);
}

.vps-dest-content {
    padding: 20px 18px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vps-dest-content h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 4px;
    line-height: 1.3;
}

.vps-dest-content p {
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    margin-bottom: 18px;
    flex: 1;
    line-height: 1.45;
}

.vps-dest-btn {
    align-self: flex-start;
}

/* ── 6. Secured & Unsecured Loans (2 Cards + Table) ── */
.vps-comparison-section {
    padding: 88px 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

.vps-loan-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 48px;
}

.vps-loan-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 4px 14px rgba(11, 31, 51, 0.04);
    transition: all 0.28s ease;
    display: flex;
    flex-direction: column;
}

.vps-loan-card.secured {
    background: #FFFAF6;
    border-color: #EAD9CE;
}

.vps-loan-card.unsecured {
    background: #F7F9FB;
    border-color: #DCE4EA;
}

.vps-loan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 31, 51, 0.08);
}

.vps-loan-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.vps-loan-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid var(--vp-border, #DCE4EA);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.vps-loan-card h3 {
    font-size: 21px;
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin: 0;
}

.vps-loan-card p.vps-loan-desc {
    font-size: 15px;
    color: var(--vp-muted, #667085);
    line-height: 1.6;
    margin-bottom: 18px;
}

.vps-loan-suitable {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--vp-text, #172B3F);
    margin-bottom: 22px;
    line-height: 1.5;
}

.vps-loan-suitable strong {
    color: var(--vp-navy, #0B1F33);
}

/* Upgraded Comparison Table */
.vps-table-wrapper {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 16px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.04);
}

.vps-comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 680px;
}

.vps-comparison-table thead tr {
    background: var(--vp-navy, #0B1F33);
    color: #FFFFFF;
}

.vps-comparison-table th {
    padding: 18px 22px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.vps-comparison-table th:first-child {
    border-top-left-radius: 15px;
}

.vps-comparison-table th:last-child {
    border-top-right-radius: 15px;
}

.vps-comparison-table tbody tr {
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
    transition: background 0.15s ease;
}

.vps-comparison-table tbody tr:hover {
    background: rgba(255, 90, 0, 0.02);
}

.vps-comparison-table tbody tr:last-child {
    border-bottom: none;
}

.vps-comparison-table td {
    padding: 16px 22px;
    font-size: 14.5px;
    color: var(--vp-text, #172B3F);
}

.vps-table-param {
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    width: 28%;
}

.vps-badge-rate-warm {
    display: inline-block;
    background: var(--vp-orange-light, #FFF1E8);
    color: #C03E00;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13.5px;
}

.vps-badge-rate-cool {
    display: inline-block;
    background: var(--vp-surface-2, #EEF2F5);
    color: var(--vp-navy, #0B1F33);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13.5px;
}

/* ── 7. Co-Signer / No-Co-Signer (2 Cards) ── */
.vps-cosigner-section {
    padding: 88px 0;
    background: #FFFFFF;
}

.vps-cosigner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 20px;
}

.vps-cosigner-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
    transition: all 0.25s ease;
}

.vps-cosigner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 31, 51, 0.07);
    border-color: rgba(255, 90, 0, 0.35);
}

.vps-cosigner-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.vps-cosigner-info h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 8px;
}

.vps-cosigner-info p {
    font-size: 14.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.6;
    margin: 0;
}

.vps-cosigner-footnote {
    text-align: center;
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    margin-top: 14px;
}

/* ── 8. Who Can Apply? (Compact 3x3 Tile Grid + Infostrip) ── */
.vps-apply-section {
    padding: clamp(64px, 7vw, 84px) 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-apply-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.vps-apply-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 14px;
    padding: 22px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.vps-apply-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 90, 0, 0.4);
    box-shadow: 0 8px 20px rgba(11, 31, 51, 0.06);
}

.vps-apply-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    transition: background 0.22s ease, color 0.22s ease;
}

.vps-apply-card:hover .vps-apply-icon {
    background: var(--vp-orange, #FF5A00);
    color: #FFFFFF;
}

.vps-apply-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin: 0 0 4px 0;
    line-height: 1.35;
}

.vps-apply-content p {
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.5;
    margin: 0;
}

/* Info Strip Below Who Can Apply */
.vps-apply-infostrip {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 14px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
}

.vps-infostrip-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vps-infostrip-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(22, 167, 101, 0.12);
    color: var(--vp-green-text, #047857);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.vps-infostrip-text {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vp-text, #172B3F);
    margin: 0;
    line-height: 1.5;
}

.vps-infostrip-btn {
    white-space: nowrap;
    padding: 10px 22px;
    font-size: 14px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ── 9. Documents You May Need (3 Clean Checklist Columns) ── */
.vps-docs-section {
    padding: clamp(64px, 7vw, 84px) 0;
    background: #FFFFFF;
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-docs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.vps-docs-col {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 10px rgba(11, 31, 51, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.vps-docs-col:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(11, 31, 51, 0.06);
}

.vps-docs-col--secured {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFB 100%);
    border-color: #F1DDD0;
}

.vps-docs-col--secured:hover {
    border-color: rgba(255, 90, 0, 0.45);
}

.vps-docs-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vp-border-light, #EDF2F7);
}

.vps-docs-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--vp-surface-2, #EEF2F5);
    color: var(--vp-navy, #0B1F33);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vps-docs-badge-icon--warm {
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
}

.vps-docs-heading-group h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.vps-docs-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vp-muted, #667085);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vps-docs-tag--warm {
    color: var(--vp-orange, #FF5A00);
}

.vps-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vps-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    color: var(--vp-text, #172B3F);
    line-height: 1.5;
}

.vps-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}

.vps-check-text {
    flex: 1;
}

.vps-check-text .vps-note {
    color: var(--vp-muted, #667085);
    font-size: 12.5px;
    font-weight: 400;
}

.vps-docs-footnote {
    text-align: center;
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    margin-top: 18px;
    margin-bottom: 0;
}

/* ── 10. Your Education Loan Journey (Horizontal & Vertical Timeline) ── */
.vps-journey-section {
    padding: clamp(64px, 7vw, 84px) 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-journey-wrapper {
    position: relative;
    margin-top: 24px;
}

.vps-journey-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
    gap: 16px;
}

/* Connecting Line on Desktop */
.vps-journey-track::before {
    content: "";
    position: absolute;
    top: 45px;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 2px;
    background: #DCE4EA;
    z-index: 1;
}

.vps-journey-step {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vps-journey-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
}

.vps-step-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--vp-orange, #FF5A00);
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 10px;
    padding: 2px 8px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(11, 31, 51, 0.04);
}

.vps-step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--vp-orange, #FF5A00);
    color: var(--vp-navy, #0B1F33);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(11, 31, 51, 0.05);
    transition: all 0.25s ease;
}

.vps-journey-step:hover .vps-step-circle {
    background: var(--vp-orange, #FF5A00);
    color: #FFFFFF;
    transform: scale(1.08);
}

.vps-journey-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.vps-journey-content p {
    font-size: 12.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.45;
    margin: 0;
}

/* ── 11. Our Lending Partners (Clean Logo Grid / Strip) ── */
.vps-lenders-section {
    padding: clamp(64px, 7vw, 84px) 0;
    background: #FFFFFF;
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-lenders-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.vps-lender-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    box-shadow: 0 2px 6px rgba(11, 31, 51, 0.02);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.vps-lender-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 90, 0, 0.4);
    box-shadow: 0 8px 18px rgba(11, 31, 51, 0.06);
}

.vps-lender-img {
    max-height: 38px;
    max-width: 126px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    display: block;
}

.vps-lenders-cta-wrap {
    text-align: center;
    margin-bottom: 16px;
}

.vps-lender-disclaimer {
    text-align: center;
    font-size: 13px;
    color: var(--vp-muted, #667085);
    margin: 0;
    line-height: 1.5;
}

/* Backwards compatibility for preview pill */
.vps-partners-preview {
    padding: 72px 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 36px 0;
}

.vps-partner-pill {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(11, 31, 51, 0.02);
    transition: all 0.2s ease;
}

.vps-partner-pill:hover {
    border-color: var(--vp-orange, #FF5A00);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 31, 51, 0.06);
}

.vps-partner-pill strong {
    display: block;
    font-size: 15px;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 4px;
}

.vps-partner-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
}

.vps-partner-badge.nbfc {
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
}

.vps-partner-badge.bank {
    background: var(--vp-surface-2, #EEF2F5);
    color: var(--vp-navy, #0B1F33);
}

/* Responsive Rules for the 4 New Sections */
@media (max-width: 992px) {
    .vps-apply-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vps-docs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vps-lenders-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .vps-journey-track {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 20px;
        position: relative;
    }
    .vps-journey-track::before {
        content: "";
        position: absolute;
        top: 24px;
        bottom: 24px;
        left: 41px;
        width: 2px;
        height: auto;
        right: auto;
        background: var(--vp-orange, #FF5A00);
        opacity: 0.45;
    }
    .vps-journey-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        padding-bottom: 28px;
    }
    .vps-journey-step:last-child {
        padding-bottom: 0;
    }
    .vps-journey-node {
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
    }
    .vps-step-circle {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    .vps-journey-content {
        padding-top: 4px;
    }
    .vps-journey-content h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .vps-journey-content p {
        font-size: 13.5px;
    }
}

@media (max-width: 640px) {
    .vps-apply-grid {
        grid-template-columns: 1fr;
    }
    .vps-apply-infostrip {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 14px;
        padding: 16px 18px;
    }
    .vps-infostrip-left {
        align-items: flex-start;
    }
    .vps-infostrip-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .vps-lenders-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .vps-lender-card {
        height: 64px;
        padding: 8px 12px;
    }
    .vps-lender-img {
        max-height: 28px;
        max-width: 105px;
    }
}

/* ── 9. Final CTA ── */
.vps-final-cta {
    position: relative;
    background: #0B1F33;
    color: #FFFFFF;
    padding: clamp(44px, 5.5vh, 64px) 0;
    overflow: hidden;
}

.vps-cta-swoosh {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 360px;
    height: 360px;
    border: 40px solid rgba(255, 90, 0, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.vps-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.vps-final-cta h2 {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.vps-final-cta p.vps-cta-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    line-height: 1.6;
}

.vps-final-cta-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.btn-vps-cta-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.btn-vps-cta-secondary:hover {
    background: #FFFFFF;
    color: var(--vp-navy, #0B1F33) !important;
    transform: translateY(-2px);
}

/* ── Mobile & Responsive Breakpoints (1024px, 768px, 480px) ── */
@media (max-width: 1024px) {
    .vps-why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .vps-dest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .vps-expenses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .vps-hero {
        padding: 44px 0 64px;
    }
    .vps-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .vps-hero-visual {
        order: -1;
    }
    .vps-hero-img-wrap {
        max-width: 400px;
    }
    .vps-handwriting-hero {
        font-size: 17px;
        padding: 6px 14px;
        top: 14px;
        right: 14px;
    }
    .vps-why-grid {
        grid-template-columns: 1fr;
    }
    .vps-expenses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vps-loan-options-grid,
    .vps-cosigner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vps-explain-intro {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }
    .vps-explain-annotation {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .vps-dest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .vps-expenses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .vps-hero-actions,
    .vps-final-cta-btns {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
    .btn-vps-primary,
    .btn-vps-secondary,
    .btn-vps-cta-secondary {
        flex: 1 1 0px;
        width: auto;
        min-width: 0;
        justify-content: center;
    }
    .vps-dest-ticker {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   THREE CORE LOAN SERVICE CATEGORIES (Master Brand System)
   Education Loans • Personal Loans • Home Loans
   ══════════════════════════════════════════════════════════════════ */
.loan-categories-section {
    padding: 80px 0;
    background: var(--color-off-white, #F7F9FB);
    position: relative;
    border-top: 1px solid var(--color-border, #DDE5EC);
    border-bottom: 1px solid var(--color-border, #DDE5EC);
}

.section-header-center {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 52px auto;
}

.section-title-navy {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin-bottom: 14px;
}

.section-lead-text {
    font-size: 16px;
    color: var(--color-muted, #667085);
    line-height: 1.7;
    margin: 0 auto;
}

.loan-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.loan-category-card {
    background: #ffffff;
    border: 1.5px solid var(--color-border, #DDE5EC);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.04);
    position: relative;
    overflow: hidden;    /* clips rounded corners; icon stays within card bounds */
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

/* ── Image banner ── */
.loan-card-image {
    width: 100%;
    height: 145px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: #D6E4F0;   /* fallback if photo fails */
}

.loan-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.loan-category-card:hover .loan-card-image img {
    transform: scale(1.06);
}

/* Gradient vignette at bottom of image */
.loan-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(11,31,51,0.28) 100%);
    pointer-events: none;
}

.loan-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px -4px rgba(11, 31, 51, 0.1), 0 4px 12px rgba(255, 90, 0, 0.08);
    border-color: #FF8A00;
}

/* ── Icon sits ON the image ── */
.loan-circle-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--color-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF4ED;
    color: var(--color-orange, #FF5A00);
    /* Pull icon up to overlap image bottom */
    margin-top: -30px;
    margin-left: 24px;
    margin-bottom: 14px;
    align-self: flex-start;
    position: relative;
    z-index: 2;
    /* White ring separates icon from photo */
    box-shadow: 0 0 0 3px #ffffff, 0 4px 14px rgba(11, 31, 51, 0.16);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.loan-category-card:hover .loan-circle-icon-wrap {
    transform: scale(1.08);
    background: var(--color-orange, #FF5A00);
    color: #ffffff;
}

/* ── Per-element padding for card body ── */
.loan-category-card .loan-category-badge {
    padding-left: 24px;
}
.loan-category-card .loan-category-title {
    padding-left: 24px;
    padding-right: 24px;
}
.loan-category-card .loan-category-desc {
    padding-left: 24px;
    padding-right: 24px;
}
.loan-category-card .loan-category-features {
    padding-left: 24px;
    padding-right: 24px;
}
.loan-category-card .loan-category-footer {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}

.loan-geom-icon {
    width: 32px;
    height: 32px;
}

.loan-category-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange, #FF5A00);
    background: #FFF4ED;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 14px;
}

.loan-category-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.loan-category-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--color-muted, #667085);
    margin-bottom: 22px;
    flex-grow: 1;
}

.loan-category-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loan-category-features li {
    font-size: 13.5px;
    color: var(--color-text-body, #1E293B);
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.4;
}

.loan-category-features li i {
    color: var(--color-orange, #FF5A00);
    font-size: 12px;
    flex-shrink: 0;
}

.loan-category-footer {
    padding-top: 18px;
    border-top: 1px solid var(--color-border-subtle, #EAF0F5);
}

.loan-category-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-orange, #FF5A00);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.loan-category-cta:hover {
    gap: 12px;
    color: var(--color-orange-dark, #E04F00);
}

@media (max-width: 992px) {
    .loan-categories-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 0 auto;
    }
}




/* ============================================================
   OTHER LOANS PAGE — VISIONARY PATH SERVICES REDESIGN SYSTEM
   Navy (#0B1F33) + Orange (#FF5A00) + White (#FFFFFF, #F7F9FB)
   ============================================================ */

/* ── Hero Section ── */
.other-loans-hero {
    padding: 56px 0 64px;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.other-loans-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 75% 25%, rgba(255, 90, 0, 0.05) 0%, rgba(11, 31, 51, 0.02) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.other-loans-hero .container {
    position: relative;
    z-index: 1;
}

.other-loans-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.other-loans-hero-content {
    min-width: 0;
}

.other-loans-hero h1 {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(34px, 3.8vw, 48px);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 12px 0 16px;
}

.other-loans-hero h1 .text-orange {
    color: var(--color-orange, #FF5A00);
}

.other-loans-hero-lead {
    font-size: 16.5px;
    line-height: 1.7;
    color: #475569;
    max-width: 62ch;
    margin-bottom: 28px;
}

.other-loans-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #DCE4EA);
}

.other-loans-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-off-white, #F7F9FB);
    border: 1px solid var(--color-border, #DCE4EA);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-navy, #0B1F33);
}

.other-loans-trust-chip i {
    color: var(--color-orange, #FF5A00);
    font-size: 14px;
}

/* ── Hero Right Visual Composition ── */
.other-loans-visual-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

.other-loans-img-box {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 48px -12px rgba(11, 31, 51, 0.15), 0 0 0 1px rgba(220, 228, 234, 0.8);
    background: #FFFFFF;
}

.other-loans-img-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3.4;
    transition: transform 0.4s ease;
}

.other-loans-img-box:hover img {
    transform: scale(1.02);
}

/* Floating Goal Badges */
.floating-goal-tag {
    position: absolute;
    background: #FFFFFF;
    border: 1.5px solid var(--color-border, #DCE4EA);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    box-shadow: 0 10px 24px -4px rgba(11, 31, 51, 0.12);
    z-index: 2;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(8px);
}

.floating-goal-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -4px rgba(255, 90, 0, 0.18);
    border-color: #FF5A00;
}

.floating-goal-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #FFF1E8;
    color: var(--color-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
}

.tag-personal { top: 12px; right: -14px; }
.tag-home { top: 78px; right: -24px; }
.tag-car { bottom: 84px; right: -18px; }
.tag-business { bottom: 18px; right: -10px; }

/* Handwritten annotation */
.handwritten-hero-accent {
    position: absolute;
    top: -24px;
    left: -20px;
    font-family: var(--vp-font-handwriting, 'Caveat', cursive, sans-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    line-height: 1.1;
    transform: rotate(-6deg);
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.handwritten-hero-accent::after {
    content: '';
    display: block;
    width: 60px;
    height: 2.5px;
    background: var(--color-orange, #FF5A00);
    border-radius: 2px;
    margin-top: 2px;
}

/* ── 4 Unified Service Cards ── */
.other-services-section {
    padding: 80px 0;
    background: var(--color-off-white, #F7F9FB);
    border-top: 1px solid var(--color-border, #DCE4EA);
    border-bottom: 1px solid var(--color-border, #DCE4EA);
}

.services-unified-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.unified-service-card {
    background: #FFFFFF;
    border: 1.5px solid var(--color-border, #DCE4EA);
    border-radius: 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(11, 31, 51, 0.03);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    position: relative;
    overflow: hidden;
}

.unified-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px -6px rgba(11, 31, 51, 0.09), 0 4px 12px rgba(255, 90, 0, 0.06);
    border-color: var(--color-orange, #FF5A00);
}

/* ── Image banner ── */
.unified-card-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: #D6E4F0;   /* fallback if photo fails */
}

.unified-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.unified-service-card:hover .unified-card-image img {
    transform: scale(1.06);
}

.unified-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(11,31,51,0.26) 100%);
    pointer-events: none;
}

/* ── Icon ON the image ── */
.service-card-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #FFF1E8;
    border: 1.5px solid #FFD8C2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange, #FF5A00);
    font-size: 20px;
    /* Overlap image bottom */
    margin-top: -26px;
    margin-left: 20px;
    margin-bottom: 14px;
    align-self: flex-start;
    position: relative;
    z-index: 2;
    /* White ring */
    box-shadow: 0 0 0 3px #ffffff, 0 4px 12px rgba(11, 31, 51, 0.14);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.unified-service-card:hover .service-card-icon-box {
    transform: scale(1.08);
    background: var(--color-orange, #FF5A00);
    color: #FFFFFF;
    border-color: var(--color-orange, #FF5A00);
}

/* ── Per-element padding for card body ── */
.unified-service-card h3 {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 6px;
    line-height: 1.25;
    padding-left: 20px;
    padding-right: 20px;
}

.unified-service-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-muted, #667085);
    margin-bottom: 16px;
    min-height: unset;
    padding-left: 20px;
    padding-right: 20px;
}

.service-checklist {
    list-style: none;
    padding: 0 20px;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.service-checklist li {
    font-size: 13px;
    color: #1E293B;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.service-checklist li i {
    color: var(--color-orange, #FF5A00);
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

.service-card-footer {
    padding: 14px 20px 20px;
    border-top: 1px solid var(--color-border-subtle, #EAF0F5);
}

.btn-service-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    background: var(--color-navy, #0B1F33);
    color: #FFFFFF;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.22s ease;
}

.btn-service-action:hover {
    background: var(--color-orange, #FF5A00);
    color: #FFFFFF;
    gap: 12px;
}

/* ── How It Works Timeline ── */
.how-it-works-section {
    padding: 84px 0;
    background: #FFFFFF;
}

.timeline-horizontal {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    position: relative;
    margin-top: 48px;
}

.timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #E2E8F0;
    z-index: 0;
}

.timeline-step-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.timeline-step-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--color-border, #DCE4EA);
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.timeline-step-item:hover .timeline-step-circle {
    transform: translateY(-4px);
    border-color: var(--color-orange, #FF5A00);
    box-shadow: 0 10px 24px -2px rgba(255, 90, 0, 0.22);
}

.timeline-step-circle i {
    font-size: 24px;
    color: var(--color-navy, #0B1F33);
    transition: color 0.25s ease;
}

.timeline-step-item:hover .timeline-step-circle i {
    color: var(--color-orange, #FF5A00);
}

.timeline-step-num {
    position: absolute;
    top: -6px;
    right: -4px;
    background: var(--color-orange, #FF5A00);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(255, 90, 0, 0.3);
}

.timeline-step-title {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 8px;
    line-height: 1.3;
}

.timeline-step-desc {
    font-size: 13.5px;
    color: var(--color-muted, #667085);
    line-height: 1.5;
    max-width: 20ch;
}

/* ── Solutions & FAQs Two Column Module ── */
.solutions-faq-section {
    padding: 80px 0;
    background: var(--color-off-white, #F7F9FB);
    border-top: 1px solid var(--color-border, #DCE4EA);
}

.solutions-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.solutions-card {
    background: #FFFFFF;
    border: 1.5px solid var(--color-border, #DCE4EA);
    border-radius: 22px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(11, 31, 51, 0.04);
    position: relative;
    overflow: hidden;
}

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

.solutions-card h3 {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    margin: 10px 0 14px;
    line-height: 1.25;
}

.solutions-card h3 .text-orange {
    color: var(--color-orange, #FF5A00);
}

.solutions-card-desc {
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 24px;
}

.solutions-visual-box {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(11, 31, 51, 0.08);
}

.solutions-visual-box img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 2.6;
    object-fit: cover;
}

.solutions-handwriting-badge {
    position: absolute;
    bottom: 12px;
    right: 14px;
    background: rgba(255, 255, 255, 0.94);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--vp-font-handwriting, 'Caveat', cursive, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 6px;
}

.solutions-handwriting-badge span {
    color: var(--color-orange, #FF5A00);
}

/* FAQ Column */
.faq-module-wrap {
    background: #FFFFFF;
    border: 1.5px solid var(--color-border, #DCE4EA);
    border-radius: 22px;
    padding: 36px 32px;
    box-shadow: 0 6px 20px rgba(11, 31, 51, 0.04);
}

.faq-module-wrap h3 {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    margin: 10px 0 20px;
    line-height: 1.25;
}

.faq-module-wrap h3 .text-orange {
    color: var(--color-orange, #FF5A00);
}

.other-loans-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item-card {
    border: 1px solid var(--color-border, #DCE4EA);
    border-radius: 12px;
    background: var(--color-off-white, #F7F9FB);
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item-card[open] {
    border-color: #FF5A00;
    background: #FFFFFF;
}

.faq-trigger {
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    list-style: none;
}

.faq-trigger::-webkit-details-marker {
    display: none;
}

.faq-trigger-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #DCE4EA);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange, #FF5A00);
    font-size: 11px;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.faq-item-card[open] .faq-trigger-icon {
    transform: rotate(180deg);
    background: var(--color-orange, #FF5A00);
    color: #FFFFFF;
    border-color: var(--color-orange, #FF5A00);
}

.faq-body-text {
    padding: 0 18px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
}

/* ── Premium Final CTA Strip ── */
.discuss-requirement-section {
    padding: 64px 0 80px;
    background: #FFFFFF;
}

.discuss-requirement-card {
    background: var(--color-navy, #0B1F33);
    border-radius: 24px;
    padding: 44px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(11, 31, 51, 0.25);
}

.discuss-requirement-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 90, 0, 0.15) 0%, transparent 65%);
    pointer-events: none;
}

.discuss-left {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.discuss-phone-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 24px;
    flex-shrink: 0;
}

.discuss-text h3 {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px;
    line-height: 1.25;
}

.discuss-text p {
    font-size: 15px;
    color: #D1D5DB;
    margin: 0;
    line-height: 1.5;
}

.discuss-ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.btn-whatsapp-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #16A765;
    color: #FFFFFF;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px rgba(22, 167, 101, 0.28);
}

.btn-whatsapp-pill:hover {
    background: #128C53;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 167, 101, 0.38);
    color: #FFFFFF;
}

.btn-call-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #FFFFFF;
    color: var(--color-navy, #0B1F33);
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.btn-call-pill:hover {
    background: #F7F9FB;
    color: var(--color-orange, #FF5A00);
    transform: translateY(-2px);
}

/* ── Responsive Rules ── */
@media (max-width: 1200px) {
    .services-unified-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .other-loans-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    
    .other-loans-visual-wrap {
        margin: 0 auto;
        max-width: 440px;
    }

    .timeline-horizontal {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .timeline-horizontal::before {
        display: none;
    }

    .timeline-step-item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 18px;
        padding-left: 12px;
        border-left: 2px solid #FF5A00;
    }

    .timeline-step-circle {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 56px;
        height: 56px;
    }

    .solutions-faq-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .discuss-requirement-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
        gap: 24px;
    }

    .discuss-ctas {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .btn-whatsapp-pill,
    .btn-call-pill {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .services-unified-grid {
        grid-template-columns: 1fr;
    }

    .tag-personal, .tag-home, .tag-car, .tag-business {
        position: static;
        margin-top: 8px;
    }

    .floating-goals-container-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   HALLMARK MASTER REFINEMENT: HOMEPAGE TEXT HIERARCHY & SPACING
   Institutional FinTech Standards · Hallmark Anti-AI Slop Precision
   /* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
   /* Hallmark · macrostructure: System-Managed (DESIGN_SYSTEM.md) · theme: VPS Institutional Navy/Orange · genre: modern-minimal */
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL HOMEPAGE EYEBROW & SECTION HEADERS UNIFICATION (Hallmark Hero System) ── */
.vps-eyebrow.brand-eyebrow,
.brand-eyebrow,
.exact-hero .vps-eyebrow,
.exact-hero .brand-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #15803d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 3px 11px !important;
    border-radius: 9999px !important;
    margin-bottom: clamp(6px, 1vh, 10px) !important;
    line-height: 1.3 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08) !important;
}

.vps-eyebrow .eyebrow-text,
.brand-eyebrow .eyebrow-text,
.exact-hero .vps-eyebrow .eyebrow-text,
.exact-hero .brand-eyebrow .eyebrow-text {
    color: #15803d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

.vps-eyebrow-dot,
.exact-hero .vps-eyebrow-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #FF5A00 !important;
    box-shadow: 0 0 6px rgba(255, 90, 0, 0.45) !important;
    flex-shrink: 0 !important;
}

.vps-orange-text,
.hero-highlight {
    color: #FF5A00 !important;
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    font-weight: 800 !important;
}

.vps-header-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 8px auto 12px !important;
}

.vps-divider-line {
    width: 26px !important;
    height: 1.5px !important;
    background: #cbd5e1 !important;
}

.vps-divider-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #FF5A00 !important;
    box-shadow: 0 0 5px rgba(255, 90, 0, 0.4) !important;
}

/* ── 2. HERO SECTION (.exact-hero) TEXT HIERARCHY & VIEWPORT-CONTAINED SPACING ── */
.exact-hero {
    background-color: #ffffff !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 90, 0, 0.045) 0%, transparent 40%),
        radial-gradient(circle at 90% 25%, rgba(37, 99, 235, 0.035) 0%, transparent 45%),
        radial-gradient(circle at 50% 95%, rgba(16, 185, 129, 0.025) 0%, transparent 50%) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: clamp(28px, 4vh, 44px) 0 clamp(32px, 4.5vh, 48px) !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.exact-hero-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(24px, 3.5vw, 48px) !important;
    min-height: auto !important;
    padding: 0 !important;
}

.exact-hero-content {
    flex: 1 1 540px !important;
    max-width: 580px !important;
}

.exact-hero .vps-eyebrow,
.exact-hero .brand-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #15803d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 3px 11px !important;
    border-radius: 9999px !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08) !important;
}

.exact-hero .vps-eyebrow .eyebrow-text,
.exact-hero .brand-eyebrow .eyebrow-text {
    color: #15803d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

.exact-hero .vps-eyebrow-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #FF5A00 !important;
    box-shadow: 0 0 6px rgba(255, 90, 0, 0.45) !important;
    flex-shrink: 0 !important;
}

.exact-hero-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(30px, 3.4vw, 44px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 12px !important;
    text-wrap: balance !important;
}

.exact-hero-title .hero-highlight,
.hero-highlight {
    color: #FF5A00 !important;
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    font-weight: 800 !important;
}

.exact-hero-lead {
    font-size: clamp(14px, 1.05vw, 15.5px) !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    max-width: 540px !important;
    margin-bottom: 14px !important;
    text-wrap: pretty !important;
}

.exact-hero-lead strong {
    color: var(--color-navy, #0B1F33) !important;
    font-weight: 700 !important;
}

.exact-hero-tag {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(15.5px, 1.2vw, 18px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.35 !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance !important;
}

.exact-hero-desc {
    font-size: clamp(13.5px, 0.98vw, 14.5px) !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    max-width: 540px !important;
    margin-bottom: 18px !important;
    text-wrap: pretty !important;
}

.hero-supporting-block {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--color-orange, #FF5A00) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 10px 14px !important;
    margin-bottom: 18px !important;
    max-width: 540px !important;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03) !important;
}

.hero-supporting-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
}

.hero-supporting-desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.exact-hero-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}

.exact-hero .btn-hero-primary,
.exact-hero button.btn-hero-primary {
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 100%) !important;
    color: #ffffff !important;
    padding: 12px 26px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(255, 90, 0, 0.32), 0 1px 3px rgba(255, 90, 0, 0.2) !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.exact-hero .btn-hero-primary:hover,
.exact-hero button.btn-hero-primary:hover {
    background: linear-gradient(135deg, #FF8A1A 0%, #E65100 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.42) !important;
}

.exact-hero .btn-hero-secondary,
.exact-hero a.btn-hero-secondary,
.exact-hero .btn.btn-hero-secondary,
.exact-hero-actions .btn-hero-secondary {
    background: #ffffff !important;
    border: 1.5px solid #DDE5EC !important;
    color: #0B1F33 !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(11, 31, 51, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.exact-hero .btn-hero-secondary:hover,
.exact-hero a.btn-hero-secondary:hover {
    border-color: #FF5A00 !important;
    color: #FF5A00 !important;
    background: #FFF4ED !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 90, 0, 0.12) !important;
}

.exact-hero .btn-hero-secondary i,
.exact-hero a.btn-hero-secondary i,
.exact-hero .btn.btn-hero-secondary i,
.exact-hero-actions .btn-hero-secondary i {
    color: #FF5A00 !important;
    font-size: 13px !important;
}

.exact-hero-safety {
    font-size: 11.5px !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
}

.exact-hero-safety i {
    color: #16a34a !important;
    font-size: 13px !important;
}

.hero-loan-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
}

.hero-loan-pill {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(11, 31, 51, 0.03) !important;
    color: var(--color-navy, #0B1F33) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.hero-loan-pill:hover,
.hero-loan-pill.active {
    background: #FFF4ED !important;
    border-color: var(--color-orange, #FF5A00) !important;
    color: var(--color-orange, #FF5A00) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.15) !important;
}

.hero-loan-pill i {
    color: #FF5A00 !important;
    font-size: 11px !important;
}

#calculators,
.calc-tabs-wrapper,
.calc-panel {
    scroll-margin-top: 90px;
}

.exact-hero .hero-trust-strip {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 10px !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px 12px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
    color: #475569 !important;
}

.exact-hero .hero-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #475569 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.exact-hero .hero-trust-item strong {
    color: #0B1F33 !important;
    font-weight: 700 !important;
}

.exact-hero .hero-trust-item .trust-icon-green,
.exact-hero .hero-trust-item i.trust-icon-green,
.exact-hero .hero-trust-strip .trust-icon-green,
.exact-hero .hero-trust-strip i.fa-shield-halved,
.exact-hero .hero-trust-strip i.fa-user-check {
    color: #16a34a !important;
    font-size: 13px !important;
}

.exact-hero .hero-trust-item .trust-icon-blue,
.exact-hero .hero-trust-item i.trust-icon-blue,
.exact-hero .hero-trust-strip .trust-icon-blue,
.exact-hero .hero-trust-strip i.fa-building-columns,
.exact-hero .hero-trust-strip i.fa-bolt {
    color: #2563eb !important;
    font-size: 13px !important;
}

.exact-hero .hero-trust-sep {
    color: #cbd5e1 !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
}

/* Right Visual Container */
.exact-hero-visual {
    flex: 1 1 420px !important;
    max-width: clamp(380px, 38vw, 510px) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

.hero-visual-frame {
    position: relative !important;
    width: 100% !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, #F8FAFC 0%, #EFF6FF 100%) !important;
    border: 1.5px solid rgba(11, 31, 51, 0.08) !important;
    box-shadow: 0 20px 48px -12px rgba(11, 31, 51, 0.1), 0 4px 16px rgba(11, 31, 51, 0.04) !important;
    padding: 8px !important;
}

.hero-visual-img {
    width: 100% !important;
    height: auto !important;
    max-height: clamp(300px, 44vh, 420px) !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    display: block !important;
}

.hero-floating-pill {
    padding: 8px 14px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 28px -4px rgba(11, 31, 51, 0.14), 0 2px 6px rgba(11, 31, 51, 0.04) !important;
    border: 1px solid rgba(11, 31, 51, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    color: #0B1F33 !important;
}

.hero-floating-pill.pill-top {
    top: 14px !important;
    left: -16px !important;
}

.hero-floating-pill.pill-bottom {
    bottom: 14px !important;
    right: -14px !important;
}

.hero-floating-pill .floating-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10.5px !important;
}

.hero-floating-pill.pill-top .floating-icon {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.hero-floating-pill.pill-bottom .floating-icon {
    background: #ecfdf5 !important;
    color: #16a34a !important;
}

/* Floating Quick CTA hidden while at top / in hero section */
.floating-eligibility-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.92) !important;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.floating-eligibility-btn.is-active-scrolled {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* ── 3. MARQUEE SECTION (.home-marquee-section) SPACING & HIERARCHY ── */
.home-marquee-section {
    padding: 38px 0 34px !important;
    background: linear-gradient(180deg, #ffffff 0%, #F7F9FB 100%) !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.home-marquee-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* ── 4. CORE FINANCING SOLUTIONS (.loan-categories-section) ── */
.loan-categories-section {
    padding: 80px 0 !important;
    background: var(--color-off-white, #F7F9FB) !important;
}

.loan-categories-section .section-title-navy {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(28px, 3.4vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 12px !important;
}

.loan-categories-section .vps-section-sub {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    color: #475569 !important;
    max-width: 680px !important;
    margin: 0 auto 52px !important;
    text-align: center !important;
}

.loan-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.loan-category-card {
    padding: 0 !important;
    border-radius: 18px !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.loan-category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(11, 31, 51, 0.08) !important;
    border-color: #FF8A00 !important;
}

.loan-category-badge {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    color: var(--color-orange, #FF5A00) !important;
}

.loan-category-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: var(--color-navy, #0B1F33) !important;
    margin-bottom: 12px !important;
}

.loan-category-desc {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 22px !important;
    flex-grow: 1 !important;
}

.loan-category-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.loan-category-features li {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
}

.loan-category-cta {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-orange, #FF5A00) !important;
}

/* ── 5. PAN INDIA GUIDANCE (.pan-india-section) ── */
.pan-india-section {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.pan-india-box {
    padding: 48px 46px !important;
    border-radius: 24px !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
}

.pan-india-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(26px, 2.9vw, 36px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 14px !important;
}

.pan-india-sub {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    max-width: 380px !important;
    margin-bottom: 24px !important;
}

.pan-india-cards {
    gap: 20px !important;
}

.pan-card {
    padding: 24px 22px !important;
    border-radius: 16px !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
    background: #ffffff !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.pan-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(11, 31, 51, 0.08) !important;
    border-color: #C8D5E2 !important;
}

.pan-card-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-bottom: 14px !important;
    background: #FFF1E8 !important;
    color: #FF5A00 !important;
    border: 1px solid #FFE5D6 !important;
}

.pan-card-badge.blue-badge {
    background: #EEF4F9 !important;
    color: #123A63 !important;
    border: 1px solid #DCE4EA !important;
}

.pan-card h3 {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-navy, #0B1F33) !important;
    margin-bottom: 6px !important;
}

.pan-card p {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* ── PAN INDIA SUITABILITY & QUICK ACTION BAR ── */
.pan-india-suitability-box {
    margin-top: 28px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 22px !important;
    padding: 32px 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 36px !important;
    box-shadow: 0 4px 20px rgba(11, 31, 51, 0.04) !important;
}

.pan-suitability-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.pan-suitability-content .brand-eyebrow {
    margin-bottom: 8px !important;
}

.pan-suitability-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(20px, 2.3vw, 25px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 10px 0 !important;
}

.pan-suitability-desc {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14.5px !important;
    line-height: 1.62 !important;
    color: #475569 !important;
    margin: 0 !important;
}

.pan-suitability-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

.btn-pan-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}

.btn-pan-calc {
    background: var(--color-orange, #FF5A00) !important;
    color: #FFFFFF !important;
    border: 1.5px solid var(--color-orange, #FF5A00) !important;
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.25) !important;
}

.btn-pan-calc:hover {
    background: #E04E00 !important;
    border-color: #E04E00 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(255, 90, 0, 0.35) !important;
}

.btn-pan-explore {
    background: #FFFFFF !important;
    color: var(--color-navy, #0B1F33) !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.04) !important;
}

.btn-pan-explore:hover {
    background: var(--color-navy, #0B1F33) !important;
    color: #FFFFFF !important;
    border-color: var(--color-navy, #0B1F33) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(11, 31, 51, 0.12) !important;
}

@media (max-width: 992px) {
    .pan-india-suitability-box {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 24px 20px !important;
    }

    .pan-suitability-actions {
        width: 100% !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .btn-pan-action {
        flex: 1 1 50% !important;
        font-size: 13px !important;
        padding: 11px 14px !important;
    }
}

@media (max-width: 580px) {
    .pan-suitability-actions {
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .btn-pan-action {
        flex: 1 1 50% !important;
        white-space: normal !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 46px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
}

/* ── 6. BRIDGING THE GAP (.bridging-section) ── */
.bridging-section {
    padding: 80px 0 !important;
    background: var(--color-off-white, #F7F9FB) !important;
}

.bridging-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(28px, 3.4vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 12px !important;
}

.bridging-sub {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    color: #475569 !important;
    max-width: 720px !important;
    margin: 0 auto 52px !important;
    text-align: center !important;
}

.bridging-cards-grid {
    gap: 28px !important;
    margin-bottom: 32px !important;
}

.bridge-card {
    padding: 36px 32px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.bridge-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(11, 31, 51, 0.08) !important;
}

.bridge-card-top {
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.bridge-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.bridge-icon-wrap.orange-light,
.bridge-icon-wrap.green-light {
    background: #FFF1E8 !important;
    color: #FF5A00 !important;
    border: 1px solid #FFE5D6 !important;
}

.bridge-icon-wrap.navy-light,
.bridge-icon-wrap.blue-light {
    background: #EEF4F9 !important;
    color: #0B1F33 !important;
    border: 1px solid #DCE4EA !important;
}

.bridge-card-top h3 {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

.bridge-number {
    display: none !important;
}

.bridge-points {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.bridge-points li {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: #1e293b !important;
}

.disclosure-banner {
    margin-top: 36px !important;
    padding: 18px 24px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.04) !important;
}

.disclosure-text {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
}

/* ── 7. WHY VISIONARY PATH SERVICES (.why-vps-section) ── */
.why-vps-section {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.why-main-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(28px, 3.4vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 12px !important;
}

.why-sub {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    color: #475569 !important;
    max-width: 680px !important;
    margin: 0 auto 52px !important;
    text-align: center !important;
}

.why-nine-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 0 !important;
}

.why-feature-card {
    padding: 28px 24px !important;
    border-radius: 16px !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
    background: #ffffff !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.why-feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(11, 31, 51, 0.08) !important;
    border-color: #C8D5E2 !important;
}

.why-feature-card .w-icon-circle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-bottom: 16px !important;
    background: #FFF1E8 !important;
    color: #FF5A00 !important;
    border: 1px solid #FFE5D6 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.why-feature-card:hover .w-icon-circle {
    background: #FF5A00 !important;
    color: #FFFFFF !important;
    border-color: #FF5A00 !important;
    transform: scale(1.06) !important;
}

.why-feature-card h4 {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.why-feature-card p {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
}

 /* ── 8. FINAL CTA (.vps-final-cta) — Split Photo Layout ── */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
.vps-final-cta {
    position: relative !important;
    padding: clamp(52px, 6vh, 76px) 0 !important;
    background: #0B1F33 !important;
    overflow: hidden !important;
}

/* Photo panel: fills the right 55% of the section */
.vps-cta-photo-panel {
    position: absolute !important;
    inset: 0 !important;
    left: 40% !important;
    pointer-events: none !important;
}

.vps-cta-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    opacity: 0.82 !important;
}

/* Gradient: full navy on left → transparent on right (reveals photo) */
.vps-cta-photo-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to right,
        #0B1F33 0%,
        #0B1F33 20%,
        rgba(11, 31, 51, 0.72) 55%,
        rgba(11, 31, 51, 0.0) 100%
    ) !important;
}

/* Content wrapper: left-aligned, takes up ~56% */
.vps-cta-inner {
    position: relative !important;
    z-index: 2 !important;
}

.vps-cta-content {
    max-width: 580px !important;
    text-align: left !important;
}

.vps-final-cta h2 {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: clamp(26px, 3.2vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
}

.vps-final-cta .vps-orange-text {
    color: #FFA043 !important;
    font-weight: 800 !important;
}

.vps-final-cta p.vps-cta-sub {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 16.5px !important;
    line-height: 1.62 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    max-width: 520px !important;
    margin: 0 0 28px !important;
    text-align: left !important;
}

.vps-final-cta-btns {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 22px !important;
}

.vps-handwriting-final {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #FFB37C !important;
    margin-top: 4px !important;
    text-align: left !important;
}

/* ── 9. RESPONSIVE REFINEMENTS (MOBILE & TABLET) ── */
@media (max-width: 1024px) {
    .loan-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .why-nine-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .exact-hero-grid {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 36px !important;
        padding: 40px 0 48px !important;
    }

    .exact-hero-content {
        text-align: center !important;
        max-width: 100% !important;
    }

    .exact-hero .vps-eyebrow {
        margin-inline: auto !important;
    }

    .exact-hero-actions {
        justify-content: center !important;
    }

    .exact-hero-safety {
        justify-content: center !important;
    }

    .hero-loan-pills {
        justify-content: center !important;
    }

    .exact-hero .hero-trust-strip {
        justify-content: center !important;
    }

    .hero-supporting-block {
        margin-inline: auto !important;
        text-align: left !important;
    }

    .loan-categories-section,
    .bridging-section,
    .why-vps-section {
        padding: 52px 0 !important;
    }

    .pan-india-section {
        padding: 44px 0 !important;
    }

    .loan-categories-grid,
    .bridging-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .pan-india-box {
        padding: 32px 24px !important;
    }

    /* CTA split: tablet — photo starts at 50%, gradient narrower */
    .vps-cta-photo-panel {
        left: 52% !important;
    }

    .vps-final-cta {
        padding: 52px 0 !important;
    }

    .vps-cta-content {
        max-width: 100% !important;
    }

    .vps-final-cta-btns {
        justify-content: flex-start !important;
    }
}

/* CTA: mobile — hide photo, centre all content */
@media (max-width: 576px) {
    .vps-cta-photo-panel {
        display: none !important;
    }

    .vps-cta-content {
        text-align: center !important;
        max-width: 100% !important;
    }

    .vps-final-cta p.vps-cta-sub {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
    }

    .vps-final-cta-btns {
        justify-content: center !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .vps-handwriting-final {
        text-align: center !important;
    }
}

/* ============================================================ */
/* DOMESTIC EDUCATION LOANS — VISIONARY BRAND SYSTEM (VPS)      */
/* ============================================================ */

/* ── Hero Domestic Enhancements ── */
.vps-hero-domestic {
    position: relative;
    background: #FFFFFF;
    background-image: 
        radial-gradient(circle at 8% 20%, rgba(255, 90, 0, 0.045) 0%, transparent 45%),
        radial-gradient(circle at 94% 80%, rgba(11, 31, 51, 0.035) 0%, transparent 50%);
    padding: 60px 0 84px;
    overflow: hidden;
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

.vps-hero-india-map {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image: radial-gradient(#0B1F33 1.25px, transparent 1.25px);
    background-size: 26px 26px;
}

.vps-hero-domestic .vps-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vps-hero-domestic .vps-hero-img-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    overflow: visible;
}

.vps-hero-domestic .vps-hero-img-wrap img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(11, 31, 51, 0.12);
    border: 1px solid var(--vp-border, #DCE4EA);
    position: relative;
    z-index: 2;
}

/* Hero Course Trust Chips Strip */
.vps-course-chips-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--vp-border, #DCE4EA);
}

.vps-course-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vp-navy, #0B1F33);
    transition: all 0.2s ease;
}

.vps-course-chip i {
    color: var(--vp-orange, #FF5A00);
    font-size: 11px;
}

.vps-course-chip:hover {
    border-color: var(--vp-orange, #FF5A00);
    background: #FFFFFF;
    transform: translateY(-1px);
}

/* ── Why Students Choose Us Layout ── */
.vps-why-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 20px;
}

.vps-editorial-callout {
    background: linear-gradient(135deg, #FFF9F5 0%, #FFFFFF 100%);
    border: 1px solid #F5DEC9;
    border-left: 4px solid var(--vp-orange, #FF5A00);
    border-radius: 12px;
    padding: 14px 22px;
    box-shadow: 0 4px 14px rgba(11, 31, 51, 0.04);
}

.vps-editorial-callout .quote-text {
    font-family: var(--vp-font-handwriting, 'Caveat', cursive, sans-serif);
    font-size: 21px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    display: block;
    line-height: 1.25;
}

/* ── Informational Dual Section (What is + Who Can Apply) ── */
.vps-domestic-info-section {
    padding: 84px 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

.vps-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    align-items: stretch;
}

.vps-info-left {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.03);
    display: flex;
    flex-direction: column;
}

.vps-info-left h2 {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 14px;
    line-height: 1.25;
}

.vps-info-left p.lead {
    font-size: 15.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.7;
    margin-bottom: 24px;
}

.vps-info-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vps-info-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: var(--vp-text, #172B3F);
    line-height: 1.5;
}

.vps-info-checklist li i {
    color: var(--vp-orange, #FF5A00);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.vps-info-right {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.03);
    display: flex;
    flex-direction: column;
}

.vps-info-right h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 6px;
}

.vps-info-right p.sub {
    font-size: 14px;
    color: var(--vp-muted, #667085);
    margin-bottom: 22px;
}

.vps-eligibility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    flex-grow: 1;
}

.vps-elig-card {
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vps-elig-card:hover {
    background: #FFFFFF;
    border-color: rgba(255, 90, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 31, 51, 0.05);
}

.vps-elig-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
    transition: transform 0.2s ease;
}

.vps-elig-card:hover .vps-elig-icon {
    transform: scale(1.1);
    background: var(--vp-orange-light, #FFF1E8);
}

.vps-elig-card strong {
    font-size: 13.5px;
    color: var(--vp-navy, #0B1F33);
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
}

.vps-elig-card span {
    font-size: 11.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.4;
}

/* ── Expenses Covered & Top Courses Dual Section ── */
.vps-expenses-courses-section {
    padding: 84px 0;
    background: #FFFFFF;
}

.vps-exp-course-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: stretch;
}

.vps-exp-module,
.vps-course-module {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.03);
    display: flex;
    flex-direction: column;
}

.vps-module-header {
    margin-bottom: 22px;
}

.vps-module-header h3 {
    font-size: 21px;
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 4px;
}

.vps-module-header p {
    font-size: 13.5px;
    color: var(--vp-muted, #667085);
    margin: 0;
}

.vps-expenses-5grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.vps-exp-item {
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.22s ease;
}

.vps-exp-item:nth-child(2),
.vps-exp-item:nth-child(4) {
    background: #FFFDFB;
}

.vps-exp-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 90, 0, 0.4);
    box-shadow: 0 8px 18px rgba(11, 31, 51, 0.05);
}

.vps-exp-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
}

.vps-exp-item h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 5px;
    line-height: 1.25;
}

.vps-exp-item p {
    font-size: 11.5px;
    color: var(--vp-muted, #667085);
    line-height: 1.45;
    margin: 0;
}

.vps-exp-disclaimer {
    font-size: 12px;
    color: var(--vp-muted, #667085);
    font-style: italic;
    margin: 0;
}

.vps-topcourses-6grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    flex-grow: 1;
}

.vps-course-item {
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s ease;
}

.vps-course-item:hover {
    background: #FFFFFF;
    border-color: rgba(255, 90, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(11, 31, 51, 0.05);
}

.vps-course-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 8px;
    transition: transform 0.2s ease;
}

.vps-course-item:hover .vps-course-circle {
    transform: scale(1.1);
}

.vps-course-item strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 2px;
}

.vps-course-item span {
    font-size: 11px;
    color: var(--vp-muted, #667085);
}

/* ── Popular Study Streams in India (5-Column Grid) ── */
.vps-streams-section {
    padding: 84px 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

.vps-streams-5grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.vps-stream-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.vps-stream-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(11, 31, 51, 0.09);
    border-color: rgba(255, 90, 0, 0.38);
}

.vps-stream-img-box {
    position: relative;
    width: 100%;
    padding-top: 62%;
    overflow: hidden;
    background: #EEF2F5;
}

.vps-stream-img-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vps-stream-card:hover .vps-stream-img-box img {
    transform: scale(1.05);
}

.vps-stream-body {
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vps-stream-body h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 4px;
    line-height: 1.3;
}

.vps-stream-body p {
    font-size: 12.5px;
    color: var(--vp-muted, #667085);
    margin-bottom: 16px;
    flex: 1;
    line-height: 1.45;
}

.btn-stream-cta {
    background: var(--vp-navy, #0B1F33);
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.22s ease;
    text-decoration: none;
}

.btn-stream-cta:hover {
    background: var(--vp-orange, #FF5A00);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.3);
}

/* ── Partners & Process Paired Section ── */
.vps-partners-process-section {
    padding: 84px 0;
    background: #FFFFFF;
}

.vps-pp-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: stretch;
}

.vps-pp-col {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.03);
    display: flex;
    flex-direction: column;
}

.vps-bank-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0;
    flex-grow: 1;
}

.vps-bank-logo-card {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 10px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    transition: all 0.2s ease;
}

.vps-bank-logo-card:hover {
    border-color: var(--vp-orange, #FF5A00);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(11, 31, 51, 0.06);
}

.vps-bank-logo-card img {
    max-height: 36px;
    max-width: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter 0.2s ease;
}

.vps-bank-logo-card:hover img {
    filter: none;
}

/* 6-Stage Timeline Flow */
.vps-process-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0;
    flex-grow: 1;
}

.vps-proc-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}

.vps-proc-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vps-proc-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--vp-surface, #F7F9FB);
    border: 2px solid var(--vp-border, #DCE4EA);
    color: var(--vp-navy, #0B1F33);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.vps-proc-step:hover .vps-proc-badge {
    border-color: var(--vp-orange, #FF5A00);
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
}

.vps-proc-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    margin-bottom: 2px;
}

.vps-proc-content p {
    font-size: 12.5px;
    color: var(--vp-muted, #667085);
    margin: 0;
    line-height: 1.45;
}

/* ── Social Proof & FAQs 3-Column Section ── */
.vps-proof-faq-section {
    padding: 84px 0;
    background: var(--vp-surface, #F7F9FB);
    border-top: 1px solid var(--vp-border, #DCE4EA);
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
}

.vps-proof-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 32px;
    align-items: stretch;
}

.vps-proof-card,
.vps-testimonials-col,
.vps-faqs-col {
    background: #FFFFFF;
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 18px;
    padding: 30px 24px;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.03);
    display: flex;
    flex-direction: column;
}

.vps-success-item {
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vps-success-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-orange-light, #FFF1E8);
    color: var(--vp-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vps-success-text strong {
    font-size: 14.5px;
    color: var(--vp-navy, #0B1F33);
    display: block;
    line-height: 1.2;
}

.vps-success-text span {
    font-size: 12px;
    color: var(--vp-muted, #667085);
}

.vps-success-badge-sanction {
    margin-left: auto;
    background: #E8F7F0;
    color: #0E804D;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.vps-testimonial-card {
    background: var(--vp-surface, #F7F9FB);
    border: 1px solid var(--vp-border, #DCE4EA);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.vps-testimonial-card p {
    font-size: 13px;
    color: var(--vp-text, #172B3F);
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 8px;
}

.vps-testimonial-author {
    font-size: 12px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
}

/* FAQ Accordion Styling */
.vps-faq-item {
    border-bottom: 1px solid var(--vp-border, #DCE4EA);
    padding: 12px 0;
}

.vps-faq-item:last-child {
    border-bottom: none;
}

.vps-faq-item summary {
    font-size: 14px;
    font-weight: 700;
    color: var(--vp-navy, #0B1F33);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.vps-faq-item summary::-webkit-details-marker {
    display: none;
}

.vps-faq-item summary::after {
    content: '+';
    font-size: 18px;
    color: var(--vp-orange, #FF5A00);
    transition: transform 0.2s ease;
}

.vps-faq-item[open] summary::after {
    content: '−';
}

.vps-faq-item p {
    font-size: 13px;
    color: var(--vp-muted, #667085);
    line-height: 1.55;
    margin: 8px 0 0;
}

/* ── Final CTA Domestic Banner ── */
.vps-final-cta-domestic {
    position: relative;
    background: linear-gradient(135deg, #0B1F33 0%, #123A63 100%);
    color: #FFFFFF;
    padding: 92px 0;
    overflow: hidden;
    text-align: center;
}

.vps-cta-bg-panorama {
    position: absolute;
    inset: 0;
    background-image: url('../images/domestic/domestic_campus_panorama.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    filter: saturate(0.8);
    pointer-events: none;
}

.vps-final-cta-domestic .vps-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

/* ── Responsive Adaptations for Domestic Page ── */
@media (max-width: 1024px) {
    .vps-info-grid,
    .vps-exp-course-grid,
    .vps-pp-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .vps-streams-5grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vps-proof-faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .vps-hero-domestic {
        padding: 44px 0 60px;
    }

    .vps-hero-domestic .vps-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .vps-hero-domestic .vps-hero-visual {
        order: 2;
    }

    .vps-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vps-eligibility-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vps-expenses-5grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vps-topcourses-6grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vps-streams-5grid {
        grid-template-columns: 1fr 1fr;
    }

    .vps-loan-options-grid {
        grid-template-columns: 1fr;
    }

    .vps-bank-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .vps-streams-5grid,
    .vps-eligibility-grid,
    .vps-expenses-5grid,
    .vps-topcourses-6grid {
        grid-template-columns: 1fr;
    }

    .vps-hero-actions {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .vps-hero-actions .btn {
        flex: 1 1 0px;
        width: auto;
        min-width: 0;
        justify-content: center;
    }

    .vps-final-cta-btns {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .vps-final-cta-btns .btn {
        flex: 1 1 0px;
        width: auto;
        min-width: 0;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════
   MBBS EDUCATION LOANS — SIMPLIFIED PREMIUM REDESIGN STYLES
   Visual Ratio: 70% White/Off-white | 20% Navy | 10% Orange Accent
   Typography: Manrope & Inter | 60–70% Fewer Visual Containers
   ══════════════════════════════════════════════════════════════════ */

.mbbs-page-body {
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #172B3F;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

/* ── Common Section Structure ── */
.mbbs-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.mbbs-section-alt {
    background-color: #F7F9FB;
    border-top: 1px solid #DCE4EA;
    border-bottom: 1px solid #DCE4EA;
}

.mbbs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.mbbs-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px auto;
}

.mbbs-section-head-left {
    text-align: left;
    margin: 0 0 32px 0;
}

.mbbs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FF5A00;
    margin-bottom: 12px;
}

.mbbs-eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #FF5A00;
}

.mbbs-h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0B1F33;
    line-height: 1.25;
    margin: 0 0 14px 0;
    letter-spacing: -0.015em;
}

.mbbs-subhead {
    font-size: 16px;
    line-height: 1.6;
    color: #667085;
    margin: 0;
}

/* ── Hero Section ── */
.mbbs-hero {
    padding: 64px 0 72px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%);
    position: relative;
    border-bottom: 1px solid #DCE4EA;
}

.mbbs-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

.mbbs-hero-content {
    max-width: 600px;
}

.mbbs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #667085;
    margin-bottom: 20px;
}

.mbbs-breadcrumb a {
    color: #667085;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mbbs-breadcrumb a:hover {
    color: #FF5A00;
}

.mbbs-breadcrumb-sep {
    color: #DCE4EA;
}

.mbbs-breadcrumb-active {
    color: #0B1F33;
    font-weight: 600;
}

.mbbs-hero-h1 {
    font-size: 46px;
    font-weight: 800;
    color: #0B1F33;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px 0;
}

.mbbs-hero-h1 span {
    color: #FF5A00;
}

.mbbs-hero-lead {
    font-size: 17px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 32px 0;
}

.mbbs-hero-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.mbbs-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FF5A00;
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 26px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.25);
}

.mbbs-btn-primary:hover {
    background-color: #E04F00;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.32);
}

.mbbs-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FFFFFF;
    color: #0B1F33 !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: 8px;
    border: 1px solid #DCE4EA;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mbbs-btn-secondary i {
    color: #16A765;
    font-size: 17px;
}

.mbbs-btn-secondary:hover {
    border-color: #16A765;
    background-color: #F0FDF4;
    color: #0B1F33;
    transform: translateY(-2px);
}

/* Compact Hero Trust Row */
.mbbs-hero-trust-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #EAEFF4;
    flex-wrap: wrap;
}

.mbbs-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #123A63;
}

.mbbs-trust-item i {
    color: #FF5A00;
    font-size: 13px;
}

.mbbs-trust-sep {
    color: #DCE4EA;
    font-size: 14px;
}

/* Hero Right Visual */
.mbbs-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mbbs-hero-visual::before {
    content: '';
    position: absolute;
    width: 105%;
    height: 105%;
    top: -2.5%;
    left: -2.5%;
    background: radial-gradient(circle at 75% 25%, #FFF1E8 0%, rgba(255, 90, 0, 0.05) 55%, transparent 70%);
    border-radius: 28px;
    z-index: 1;
    pointer-events: none;
}

.mbbs-hero-img-wrap {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px -10px rgba(11, 31, 51, 0.12), 0 0 0 1px #DCE4EA;
    background: #FFFFFF;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3.3;
}

.mbbs-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Why Choose Us (4 Benefits) ── */
.mbbs-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.mbbs-benefit-item {
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 12px;
    padding: 24px 20px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mbbs-benefit-item:hover {
    transform: translateY(-3px);
    border-color: #FF5A00;
    box-shadow: 0 8px 24px -6px rgba(11, 31, 51, 0.08);
}

.mbbs-benefit-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #FFF1E8;
    color: #FF5A00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.mbbs-benefit-title {
    font-size: 16px;
    font-weight: 700;
    color: #0B1F33;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.mbbs-benefit-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #667085;
    margin: 0;
}

/* ── What Is an MBBS Loan (Content Block) ── */
.mbbs-overview-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.mbbs-overview-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #172B3F;
    margin-bottom: 16px;
}

.mbbs-overview-quote-box {
    background-color: #FFFDFB;
    border: 1px solid #EAD9CF;
    border-left: 5px solid #FF5A00;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 4px 16px -4px rgba(255, 90, 0, 0.06);
}

.mbbs-overview-quote {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
    color: #0B1F33;
    margin: 0 0 16px 0;
}

.mbbs-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #FF5A00;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.mbbs-link-arrow:hover {
    gap: 10px;
    color: #E04F00;
}

/* ── Expenses Covered (Compact 5-Item Grid) ── */
.mbbs-expenses-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.mbbs-expense-item {
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 10px;
    padding: 20px 16px;
    text-align: left;
    transition: all 0.2s ease;
}

.mbbs-expense-item:hover {
    border-color: #123A63;
    box-shadow: 0 6px 18px -4px rgba(11, 31, 51, 0.06);
}

.mbbs-expense-icon {
    font-size: 20px;
    color: #FF5A00;
    margin-bottom: 12px;
    display: block;
}

.mbbs-expense-title {
    font-size: 15px;
    font-weight: 700;
    color: #0B1F33;
    margin: 0 0 6px 0;
}

.mbbs-expense-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #667085;
    margin: 0;
}

/* ── MBBS Loan Options (2 Side-by-Side Cards) ── */
.mbbs-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1040px;
    margin: 0 auto;
}

.mbbs-option-card {
    border-radius: 16px;
    padding: 36px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mbbs-option-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -10px rgba(11, 31, 51, 0.08);
}

.mbbs-option-card.secured {
    background-color: #FFFDFB;
    border: 1px solid #EAD9CF;
}

.mbbs-option-card.unsecured {
    background-color: #F8FAFC;
    border: 1px solid #DCE4EA;
}

.mbbs-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mbbs-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.mbbs-option-card.secured .mbbs-option-icon {
    background: #FFF1E8;
    color: #FF5A00;
}

.mbbs-option-card.unsecured .mbbs-option-icon {
    background: #EEF4F9;
    color: #123A63;
}

.mbbs-option-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    border-radius: 20px;
}

.mbbs-option-card.secured .mbbs-option-badge {
    background: #FFE6D6;
    color: #C03E00;
}

.mbbs-option-card.unsecured .mbbs-option-badge {
    background: #E2ECF5;
    color: #123A63;
}

.mbbs-option-title {
    font-size: 22px;
    font-weight: 800;
    color: #0B1F33;
    margin: 0 0 12px 0;
}

.mbbs-option-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 20px 0;
}

.mbbs-option-suitable {
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #172B3F;
    margin-bottom: 24px;
}

.mbbs-option-suitable strong {
    color: #0B1F33;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Who Can Apply (Eligibility Checklist) ── */
.mbbs-eligibility-wrap {
    max-width: 960px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 20px -6px rgba(11, 31, 51, 0.04);
}

.mbbs-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;
}

.mbbs-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mbbs-check-icon {
    color: #FF5A00;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.mbbs-check-title {
    font-size: 15px;
    font-weight: 700;
    color: #0B1F33;
    margin: 0 0 3px 0;
}

.mbbs-check-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: #667085;
    margin: 0;
}

/* ── Study Destinations (Selector & Editorial Showcase) ── */
.mbbs-dest-selector {
    max-width: 1040px;
    margin: 0 auto;
}

.mbbs-dest-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.mbbs-dest-tab-btn {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    border: 1px solid #DCE4EA;
    background: #FFFFFF;
    color: #172B3F;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mbbs-dest-tab-btn:hover {
    border-color: #FF5A00;
    color: #FF5A00;
}

.mbbs-dest-tab-btn.active {
    background: #0B1F33;
    color: #FFFFFF;
    border-color: #0B1F33;
}

.mbbs-dest-panel {
    display: none;
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px -6px rgba(11, 31, 51, 0.05);
}

.mbbs-dest-panel.active {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
}

.mbbs-dest-info {
    padding: 36px 32px;
}

.mbbs-dest-name {
    font-size: 24px;
    font-weight: 800;
    color: #0B1F33;
    margin: 0 0 12px 0;
}

.mbbs-dest-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 20px 0;
}

.mbbs-dest-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.mbbs-dest-meta-item {
    background: #F7F9FB;
    border-radius: 8px;
    padding: 10px 12px;
}

.mbbs-dest-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
}

.mbbs-dest-meta-val {
    font-size: 13.5px;
    font-weight: 700;
    color: #0B1F33;
}

.mbbs-dest-visual {
    height: 100%;
    min-height: 280px;
    background: #F7F9FB;
}

.mbbs-dest-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 5-Step Loan Process (Timeline) ── */
.mbbs-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
}

.mbbs-timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: #DCE4EA;
    z-index: 1;
}

.mbbs-timeline-step {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 8px;
}

.mbbs-step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #DCE4EA;
    color: #0B1F33;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    transition: all 0.2s ease;
}

.mbbs-timeline-step:hover .mbbs-step-num {
    border-color: #FF5A00;
    color: #FF5A00;
    transform: scale(1.08);
}

.mbbs-step-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0B1F33;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.mbbs-step-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #667085;
    margin: 0;
}

/* ── Lender Partners Strip ── */
.mbbs-lender-strip-wrap {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}

.mbbs-lender-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px 48px;
    padding: 24px 16px;
}

.mbbs-lender-logo-item {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    filter: grayscale(80%);
    transition: all 0.2s ease;
}

.mbbs-lender-logo-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-2px);
}

.mbbs-lender-logo-item img {
    max-height: 38px;
    max-width: 130px;
    object-fit: contain;
    display: block;
}

.mbbs-lender-disclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: #667085;
    max-width: 720px;
    margin: 20px auto 0 auto;
}

/* ── Functional EMI Calculator (Compact Layout) ── */
.mbbs-emi-card {
    max-width: 980px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 8px 28px -6px rgba(11, 31, 51, 0.06);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}

.mbbs-emi-controls h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0B1F33;
    margin: 0 0 16px 0;
}

.mbbs-emi-group {
    margin-bottom: 20px;
}

.mbbs-emi-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mbbs-emi-label-row label {
    font-size: 13.5px;
    font-weight: 600;
    color: #172B3F;
}

.mbbs-emi-badge {
    font-size: 13.5px;
    font-weight: 700;
    color: #FF5A00;
    background: #FFF1E8;
    padding: 3px 8px;
    border-radius: 6px;
}

.mbbs-emi-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.mbbs-preset-btn {
    font-size: 11.5px;
    font-weight: 600;
    background: #F7F9FB;
    border: 1px solid #DCE4EA;
    color: #172B3F;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mbbs-preset-btn:hover {
    border-color: #FF5A00;
    color: #FF5A00;
}

.mbbs-emi-summary-box {
    background: #F8FAFC;
    border: 1px solid #DCE4EA;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.mbbs-emi-main-val {
    font-size: 32px;
    font-weight: 800;
    color: #0B1F33;
    line-height: 1.1;
    margin-bottom: 6px;
}

.mbbs-emi-main-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #667085;
    font-weight: 700;
    margin-bottom: 20px;
}

.mbbs-emi-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    padding: 8px 0;
    border-bottom: 1px solid #EAEFF4;
    color: #475569;
}

.mbbs-emi-row:last-of-type {
    border-bottom: none;
    font-weight: 700;
    color: #0B1F33;
    padding-top: 10px;
}

/* ── Success Story Testimonial (1 Clean Block) ── */
.mbbs-testimonial-wrap {
    max-width: 820px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #DCE4EA;
    border-radius: 16px;
    padding: 40px;
    position: relative;
    box-shadow: 0 8px 24px -8px rgba(11, 31, 51, 0.05);
}

.mbbs-quote-icon {
    font-size: 32px;
    color: #FFE6D6;
    margin-bottom: 16px;
}

.mbbs-quote-text {
    font-size: 17px;
    line-height: 1.65;
    color: #172B3F;
    font-weight: 500;
    margin: 0 0 24px 0;
}

.mbbs-student-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mbbs-student-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #123A63;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.mbbs-student-name {
    font-size: 15px;
    font-weight: 700;
    color: #0B1F33;
}

.mbbs-student-college {
    font-size: 13px;
    color: #667085;
}

/* ── FAQ Accordion ── */
.mbbs-faq-list {
    max-width: 820px;
    margin: 0 auto;
}

/* ── Final CTA ── */
.mbbs-final-cta-section {
    background-color: #0B1F33;
    color: #FFFFFF;
    padding: 72px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mbbs-final-cta-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    top: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(255, 90, 0, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.mbbs-final-cta-box {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.mbbs-final-h2 {
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.mbbs-final-sub {
    font-size: 17px;
    line-height: 1.6;
    color: #A0B2C6;
    margin: 0 0 32px 0;
}

.mbbs-final-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Responsive Refinements ── */
@media (max-width: 1024px) {
    .mbbs-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mbbs-expenses-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mbbs-hero-grid,
    .mbbs-overview-grid,
    .mbbs-dest-panel.active,
    .mbbs-emi-card {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .mbbs-hero-img-wrap {
        max-width: 100%;
    }

    .mbbs-timeline {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: left;
    }

    .mbbs-timeline::before {
        display: none;
    }

    .mbbs-timeline-step {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
    }

    .mbbs-step-num {
        margin: 0;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .mbbs-section {
        padding: 56px 0;
    }

    .mbbs-hero {
        padding: 44px 0 56px 0;
    }

    .mbbs-hero-h1 {
        font-size: 34px;
    }

    .mbbs-h2 {
        font-size: 26px;
    }

    .mbbs-options-grid,
    .mbbs-checklist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mbbs-expenses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mbbs-eligibility-wrap,
    .mbbs-emi-card,
    .mbbs-testimonial-wrap {
        padding: 24px 20px;
    }

    .mbbs-hero-ctas,
    .mbbs-final-btns {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .mbbs-hero-ctas .mbbs-btn-primary,
    .mbbs-hero-ctas .mbbs-btn-secondary,
    .mbbs-final-btns .mbbs-btn-primary,
    .mbbs-final-btns .mbbs-btn-secondary {
        flex: 1 1 0px;
        width: auto;
        min-width: 0;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .mbbs-benefits-grid,
    .mbbs-expenses-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* ──────────────────────────────────────────────────────────
   HALLMARK FORM COMPONENT ARCHITECTURE & 8-STATE SPECIFICATION
   /* Hallmark · component: lead-assessment-form · genre: modern-minimal · theme: visionary-path
    * states: default · hover · focus · active · disabled · loading · error · success
    * contrast: pass (46–50)
    */
   ────────────────────────────────────────────────────────── */

/* 1. Base Geometry & Touch Target Rhythm (No Layout Shift Rule) */
.form-group {
    margin-bottom: 14px;
    position: relative;
}

.form-group.mb-tight {
    margin-bottom: 12px;
}

.form-group label,
.form-label-regular {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 6px;
    line-height: 1.3;
}

.form-group label .req {
    color: #ef4444;
    margin-left: 2px;
    font-weight: 700;
}

/* Base input styling with reserved outline slot (zero-shift contract) */
.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-icon-wrap input,
.input-icon-wrap textarea,
.partner-form-card input,
.partner-form-card select,
.partner-form-card textarea,
.contact-form-box input,
.contact-form-box textarea {
    width: 100%;
    min-height: 46px; /* Touch target floor */
    padding: 11px 14px 11px 40px;
    border: 1.5px solid var(--color-border, #DCE4EA);
    border-radius: 12px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 15px;
    color: var(--color-navy, #0B1F33);
    background-color: #FFFFFF;
    outline: 2px solid transparent; /* Reserved focus slot */
    outline-offset: 2px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.input-icon-wrap textarea,
.contact-form-box textarea,
.partner-form-card textarea {
    min-height: 80px;
    resize: vertical;
    padding-top: 12px;
}

.input-icon-wrap.textarea-wrap > i {
    top: 16px;
    transform: none;
}

/* Leading icons */
.input-icon-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.15s ease;
    z-index: 2;
}

.input-icon-wrap.phone-wrap .country-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    padding-right: 8px;
    border-right: 1.5px solid #CBD5E1;
    line-height: 1;
    z-index: 2;
}

.input-icon-wrap.phone-wrap input {
    padding-left: 82px;
}

.input-icon-wrap input::placeholder,
.input-icon-wrap textarea::placeholder,
.partner-form-card input::placeholder,
.partner-form-card textarea::placeholder,
.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
    color: #94A3B8;
    font-weight: 400;
    opacity: 1;
}

/* 2. Hover State (@media hover) */
@media (hover: hover) {
    .input-icon-wrap input:hover:not(:disabled):not(:focus),
    .input-icon-wrap textarea:hover:not(:disabled):not(:focus),
    .partner-form-card input:hover:not(:disabled):not(:focus),
    .partner-form-card select:hover:not(:disabled):not(:focus),
    .partner-form-card textarea:hover:not(:disabled):not(:focus),
    .contact-form-box input:hover:not(:disabled):not(:focus),
    .contact-form-box textarea:hover:not(:disabled):not(:focus) {
        border-color: #B0C4D8;
        background-color: #F8FAFC;
    }

    .input-icon-wrap.is-hover input,
    .input-icon-wrap.is-hover textarea {
        border-color: #B0C4D8;
        background-color: #F8FAFC;
    }
}

/* 3. Focus & :focus-visible State */
.input-icon-wrap input:focus,
.input-icon-wrap textarea:focus,
.partner-form-card input:focus,
.partner-form-card select:focus,
.partner-form-card textarea:focus,
.contact-form-box input:focus,
.contact-form-box textarea:focus {
    outline: none;
    border-color: var(--color-orange, #FF5A00);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3.5px rgba(255, 90, 0, 0.12);
}

.input-icon-wrap input:focus-visible,
.input-icon-wrap textarea:focus-visible,
.partner-form-card input:focus-visible,
.partner-form-card select:focus-visible,
.partner-form-card textarea:focus-visible,
.contact-form-box input:focus-visible,
.contact-form-box textarea:focus-visible,
.input-icon-wrap.is-focus input,
.input-icon-wrap.is-focus textarea {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 2px;
    border-color: var(--color-orange, #FF5A00);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.14);
}

.input-icon-wrap:focus-within > i {
    color: var(--color-orange, #FF5A00);
}

.input-icon-wrap.whatsapp-inp:focus-within > i {
    color: #16A34A;
}

/* 4. Active / Pressed State */
.btn-submit-enquiry:active,
.btn-partner-submit:active,
.btn-copy-phone:active {
    transform: translateY(1px);
}

/* 5. Disabled State */
input:disabled,
textarea:disabled,
select:disabled,
input[aria-disabled="true"],
textarea[aria-disabled="true"],
.input-icon-wrap.is-disabled input,
.btn:disabled,
.btn-submit-enquiry:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* 6. Loading State */
.btn-submit-enquiry[data-state="loading"],
form[data-submitting="true"] .btn-submit-enquiry {
    cursor: wait;
    opacity: 0.92;
    pointer-events: none;
    background: #10B981 !important;
}

/* 7. Error State (Accessible, Non-Color-Alone) */
input.is-error,
textarea.is-error,
select.is-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
.input-icon-wrap.is-error input,
.input-icon-wrap.is-error textarea {
    border-color: #EF4444 !important;
    background-color: #FFFBFB;
}

input.is-error:focus-visible,
textarea.is-error:focus-visible,
input[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
    outline: 2px solid #EF4444 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14) !important;
}

.input-icon-wrap.has-error > i,
.input-icon-wrap.is-error > i {
    color: #EF4444 !important;
}

/* Stable Error Helper Text (No layout jump) */
.field-error-msg {
    display: none;
    font-size: 11.5px;
    font-weight: 600;
    color: #DC2626;
    margin-top: 4px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.field-error-msg.visible,
.is-error ~ .field-error-msg,
.form-group.has-error .field-error-msg {
    display: flex;
    align-items: center;
    gap: 4px;
}

.field-error-msg::before {
    content: "⚠";
    font-size: 11px;
}

/* 8. Success State */
input.is-success:not(:focus),
textarea.is-success:not(:focus),
input[aria-invalid="false"].touched:not(:focus),
.input-icon-wrap.is-success input {
    border-color: #10B981;
    background-color: #F0FDF4;
}

/* Hallmark Radio Card Refinements */
.interest-opt:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 2px;
    border-color: var(--color-orange, #FF5A00);
}

.interest-opt:has(input[type="radio"]:checked) {
    border-color: var(--color-orange, #FF5A00);
    background: #FFF7ED;
    color: var(--color-navy, #0B1F33);
    box-shadow: 0 2px 8px rgba(255, 90, 0, 0.12);
}

.interest-opt:has(input[type="radio"]:checked) .custom-radio {
    border-color: var(--color-orange, #FF5A00);
}

.interest-opt:has(input[type="radio"]:checked) .custom-radio::after {
    background: var(--color-orange, #FF5A00);
    transform: scale(1);
}

.interest-opt:has(input[type="radio"]:checked) .opt-label i {
    color: var(--color-orange, #FF5A00);
}

/* "Same as phone" Button Refinement */
.btn-copy-phone {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-navy, #0B1F33);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-copy-phone:hover {
    background: #FFF1E8;
    border-color: #FFD4BF;
    color: var(--color-orange, #FF5A00);
}

.btn-copy-phone:focus-visible {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 2px;
}

.btn-copy-phone.copied {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #047857;
}

/* Mobile Responsiveness Floor */
@media (max-width: 768px) {
    .input-icon-wrap input,
    .input-icon-wrap textarea,
    .partner-form-card input,
    .partner-form-card select,
    .partner-form-card textarea,
    .contact-form-box input,
    .contact-form-box textarea {
        font-size: 16px; /* Strict iOS auto-zoom prevention */
        min-height: 48px;
    }
}

/* ==========================================================================
   PARTNER WITH US & MASTER BRAND CARD / SECTION TOKENS
   Hallmark Anti-Slop & Design Consistency Standard
   ========================================================================== */

.partner-page-wrap {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-body, #334155);
}

.partner-page-wrap h1,
.partner-page-wrap h2,
.partner-page-wrap h3,
.partner-page-wrap h4 {
    font-family: var(--font-display, 'Manrope', sans-serif);
    text-wrap: balance;
    letter-spacing: -0.02em;
}

.partner-page-wrap p,
.partner-page-wrap .section-subheading,
.partner-page-wrap .why-benefit-desc,
.partner-page-wrap .process-desc,
.partner-page-wrap .who-desc,
.partner-page-wrap .faq-answer {
    text-wrap: pretty;
}

/* Partner Hero */
.partner-hero {
    background: linear-gradient(145deg, #071728 0%, #0B1F33 45%, #123A63 100%);
    padding: 130px 0 75px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.partner-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 25%, rgba(255, 90, 0, 0.12) 0%, transparent 60%);
    opacity: 0.2;
    pointer-events: none;
}

.partner-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
}

.hero-breadcrumb-nav {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 6px 18px;
    border-radius: var(--radius-full, 9999px);
    backdrop-filter: blur(8px);
}

.hero-breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.18s ease;
}

.hero-breadcrumb-nav a:hover {
    color: var(--color-orange, #FF5A00);
}

.hero-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
}

.hero-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: #FFF1E8;
    border: 1px solid rgba(255, 90, 0, 0.35);
    border-radius: var(--radius-full, 9999px);
    color: var(--color-orange, #FF5A00);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-body, 'Inter', sans-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.hero-pulse-dot {
    width: 7px;
    height: 7px;
    background: var(--color-orange, #FF5A00);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 90, 0, 0.6);
    animation: heroOrangeDotPulse 2s infinite;
}

@keyframes heroOrangeDotPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 90, 0, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 90, 0, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 90, 0, 0); }
}

.partner-hero h1 {
    color: #FFFFFF;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
}

.partner-hero p.hero-lead {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    max-width: 680px;
    margin: 0 auto 28px;
    line-height: 1.7;
    font-weight: 400;
}

.hero-trust-strip {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.hero-trust-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-full, 9999px);
    padding: 7px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(6px);
}

.hero-trust-pill i {
    color: var(--color-orange, #FF5A00);
    font-size: 0.85rem;
}

/* Stats Bar */
.stats-bar {
    background: #071728;
    padding: 34px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 3;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
}

@media(max-width: 860px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media(max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.stat-card-item {
    padding: 18px 20px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background-color 0.22s ease;
}

.stat-card-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 90, 0, 0.35);
}

.stat-card-item .stat-num {
    color: var(--color-orange, #FF5A00);
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(1.8rem, 2.4vw, 2.3rem);
    font-weight: 800;
    display: block;
    line-height: 1.1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat-card-item .stat-lbl {
    color: #0F172A !important;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.35;
}

.stat-card-item .stat-sub {
    display: block;
    color: #475569 !important;
    font-size: 0.74rem;
    font-weight: 500;
    margin-top: 4px;
}

/* Institutional Trust & Stats Bar Item High-Contrast Styling */
.stats-bar .stat-item {
    text-align: center !important;
    padding: 18px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.22s ease !important;
}

.stats-bar .stat-item:hover {
    transform: translateY(-2px) !important;
}

.stats-bar .stat-item-icon {
    font-size: 1.75rem !important;
    color: var(--color-orange, #FF5A00) !important;
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(255, 90, 0, 0.12) !important;
    border: 1px solid rgba(255, 90, 0, 0.28) !important;
}

.stats-bar .stat-item-icon i {
    color: var(--color-orange, #FF5A00) !important;
}

.stats-bar .stat-item-label {
    color: #0B1F33 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

/* Institutional CTA Bar Styling */
.cta-bar {
    background: #ffffff !important;
    padding: 60px 0 !important;
    text-align: center !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.cta-bar h2 {
    font-family: var(--font-display, "Manrope", sans-serif) !important;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
    font-weight: 800 !important;
    color: var(--color-navy, #0B1F33) !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
}

.cta-bar p {
    font-size: 1.05rem !important;
    color: #475569 !important;
    max-width: 620px !important;
    margin: 0 auto 28px !important;
    line-height: 1.6 !important;
}

.cta-bar .cta-btns {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.cta-bar .cta-btns .btn-primary {
    background: var(--color-orange, #FF5A00) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 13px 28px !important;
    border-radius: 9999px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(255, 90, 0, 0.28) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.cta-bar .cta-btns .btn-primary:hover {
    background: #e04f00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 90, 0, 0.35) !important;
}

.cta-bar .cta-btns .btn-whatsapp {
    background: #16a34a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 13px 28px !important;
    border-radius: 9999px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.25) !important;
    transition: all 0.2s ease !important;
}

.cta-bar .cta-btns .btn-whatsapp:hover {
    background: #15803d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35) !important;
}

/* Section Header Chips */
.section-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    background: #FFF1E8;
    border: 1px solid rgba(255, 90, 0, 0.25);
    border-radius: var(--radius-full, 9999px);
    color: #C2410C;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-badge-chip i {
    font-size: 0.78rem;
    color: var(--color-orange, #FF5A00);
}

/* Main Partner Section */
.partner-section {
    padding: 48px 0;
    background: #F8FAFC;
    position: relative;
}

.partner-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: start;
}

@media(max-width: 980px) {
    .partner-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Partner Form Card */
.partner-form-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 8px 24px -6px rgba(11, 31, 51, 0.06), 0 2px 6px rgba(11, 31, 51, 0.02);
    border: 1.5px solid #E2E8F0;
    position: relative;
}

.form-card-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
}

.form-card-header .section-badge-chip,
.why-col-header .section-badge-chip {
    padding: 3px 10px;
    font-size: 0.68rem;
    margin-bottom: 6px;
}

.form-card-header h2 {
    color: var(--color-navy, #0B1F33);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}

.form-card-header p {
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.form-group {
    margin-bottom: 11px;
}

.form-group label {
    display: block;
    color: var(--text-body, #334155);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.form-group .req {
    color: #DC2626;
    font-weight: 700;
}

.partner-form-card .input-icon-wrap {
    position: relative;
}

.partner-form-card .input-icon-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 0.82rem;
    pointer-events: none;
    transition: color 0.18s ease;
}

.partner-form-card .input-icon-wrap input,
.partner-form-card .input-icon-wrap select,
.partner-form-card .input-icon-wrap textarea {
    width: 100%;
    height: 38px;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid #CBD5E1;
    border-radius: 9px;
    font-size: 0.82rem;
    color: var(--color-navy, #0B1F33);
    font-family: inherit;
    background: #F8FAFC;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.partner-form-card .input-icon-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748b' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 28px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.partner-form-card .input-icon-wrap textarea {
    height: auto;
    min-height: 58px;
    padding-top: 8px;
    resize: vertical;
}

.partner-form-card .input-icon-wrap.textarea-wrap i {
    top: 12px;
    transform: none;
}

.partner-form-card .input-icon-wrap input:focus,
.partner-form-card .input-icon-wrap select:focus,
.partner-form-card .input-icon-wrap textarea:focus {
    outline: none;
    border-color: var(--color-orange, #FF5A00);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.15);
}

.partner-form-card .input-icon-wrap:focus-within i {
    color: var(--color-orange, #FF5A00);
}

.btn-partner-submit {
    width: 100%;
    height: 42px;
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 55%, #FF3800 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-display, 'Manrope', sans-serif);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 16px -3px rgba(255, 90, 0, 0.32);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
    margin-top: 4px;
}

.btn-partner-submit:hover {
    box-shadow: 0 10px 22px -4px rgba(255, 90, 0, 0.42);
    transform: translateY(-2px);
}

.btn-partner-submit:active {
    transform: scale(0.98);
}

.form-trust-banner {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted, #64748B);
    text-align: center;
}

.form-trust-banner i {
    color: var(--color-orange, #FF5A00);
}

/* Why Col Value Stack */
.why-col-header {
    margin-bottom: 14px;
}

.why-col-header h2 {
    color: var(--color-navy, #0B1F33);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}

.why-col-header p {
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}

.why-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.why-benefit-card {
    background: #FFFFFF;
    border: 1.5px solid #E8F0FE;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.03);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

.why-benefit-card:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 8px 18px -4px rgba(11, 31, 51, 0.08);
}

.why-benefit-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Master Brand Icon Styles */
.icon-vps-orange {
    background: #FFF1E8 !important;
    color: #FF5A00 !important;
    border: 1px solid rgba(255, 90, 0, 0.2) !important;
}

.icon-vps-navy {
    background: #EEF4F9 !important;
    color: #123A63 !important;
    border: 1px solid rgba(18, 58, 99, 0.15) !important;
}

.why-benefit-body {
    flex: 1;
}

.benefit-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.why-benefit-body h3 {
    color: var(--color-navy, #0B1F33);
    font-size: 0.94rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.benefit-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 5px;
}

.benefit-tag.orange {
    background: #FFF1E8;
    color: #FF5A00;
}

.benefit-tag.navy {
    background: #EEF4F9;
    color: #123A63;
}

.why-benefit-body p {
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    line-height: 1.48;
    margin: 0;
}

/* Editorial Advisory Visual */
.partner-editorial-visual {
    margin-top: 24px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 28px -4px rgba(11, 31, 51, 0.08);
    position: relative;
}

.partner-editorial-visual img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.partner-editorial-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(7, 23, 40, 0.9) 0%, rgba(7, 23, 40, 0.4) 70%, transparent 100%);
    padding: 16px 20px;
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.partner-editorial-caption i {
    color: var(--color-orange, #FF5A00);
}

/* Together Highlight Banner */
.together-callout {
    background: linear-gradient(145deg, #071728 0%, #0B1F33 60%, #123A63 100%);
    border-radius: 18px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px -4px rgba(11, 31, 51, 0.15);
    margin-top: 20px;
}

.together-callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF7A00, #FF5A00, #FF3800);
}

.together-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-orange, #FF5A00);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.together-quote {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 10px;
}

.together-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.together-sub i {
    color: #10B981;
}

/* Partner Bento Grid Row (Mutual Success Promise Left, Editorial Visual Right) */
.partner-bento-row {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    margin-top: 24px;
    align-items: stretch;
}

.together-callout.bento-callout {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 24px;
    border-radius: 14px;
    background: linear-gradient(145deg, #071728 0%, #0B1F33 60%, #123A63 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px -6px rgba(11, 31, 51, 0.14);
    position: relative;
    overflow: hidden;
}

.together-callout.bento-callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF7A00, #FF5A00, #FF3800);
}

.together-callout.bento-callout .together-quote {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    margin: 8px 0 10px 0;
    letter-spacing: -0.01em;
}

.together-callout.bento-callout .together-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.bento-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bento-pill {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
    padding: 4px 11px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bento-pill i {
    color: var(--color-orange, #FF5A00);
}

.partner-editorial-visual.bento-visual {
    margin-top: 0;
    border-radius: 14px;
    height: 100%;
    min-height: 220px;
    display: flex;
    overflow: hidden;
    position: relative;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 10px 24px -6px rgba(11, 31, 51, 0.08);
}

.partner-editorial-visual.bento-visual img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 980px) {
    .partner-bento-row {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 28px;
    }
    .together-callout.bento-callout {
        padding: 26px 22px;
    }
    .partner-editorial-visual.bento-visual,
    .partner-editorial-visual.bento-visual img {
        min-height: 220px;
        height: 220px;
    }
}

/* Process Section */
.process-section {
    padding: 85px 0;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
}

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

@media (max-width: 580px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.process-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 28px 22px;
    position: relative;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.process-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 12px 28px -6px rgba(11, 31, 51, 0.08);
    background: #FFFFFF;
}

.process-step-num {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--color-orange, #FF5A00);
    background: #FFF1E8;
    border: 1px solid rgba(255, 90, 0, 0.25);
    padding: 4px 10px;
    border-radius: var(--radius-full, 9999px);
    display: inline-block;
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}

.process-icon {
    width: 48px;
    height: 48px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 16px;
}

.process-card h3 {
    color: var(--color-navy, #0B1F33);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.process-card p {
    color: var(--text-muted, #64748B);
    font-size: 0.88rem;
    line-height: 1.58;
    margin: 0;
}

/* Who Can Partner Section */
.who-section {
    padding: 56px 0;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media(max-width: 900px) {
    .who-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media(max-width: 580px) {
    .who-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.who-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 18px 18px;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 2px 10px -2px rgba(11, 31, 51, 0.04);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.who-card:hover {
    transform: translateY(-3px);
    border-color: #CBD5E1;
    box-shadow: 0 10px 24px -4px rgba(11, 31, 51, 0.08);
}

.who-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

.who-icon-wrap {
    width: 40px;
    height: 40px;
    background: #FFF1E8;
    border: 1.5px solid rgba(255, 90, 0, 0.22);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--color-orange, #FF5A00);
}

.who-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full, 9999px);
    background: #EEF4F9;
    color: var(--color-navy, #0B1F33);
    border: 1px solid #D6E4F0;
}

.who-card h3 {
    color: var(--color-navy, #0B1F33);
    font-size: 0.98rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.32;
}

.who-card p,
.who-card .who-desc {
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.who-card-features {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #123A63;
}

.who-card-features i {
    color: #10B981;
}

/* What Your Students Get Section */
.students-get-section {
    padding: 56px 0;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
}

.students-get-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.students-get-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 18px 18px;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 2px 10px -2px rgba(11, 31, 51, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
}

.students-get-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 90, 0, 0.35);
    box-shadow: 0 10px 24px -4px rgba(11, 31, 51, 0.08), 0 4px 12px rgba(255, 90, 0, 0.05);
}

.students-get-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.students-get-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 90, 0, 0.08);
    border: 1px solid rgba(255, 90, 0, 0.16);
    color: var(--color-orange, #FF5A00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.22s ease;
}

.students-get-card:hover .students-get-icon {
    background: linear-gradient(135deg, #FF7A00, #FF5A00);
    color: #FFFFFF;
    border-color: #FF5A00;
    transform: scale(1.05);
    box-shadow: 0 6px 14px -2px rgba(255, 90, 0, 0.3);
}

.students-get-num {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    color: #94A3B8;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 2px 8px;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    transition: all 0.22s ease;
}

.students-get-card:hover .students-get-num {
    color: var(--color-orange, #FF5A00);
    background: rgba(255, 90, 0, 0.08);
    border-color: rgba(255, 90, 0, 0.2);
}

.students-get-card-title {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    line-height: 1.32;
    margin-top: 0;
    margin-bottom: 6px;
    letter-spacing: -0.012em;
    transition: color 0.2s ease;
}

.students-get-card-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.82rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

@media (max-width: 992px) {
    .students-get-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .students-get-card {
        padding: 16px 16px;
    }
}

@media (max-width: 600px) {
    .students-get-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .students-get-card {
        padding: 16px 16px;
    }
}

/* FAQ Section */
.faq-section {
    padding: 85px 0;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
}

.faq-container {
    max-width: 820px;
    margin: 0 auto;
}

/* Bottom CTA Section */
.partner-page-wrap .cta-section {
    padding: 80px 0;
    background: linear-gradient(145deg, #071728 0%, #0B1F33 55%, #123A63 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.partner-page-wrap .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 90, 0, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.partner-page-wrap .cta-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
}

.partner-page-wrap .cta-inner h2 {
    color: #FFFFFF;
    font-size: clamp(1.75rem, 3.4vw, 2.45rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.partner-page-wrap .cta-inner p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 auto 32px;
}

.partner-page-wrap .cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 55%, #FF3800 100%);
    color: #FFFFFF !important;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-display, 'Manrope', sans-serif);
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
    box-shadow: 0 8px 24px -4px rgba(255, 90, 0, 0.45);
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -4px rgba(255, 90, 0, 0.55);
    color: #FFFFFF !important;
}

.btn-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body, 'Inter', sans-serif);
    border-radius: 12px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, border-color 0.18s ease;
}

.btn-cta-whatsapp:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    color: #FFFFFF !important;
}

.btn-cta-whatsapp i {
    color: #25D366;
    font-size: 1.15rem;
}

.partner-page-wrap .cta-call-direct {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
}

.partner-page-wrap .cta-call-direct a {
    color: var(--color-orange, #FF5A00);
    font-weight: 700;
    text-decoration: none;
}

.partner-page-wrap .cta-call-direct a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .partner-hero { padding: 100px 0 55px; }
    .partner-section, .process-section, .who-section, .faq-section, .partner-page-wrap .cta-section { padding: 52px 0; }
    .partner-form-card { padding: 26px 20px; border-radius: 16px; }
    .stats-bar { padding: 24px 0; }
}

/* ==========================================================================
   PARTNER LENDERS GRID & CARD TOKENS
   Hallmark Clean Interface Standard
   ========================================================================== */

/* ==========================================================================
   PARTNER LENDERS GRID & CARD TOKENS - COMPACT STREAMLINED STANDARD
   Zero text overlap, reduced card height, clean typography
   ========================================================================== */

.lenders-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 14px;
}

.lender-info-card {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(11, 31, 51, 0.04);
}

.lender-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -3px rgba(11, 31, 51, 0.08);
    border-color: var(--color-orange, #FF5A00);
}

.lic-header {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    padding: 10px 12px 8px;
    border-bottom: 1px solid #EDF2F7;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lic-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lic-logo-wrap {
    min-width: 44px;
    width: 44px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 2px 4px;
    flex-shrink: 0;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(11, 31, 51, 0.04);
}

.lic-logo {
    max-height: 20px;
    max-width: 38px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.lic-brand-info {
    min-width: 0;
    flex: 1;
}

.lic-name {
    color: var(--color-navy, #0B1F33);
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lic-tagline {
    color: #64748B;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.62rem;
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lic-rate-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #0B1F33;
    color: #FFFFFF;
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 50px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    align-self: flex-start;
}

.lic-rate-pill i {
    color: #FF5A00;
    font-size: 0.60rem;
}

.lic-body {
    padding: 6px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3.5px 0;
    border-bottom: 1px solid #F8FAFC;
    min-height: 22px;
}

.lic-row:last-child {
    border-bottom: none;
}

.lic-label {
    color: #64748B;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.lic-value {
    color: var(--color-navy, #0B1F33);
    font-weight: 700;
    font-size: 0.70rem;
    text-align: right;
    line-height: 1.25;
    word-break: break-word;
}

.lic-footer {
    padding: 6px 12px 10px;
}

.lic-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 55%, #FF3800 100%);
    color: #FFFFFF !important;
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 0.74rem;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
    width: 100%;
    box-shadow: 0 1px 4px rgba(255, 90, 0, 0.20);
    text-decoration: none;
}

.lic-cta:hover {
    box-shadow: 0 4px 12px -1px rgba(255, 90, 0, 0.35);
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.lic-cta i {
    font-size: 0.68rem;
    transition: transform 0.2s ease;
}

.lic-cta:hover i {
    transform: translateX(2px);
}






/* ══════════════════════════════════════════════════════════════════════
   COUNTRY PAGE — Hallmark token-backed utility classes
   Replaces all inline style= overrides removed from study destination pages.
   All values reference design tokens via var(). No raw hex values.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Stat box icon colours — 4 semantically distinct tokens ──
   🎓 Tuition    → info blue    (academic / knowledge)
   💰 Living     → success grn  (money / savings)
   🤲 Max loan   → brand orange (primary value highlight)
   📄 Visa req   → amber        (document / caution)
── */
.stat-icon-navy      { color: var(--color-info, #1A56DB); }       /* tuition / graduation cap */
.stat-icon-orange    { color: var(--color-success, #047857); }    /* living cost / wallet */
.stat-icon-navy-deep { color: var(--color-orange, #FF5A00); }     /* max loan / hand-holding-dollar */
.stat-icon-amber     { color: var(--color-warning, #D97706); }    /* visa req / file-invoice */

/* ── Country overview body paragraph ── */
.country-overview-body {
    font-size: 15.5px;
    color: var(--color-text-secondary, #475569);
    line-height: 1.75;
    margin-bottom: 20px;
    max-width: 72ch;
}

/* ── "Popular Universities" sub-heading ── */
.country-unis-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    margin-top: 24px;
}

/* ── Docs card CTA button — full-width with top gap ── */
.btn-block-mt {
    width: 100%;
    margin-top: 8px;
}

/* ── Documentation checklist section background ── */
.section-docs-bg {
    background: var(--color-off-white, #F7F9FB);
    border-top: 1px solid var(--color-border, #DDE5EC);
    border-bottom: 1px solid var(--color-border, #DDE5EC);
}

/* ── Centred section header — compact (FAQ, etc.) ── */
.section-header-center-sm {
    text-align: center;
    margin-bottom: 44px;
}

/* ── Documentation cards grid ── */
.docs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* ── Core card icon colour variants ── */
.card-icon-navy {
    background: var(--color-surface-subtle, #EAF0F5);
    color: var(--color-navy, #0B1F33);
}
.card-icon-green {
    background: var(--vp-green-accent, #EAF7F0);
    color: var(--vp-green-text, #047857);
}
.card-icon-amber {
    background: #fefce8;
    color: var(--color-warning, #D97706);
}

/* ── Uni tag icon — spacing via CSS, no inline margin ── */
.uni-tag i.fas {
    margin-right: 4px;
}

/* ── Disclaimer footer check icon ── */
.disclaimer-check-icon {
    margin-right: 5px;
}

/* ── Popup country input read-only styling ── */
.country-input-readonly {
    background: var(--color-surface-soft, #F7F9FB);
    font-weight: 600;
    color: var(--color-navy, #0B1F33);
}

/* ============================================================
   FORM TEXT FIT — NO CLIPPING, NO CROPPING (All Form Screens)
   Ensures every label, input, interest tile, and button text
   is fully visible in the popup modal and contact-page form.
   ============================================================ */

/* 1. Popup modal — full viewport safety, zero header/footer crop */
.popup-modal {
    max-height: 94vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 2. Popup right column — flex-start alignment prevents vertical crop */
.popup-right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* CRITICAL: Never center, which pushes top header into negative scroll territory */
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 24px 32px 20px 32px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.popup-left {
    padding: 28px 28px 22px 28px !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.popup-features-list {
    gap: 10px !important;
}

.popup-feature-item {
    padding: 8px 11px !important;
}

/* 3. Popup header — safety zone for close button */
.popup-form-header {
    margin-bottom: 12px !important;
    padding-right: 44px !important; /* Safety clear zone for the (X) close button */
}

.popup-form-header h4 {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 3px 0 !important;
    color: #0b2545 !important;
    letter-spacing: -0.02em !important;
}

.popup-form-header p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* 4. Streamlined row and group spacing for zero scroll on laptops */
.popup-form {
    width: 100% !important;
    margin: 0 !important;
}

.popup-form .form-row.name-row {
    margin-bottom: 9px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.popup-form .form-row {
    margin-bottom: 9px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.popup-form .form-group {
    margin-bottom: 9px !important;
}

.popup-form .form-group.mb-tight {
    margin-bottom: 8px !important;
}

.popup-form .form-group label,
.popup-form .form-label-regular {
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
}

/* 5. Inputs and selects — compact height with comfortable touch target */
.popup-form .input-icon-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.popup-form .input-icon-wrap input {
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 14px 9px 38px !important;
    font-size: 13.5px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.popup-form .input-icon-wrap.phone-wrap input {
    padding-left: 78px !important;
}

.popup-form .label-with-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
    gap: 6px !important;
}

.popup-form .btn-copy-phone {
    padding: 2px 8px !important;
    font-size: 11px !important;
    height: 22px !important;
    line-height: 18px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 6. Interest options tiles — crisp 2-column or 1-column responsive layout */
.popup-form .interest-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.popup-form .interest-opt {
    min-height: 38px !important;
    height: auto !important;
    padding: 7px 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.popup-form .interest-opt .custom-radio {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.popup-form .interest-opt .opt-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    color: #1e293b !important;
}

.popup-form .interest-opt .opt-label i {
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* 7. Textarea — streamlined height */
.popup-form .input-icon-wrap textarea {
    min-height: 52px !important;
    height: 52px !important;
    padding: 9px 14px 9px 38px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 10px !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.popup-form .input-icon-wrap.textarea-wrap > i {
    top: 13px !important;
    transform: none !important;
}

/* 8. Submit button and confidential trust badge */
.popup-form .btn-submit-enquiry {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 20px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 11px !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.popup-form .popup-safe {
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.popup-form .popup-safe span {
    white-space: normal !important;
    word-break: break-word !important;
}

.popup-form .popup-safe i {
    color: #16a34a !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* 9. Universal Form Safety — No text clipping on any screen */
.form-group label,
.form-label-regular,
.contact-form-box label,
.partner-form-card label,
.lead-form-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
    display: block !important;
    line-height: 1.4 !important;
}

.input-icon-wrap input,
.input-icon-wrap textarea,
.contact-form-box input,
.contact-form-box textarea,
.partner-form-card input,
.partner-form-card select,
.partner-form-card textarea {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* 10. Tablet / Mobile Intermediate Screen (≤ 768px) — Zero Form Scroll Architecture */
@media (max-width: 768px) {
    .popup-modal {
        flex-direction: column !important;
        max-width: 480px !important;
        width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(11, 37, 69, 0.25) transparent !important;
    }

    .popup-modal::-webkit-scrollbar {
        width: 4px !important;
    }

    .popup-modal::-webkit-scrollbar-thumb {
        background: rgba(11, 37, 69, 0.2) !important;
        border-radius: 999px !important;
    }

    /* CRITICAL UX: Hide duplicate promo left column on mobile so the form is instantly accessible without scrolling */
    .popup-left {
        display: none !important;
    }

    .popup-right {
        padding: 18px 16px 16px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .popup-form-header {
        margin-bottom: 8px !important;
        padding-right: 36px !important; /* Safety clear zone for close button */
    }

    .popup-form-header h4 {
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
    }

    .popup-form-header p {
        font-size: 11px !important;
        line-height: 1.35 !important;
        color: #64748b !important;
        margin: 0 !important;
    }

    .popup-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .popup-form .form-group {
        margin-bottom: 0 !important; /* Eliminates redundant spacing */
        width: 100% !important;
    }

    .popup-form .form-group.mb-tight {
        margin-bottom: 0 !important;
    }

    .popup-form label,
    .popup-form .form-label-regular {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        color: #1e293b !important;
    }

    /* Preserve 2-column side-by-side for First Name & Last Name to save 65px vertical scroll */
    .popup-form .form-row.name-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    /* Phone & WhatsApp 2-column grid on screens >= 400px */
    .popup-form .form-row:not(.name-row) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .popup-form .label-with-action {
        margin-bottom: 2px !important;
    }

    .popup-form .btn-copy-phone {
        padding: 1px 6px !important;
        font-size: 10px !important;
        height: 18px !important;
        line-height: 16px !important;
    }

    /* Interest options — 2x2 grid instead of 4 stacked rows (saves 110px scroll) */
    .popup-form .interest-options {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 2px !important;
    }

    .popup-form .interest-opt {
        padding: 7px 8px !important;
        min-height: 38px !important;
        height: auto !important;
        font-size: 11px !important;
        border-radius: 9px !important;
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .popup-form .interest-opt .custom-radio {
        display: none !important;
    }

    .popup-form .interest-opt .opt-label {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .popup-form .interest-opt .opt-label i {
        font-size: 12px !important;
        color: #FF5A00 !important;
        flex-shrink: 0 !important;
    }

    /* Ergonomic input heights */
    .popup-form .input-icon-wrap input {
        font-size: 16px !important; /* Prevents mobile Safari zoom */
        min-height: 42px !important;
        height: 42px !important;
        padding: 8px 12px 8px 36px !important;
        border-radius: 9px !important;
    }

    .popup-form .input-icon-wrap.phone-wrap input,
    .input-icon-wrap.phone-wrap input,
    input#popupPhone {
        padding-left: 92px !important;
    }

    .popup-form .input-icon-wrap > i {
        left: 12px !important;
        font-size: 12.5px !important;
    }

    /* Compact textarea for optional message */
    .popup-form .input-icon-wrap textarea {
        font-size: 13px !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 7px 12px 7px 34px !important;
        border-radius: 9px !important;
        resize: vertical !important;
        transition: min-height 0.2s ease, height 0.2s ease !important;
    }

    .popup-form .input-icon-wrap textarea:focus {
        min-height: 66px !important;
        height: 66px !important;
    }

    .popup-form .btn-submit-enquiry {
        min-height: 42px !important;
        height: 44px !important;
        font-size: 14px !important;
        padding: 8px 16px !important;
        margin-top: 3px !important;
        border-radius: 10px !important;
    }

    .popup-form .popup-safe {
        font-size: 10px !important;
        margin-top: 4px !important;
        line-height: 1.25 !important;
    }
}

/* 11. Mobile Screens (≤ 480px / 375px) — Ultra Compact Flow */
@media (max-width: 480px) {
    .popup-modal {
        border-radius: 16px !important;
        max-width: 100% !important;
        max-height: 94dvh !important;
    }

    .popup-right {
        padding: 16px 14px 14px 14px !important;
    }

    .popup-form-header h4 {
        font-size: 17px !important;
    }

    .popup-form-header p {
        font-size: 10.5px !important;
    }
}

@media (max-width: 380px) {
    /* Stack phone and whatsapp only on super-narrow screens */
    .popup-form .form-row:not(.name-row) {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .popup-form .interest-opt {
        padding: 5px 6px !important;
        min-height: 34px !important;
    }

    .popup-form .interest-opt .opt-label {
        font-size: 9.5px !important;
    }
}

/* ============================================================
   ABOUT US PAGE — MASTER BRAND STYLING (/hallmark Anti-Slop)
   ============================================================ */

.about-hero {
    background: linear-gradient(140deg, #071524 0%, #0B1F33 45%, #123A63 85%, #0B1F33 100%) !important;
    padding: 76px 0 68px !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 90, 0, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(18, 58, 99, 0.25) 0%, transparent 50%);
    pointer-events: none;
}

.about-hero-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 56px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.about-hero-content {
    text-align: left !important;
}

.about-eyebrow-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 90, 0, 0.12) !important;
    border: 1px solid rgba(255, 90, 0, 0.3) !important;
    color: #FF7A33 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    margin-bottom: 18px !important;
}

.about-eyebrow-tag .badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FF5A00;
    box-shadow: 0 0 8px #FF5A00;
}

.about-hero-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(2.2rem, 4.4vw, 3.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
    text-wrap: balance !important;
}

.about-hero-lead {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.02rem, 1.4vw, 1.12rem) !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 12px !important;
    text-wrap: pretty !important;
}

.about-hero-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.68 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 22px !important;
    text-wrap: pretty !important;
}

/* Glassmorphism Foundational Belief Box */
.about-belief-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-left: 4px solid #FF5A00 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin: 22px 0 26px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2) !important;
}

.belief-icon-box {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 90, 0, 0.18) !important;
    border: 1px solid rgba(255, 90, 0, 0.35) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FF5A00 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.belief-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
}

.belief-text strong {
    color: #FF9457 !important;
    font-weight: 700 !important;
}

.about-hero-actions {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

.btn-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #FF5A00 0%, #E04E00 100%) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px -4px rgba(255, 90, 0, 0.45) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-hero-cta:hover {
    background: linear-gradient(135deg, #E04E00 0%, #C43E00 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px -4px rgba(255, 90, 0, 0.55) !important;
    color: #ffffff !important;
}

.btn-hero-cta:active {
    transform: scale(0.98) !important;
}

.btn-hero-whatsapp {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 12px 22px !important;
    background: rgba(37, 211, 102, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(37, 211, 102, 0.35) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    text-decoration: none !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s, border-color 0.18s !important;
}

.btn-hero-whatsapp i {
    color: #25D366 !important;
    font-size: 1.15rem !important;
}

.btn-hero-whatsapp:hover {
    background: rgba(37, 211, 102, 0.22) !important;
    border-color: rgba(37, 211, 102, 0.6) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.btn-hero-whatsapp:active {
    transform: scale(0.98) !important;
}

.hero-trust-micro {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.hero-trust-micro span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hero-trust-micro i {
    color: #FF5A00 !important;
    font-size: 0.85rem !important;
}

/* Hero Media & Floating Badges */
.about-hero-media {
    position: relative !important;
}

.about-hero-image-card {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    outline: 1px solid rgba(255, 255, 255, 0.15) !important;
    outline-offset: -1px !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.42) !important;
    background: #0B1F33 !important;
}

.about-hero-image-card img {
    width: 100% !important;
    height: 480px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.about-hero-image-card:hover img {
    transform: scale(1.02) !important;
}

.about-floating-badge {
    position: absolute !important;
    background: rgba(11, 31, 51, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.35) !important;
    z-index: 3 !important;
}

.floating-badge-bl {
    bottom: 24px !important;
    left: 20px !important;
}

.floating-badge-tr {
    top: 24px !important;
    right: 20px !important;
}

.floating-badge-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.floating-badge-content {
    display: flex !important;
    flex-direction: column !important;
}

.floating-badge-val {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums !important;
}

.floating-badge-lbl {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* ── 2. STATS TRUST STRIP ── */
.about-stats-bar {
    background: #0B1F33 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 32px 0 !important;
}

.about-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

.about-stat-item {
    text-align: center !important;
    padding: 10px 18px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.about-stat-item:last-child {
    border-right: none !important;
}

.about-stat-number {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
    font-variant-numeric: tabular-nums !important;
    display: block !important;
}

.about-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* ── Shared Section Typography ── */
.section-header-center {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto 48px !important;
}

.about-section-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.85rem, 3.2vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
    text-wrap: balance !important;
}

.about-section-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin: 0 auto !important;
    text-wrap: pretty !important;
}

/* ── 3. PURPOSE & PHILOSOPHY SECTION ── */
.about-purpose-section {
    padding: 88px 0 !important;
    background: #ffffff !important;
}

.about-manifesto-card {
    background: linear-gradient(135deg, #FFF7F2 0%, #FFFFFF 100%) !important;
    border: 1.5px solid #FFD9C4 !important;
    border-radius: 20px !important;
    padding: 38px 44px !important;
    margin-bottom: 44px !important;
    box-shadow: 0 4px 16px -2px rgba(11, 31, 51, 0.04) !important;
    display: flex !important;
    gap: 30px !important;
    align-items: center !important;
}

.manifesto-quote-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #FF5A00 0%, #E04E00 100%) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 8px 20px -4px rgba(255, 90, 0, 0.35) !important;
}

.manifesto-content h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    text-wrap: balance !important;
}

.manifesto-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    color: #334155 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
}

.about-philosophy-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.philosophy-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px 26px !important;
    box-shadow: 0 2px 8px -2px rgba(11, 31, 51, 0.04) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s, box-shadow 0.22s !important;
    display: flex !important;
    flex-direction: column !important;
}

.philosophy-card:hover {
    transform: translateY(-4px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.08) !important;
}

.philosophy-card-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 20px !important;
}

.philosophy-card h4 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    text-wrap: balance !important;
}

.philosophy-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
    flex: 1 !important;
}

/* ── 4. CORE FOCUS (SPECIALIZATIONS) ── */
.about-focus-section {
    padding: 88px 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.about-focus-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    margin-bottom: 36px !important;
}

.focus-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 34px 28px !important;
    position: relative !important;
    box-shadow: 0 4px 14px -2px rgba(11, 31, 51, 0.04) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s, box-shadow 0.22s !important;
    display: flex !important;
    flex-direction: column !important;
}

.focus-card:hover {
    transform: translateY(-5px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.1) !important;
}

.focus-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

.focus-card-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
}

.focus-card-num {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em !important;
}

.focus-card h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    text-wrap: balance !important;
}

.focus-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
    text-wrap: pretty !important;
    flex: 1 !important;
}

.focus-features-list {
    list-style: none !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 18px !important;
}

.focus-features-list li {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
}

.focus-features-list li i {
    color: #FF5A00 !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}

.focus-card-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    text-decoration: none !important;
    margin-top: auto !important;
    transition: color 0.18s, transform 0.18s !important;
}

.focus-card-link:hover {
    color: #FF5A00 !important;
    transform: translateX(4px) !important;
}

.focus-card-link i {
    font-size: 0.8rem !important;
    transition: transform 0.18s !important;
}

.focus-card-link:hover i {
    transform: translateX(3px) !important;
}

.focus-summary-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-left: 4px solid #0B1F33 !important;
    border-radius: 14px !important;
    padding: 22px 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    box-shadow: 0 2px 8px -2px rgba(11, 31, 51, 0.04) !important;
}

.focus-summary-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(11, 31, 51, 0.08) !important;
    color: #0B1F33 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.focus-summary-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.94rem !important;
    color: #334155 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
}

/* ── 5. THE 6-STEP ADVISORY JOURNEY ── */
.about-journey-section {
    padding: 88px 0 !important;
    background: #ffffff !important;
}

.about-journey-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.step-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px 26px !important;
    position: relative !important;
    box-shadow: 0 2px 8px -2px rgba(11, 31, 51, 0.04) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s, box-shadow 0.22s !important;
    display: flex !important;
    flex-direction: column !important;
}

.step-card:hover {
    transform: translateY(-4px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.09) !important;
}

.step-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.step-pill {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    background: rgba(11, 31, 51, 0.06) !important;
    color: #0B1F33 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(11, 31, 51, 0.12) !important;
    font-variant-numeric: tabular-nums !important;
}

.step-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0B1F33 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.step-card h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    text-wrap: balance !important;
}

.step-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.91rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
    flex: 1 !important;
}

/* ── 6. OUR MISSION & VALUES ── */
.about-mission-section {
    padding: 88px 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

.about-mission-layout {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 60px !important;
    align-items: center !important;
}

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

.mission-text-col .about-section-title {
    margin-bottom: 18px !important;
}

.mission-lead {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
    margin-bottom: 14px !important;
    text-wrap: pretty !important;
}

.mission-body {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
    line-height: 1.75 !important;
    margin-bottom: 32px !important;
    text-wrap: pretty !important;
}

.mission-values-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
}

.mission-value-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px 18px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px -1px rgba(11, 31, 51, 0.04) !important;
}

.mission-value-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    margin: 0 auto 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.mission-value-card h4 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
    text-wrap: balance !important;
}

.mission-value-card span {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    color: #64748B !important;
    line-height: 1.4 !important;
    display: block !important;
}

.mission-media-col {
    position: relative !important;
}

.mission-image-card {
    border-radius: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 20px 50px -10px rgba(11, 31, 51, 0.16) !important;
    outline: 1px solid rgba(0, 0, 0, 0.08) !important;
    outline-offset: -1px !important;
}

.mission-image-card img {
    width: 100% !important;
    height: 440px !important;
    object-fit: cover !important;
    display: block !important;
}

.mission-image-badge {
    position: absolute !important;
    bottom: 24px !important;
    left: 20px !important;
    right: 20px !important;
    background: rgba(11, 31, 51, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

.mission-image-badge p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.5 !important;
}

.mission-image-badge span {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #FF9457 !important;
}

/* ── 7. WHY CHOOSE VPS (TRUST GRID) ── */
.about-trust-section {
    padding: 88px 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Static Partner Bank Logos Grid (About Us Page) */
.about-static-lenders {
    margin: 36px auto 52px !important;
    max-width: 1160px !important;
}

.about-static-lenders-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.about-lender-logo-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 70px !important;
    box-shadow: 0 2px 6px rgba(11, 31, 51, 0.03) !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.about-lender-logo-card:hover {
    border-color: var(--color-orange, #FF5A00) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(11, 31, 51, 0.08) !important;
}

.about-lender-logo-card img {
    max-height: 38px !important;
    max-width: 86% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.22s ease !important;
}

.about-lender-logo-card:hover img {
    transform: scale(1.04) !important;
}

@media (max-width: 1024px) {
    .about-static-lenders-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 640px) {
    .about-static-lenders {
        margin: 24px auto 36px !important;
    }
    .about-static-lenders-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .about-lender-logo-card {
        min-height: 56px !important;
        padding: 10px 6px !important;
        border-radius: 8px !important;
    }
    .about-lender-logo-card img {
        max-height: 28px !important;
        max-width: 90% !important;
    }
}

@media (max-width: 420px) {
    .about-static-lenders-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

.about-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

.trust-pillar-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 28px 22px !important;
    box-shadow: 0 2px 8px -2px rgba(11, 31, 51, 0.04) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s, box-shadow 0.22s !important;
    display: flex !important;
    flex-direction: column !important;
}

.trust-pillar-card:hover {
    transform: translateY(-4px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.08) !important;
}

.trust-pillar-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 18px !important;
}

.trust-pillar-card h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    text-wrap: balance !important;
}

.trust-pillar-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    color: #64748B !important;
    line-height: 1.68 !important;
    margin: 0 !important;
    text-wrap: pretty !important;
    flex: 1 !important;
}

/* ── 8. CLOSING CTA BANNER ── */
.about-cta-section {
    padding: 88px 0 !important;
    background: linear-gradient(145deg, #071524 0%, #0B1F33 55%, #123A63 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.about-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 90, 0, 0.09) 0%, transparent 65%);
    pointer-events: none;
}

.about-cta-layout {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 60px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.about-cta-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(2rem, 3.8vw, 2.85rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 16px !important;
    text-wrap: balance !important;
}

.about-cta-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
    text-wrap: pretty !important;
}

.about-cta-btns {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}

.about-cta-direct {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.about-cta-direct a {
    color: #FF9457 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.about-cta-direct a:hover {
    color: #FFAA7A !important;
    text-decoration: underline !important;
}

.about-cta-image-card {
    border-radius: 20px !important;
    overflow: hidden !important;
    outline: 1px solid rgba(255, 255, 255, 0.15) !important;
    outline-offset: -1px !important;
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.4) !important;
}

.about-cta-image-card img {
    width: 100% !important;
    height: 340px !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── Responsive Adaptations for About Page ── */
@media (max-width: 1024px) {
    .about-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .about-hero-image-card img {
        height: 380px !important;
    }
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .about-stat-item:nth-child(2) {
        border-right: none !important;
    }
    .about-focus-grid,
    .about-journey-grid,
    .about-philosophy-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .about-mission-layout,
    .about-cta-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .about-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .about-hero {
        padding: 55px 0 45px !important;
    }
    .about-purpose-section,
    .about-focus-section,
    .about-journey-section,
    .about-mission-section,
    .about-trust-section,
    .about-cta-section {
        padding: 55px 0 !important;
    }
    .about-manifesto-card {
        flex-direction: column !important;
        padding: 26px 20px !important;
        gap: 18px !important;
    }
    .about-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .about-stat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 14px 10px !important;
    }
    .about-stat-item:last-child {
        border-bottom: none !important;
    }
    .about-focus-grid,
    .about-journey-grid,
    .about-philosophy-grid,
    .about-trust-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .mission-values-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .about-hero-actions,
    .about-cta-btns {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .btn-hero-cta,
    .btn-hero-whatsapp {
        flex: 1 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }
    .focus-summary-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 18px !important;
    }
}

/* ============================================================
   Hallmark · macrostructure: Stat-Led · tone: modern-minimal
   anchor hue: orange (var(--color-orange))
   Services Page — Full Redesign CSS
   ============================================================ */

/* ── Section head shared ── */
.svc-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 52px;
}

.svc-section-head .section-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    font-size: clamp(1.85rem, 3.2vw, 2.5rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
}

.svc-section-head .section-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin: 0 auto !important;
}

/* ── Hero Media Card & Floating Badges ── */
.svc-hero-image-card {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    outline: 1px solid rgba(255, 255, 255, 0.15) !important;
    outline-offset: -1px !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.42) !important;
    background: #0B1F33 !important;
}

.svc-hero-image-card img {
    width: 100% !important;
    height: 420px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svc-hero-image-card:hover img {
    transform: scale(1.02) !important;
}

.svc-hero-floating-badge {
    position: absolute !important;
    background: rgba(11, 31, 51, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.35) !important;
    z-index: 3 !important;
}

.svc-hero-floating-badge.floating-badge-top {
    top: 20px !important;
    right: 20px !important;
}

.svc-hero-floating-badge.floating-badge-bottom {
    bottom: 20px !important;
    left: 20px !important;
}

.svc-floating-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.svc-floating-info {
    display: flex !important;
    flex-direction: column !important;
}

.svc-floating-val {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums !important;
}

.svc-floating-lbl {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* ── Calculators Hero Visual Image Card ── */
.calc-hero-image-card {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    outline: 1px solid rgba(255, 255, 255, 0.16) !important;
    outline-offset: -1px !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45) !important;
    background: #0B1F33 !important;
    max-width: 540px !important;
    margin-left: auto !important;
}

.calc-hero-img-wrap {
    position: relative !important;
    width: 100% !important;
    height: 420px !important;
    overflow: hidden !important;
}

.calc-hero-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calc-hero-image-card:hover .calc-hero-img-wrap img {
    transform: scale(1.03) !important;
}

.calc-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(11, 31, 51, 0.35) 0%, rgba(11, 31, 51, 0.12) 50%, rgba(11, 31, 51, 0.65) 100%) !important;
    pointer-events: none !important;
}

.calc-floating-badge {
    position: absolute !important;
    background: rgba(11, 31, 51, 0.90) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.38) !important;
    z-index: 3 !important;
    transition: transform 0.25s ease, border-color 0.25s ease !important;
}

.calc-floating-badge:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 90, 0, 0.5) !important;
}

.calc-floating-badge.badge-top-left {
    top: 20px !important;
    left: 20px !important;
}

.calc-floating-badge.badge-bottom-right {
    bottom: 24px !important;
    right: 20px !important;
}

.calc-badge-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

.calc-badge-icon.icon-orange {
    background: linear-gradient(135deg, #FF7A00 0%, #FF5A00 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.35) !important;
}

.calc-badge-icon.icon-navy {
    background: linear-gradient(135deg, #1E3A5F 0%, #0F2338 100%) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.calc-badge-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.calc-badge-val {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

.calc-badge-lbl {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 2px !important;
}

.calc-floating-pill {
    position: absolute !important;
    bottom: 24px !important;
    left: 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 50px !important;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 3 !important;
}

.calc-floating-pill i.text-orange {
    color: #FF5A00 !important;
}

@media (max-width: 1024px) {
    .calc-hero-image-card {
        max-width: 100% !important;
        margin: 30px auto 0 !important;
    }
    .calc-hero-img-wrap {
        height: 380px !important;
    }
}

@media (max-width: 640px) {
    .calc-hero-img-wrap {
        height: 290px !important;
    }
    .calc-floating-badge {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .calc-badge-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .calc-badge-val {
        font-size: 12px !important;
    }
    .calc-badge-lbl {
        font-size: 10px !important;
    }
    .calc-floating-badge.badge-top-left {
        top: 12px !important;
        left: 12px !important;
    }
    .calc-floating-badge.badge-bottom-right {
        bottom: 12px !important;
        right: 12px !important;
    }
    .calc-floating-pill {
        display: none !important;
    }
}

/* ── STAT BAR ── */
.svc-stat-bar {
    background: #0B1F33 !important;
    padding: 24px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.svc-stat-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
}

.svc-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 1 0px !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 6px 4px !important;
}

.svc-stat-num {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
    font-weight: 800 !important;
    color: #FF5A00 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

.svc-stat-sup {
    font-size: 0.65em !important;
    vertical-align: super !important;
    font-weight: 800 !important;
}

.svc-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.72rem, 1.2vw, 0.82rem) !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.svc-stat-divider {
    width: 1px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* ── SERVICE PROGRAM CARDS ── */
.svc-programs-section {
    padding: 88px 0 76px !important;
    background: #F8FAFC !important;
}

.svc-programs-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

.svc-program-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    text-decoration: none !important;
    border-radius: 18px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #ffffff !important;
    padding: 30px 24px 24px !important;
    transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s !important;
    box-shadow: 0 4px 14px -2px rgba(11, 31, 51, 0.04) !important;
    overflow: visible !important;
    position: relative !important;
}

.svc-program-card:hover {
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.1) !important;
    transform: translateY(-5px) !important;
    border-color: #FF5A00 !important;
}

.svc-program-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.svc-program-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

.svc-program-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #FF5A00 !important;
    background: #FFF1E8 !important;
    border: 1px solid #FFE5D3 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

.svc-program-card h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.svc-program-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    color: #64748B !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
    flex: 1 !important;
}

.svc-program-pills {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

.svc-program-pills span {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #0B1F33 !important;
    background: #F1F5F9 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
}

.svc-program-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0B1F33 !important;
    margin-top: auto !important;
    transition: color 0.18s, transform 0.18s !important;
}

.svc-program-link i {
    transition: transform 0.18s !important;
    font-size: 0.8rem !important;
}

.svc-program-card:hover .svc-program-link {
    color: #FF5A00 !important;
}

.svc-program-card:hover .svc-program-link i {
    transform: translateX(4px) !important;
}

/* ── PROCESS SECTION ── */
.svc-process-section {
    padding: 88px 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #E2E8F0 !important;
}

.svc-process-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.svc-process-card {
    position: relative !important;
    padding: 34px 26px 28px !important;
    border-radius: 18px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    text-align: center !important;
    overflow: visible !important;
    transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.svc-process-card:hover {
    box-shadow: 0 16px 36px -6px rgba(11, 31, 51, 0.08) !important;
    transform: translateY(-4px) !important;
    border-color: #FF5A00 !important;
    background: #ffffff !important;
}

.svc-step-badge {
    position: absolute !important;
    top: -13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #FF5A00 !important;
    color: #ffffff !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.3) !important;
}

.svc-step-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    margin: 12px 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.svc-process-card h3 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.svc-process-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    color: #64748B !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* ── LOAN TYPES SECTION ── */
.svc-loan-types-section {
    padding: 88px 0 !important;
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
}

.svc-loan-types-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    text-align: left !important;
}

.svc-loan-col {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1.5px solid #E2E8F0 !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 16px -2px rgba(11, 31, 51, 0.04) !important;
}

.svc-loan-col-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1.5px solid #F1F5F9 !important;
}

.svc-loan-col-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.svc-loan-col-header h4 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    margin: 0 !important;
}

.svc-loan-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.svc-loan-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
}

.svc-loan-list li i.fa-circle-check,
.svc-loan-list li i.fa-check-circle {
    color: #16A765 !important;
    font-size: 0.9rem !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.svc-loan-list li a {
    color: #0B1F33 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.18s, transform 0.18s !important;
}

.svc-loan-list li a i {
    font-size: 0.75rem !important;
    color: #FF5A00 !important;
    transition: transform 0.18s !important;
}

.svc-loan-list li a:hover {
    color: #FF5A00 !important;
}

.svc-loan-list li a:hover i {
    transform: translateX(4px) !important;
}

/* ── CTA STRIP ── */
.svc-cta-strip {
    padding: 88px 0 !important;
    background: linear-gradient(145deg, #071524 0%, #0B1F33 55%, #123A63 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.svc-cta-strip::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 50%, rgba(255, 90, 0, 0.09) 0%, transparent 65%) !important;
    pointer-events: none !important;
}

.svc-cta-inner {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

.svc-cta-badge {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #FF7A33 !important;
    background: rgba(255, 90, 0, 0.12) !important;
    border: 1px solid rgba(255, 90, 0, 0.3) !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    margin-bottom: 16px !important;
}

.svc-cta-inner h2 {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(2rem, 3.8vw, 2.85rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 16px !important;
    text-wrap: balance !important;
}

.svc-cta-inner p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
    text-wrap: pretty !important;
}

.svc-cta-btns {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}

.svc-cta-trust-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px 18px !important;
    flex-wrap: wrap !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.84rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.svc-cta-trust-row i {
    color: #FF5A00 !important;
    margin-right: 4px !important;
}

.svc-trust-dot {
    opacity: 0.35 !important;
}

/* ── Mobile Responsive for Services Page ── */
@media (max-width: 1024px) {
    .svc-programs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .svc-process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .svc-hero-image-card img {
        height: 360px !important;
    }
}

@media (max-width: 768px) {
    .svc-stat-bar {
        padding: 16px 0 !important;
    }
    .svc-stat-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        justify-content: space-between !important;
    }
    .svc-stat-divider {
        display: block !important;
        height: 28px !important;
        width: 1px !important;
        opacity: 0.6 !important;
    }
    .svc-stat-item {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        padding: 4px 2px !important;
        border-bottom: none !important;
    }
    .svc-stat-num {
        font-size: clamp(1.1rem, 3.8vw, 1.5rem) !important;
    }
    .svc-stat-label {
        font-size: clamp(8px, 1.9vw, 10.5px) !important;
        line-height: 1.2 !important;
    }
    .svc-loan-types-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .svc-section-head {
        margin-bottom: 36px !important;
    }
}

@media (max-width: 640px) {
    .svc-programs-grid,
    .svc-process-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .svc-programs-section,
    .svc-process-section,
    .svc-loan-types-section,
    .svc-cta-strip {
        padding: 55px 0 !important;
    }
    .svc-stat-bar {
        padding: 12px 0 !important;
    }
    .svc-stat-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    .svc-stat-divider {
        display: block !important;
        height: 22px !important;
        width: 1px !important;
        opacity: 0.45 !important;
    }
    .svc-stat-item {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        padding: 2px 1px !important;
        border-bottom: none !important;
    }
    .svc-stat-num {
        font-size: clamp(0.95rem, 3.6vw, 1.25rem) !important;
    }
    .svc-stat-label {
        font-size: clamp(7.5px, 2.1vw, 9.5px) !important;
        line-height: 1.15 !important;
    }
    .svc-cta-btns {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .svc-cta-btns button,
    .svc-cta-btns a {
        flex: 1 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }
    .svc-loan-col {
        padding: 24px 20px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   HALLMARK DESIGN SYSTEM ENGINE — BLOG & CONTACT US
   Macrostructure: Stat-Led (Blog) · Workbench (Contact)
   Genre: modern-minimal · Theme: Cobalt-adjacent (VPS Navy/Orange)
   Pre-emit critique: P5 H5 E5 S5 R5 V5
   Contrast: Pass (WCAG 2.2 AA) · 8 Interactive States Covered
   Mobile: Responsive at 320px, 375px, 414px, 768px, 1024px, 1280px
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page Token Scoping ── */
:root {
    --vps-blog-radius: 18px;
    --vps-contact-radius: 16px;
    --vps-pill-radius: 9999px;
    --vps-card-border: 1px solid #DCE4EA;
    --vps-card-border-hover: 1px solid #BACAD6;
    --vps-card-shadow: 0 4px 20px rgba(11, 31, 51, 0.06);
    --vps-card-shadow-hover: 0 10px 32px rgba(11, 31, 51, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   1. BLOG & KNOWLEDGE HUB STYLES (Stat-Led Macrostructure)
   ═══════════════════════════════════════════════════════════════════ */

.blog-hub-hero {
    background: linear-gradient(140deg, #050E17 0%, #0B1F33 50%, #123A63 100%) !important;
    padding: clamp(56px, 8vw, 84px) 0 clamp(44px, 6vw, 64px) !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    text-align: center;
}

.blog-hub-hero .container {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-hub-hero .breadcrumb {
    justify-content: center;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13.5px;
}

.blog-hub-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.18s ease;
}

.blog-hub-hero .breadcrumb a:hover {
    color: var(--color-orange, #FF5A00);
}

.blog-hub-hero .breadcrumb-sep {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.4);
}

.blog-hub-hero .brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--vps-pill-radius);
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.blog-hub-hero .brand-eyebrow .pulse-dot {
    width: 7px;
    height: 7px;
    background: var(--color-orange, #FF5A00);
    border-radius: 50%;
    animation: vpsPulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes vpsPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.75); }
}

.hub-title {
    font-family: var(--font-display, "Manrope", sans-serif) !important;
    font-size: clamp(2rem, 4.2vw, 3.1rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.18 !important;
    margin: 0 auto 16px !important;
    max-width: 820px;
    overflow-wrap: anywhere;
    min-width: 0;
    font-style: normal !important;
}

.hub-title .vps-orange-text,
.hub-title .green-highlight {
    color: var(--color-orange, #FF5A00) !important;
    font-style: normal;
}

.hub-sub {
    font-size: clamp(0.96rem, 1.4vw, 1.1rem);
    color: rgba(255, 255, 255, 0.78);
    max-width: 640px;
    line-height: 1.65;
    margin: 0 auto 28px;
}

/* Trust strip inside hero */
.blog-hub-hero .hero-trust-strip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--vps-pill-radius);
    padding: 8px 20px;
    margin: 0 auto 32px;
}

.blog-hub-hero .hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.blog-hub-hero .hero-trust-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

.trust-icon-blue { color: #38bdf8 !important; }
.trust-icon-green { color: #34d399 !important; }

/* Interactive Category Pills */
.hub-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.hub-category-pill {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--vps-pill-radius);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hub-category-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.hub-category-pill.active {
    background: var(--color-orange, #FF5A00);
    color: #ffffff;
    border-color: var(--color-orange, #FF5A00);
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.35);
}

.hub-category-pill:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* ── Main Blog Section ── */
.blog-hub-section {
    padding: clamp(52px, 7vw, 84px) 0;
    background: var(--color-off-white, #F7F9FB);
}

.blog-hub-section .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Featured Guide Banner ── */
.featured-wrap {
    margin-bottom: 56px;
}

.featured-card {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    background: #ffffff;
    border: var(--vps-card-border);
    border-radius: 20px;
    padding: 38px 40px;
    box-shadow: var(--vps-card-shadow);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    align-items: center;
}

.featured-card:hover {
    box-shadow: var(--vps-card-shadow-hover);
    border-color: #BACAD6;
    transform: translateY(-2px);
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFF1E8;
    color: var(--color-orange, #FF5A00);
    border: 1px solid rgba(255, 90, 0, 0.22);
    border-radius: var(--vps-pill-radius);
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.featured-badge i { font-size: 11px; }

.featured-title {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    line-height: 1.28;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    font-style: normal;
}

.featured-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease;
}

.featured-title a:hover {
    color: var(--color-orange, #FF5A00);
}

.featured-title a:focus-visible {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 3px;
    border-radius: 4px;
}

.featured-desc {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.68;
    margin-bottom: 22px;
}

.featured-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.featured-meta i {
    margin-right: 5px;
    color: #94a3b8;
}

/* Featured Side CTA Panel */
.featured-cta-panel {
    text-align: center;
    background: linear-gradient(135deg, #F0FDF4 0%, #E8F4FD 100%);
    border-radius: 16px;
    padding: 34px 26px;
    border: 1px solid #D1FAE5;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.04);
}

.featured-cta-panel .panel-icon {
    font-size: 3.2rem;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 12px;
}

.featured-cta-panel h3 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 8px;
    font-style: normal;
}

.featured-cta-panel p {
    color: #475569;
    font-size: 0.88rem;
    margin-bottom: 22px;
    line-height: 1.55;
}

.featured-cta-panel .btn {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Section Header Wrap */
.section-header-wrap {
    margin-bottom: 38px;
}

.section-header-wrap h2 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.45rem, 2.5vw, 1.95rem);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    letter-spacing: -0.025em;
    margin-bottom: 8px;
    font-style: normal;
}

.section-header-wrap p {
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ── Posts Grid (3 Columns Desktop) ── */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

/* ── Post Card ── */
.post-card {
    background: #ffffff;
    border: var(--vps-card-border);
    border-radius: var(--vps-blog-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--vps-card-shadow);
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover {
    box-shadow: var(--vps-card-shadow-hover);
    border-color: #BACAD6;
    transform: translateY(-4px);
}

/* Post Thumb Editorial Banner */
.post-thumb {
    height: 170px;
    background: linear-gradient(135deg, #0B1F33 0%, #123A63 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    overflow: hidden;
}

.post-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 85% 15%, rgba(255, 90, 0, 0.22) 0%, transparent 65%);
    pointer-events: none;
}

.post-thumb-flag {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--vps-pill-radius);
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.03em;
    white-space: nowrap;
    align-self: flex-start;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.post-thumb i.post-thumb-bg-icon {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* Post Body */
.post-body {
    padding: 24px 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-orange, #FF5A00);
    margin-bottom: 10px;
}

.post-card-title {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    line-height: 1.38;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease;
}

.post-card-title a:hover {
    color: var(--color-orange, #FF5A00);
}

.post-card-title a:focus-visible {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 2px;
    border-radius: 3px;
}

.post-card-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.62;
    margin-bottom: 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #EEF2F6;
    padding-top: 14px;
    gap: 8px;
}

.post-footer-bar > span {
    font-size: 12.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.read-more-link:hover {
    color: var(--color-orange, #FF5A00);
    transform: translateX(3px);
}

.read-more-link:focus-visible {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Advisory CTA Strip ── */
.hub-help-strip {
    background: linear-gradient(135deg, #071524 0%, #0B1F33 50%, #123A63 100%) !important;
    padding: clamp(52px, 7vw, 76px) 0 !important;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.hub-help-strip .container {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
}

.hub-help-strip h2 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
    font-style: normal;
}

.hub-help-strip p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.65;
}

.hub-help-strip .cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   2. CONTACT US STYLES (Workbench Macrostructure)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero Workbench Grid ── */
.page-hero-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 48px !important;
    align-items: center !important;
}

.page-hero-content h1 {
    font-family: var(--font-display, "Manrope", sans-serif) !important;
    font-size: clamp(2rem, 3.8vw, 2.9rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.18 !important;
    margin-bottom: 16px !important;
    overflow-wrap: anywhere;
    min-width: 0;
    font-style: normal !important;
}

.page-hero-content h1 .vps-orange-text,
.page-hero-content h1 .green-highlight {
    color: var(--color-orange, #FF5A00) !important;
}

.hero-desc {
    font-size: clamp(0.96rem, 1.4vw, 1.05rem) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.68 !important;
    max-width: 540px !important;
    margin-bottom: 28px !important;
}

.hero-action-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    align-items: center;
}

/* Snapshot Helplines Card */
.hero-snapshot-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    padding: 26px 28px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
}

.snapshot-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    flex-wrap: wrap;
}

.snapshot-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--vps-pill-radius) !important;
    padding: 4px 12px !important;
}

.snapshot-pulse-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: vpsPulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}

.snapshot-highlight {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.snapshot-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.snapshot-stat {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(11, 31, 51, 0.05) !important;
}

.snapshot-stat-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

.snapshot-stat-val {
    font-family: var(--font-body, "Inter", sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

.snapshot-stat-note {
    font-size: 11px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.snapshot-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-top: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.snapshot-lenders {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.lenders-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.lenders-pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.lender-tag {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--vps-pill-radius) !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    white-space: nowrap !important;
}

.snapshot-status {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Contact Section (2 Columns: Touchpoints + Form) ── */
.contact-section {
    padding: clamp(56px, 8vw, 92px) 0;
    background: #ffffff;
}

.contact-section .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-inner {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 56px;
    align-items: start;
}

/* Left: Reach Us Column */
.contact-left .section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange, #FF5A00);
    margin-bottom: 8px;
}

.contact-left h2 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    font-style: normal;
}

.contact-left > p {
    font-size: 0.96rem;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 28px;
}

/* Contact Method Cards */
.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: var(--vps-card-border);
    border-radius: var(--vps-contact-radius);
    background: #ffffff;
    margin-bottom: 14px;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-method:last-child {
    margin-bottom: 0;
}

.contact-method:hover {
    box-shadow: 0 6px 24px rgba(11, 31, 51, 0.08);
    border-color: #BACAD6;
    transform: translateX(4px);
}

.method-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.method-icon.phone {
    background: #EFF6FF;
    color: #1A56DB;
}

.method-icon.whatsapp {
    background: #ECFDF5;
    color: #16A765;
}

.method-icon.email {
    background: #FFFBEB;
    color: #D97706;
}

.method-icon.social {
    background: #F3E8FF;
    color: #7C3AED;
}

.method-info h4 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 3px;
    font-style: normal;
}

.method-info a {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-navy, #0B1F33);
    text-decoration: none;
    margin-bottom: 3px;
    transition: color 0.18s ease;
    overflow-wrap: anywhere;
}

.method-info a:hover {
    color: var(--color-orange, #FF5A00);
}

.method-info a:focus-visible {
    outline: 2px solid var(--color-orange, #FF5A00);
    outline-offset: 2px;
    border-radius: 2px;
}

.method-info p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Right: Form Column */
.contact-form-col .section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange, #FF5A00);
    margin-bottom: 8px;
}

.contact-form-col h2 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    color: var(--color-navy, #0B1F33);
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    font-style: normal;
}

.contact-form-col > p {
    font-size: 0.96rem;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 24px;
}

.contact-form-box {
    background: var(--color-off-white, #F7F9FB);
    border: var(--vps-card-border);
    border-radius: 20px;
    padding: 34px 36px;
    box-shadow: 0 4px 20px rgba(11, 31, 51, 0.04);
}

/* Hallmark Accessible Form Engine */
.contact-form-box .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form-box .form-group {
    margin-bottom: 18px;
}

.contact-form-box label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 6px;
}

.contact-form-box label .req {
    color: #DC2626;
    margin-left: 2px;
}

.contact-form-box .input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.contact-form-box .input-icon-wrap i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.18s ease;
    z-index: 1;
}

.contact-form-box .input-icon-wrap.textarea-wrap i {
    top: 14px;
    transform: none;
}

.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select {
    width: 100%;
    padding: 12px 14px 12px 42px;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 14px;
    color: var(--color-navy, #0B1F33);
    background: #ffffff;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    outline: none;
    transition: all 0.18s ease;
}

.contact-form-box textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.55;
}

.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
    color: #94a3b8;
}

/* Input Interactive States (8-State Checklist) */
.contact-form-box input:hover:not(:disabled):not(:focus),
.contact-form-box textarea:hover:not(:disabled):not(:focus) {
    border-color: #94a3b8;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
    border-color: var(--color-orange, #FF5A00);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14);
}

.contact-form-box input:focus-visible,
.contact-form-box textarea:focus-visible {
    border-color: var(--color-orange, #FF5A00);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14);
}

.contact-form-box input:focus + i,
.contact-form-box .input-icon-wrap:focus-within i {
    color: var(--color-orange, #FF5A00);
}

.contact-form-box input.is-error,
.contact-form-box textarea.is-error {
    border-color: #DC2626 !important;
    background: #FEF2F2 !important;
}

.contact-form-box input.is-success,
.contact-form-box textarea.is-success {
    border-color: #16A765 !important;
    background: #F0FDF4 !important;
}

.field-error-msg {
    font-size: 11.5px;
    color: #DC2626;
    margin-top: 4px;
    display: none;
    font-weight: 600;
}

.field-error-msg.visible,
.field-error-msg:not(:empty) {
    display: block;
}

.contact-form-box .btn-full {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    cursor: pointer;
}

/* ── Trust Verification Bar ── */
.trust-bar {
    background: var(--color-off-white, #F7F9FB);
    border-top: var(--vps-card-border);
    border-bottom: var(--vps-card-border);
    padding: 52px 0;
}

.trust-bar .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.trust-item {
    text-align: center;
    padding: 0 10px;
}

.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #ffffff;
    border: var(--vps-card-border);
    font-size: 20px;
    color: var(--color-navy, #0B1F33);
    margin: 0 auto 16px;
    box-shadow: 0 2px 10px rgba(11, 31, 51, 0.05);
}

.trust-item h4 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy, #0B1F33);
    margin-bottom: 6px;
    font-style: normal;
}

.trust-item p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.55;
}

/* ── Office Section / Final Consultation Strip ── */
.office-section {
    background: linear-gradient(140deg, #050E17 0%, #0B1F33 50%, #123A63 100%) !important;
    padding: clamp(60px, 8vw, 84px) 0 !important;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.office-section .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.office-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.office-info .section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange, #FF5A00);
    margin-bottom: 8px;
}

.office-info h2 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin-bottom: 6px;
    font-style: normal;
}

.office-info .tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 26px;
    font-style: normal;
}

.office-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 0.93rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.office-detail:last-child {
    margin-bottom: 0;
}

.office-detail i {
    color: var(--color-orange, #FF5A00);
    margin-top: 4px;
    flex-shrink: 0;
    font-size: 16px;
}

.office-detail a {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s ease;
}

.office-detail a:hover {
    color: var(--color-orange, #FF5A00);
}

.office-detail a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Office CTA Column */
.office-cta-col {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 38px 36px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.office-cta-col h3 {
    font-family: var(--font-display, "Manrope", sans-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    font-style: normal;
}

.office-cta-col p {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin-bottom: 26px;
}

.office-cta-col .cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   3. RESPONSIVE MEDIA QUERIES (Mobile-First 320/375/414/768/1024px)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
    .page-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .page-hero-visual {
        order: -1;
    }
    .contact-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    .office-inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
}

@media (max-width: 768px) {
    .featured-card {
        grid-template-columns: 1fr !important;
        padding: 28px !important;
        gap: 26px !important;
    }
    .posts-grid {
        grid-template-columns: 1fr !important;
    }
    .snapshot-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .contact-form-box {
        padding: 24px 20px !important;
    }
    .contact-form-box .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .office-cta-col {
        padding: 28px 22px !important;
    }
    .hub-help-strip .cta-group,
    .office-cta-col .cta-btns {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .hub-help-strip .cta-group .btn,
    .office-cta-col .cta-btns .btn {
        flex: 1 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .hub-categories {
        gap: 6px !important;
    }
    .hub-category-pill {
        font-size: 12px !important;
        padding: 0 12px !important;
        height: 34px !important;
    }
    .featured-card {
        padding: 20px 16px !important;
    }
    .hero-snapshot-card {
        padding: 20px 16px !important;
    }
    .snapshot-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .contact-method {
        padding: 16px !important;
    }
    .hero-action-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hero-action-group .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 375px) {
    .hub-category-pill {
        font-size: 11.5px !important;
        padding: 0 10px !important;
    }
    .contact-form-box {
        padding: 20px 14px !important;
    }
}

/* ==========================================================================
   VPS MASTER MOBILE-FIRST & RESPONSIVE ARCHITECTURE (MOBILE-OPTIMIZED)
   Breakpoints:
   - 320px  : Compact / Ultra-small phones (iPhone SE 1st gen, Galaxy Fold)
   - 360px  : Small modern mobile (standard Android small)
   - 480px  : Mobile Portrait (iPhone 12/13/14/15/16, Galaxy S-series)
   - 576px  : Large Mobile / Phablet Landscape
   - 768px  : Tablet Portrait (iPad Mini, tablet vertical)
   - 960px  : Tablet / Mobile Navigation Drawer Boundary
   - 1024px : Tablet Landscape / Small Laptops
   ========================================================================== */

/* ── 1. GLOBAL MOBILE-FIRST OVERFLOW GUARD & TOUCH DEFAULTS (Hallmark Gate 34, 51) ── */
html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(255, 90, 0, 0.15);
}

*, *::before, *::after {
    box-sizing: border-box !important;
    min-width: 0;
}

img, video, svg, canvas, iframe, picture {
    max-width: 100% !important;
    height: auto;
}

/* Eliminate tap delay on interactive controls */
a, button, input, select, textarea, [role="button"], [role="tab"] {
    touch-action: manipulation;
}

/* Global text wrap & overflow protection for headings, long words & URLs (Hallmark Gate 51) */
h1, h2, h3, h4, h5, h6, 
.section-title, .exact-hero-title, .tools-heading, 
.vps-thankyou-title, .hero-desc, p, .brand-eyebrow,
.country-stat-val, .calc-pane-title, .disclaimer-title,
.snapshot-stat-val, .method-info a, .contact-list a,
.featured-title, .post-title, .card-title, .disclaimer-item-text,
.exact-hero-lead, .exact-hero-desc, .country-overview-body {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    min-width: 0 !important;
}

/* Container responsive fluid padding */
.container {
    width: 100% !important;
    max-width: 1200px;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 360px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── 2. MOBILE INPUT FONT-SIZE & iOS ZOOM PREVENTION ── */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important; /* Critical: Stops iOS Safari auto-zoom */
        min-height: 48px !important;
        box-sizing: border-box !important;
    }
}

/* ── 3. TOP-BAR SLIM DUAL-LAYOUT (DESKTOP) & ROTATOR (MOBILE) ── */
.top-bar {
    background: #0B1F33 !important;
    color: #FFFFFF !important;
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    position: relative !important;
    z-index: 1001 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
}

/* Base Tagline & Contact Elements */
.top-bar-left {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.top-bar .orange-rule,
.top-bar-left .orange-rule,
.top-bar-orange-rule {
    width: 18px !important;
    height: 2px !important;
    background: #FF5A00 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
}

.top-bar-tagline {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
}

.top-bar-dash {
    color: #FF5A00 !important;
    margin: 0 6px !important;
    display: inline-block !important;
    font-weight: 700 !important;
}

.top-bar-sub {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
}

.top-bar-right {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.top-bar-contact-phone {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.top-bar-contact-phone a,
.contact-num {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
}

.top-bar-contact-phone a i,
.contact-num i {
    color: #38bdf8 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

.top-bar-contact-phone a:hover,
.contact-num:hover {
    color: #38bdf8 !important;
}

.top-bar-contact-email {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.top-bar-contact-email a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

.top-bar-contact-email a:hover,
.top-bar-right a:hover {
    color: #38bdf8 !important;
}

.top-bar-right a i {
    font-size: 13.5px !important;
    vertical-align: middle !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

.top-bar-right a:hover i {
    color: #38bdf8 !important;
    transform: translateY(-1px) !important;
}

.contact-email-full,
.contact-email-short {
    display: none !important;
}

.contact-label {
    display: inline !important;
    font-weight: 500 !important;
}

.top-sep {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 12px !important;
    margin: 0 2px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.top-sep-mid {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 12px !important;
    margin: 0 2px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* ── DESKTOP STRIP (min-width: 769px): Full width, Tagline Left, Contact Right ── */
@media (min-width: 769px) {
    .top-bar {
        padding: 6px 0 !important;
        min-height: 32px !important;
    }
    .top-bar-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        text-align: left !important;
        min-height: 20px !important;
    }
    .top-bar-track {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        min-height: auto !important;
    }
    .top-bar-slide,
    .top-bar-slide.is-active {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    .top-bar-slide-tagline {
        display: flex !important;
        justify-content: flex-start !important;
    }
    .top-bar-slide-contact {
        display: flex !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }
    .top-bar-left {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .top-bar-right {
        justify-content: flex-end !important;
        text-align: right !important;
    }
}

/* ── MOBILE ROTATOR (max-width: 768px): Single line 10s Tagline / 20s Contact ── */
@media (max-width: 768px) {
    .top-bar-inner {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        min-height: 20px !important;
        text-align: center !important;
    }
    .top-bar-track {
        width: 100% !important;
        max-width: 800px !important;
        position: relative !important;
        min-height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .top-bar-slide {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(2px) !important;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
        width: 100% !important;
    }
    .top-bar-slide.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        position: relative !important;
    }
    .top-bar-left {
        justify-content: center !important;
        text-align: center !important;
        font-size: 11.5px !important;
    }
    .top-bar .orange-rule,
    .top-bar-left .orange-rule,
    .top-bar-orange-rule {
        width: 14px !important;
        margin: 0 4px 0 0 !important;
    }
    .top-bar-tagline {
        font-size: 11.5px !important;
    }
    .top-bar-sub {
        font-size: 11px !important;
    }
    .top-bar-right {
        justify-content: center !important;
        text-align: center !important;
        font-size: 11.5px !important;
    }
    .top-bar-contact-phone a,
    .contact-num {
        font-size: 11.5px !important;
    }
}

/* Compact viewports: keep strictly single-line, scaled cleanly, zero overlapping */
@media (max-width: 600px) {
    .top-bar {
        padding: 4px 0 !important;
        font-size: 10.5px !important;
        min-height: 26px !important;
    }
    .top-bar-inner {
        padding: 0 8px !important;
        min-height: 18px !important;
    }
    .top-bar-track {
        min-height: 18px !important;
    }
    .top-bar-left {
        font-size: 10.5px !important;
        gap: 3px !important;
        flex-direction: row !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .top-bar-tagline {
        font-size: 10.5px !important;
        flex-shrink: 0 !important;
    }
    .top-bar-sub {
        font-size: 10px !important;
        flex-shrink: 0 !important;
    }
    .top-bar .orange-rule,
    .top-bar-left .orange-rule,
    .top-bar-orange-rule {
        width: 10px !important;
        margin-right: 2px !important;
        flex-shrink: 0 !important;
    }
    .top-bar-right {
        gap: 8px !important;
        font-size: 10.5px !important;
        flex-direction: row !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .top-bar-contact-phone,
    .top-bar-contact-email {
        flex-shrink: 0 !important;
    }
    .top-bar-contact-phone a,
    .contact-num {
        font-size: 10.5px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    .contact-label {
        display: none !important;
    }
    .contact-email-full {
        display: none !important;
    }
    .contact-email-short {
        display: inline !important;
    }
    .top-sep-mid {
        margin: 0 2px !important;
        font-size: 9px !important;
    }
    .top-bar-contact-email {
        font-size: 10.5px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    .top-bar-contact-email a {
        font-size: 10.5px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 360px) {
    .top-bar-left .orange-rule,
    .top-bar-orange-rule {
        display: none !important;
    }
    .top-bar-tagline {
        font-size: 10px !important;
    }
    .top-bar-sub {
        font-size: 9.5px !important;
    }
    .top-bar-right {
        gap: 6px !important;
        font-size: 10px !important;
    }
    .top-bar-contact-phone a,
    .contact-num {
        font-size: 10px !important;
    }
    .top-bar-contact-email {
        font-size: 10px !important;
    }
    .top-bar-contact-email a {
        font-size: 10px !important;
    }
}

@media (max-width: 340px) {
    .top-bar {
        padding: 4px 0 !important;
    }
    .top-bar-inner {
        gap: 2px !important;
        padding: 0 4px !important;
    }
    .top-bar-left {
        font-size: 9.5px !important;
        gap: 1px !important;
    }
    .top-bar-sub,
    .top-bar-badge,
    .top-bar-left > span:last-child {
        font-size: 9px !important;
    }
    .top-bar-right {
        font-size: 9.5px !important;
        gap: 4px !important;
    }
    .top-bar-right a {
        font-size: 9.5px !important;
    }
}

/* ── 4. NAVBAR, BRAND & BACKDROP ON MOBILE ── */
.nav-backdrop {
    display: none;
    position: fixed;
    top: var(--nav-height, 56px) !important;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 31, 51, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 996 !important;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: pointer;
}

body.menu-open .nav-backdrop {
    display: block !important;
    opacity: 1 !important;
}

.nav-inner {
    position: relative !important;
    z-index: 1002 !important;
}

body.menu-open .nav-inner {
    position: relative !important;
    z-index: 1002 !important;
}

body.menu-open .logo,
body.menu-open .hamburger {
    position: relative !important;
    z-index: 1003 !important;
}

.mobile-drawer-footer {
    display: none !important;
}

@media (max-width: 480px) {
    .navbar {
        padding: 8px 0 !important;
    }
    .nav-inner {
        gap: 8px !important;
    }
    .logo {
        gap: 8px !important;
    }
    .logo-name {
        font-size: 12.5px !important;
        letter-spacing: 0.5px !important;
    }
    .logo-sub-text {
        font-size: 7px !important;
        letter-spacing: 0.8px !important;
    }
    .vps-flash-svg {
        width: 26px !important;
        height: 32px !important;
    }
    .hamburger {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }
}

@media (max-width: 360px) {
    .logo-name {
        font-size: 11.5px !important;
    }
    .logo-sub-text {
        font-size: 6.5px !important;
    }
    .vps-flash-svg {
        width: 22px !important;
        height: 28px !important;
    }
}

/* ── 5. MOBILE NAVIGATION DRAWER & MEGA-MENU ACCORDION (Hallmark Responsive Architecture) ── */
/* Stacking context safety floor: when mobile drawer is open, keep navbar fixed and strip backdrop-filter containing block trap */
body.menu-open .navbar,
body.menu-open .navbar.scrolled-elevated {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    box-shadow: 0 1px 4px rgba(11, 31, 51, 0.08) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    z-index: 1001 !important;
}

@keyframes vpsMenuSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vpsFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 960px) {
    .nav-links, .nav-cta {
        display: none;
    }
    .hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color 0.18s ease, transform 0.14s ease, outline-color 0.18s ease !important;
    }
    .hamburger:hover,
    .hamburger.is-hover {
        background: rgba(11, 31, 51, 0.06) !important;
    }
    .hamburger:focus-visible,
    .hamburger.is-focus {
        outline: 2px solid var(--color-orange, #FF5A00) !important;
        outline-offset: 2px !important;
        background: rgba(255, 90, 0, 0.08) !important;
    }
    .hamburger:active,
    .hamburger.is-active {
        transform: scale(0.92) !important;
        background: rgba(11, 31, 51, 0.10) !important;
    }
    .hamburger:disabled,
    .hamburger[disabled],
    .hamburger.is-disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    .hamburger[data-state="loading"],
    .hamburger.is-loading {
        opacity: 0.65 !important;
        pointer-events: none !important;
    }
    .hamburger[data-state="error"],
    .hamburger.is-error {
        outline: 2px solid #EF4444 !important;
        outline-offset: 2px !important;
    }
    .hamburger[data-state="success"],
    .hamburger.is-success {
        outline: 2px solid #10B981 !important;
        outline-offset: 2px !important;
    }
    .hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: var(--navy, #0B1F33) !important;
        border-radius: 2px !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.2s ease !important;
        transform-origin: center !important;
    }
    .hamburger.open {
        background: rgba(11, 31, 51, 0.05) !important;
    }
    .hamburger.open:hover,
    .hamburger.open.is-hover {
        background: rgba(255, 90, 0, 0.10) !important;
    }
    .hamburger.open span {
        background: var(--color-orange, #FF5A00) !important;
    }
    .hamburger.open span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg) !important;
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg) !important;
    }
    .nav-links.open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: var(--nav-height, 56px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #ffffff !important;
        padding: 16px 16px calc(140px + env(safe-area-inset-bottom, 0px)) 16px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        z-index: 998 !important;
        box-shadow: 0 20px 48px -12px rgba(11, 31, 51, 0.25) !important;
        border-top: 1px solid #E2E8F0 !important;
        animation: vpsMenuSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    .nav-links > li {
        width: 100% !important;
        margin: 0 0 3px 0 !important;
    }
    .nav-links > li > a {
        width: 100% !important;
        font-size: 15.5px !important;
        font-weight: 600 !important;
        color: var(--color-navy, #0B1F33) !important;
        padding: 13px 14px !important;
        min-height: 48px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-radius: 8px !important;
        background: transparent !important;
        border-bottom: 1px solid #F1F5F9 !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }
    .nav-links > li > a:hover,
    .nav-links > li > a:active,
    .nav-links > li > a.active {
        background: #F1F5F9 !important;
        color: var(--color-orange, #FF5A00) !important;
    }
    .has-dropdown > a .fa-chevron-down {
        transition: transform 0.25s ease !important;
    }
    .has-dropdown.open > a .fa-chevron-down {
        transform: rotate(180deg) !important;
        color: var(--color-orange, #FF5A00) !important;
    }
    .has-dropdown {
        width: 100% !important;
    }
    .has-dropdown .dropdown,
    .has-dropdown .mega-dropdown,
    .has-dropdown .more-dropdown {
        display: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        margin: 4px 0 10px 0 !important;
        box-shadow: none !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        background: #F8FAFC !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .has-dropdown.open .dropdown,
    .has-dropdown.open .mega-dropdown {
        display: flex !important;
        flex-direction: column !important;
    }
    .has-dropdown.open .more-dropdown {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    .more-dropdown-item {
        padding: 10px 12px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--color-navy, #0B1F33) !important;
    }
    .more-dropdown-item:hover {
        background: #EDF2F7 !important;
        color: var(--color-orange, #FF5A00) !important;
    }
    .mega-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .mega-col-loans {
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
        padding: 0 0 14px 0 !important;
    }
    .mega-loan-card {
        padding: 10px 12px !important;
        min-height: 48px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        border: 1px solid #E2E8F0 !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
    }
    .mega-countries-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .mega-country-link {
        padding: 8px 10px !important;
        min-height: 44px !important;
        background: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .mega-country-link .country-name {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    .mega-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        text-align: center !important;
        margin: 0 !important;
        border-top: 1px solid #E2E8F0 !important;
        background: #ffffff !important;
        border-radius: 10px !important;
    }
    .mega-footer-cta {
        justify-content: center !important;
        width: 100% !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .nav-cta.open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid #E2E8F0 !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 51, 0.1) !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        animation: vpsFadeInUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    .nav-cta.open .btn-eligibility {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }
    .nav-cta.open .btn-whatsapp-nav {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
    }

    /* Mobile Drawer Advisory & Contact Card */
    .mobile-drawer-footer {
        display: block !important;
        width: 100% !important;
        margin-top: 14px !important;
        padding-top: 4px !important;
        border-top: none !important;
    }
    .mobile-drawer-card {
        background: linear-gradient(145deg, #F8FAFC 0%, #EFF6FF 100%) !important;
        border: 1px solid #DCE4EA !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        box-shadow: 0 2px 10px rgba(11, 31, 51, 0.04) !important;
        box-sizing: border-box !important;
    }
    .mobile-drawer-card-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #0369A1 !important;
        background: rgba(14, 165, 233, 0.12) !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        margin-bottom: 12px !important;
    }
    .mobile-drawer-contact-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .mobile-drawer-contact-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        background: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        transition: border-color 0.2s ease, transform 0.15s ease !important;
    }
    .mobile-drawer-contact-item:hover,
    .mobile-drawer-contact-item:active {
        border-color: var(--color-orange, #FF5A00) !important;
    }
    .contact-item-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
    .contact-item-icon.bg-call {
        background: rgba(255, 90, 0, 0.1) !important;
        color: var(--color-orange, #FF5A00) !important;
    }
    .contact-item-icon.bg-mail {
        background: rgba(14, 165, 233, 0.1) !important;
        color: #0284C7 !important;
    }
    .contact-item-text {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }
    .contact-item-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748B !important;
        line-height: 1.2 !important;
    }
    .contact-item-val {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--color-navy, #0B1F33) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .mobile-drawer-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 11px !important;
        color: #64748B !important;
        font-weight: 500 !important;
        padding-top: 4px !important;
    }
    .mobile-drawer-meta .meta-dot {
        color: var(--color-orange, #FF5A00) !important;
    }
}

@media (max-width: 440px) {
    .mega-countries-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
    }
}

/* ── 6. HERO SECTION MOBILE PERFECTION ── */
@media (max-width: 960px) {
    .exact-hero {
        padding: 0 !important;
    }
    .exact-hero-grid {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 28px !important;
        padding: 24px 0 32px !important;
        min-height: auto !important;
    }
    .exact-hero-content {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .exact-hero .brand-eyebrow {
        justify-content: center !important;
        margin-inline: auto !important;
        margin-bottom: 12px !important;
    }
    .exact-hero-visual {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }
    .hero-visual-frame {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }
    .hero-visual-img {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 768px) {
    .exact-hero-title {
        font-size: clamp(1.8rem, 6.5vw, 2.5rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 12px !important;
    }
    .exact-hero-lead {
        font-size: 14.5px !important;
        line-height: 1.62 !important;
        max-width: 580px !important;
        margin: 0 auto 12px !important;
    }
    .exact-hero-tag {
        font-size: 16px !important;
        margin: 12px auto 6px !important;
    }
    .exact-hero-desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        max-width: 580px !important;
        margin: 0 auto 16px !important;
    }
    .exact-hero-actions {
        justify-content: center !important;
        gap: 10px !important;
    }
    .hero-loan-pills {
        justify-content: center !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }
    .hero-loan-pill {
        font-size: 11.5px !important;
        padding: 5px 11px !important;
    }
    .exact-hero .hero-trust-strip {
        border-top: 1px solid #E2E8F0 !important;
        padding-top: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px 14px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .exact-hero .hero-trust-item {
        font-size: 12px !important;
    }
    .hero-floating-pill.pill-top {
        top: 10px !important;
        left: 10px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
        max-width: calc(100% - 20px) !important;
    }
    .hero-floating-pill.pill-bottom {
        bottom: 10px !important;
        right: 10px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
        max-width: calc(100% - 20px) !important;
    }
}

@media (max-width: 576px) {
    .exact-hero-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .exact-hero-actions .btn-hero-primary {
        flex: 1.25 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 44px !important;
        font-size: clamp(10.5px, 2.7vw, 12px) !important;
        letter-spacing: -0.25px !important;
        padding: 0 8px !important;
        border-radius: 9999px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .exact-hero-actions .btn-hero-secondary {
        flex: 0.95 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 44px !important;
        font-size: clamp(10.5px, 2.7vw, 12px) !important;
        letter-spacing: -0.25px !important;
        padding: 0 8px !important;
        border-radius: 9999px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .exact-hero-safety {
        justify-content: center !important;
        font-size: 11.5px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .exact-hero-title {
        font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
    }
    .exact-hero .hero-trust-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 10px !important;
        justify-items: center !important;
    }
    .exact-hero .hero-trust-sep {
        display: none !important;
    }
    .exact-hero .hero-trust-item {
        white-space: normal !important;
        text-align: center !important;
        font-size: 11px !important;
        justify-content: center !important;
    }
    .hero-floating-pill {
        display: none !important;
    }
}

/* ── 7. INNER PAGE HEROES & BREADCRUMBS ── */
@media (max-width: 960px) {
    .page-hero,
    .about-hero,
    .legal-hero,
    .blog-hub-hero,
    .other-loans-hero {
        padding: 38px 0 32px !important;
    }
    .page-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .page-hero-content {
        text-align: center !important;
        max-width: 100% !important;
    }
    .page-hero-center,
    .page-hero-inner {
        text-align: center !important;
    }
    .breadcrumb {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .page-hero .brand-eyebrow {
        justify-content: center !important;
        margin-inline: auto !important;
    }
    .hero-action-group,
    .hero-btns {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .hero-action-group .btn,
    .hero-btns .btn {
        flex: 1 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        font-size: clamp(11.5px, 3.2vw, 13.5px) !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    .hero-snapshot-card {
        padding: 20px 16px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }
    .snapshot-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .page-hero h1,
    .about-hero h1,
    .legal-hero h1,
    .blog-hub-hero h1 {
        font-size: clamp(2rem, 5vw + 0.8rem, 2.5rem) !important;
    }
    .snapshot-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ── 8. FINANCIAL CALCULATORS TOUCH & RESPONSIVENESS ── */
.calc-tabs-nav {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    padding: 2px 2px 8px 2px !important;
    margin-bottom: 4px !important;
    touch-action: pan-x !important;
}

.calc-tabs-nav::-webkit-scrollbar {
    display: none !important;
}

.calc-tab-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

@media (max-width: 768px) {
    .calc-card-container {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
    .calc-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .calc-slider {
        width: 100% !important;
        min-height: 44px !important;
        touch-action: pan-y !important;
    }
    .calc-slider::-webkit-slider-thumb {
        width: 28px !important;
        height: 28px !important;
    }
    .calc-slider::-moz-range-thumb {
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .calc-label-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    .calc-val-input {
        max-width: 140px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 6px 10px !important;
    }
    .calc-result-hero {
        font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important;
    }
    .calc-card-container {
        padding: 16px 12px !important;
    }
    .calc-breakdown-row {
        font-size: 12px !important;
        padding: 6px 0 !important;
    }
}

/* ── 9. PARTNER LENDERS GRID & FILTER ENGINE ── */
@media (max-width: 768px) {
    .lenders-info-grid {
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
        gap: 12px !important;
    }
    .lender-filters-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .lender-search-box input {
        font-size: 16px !important;
        min-height: 48px !important;
    }
    .filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .filter-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .lender-filter-btn {
        padding: 8px 14px !important;
        font-size: 12.5px !important;
        min-height: 42px !important;
        border-radius: 999px !important;
    }
}

@media (max-width: 480px) {
    .lenders-info-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .lender-info-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── 10. UNIVERSAL RESPONSIVE GRID COLLAPSING ── */
@media (max-width: 960px) {
    .why-nine-grid,
    .loan-categories-grid,
    .bridging-cards-grid,
    .services-grid,
    .services-unified-grid,
    .core-focus-grid,
    .docs-cards-grid,
    .about-focus-grid,
    .about-journey-grid,
    .about-philosophy-grid,
    .svc-programs-grid,
    .svc-process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
    .timeline-horizontal,
    .mbbs-timeline {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .timeline-horizontal::before,
    .mbbs-timeline::before {
        display: none !important;
    }
    .two-col {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 600px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .about-static-lenders-grid,
    .vps-lenders-grid,
    .vps-bank-logo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .vps-final-cta {
        padding: 36px 0 !important;
    }
    .vps-cta-photo-panel {
        display: none !important;
    }
    .vps-cta-content {
        text-align: center !important;
        max-width: 100% !important;
    }
    .vps-final-cta-btns {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .vps-final-cta-btns .btn {
        flex: 1 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        font-size: clamp(11.5px, 3.2vw, 13.5px) !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* ── 11. RESPONSIVE TABLES & HORIZONTAL SCROLL ── */
.table-responsive,
.table-container,
.table-wrap,
.vps-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    margin: 16px 0 !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    touch-action: pan-x !important;
}

.comparison-table,
.vps-comparison-table,
.data-table,
.legal-table {
    width: 100% !important;
    min-width: 580px !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

.comparison-table th,
.comparison-table td,
.vps-comparison-table th,
.vps-comparison-table td {
    padding: 11px 13px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

/* ── 12. POPUP MODAL & FORM RESPONSIVE SHEET ── */
@media (max-width: 768px) {
    .popup-overlay {
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .popup-modal {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 480px !important;
        max-height: 92dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        border-radius: 18px !important;
        margin: auto !important;
        position: relative !important;
        scrollbar-width: thin !important;
    }
    .popup-close {
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        border-radius: 50% !important;
        z-index: 20 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Hide duplicate promo banner so form is instantly visible */
    .popup-left {
        display: none !important;
    }
    .popup-left .popup-features {
        display: none !important;
    }
    .popup-left-footer {
        display: none !important;
    }
    .popup-right {
        padding: 16px 16px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Keep name inputs 2 columns to prevent needless scroll */
    .popup-form .form-row.name-row,
    .contact-form-box .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .contact-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

@media (max-width: 480px) {
    .contact-form-box {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }
    .input-icon-wrap.phone-wrap input,
    .lead-input-wrap.has-prefix input {
        padding-left: 78px !important;
    }
}

/* ── 13. REGULATORY ACCORDION & MOBILE FOOTER (Hallmark Compact Architecture) ── */
/* Base Desktop Styling */
details.footer-col-accordion {
    display: block;
}
details.footer-col-accordion > summary.footer-col-summary {
    list-style: none;
    cursor: default;
    user-select: auto;
    outline: none;
    display: block;
}
details.footer-col-accordion > summary.footer-col-summary::-webkit-details-marker,
details.footer-col-accordion > summary.footer-col-summary::marker {
    display: none;
}
.footer-accordion-icon {
    display: none;
}
.footer-brand-header {
    display: block;
}

@media (max-width: 576px) {
    .site-disclaimer-wrap {
        padding: 4px 0 !important;
    }
    .disclaimer-trigger {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 8px 0 !important;
        min-height: 40px !important;
    }
    .disclaimer-trigger-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .disclaimer-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
        flex-shrink: 0 !important;
    }
    .disclaimer-title {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .disclaimer-hint {
        display: none !important;
    }
    .disclaimer-toggle-pill {
        width: auto !important;
        font-size: 10.5px !important;
        padding: 4px 8px !important;
        min-height: 30px !important;
        flex-shrink: 0 !important;
    }
    .disclaimer-footer-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding-top: 10px !important;
    }
    .disclaimer-footer-note,
    .disclaimer-link-btn {
        font-size: 11.5px !important;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 18px 0 0 !important;
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .footer-inner,
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 10px !important;
    }
    .footer-col.brand-col {
        grid-column: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .footer-brand-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    .footer-logo {
        margin-bottom: 0 !important;
    }
    .footer-logo .logo {
        gap: 8px !important;
    }
    .footer-desc {
        display: none !important; /* Conceal long paragraph on mobile to keep footer compact and avoid multi-scrolls */
    }
    .footer-social {
        display: flex !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    .footer-social a {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Accordion Columns on Mobile */
    .footer-col-accordion {
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .footer-col-accordion > summary.footer-col-summary {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 11px 2px !important;
        margin-bottom: 0 !important;
        cursor: pointer !important;
        list-style: none !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }
    .footer-col-accordion > summary.footer-col-summary::-webkit-details-marker,
    .footer-col-accordion > summary.footer-col-summary::marker {
        display: none !important;
    }
    .footer-col-accordion > summary.footer-col-summary h4 {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        margin: 0 !important;
        letter-spacing: 0.2px !important;
    }
    .footer-col-accordion > summary.footer-col-summary h4::after {
        display: none !important; /* Chevron replaces the static desktop underline */
    }
    .footer-col-accordion .footer-accordion-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.55) !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
        width: 20px !important;
        height: 20px !important;
    }
    .footer-col-accordion[open] .footer-accordion-icon {
        transform: rotate(180deg) !important;
        color: var(--green, #22c55e) !important;
    }

    /* Links inside opened accordion */
    .footer-links,
    .footer-col .two-col-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px 12px !important;
        padding: 6px 0 12px 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .footer-col ul li,
    .footer-links li {
        margin-bottom: 0 !important;
        min-width: 0 !important;
    }
    .footer-col ul li a,
    .footer-links li a {
        font-size: 12px !important;
        line-height: 1.35 !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* Contact details inside opened accordion */
    .contact-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 12px !important;
        padding: 8px 0 12px 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .contact-list li {
        margin-bottom: 0 !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }
    .contact-list li a {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .footer-col:last-child {
        grid-column: auto !important;
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Footer Bottom Strip */
    .footer-bottom {
        padding: 10px 0 !important;
        margin-top: 4px !important;
    }
    .footer-bottom-inner {
        flex-direction: column !important;
        gap: 5px !important;
        font-size: 11px !important;
        text-align: center !important;
    }
    .footer-bottom-links {
        font-size: 10.5px !important;
        gap: 8px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 16px 0 0 !important;
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .footer-inner,
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 8px !important;
    }
    .footer-links,
    .footer-col .two-col-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px 10px !important;
    }
    .contact-list {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* ── 14. FLOATING CTA CONTROLS & SAFE AREA CLEARANCE ── */
@media (max-width: 480px) {
    .floating-eligibility-btn {
        bottom: 16px !important;
        left: 14px !important;
        right: auto !important;
        max-width: calc(100vw - 86px) !important;
        height: 50px !important;
        min-height: 50px !important;
        font-size: 12.5px !important;
        padding: 0 16px !important;
        z-index: 990 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .whatsapp-float {
        bottom: 16px !important;
        right: 14px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 26px !important;
        z-index: 990 !important;
    }
}

body.menu-open .floating-eligibility-btn,
body.menu-open .whatsapp-float,
body.modal-open .floating-eligibility-btn,
body.modal-open .whatsapp-float {
    display: none !important;
}

/* ==========================================================================
   13. LEAD SUBMISSION THANK YOU CONFIRMATION SCREEN (5-SECOND TIMER)
   ========================================================================== */
.popup-modal.has-thankyou {
    max-width: 580px !important;
    width: 92% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(22, 163, 74, 0.25) !important;
    box-shadow: 0 25px 60px -15px rgba(11, 31, 51, 0.28), 0 0 0 1px rgba(22, 163, 74, 0.15) !important;
    border-radius: 22px !important;
    animation: vpsModalScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.popup-modal.has-thankyou .popup-left {
    display: none !important;
}

.popup-modal.has-thankyou .popup-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 36px 32px 30px 32px !important;
    box-sizing: border-box !important;
    display: block !important;
}

@keyframes vpsModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.vps-thankyou-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    animation: vpsFadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vpsFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Checkmark Icon With Halo Glow */
.vps-thankyou-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vps-thankyou-icon-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.3) 0%, rgba(22, 163, 74, 0) 70%);
    animation: vpsPulseHalo 2s infinite ease-out;
}

@keyframes vpsPulseHalo {
    0% {
        transform: scale(0.85);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.25;
    }
    100% {
        transform: scale(0.85);
        opacity: 0.9;
    }
}

.vps-thankyou-icon {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A765 0%, #0F7646 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -4px rgba(22, 163, 74, 0.45);
}

.vps-checkmark-svg {
    width: 44px;
    height: 44px;
    stroke-width: 3.5;
    stroke: #ffffff;
    stroke-miterlimit: 10;
}

.vps-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3.5;
    stroke: rgba(255, 255, 255, 0.35);
    fill: none;
    animation: vpsStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.vps-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: vpsStroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.35s forwards;
}

@keyframes vpsStroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* Badge */
.vps-thankyou-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #DCFCE7;
    color: #15803D;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

/* Headings */
.vps-thankyou-title {
    font-family: 'Manrope', -apple-system, sans-serif !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    color: #0B1F33 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}

.vps-thankyou-subtitle {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #FF5A00 !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.45 !important;
}

/* Details Card */
.vps-thankyou-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    text-align: left;
}

.vps-thankyou-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vps-thankyou-info-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(11, 31, 51, 0.06);
    color: #0B1F33;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.vps-thankyou-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vps-info-label {
    font-size: 10.5px;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vps-info-val {
    font-size: 13.5px;
    font-weight: 700;
    color: #0B1F33;
}

/* Trust / Next Steps Pills */
.vps-thankyou-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.vps-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    background: #F1F5F9;
    padding: 4px 9px;
    border-radius: 6px;
}

.vps-step-pill i {
    color: #16A765;
    font-size: 10px;
}

.vps-step-arrow {
    color: #94A3B8;
    font-size: 9px;
}

/* 5-Second Countdown Timer Bar */
.vps-thankyou-timer-box {
    width: 100%;
    background: #FFF7ED;
    border: 1px solid rgba(255, 90, 0, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.vps-timer-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 90, 0, 0.15);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.vps-timer-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #FF5A00 0%, #FF8A00 100%);
    border-radius: 999px;
    transform-origin: left;
    transition: width 0.05s linear;
}

.vps-timer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.vps-timer-caption {
    color: #9A3412;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vps-timer-caption strong {
    color: #EA580C;
    font-weight: 800;
}

.vps-timer-skip-btn {
    background: transparent;
    border: 1px solid rgba(154, 52, 18, 0.35);
    color: #9A3412;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vps-timer-skip-btn:hover {
    background: #EA580C;
    color: #ffffff;
    border-color: #EA580C;
}

/* WhatsApp Fast-Track */
.vps-thankyou-fasttrack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: #64748B;
    margin-top: 2px;
    flex-wrap: wrap;
}

.vps-thankyou-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #16A765;
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.vps-thankyou-wa-link:hover {
    background: #128C53;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 167, 101, 0.35);
}

/* Inline card support (e.g. contact page) */
.contact-form-box .vps-thankyou-screen {
    padding: 24px 16px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .popup-modal.has-thankyou {
        width: 95% !important;
        max-width: 420px !important;
        margin: 16px auto !important;
        border-radius: 18px !important;
    }
    .popup-modal.has-thankyou .popup-right {
        padding: 24px 18px 20px 18px !important;
    }
    .vps-thankyou-title {
        font-size: 21px !important;
    }
    .vps-thankyou-subtitle {
        font-size: 13.5px !important;
    }
    .vps-thankyou-steps {
        gap: 4px !important;
    }
    .vps-step-pill {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }
    .vps-timer-meta {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: center !important;
    }
}

/* ==========================================================================
   HALLMARK MOBILE RESPONSIVENESS SUITE (Discipline 5 & Gates 34, 49, 50–57)
   Verified across: 320px (Compact) · 375px (iPhone) · 414px (Plus) · 768px (Tablet)
   ========================================================================== */

/* ── GATE 34: Universal Root Overflow-X Clip (No Hidden, No Horizontal Scroll) ── */
html,
body {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ── GATE 49: Clickable Text Single-Line Affordances (Never Wraps) ── */
.btn,
.btn-hero-primary,
.btn-hero-secondary,
.btn-eligibility,
.btn-whatsapp-nav,
.btn-whatsapp,
.btn-primary,
.btn-secondary,
.btn-pan-action,
.calc-tab-btn,
.lender-filter-btn,
.hub-category-pill,
.floating-eligibility-btn,
.hero-loan-pill,
.nav-links > li > a,
.more-dropdown-item,
.breadcrumb a,
.breadcrumb span,
.footer-links li a,
.footer-bottom-links a,
.disclaimer-toggle-pill {
    white-space: nowrap !important;
}

/* ── GATE 50: Image-Bearing Grid Tracks Use minmax(0, 1fr) ── */
.mega-countries-grid,
.about-static-lenders-grid,
.vps-lenders-grid,
.vps-bank-logo-grid,
.lenders-info-grid,
.trust-grid,
.snapshot-stats-grid,
.featured-card,
.posts-grid,
.blog-grid,
.country-stats-grid {
    min-width: 0 !important;
}

/* ── GATE 51: Display Headers & Long Words Wrap Gracefully ── */
h1, h2, h3, h4, h5, h6,
.exact-hero-title,
.section-title,
.page-hero h1,
.hero-title,
.about-hero h1,
.legal-hero h1,
.blog-hub-hero h1,
.vps-thankyou-title,
.tools-heading,
.brand-eyebrow,
.logo-name,
.logo-text,
.section-sub,
.exact-hero-lead,
.exact-hero-desc,
.country-stat-val,
.snapshot-stat-val,
.method-info a,
.contact-list a,
.featured-title,
.post-title,
.card-title,
.disclaimer-item-text,
.disclaimer-title,
.country-overview-body {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    min-width: 0 !important;
}

.contact-list a[href^="mailto:"],
.contact-list a[href^="tel:"],
.contact-col a {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    font-size: clamp(11.5px, 0.95vw, 13px) !important;
}

/* ── GATE 52: Section Heads Collapse to One Column on Mobile ── */
@media (max-width: 48rem) { /* 768px */
    .section-header,
    .section-head,
    .section-header-wrap,
    .tools-header-wrap,
    .section-title-wrap,
    .title-row,
    .two-col,
    .two-col-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        flex-direction: column !important;
        width: 100% !important;
    }
}

/* ── GATE 53: Radio-Tab & Choice Patterns Zero Scroll Jump ── */
.interest-opt input[type="radio"],
input[type="radio"].custom-radio-inp {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ── GATE 54: Eyebrow + Heading Vertical Stack ── */
.brand-eyebrow,
.vps-eyebrow,
.section-label,
.page-hero-eyebrow,
.tools-eyebrow,
.snapshot-badge {
    display: inline-flex !important;
    margin-bottom: 8px !important;
}

/* ── GATE 55: Display Heads Line-Height Safety Floor ── */
h1, h2,
.exact-hero-title,
.section-title,
.tools-heading,
.page-hero h1 {
    line-height: clamp(1.12, 1.18, 1.25) !important;
}

/* ── GATE 56: Secondary Sticky Elements Nav Offset ── */
:root {
    --banner-height: 60px;
    --z-sticky: 200;
    --z-sticky-nav: 1000;
}

/* ── 375px & 414px VIEWPORT REFINEMENT (Standard Mobile) ── */
@media (max-width: 480px) {
    .container {
        padding-inline: 14px !important;
    }
    .btn {
        padding-inline: 16px !important;
    }
    .hero-loan-pills {
        gap: 6px !important;
    }
    .hero-loan-pill {
        font-size: 11.5px !important;
        padding: 5px 10px !important;
    }
    .exact-hero-actions .btn-hero-primary,
    .exact-hero-actions .btn-hero-secondary,
    .hero-action-group .btn,
    .hero-btns .btn,
    .vps-final-cta-btns .btn {
        font-size: clamp(11px, 2.9vw, 13px) !important;
        min-height: 44px !important;
        padding-inline: 6px !important;
    }
    .country-stats-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
}

/* ── 320px VIEWPORT PERFECTION (Compact Phones e.g. iPhone SE 1st gen) ── */
@media (max-width: 340px) {
    .container {
        padding-inline: 10px !important;
    }
    .logo-name {
        font-size: 11px !important;
        letter-spacing: 0.2px !important;
    }
    .logo-sub-text {
        font-size: 6px !important;
    }
    .vps-flash-svg {
        width: 20px !important;
        height: 25px !important;
    }
    .exact-hero-title {
        font-size: 1.55rem !important;
        line-height: 1.2 !important;
    }
    .exact-hero-actions .btn-hero-primary,
    .exact-hero-actions .btn-hero-secondary,
    .hero-action-group .btn,
    .hero-btns .btn,
    .vps-final-cta-btns .btn {
        font-size: 10.5px !important;
        min-height: 42px !important;
        padding-inline: 4px !important;
    }
    .exact-hero .hero-trust-strip {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
    }
    .hero-loan-pill {
        font-size: 10.5px !important;
        padding: 4px 8px !important;
    }
    .floating-eligibility-btn {
        left: 8px !important;
        bottom: 68px !important;
        font-size: 10.5px !important;
        padding: 6px 10px !important;
        max-width: calc(100vw - 64px) !important;
    }
    .whatsapp-float {
        bottom: 12px !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
    }
    .contact-form-box {
        padding: 16px 10px !important;
    }
    .popup-right {
        padding: 18px 12px !important;
    }
    .calc-card-container {
        padding: 14px 10px !important;
    }
}

/* ==========================================================================
   PRODUCTION MOBILE-FIRST RESPONSIVE DESIGN SYSTEM OVERHAUL
   Universal Mobile Engine: 375px, 390px, 430px, 768px Viewports
   ========================================================================== */

/* ── 1. UNIVERSAL 44PX+ TOUCH TARGET DISCIPLINE ── */
@media (max-width: 768px) {
    button,
    .btn,
    .calc-tab-btn,
    .lender-filter-btn,
    .hub-category-pill,
    .mbbs-dest-tab-btn,
    .mbbs-preset-btn,
    .btn-stream-cta,
    .btn-service-action,
    .floating-eligibility-btn,
    .whatsapp-float,
    .hamburger,
    .popup-close,
    .lead-btn-copy,
    .lead-btn-submit,
    .popup-submit-btn,
    .btn-partner-submit,
    .footer-col-summary,
    .disclaimer-trigger,
    .more-dropdown-item {
        min-height: 44px !important;
        min-width: 44px !important;
        box-sizing: border-box !important;
    }

    .btn-lg,
    .btn-primary.btn-lg,
    .btn-whatsapp.btn-lg,
    .btn-secondary.btn-whatsapp,
    a.btn.btn-whatsapp,
    button.btn.btn-primary,
    .btn-hero-primary,
    .btn-hero-secondary {
        min-height: 48px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .floating-eligibility-btn {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 20px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 9999px !important;
        bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 76px)) !important;
        left: 14px !important;
        max-width: calc(100vw - 84px) !important;
        box-shadow: 0 4px 18px rgba(11, 31, 51, 0.28) !important;
        box-sizing: border-box !important;
    }

    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
        right: 14px !important;
        box-shadow: 0 4px 16px rgba(22, 167, 101, 0.35) !important;
    }

    .hub-category-pill {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 13.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9999px !important;
    }

    .lender-filter-btn {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 13.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9999px !important;
    }

    .mbbs-dest-tab-btn {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 13.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9999px !important;
    }

    .mbbs-preset-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    .btn-stream-cta,
    .btn-service-action {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 11px 18px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .footer-links li a,
    .footer-bottom-links a,
    .contact-list a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 4px !important;
    }
}

/* ── 2. FULL-WIDTH SINGLE-COLUMN LEAD FORMS (COMPACT ZERO-BLOAT 44PX INPUTS) ── */
@media (max-width: 768px) {
    .lead-form,
    .popup-form,
    #contactForm,
    .partner-form,
    .vps-lead-form,
    .custom-form {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        box-sizing: border-box !important;
    }

    .lead-form-row,
    .form-row,
    .form-group-row,
    .lead-form-grid,
    .popup-grid,
    .calc-input-row,
    .partner-form-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    /* Preserve 2 columns for First Name & Last Name to prevent needless scroll */
    .lead-form-row.name-row,
    .form-row.name-row,
    .lead-form-row:first-of-type {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .lead-form-group,
    .form-group,
    .lead-field-wrap,
    .popup-input-group,
    .contact-form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important; /* CRITICAL: Prevent double-spacing when gap is applied */
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    select,
    .lead-input,
    .form-control,
    .popup-input,
    .calc-val-input,
    .contact-form input,
    .contact-form select,
    .partner-form input,
    .partner-form select {
        width: 100% !important;
        min-height: 48px !important;
        height: 50px !important;
        font-size: 16px !important; /* CRITICAL: Eliminates iOS Safari zoom-in on focus */
        line-height: 1.4 !important;
        padding: 12px 16px 12px 38px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .why-carousel-dot {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        min-height: 6px !important;
        border-radius: 9999px !important;
        background: #CBD5E1 !important;
        padding: 0 !important;
        border: none !important;
    }

    .why-carousel-dot.active {
        width: 18px !important;
        min-width: 18px !important;
        background: #FF5A00 !important;
    }

    .input-icon-wrap.phone-wrap input,
    .lead-input-wrap.has-prefix input {
        padding-left: 88px !important; /* Keep country prefix clearance without collision */
    }

    textarea,
    .lead-form textarea,
    .popup-form textarea,
    .contact-form textarea {
        width: 100% !important;
        min-height: 52px !important;
        height: 52px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        padding: 9px 14px 9px 38px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        resize: vertical !important;
    }

    /* High-specificity phone prefix clearance preventing placeholder collision (+91 with digits) */
    .input-icon-wrap.phone-wrap input,
    .lead-input-wrap.has-prefix input,
    .popup-form .input-icon-wrap.phone-wrap input,
    .contact-form .input-icon-wrap.phone-wrap input,
    input#popupPhone,
    input#contactPhone,
    input[name="phone"] {
        padding-left: 92px !important;
    }

    /* Popup form specific textarea - ensure placeholder text is never vertically cropped */
    .popup-form textarea,
    .popup-form textarea#popupMessage,
    textarea#popupMessage {
        min-height: 54px !important;
        height: 54px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        padding: 7px 12px 7px 34px !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
        resize: none !important;
        overflow-y: hidden !important;
    }

    /* Compact inputs in popup modal so whole form fits cleanly without cropping submit button */
    .popup-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    .popup-form .input-icon-wrap input {
        min-height: 42px !important;
        height: 42px !important;
        padding: 6px 12px 6px 36px !important;
        font-size: 16px !important;
        border-radius: 9px !important;
    }

    .popup-form input#popupPhone,
    .popup-form .input-icon-wrap.phone-wrap input {
        padding-left: 92px !important;
    }

    .popup-modal {
        max-height: 96dvh !important;
        padding-bottom: 8px !important;
    }

    .popup-form .btn-submit-enquiry {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 14px !important;
        margin-top: 4px !important;
        margin-bottom: 2px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    textarea:focus,
    .lead-form textarea:focus,
    .popup-form textarea:focus,
    .contact-form textarea:focus {
        min-height: 74px !important;
        height: 74px !important;
    }

    .lead-btn-submit,
    .popup-submit-btn,
    .btn-submit,
    .btn-partner-submit,
    .calc-action-btn,
    .btn-submit-enquiry {
        width: 100% !important;
        min-height: 44px !important;
        height: 46px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }
}

/* ── 3. RESPONSIVE CLAMP TYPOGRAPHY (32-40PX HERO HEADINGS) ── */
h1,
.page-hero h1,
header.page-hero h1,
.page-hero-content h1,
.exact-hero-title,
.hero-title,
.about-hero h1,
.legal-hero h1,
.blog-hub-hero h1,
.services-hero h1 {
    font-size: clamp(2rem, 5vw + 0.8rem, 2.5rem) !important; /* Exactly 32px @ 375px, 33.5px @ 390px, 35.5px @ 430px, 40px @ 768px */
    line-height: clamp(1.15, 1.2, 1.25) !important;
    letter-spacing: -0.025em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    min-width: 0 !important;
}

@media (min-width: 1024px) {
    h1,
    .page-hero h1,
    header.page-hero h1,
    .page-hero-content h1,
    .exact-hero-title,
    .hero-title,
    .about-hero h1,
    .legal-hero h1,
    .blog-hub-hero h1,
    .services-hero h1 {
        font-size: clamp(2.5rem, 4vw, 3.4rem) !important;
        line-height: 1.15 !important;
    }
}

/* ── 4. 100% ZERO HORIZONTAL SCROLL & OVERFLOW CONTAINMENT ── */
html,
body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
}

.marquee,
.marquee-track,
.partners-marquee,
.lenders-marquee-track,
.vps-lenders-marquee-wrap {
    max-width: 100vw !important;
    overflow: hidden !important;
    contain: paint !important;
    clip-path: inset(0) !important;
}

.vps-hero-swoosh,
.vps-cta-swoosh,
.hero-bg-accent,
.page-hero-pattern,
.hero-bg-shapes {
    max-width: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .vps-hero-swoosh,
    .vps-cta-swoosh {
        display: none !important;
    }
    .vps-hero,
    .vps-hero-domestic,
    .vps-final-cta {
        overflow: hidden !important;
        position: relative !important;
    }
}

/* Calculator tabs mobile responsive grid layout */
@media (max-width: 768px) {
    .calc-tabs-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    .calc-tabs-nav {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 12px 0 !important;
        box-sizing: border-box !important;
    }
    .calc-tabs-nav .calc-tab-btn:last-child {
        grid-column: 1 / -1 !important;
    }
    .calc-tab-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 440px) {
    .calc-tabs-nav {
        grid-template-columns: 1fr !important;
    }
    .calc-tabs-nav .calc-tab-btn:last-child {
        grid-column: auto !important;
    }
}

/* ── 5. RECOMPOSED MOBILE CARDS FOR TABLES ── */
@media (max-width: 768px) {
    .vps-table-wrapper,
    .comparison-table-wrapper,
    .table-responsive,
    .legal-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .comparison-table,
    .custom-loan-table,
    .legal-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .comparison-table thead,
    .custom-loan-table thead,
    .legal-table thead {
        display: none !important;
    }

    .comparison-table tbody,
    .custom-loan-table tbody,
    .legal-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .comparison-table tr,
    .custom-loan-table tr,
    .legal-table tr {
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
        border: 1px solid var(--color-border, #DCE4EA) !important;
        border-radius: 14px !important;
        padding: 16px !important;
        box-shadow: 0 2px 10px rgba(11, 31, 51, 0.04) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .comparison-table td,
    .custom-loan-table td,
    .legal-table td {
        display: flex !important;
        flex-direction: column !important;
        padding: 6px 0 !important;
        border: none !important;
        font-size: 13.5px !important;
        text-align: left !important;
        border-bottom: 1px dashed #E2E8F0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .comparison-table tr td:last-child,
    .custom-loan-table tr td:last-child,
    .legal-table tr td:last-child {
        border-bottom: none !important;
    }

    .table-cell-highlight,
    .comparison-table tr td:first-child,
    .custom-loan-table tr td:first-child,
    .legal-table tr td:first-child {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: var(--color-navy, #0B1F33) !important;
        background: var(--color-off-white, #F7F9FB) !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        border-bottom: none !important;
        width: 100% !important;
    }

    .comparison-table td[data-label]::before,
    .custom-loan-table td[data-label]::before,
    .legal-table td[data-label]::before {
        content: attr(data-label);
        display: block !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        font-weight: 700 !important;
        color: var(--color-muted, #64748B) !important;
        margin-bottom: 3px !important;
    }

    /* VPS Comparison Table — Single-Shot Compact Horizontal View (Fits in 1 Screen) */
    .vps-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        border: 1px solid #DCE4EA !important;
        background: #FFFFFF !important;
        box-shadow: 0 2px 10px rgba(11, 31, 51, 0.04) !important;
        margin: 12px 0 !important;
        width: 100% !important;
    }

    .vps-comparison-table {
        display: table !important;
        width: 100% !important;
        min-width: 460px !important;
        border-collapse: collapse !important;
        background: #FFFFFF !important;
    }

    .vps-comparison-table thead {
        display: table-header-group !important;
    }

    .vps-comparison-table thead tr {
        display: table-row !important;
        background: #0B1F33 !important;
    }

    .vps-comparison-table th {
        display: table-cell !important;
        color: #FFFFFF !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 8px 10px !important;
        text-align: left !important;
        white-space: nowrap !important;
        border: none !important;
    }

    .vps-comparison-table tbody {
        display: table-row-group !important;
    }

    .vps-comparison-table tr {
        display: table-row !important;
        border-bottom: 1px solid #EDF2F7 !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .vps-comparison-table tr:last-child {
        border-bottom: none !important;
    }

    .vps-comparison-table td {
        display: table-cell !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        border: none !important;
        border-bottom: 1px solid #EDF2F7 !important;
        color: #334155 !important;
        vertical-align: middle !important;
        width: auto !important;
    }

    .vps-comparison-table td.vps-table-param,
    .vps-comparison-table tr td:first-child {
        font-weight: 700 !important;
        color: #0B1F33 !important;
        background: #F8FAFC !important;
        white-space: nowrap !important;
        width: 125px !important;
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    .vps-comparison-table td[data-label]::before {
        display: none !important;
    }
}

/* ── 6. CRISP SAFE-AREA CLEARANCE FOR STICKY ACTIONS ── */
:root {
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .whatsapp-float {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .floating-eligibility-btn {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .popup-modal {
        margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── 7. COMPACT MOBILE CARDS & 2-COLUMN MATRICES ── */
@media (max-width: 768px) {
    .services-grid,
    .loan-types-grid,
    .benefits-grid,
    .features-grid,
    .process-grid,
    .about-values-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .service-card,
    .loan-type-card,
    .benefit-card,
    .feature-card,
    .process-step-card,
    .value-card,
    .contact-box {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    .country-stats-grid,
    .snapshot-stats-grid,
    .quick-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .country-stat-card,
    .snapshot-stat-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }
}

/* ── 8. COMPACT & ENGAGING MOBILE CARD UX (ANTI-SCROLL BLOAT) ── */
/* 
   Solves repetitive, endless scrolling on mobile viewports:
   - Why VPS (9 cards): Converted from 2,000px vertical stack to a sleek, hardware-accelerated horizontal snap track (Carousel) with peek indicators, swipe dots & arrows.
   - PAN India (4 cards): Converted from 800px stack to a tight 2x2 micro-card matrix (~220px height).
   - Destinations (8 cards): Kept in a crisp 2-column catalog grid (~450px) instead of 2,400px vertical doom-scroll.
   - Streams, Top Courses, Benefits, & Expenses: Retained in 2-column compact matrices.
   - Bridging Cards: Streamlined internal padding and tight check items.
*/

/* 1. Why VPS 9-Card Mobile Carousel */
@media (max-width: 768px) {
    .why-vps-section {
        overflow: hidden !important;
    }

    .why-nine-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding: 8px 16px 20px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        cursor: grab !important;
    }

    .why-nine-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .why-feature-card {
        flex: 0 0 82% !important;
        max-width: 310px !important;
        min-width: 260px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: normal !important;
        padding: 20px 18px !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        border-top: 3px solid #FF5A00 !important;
        box-shadow: 0 6px 20px rgba(11, 31, 51, 0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        position: relative !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .why-feature-card:active {
        transform: scale(0.985) !important;
    }

    .why-feature-card .w-icon-circle {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    .why-feature-card .w-num {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #0B1F33 !important;
        opacity: 0.25 !important;
        margin: 0 !important;
    }

    .why-feature-card h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        font-weight: 800 !important;
        color: #0B1F33 !important;
    }

    .why-feature-card p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #475569 !important;
    }
}

/* Dynamic Carousel Controls Bar for Why VPS */
.why-carousel-controls {
    display: none;
}

@media (max-width: 768px) {
    .why-carousel-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 2px 0 !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    .why-carousel-hint {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #FF5A00 !important;
        background: #FFF1E8 !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        border: 1px solid #FFE5D6 !important;
    }

    .why-carousel-dots {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .why-carousel-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 9999px !important;
        background: #CBD5E1 !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: pointer !important;
        border: none !important;
        padding: 0 !important;
    }

    .why-carousel-dot.active {
        width: 18px !important;
        background: #FF5A00 !important;
    }

    .why-carousel-arrows {
        display: flex !important;
        gap: 6px !important;
    }

    .why-carousel-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #0B1F33 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
    }

    .why-carousel-btn:active {
        transform: scale(0.92) !important;
        background: #F8FAFC !important;
    }
}

/* 2. PAN India 4-Card Compact 2x2 Matrix */
@media (max-width: 640px) {
    .pan-india-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .pan-card {
        padding: 14px 12px !important;
        border-radius: 14px !important;
        min-height: 124px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-shadow: 0 4px 14px rgba(11, 31, 51, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        position: relative !important;
        transition: transform 0.2s ease !important;
    }

    .pan-card:active {
        transform: scale(0.985) !important;
    }

    .pan-card-badge {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pan-card-num {
        position: absolute !important;
        font-size: 13px !important;
        top: 12px !important;
        right: 12px !important;
        opacity: 0.3 !important;
        font-weight: 700 !important;
    }

    .pan-card h3 {
        font-size: 13px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
        font-weight: 700 !important;
        color: #0B1F33 !important;
    }

    .pan-card p {
        font-size: 11px !important;
        line-height: 1.35 !important;
        color: #64748b !important;
    }
}

/* 3. Bridging the Gap Streamlined Mobile Cards */
@media (max-width: 768px) {
    .bridging-cards-grid {
        gap: 14px !important;
    }

    .bridge-card {
        padding: 18px 16px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 16px rgba(11, 31, 51, 0.05) !important;
    }

    .bridge-card:first-child {
        border-top: 3px solid #FF5A00 !important;
    }

    .bridge-card:last-child {
        border-top: 3px solid #0B1F33 !important;
    }

    .bridge-card-top {
        margin-bottom: 12px !important;
        gap: 10px !important;
    }

    .bridge-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .bridge-card-top h3 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .bridge-number {
        font-size: 18px !important;
    }

    .bridge-points {
        margin-top: 8px !important;
        gap: 0 !important;
    }

    .bridge-points li {
        padding: 6px 0 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        gap: 8px !important;
    }

    .circle-check {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        flex-shrink: 0 !important;
    }
}

/* 4. Destination Cards 2-Column Compact Catalog */
@media (max-width: 640px) {
    .vps-dest-grid,
    .mbbs-dest-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .vps-dest-card,
    .mbbs-dest-card {
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(11, 31, 51, 0.05) !important;
        background: #ffffff !important;
    }

    .vps-dest-img-wrap,
    .mbbs-dest-img-wrap {
        height: 95px !important;
        overflow: hidden !important;
    }

    .vps-dest-content,
    .mbbs-dest-content {
        padding: 10px 8px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        justify-content: space-between !important;
    }

    .vps-dest-content h3,
    .mbbs-dest-content h3 {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
    }

    .vps-dest-content p,
    .mbbs-dest-content p {
        font-size: 11px !important;
        margin-bottom: 8px !important;
        line-height: 1.25 !important;
        color: #64748b !important;
    }

    .vps-dest-btn,
    .mbbs-dest-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 44px !important;
        width: 100% !important;
        border-radius: 8px !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
}

/* 5. Universal 2-Column Card Alignment Across All Pages in Mobile View */
@media (max-width: 768px) {
    /* 5.1 Universal 2-Column Grid Containers */
    .mbbs-expenses-grid,
    .mbbs-benefits-grid,
    .mbbs-options-grid,
    .mbbs-checklist-grid,
    .mbbs-dest-grid,
    .mbbs-dest-meta-grid,
    .vps-expenses-grid,
    .vps-expenses-5grid,
    .vps-streams-5grid,
    .vps-topcourses-6grid,
    .vps-why-grid,
    .vps-eligibility-grid,
    .vps-dest-grid,
    .vps-loan-options-grid,
    .vps-cosigner-grid,
    .vps-apply-grid,
    .vps-docs-grid,
    .vps-lenders-grid,
    .vps-pp-grid,
    .vps-proof-faq-grid,
    .vps-bank-logo-grid,
    .services-grid,
    .svc-programs-grid,
    .process-grid,
    .svc-process-grid,
    .loan-types-grid,
    .svc-loan-types-grid,
    .services-unified-grid,
    .about-philosophy-grid,
    .about-focus-grid,
    .about-journey-grid,
    .mission-values-grid,
    .about-trust-grid,
    .about-static-lenders-grid,
    .about-stats-grid,
    .lenders-info-grid,
    .snapshot-stats-grid,
    .stats-grid,
    .why-cards-stack,
    .who-grid,
    .students-get-grid,
    .trust-grid,
    .docs-cards-grid,
    .country-stats-grid,
    .core-grid,
    .core-cards-grid,
    .pan-india-cards,
    .bridging-cards-grid,
    .posts-grid,
    .blog-grid,
    .comparison-cards-grid,
    .score-cards-grid,
    .loan-categories-grid,
    .core-focus-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5.2 Universal Card Components Styling */
    .mbbs-expense-item,
    .mbbs-benefit-item,
    .mbbs-benefit-card,
    .mbbs-option-card,
    .mbbs-check-item,
    .mbbs-checklist-card,
    .mbbs-dest-card,
    .mbbs-dest-meta-item,
    .vps-expense-card,
    .vps-exp-item,
    .vps-stream-card,
    .vps-course-card,
    .vps-course-item,
    .vps-why-card,
    .vps-elig-card,
    .vps-dest-card,
    .vps-loan-card,
    .vps-cosigner-card,
    .vps-apply-card,
    .vps-docs-col,
    .vps-doc-card,
    .vps-lender-card,
    .vps-pp-card,
    .vps-proof-card,
    .vps-bank-logo-card,
    .service-card,
    .svc-program-card,
    .process-card,
    .svc-process-card,
    .loan-col,
    .svc-loan-col,
    .loan-type-card,
    .unified-service-card,
    .philosophy-card,
    .focus-card,
    .step-card,
    .mission-value-card,
    .trust-pillar-card,
    .about-lender-logo-card,
    .about-stat-item,
    .about-stat-card,
    .lender-info-card,
    .snapshot-stat,
    .stat-item,
    .stat-card-item,
    .why-benefit-card,
    .who-card,
    .students-get-card,
    .trust-card,
    .docs-card,
    .core-card,
    .country-stat-box,
    .country-stat-card,
    .pan-card,
    .bridge-card,
    .post-card,
    .comparison-card,
    .score-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: 100% !important;
        background: #FFFFFF !important;
        border: 1px solid #DCE4EA !important;
        border-radius: 12px !important;
        padding: 14px 10px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        position: relative !important;
        box-shadow: 0 2px 8px rgba(11, 31, 51, 0.04) !important;
    }

    /* 5.3 Card Icons & Icon Badges */
    .mbbs-expense-icon,
    .vps-expense-icon,
    .vps-apply-icon,
    .vps-cosigner-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
        background: #FFF1E8 !important;
        color: #FF5A00 !important;
        font-size: 19px !important;
        margin: 0 0 10px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    .mbbs-expense-icon i,
    .vps-expense-icon i,
    .vps-apply-icon i,
    .vps-cosigner-icon i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: auto !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
    }

    .vps-card-icon-box,
    .why-benefit-icon-wrap,
    .svc-program-icon,
    .svc-step-icon-wrap,
    .philosophy-card-icon,
    .focus-card-icon,
    .step-icon-wrap,
    .who-icon-wrap,
    .core-card-icon,
    .vps-loan-icon-box,
    .vps-docs-badge-icon,
    .bridge-icon-wrap,
    .service-card-icon-box {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* 5.4 Card Headings */
    .mbbs-expenses-grid h3,
    .mbbs-benefits-grid h3,
    .vps-expenses-grid h4,
    .vps-expenses-5grid h3,
    .vps-streams-5grid h3,
    .vps-topcourses-6grid h3,
    .vps-why-grid h3,
    .vps-eligibility-grid h3,
    .vps-loan-options-grid h3,
    .vps-cosigner-grid h3,
    .vps-apply-grid h3,
    .vps-docs-grid h3,
    .svc-programs-grid h3,
    .svc-process-grid h3,
    .services-unified-grid h3,
    .about-philosophy-grid h4,
    .about-focus-grid h3,
    .about-journey-grid h3,
    .mission-values-grid h3,
    .about-trust-grid h3,
    .who-grid h3,
    .students-get-grid h3,
    .why-cards-stack h3,
    .process-grid h3,
    .trust-grid h3,
    .docs-cards-grid h3,
    .core-cards-grid h3,
    .bridging-cards-grid h3,
    .pan-india-cards h3,
    .mbbs-expense-title,
    .vps-expense-title,
    .post-card-title,
    .students-get-card-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #123A63 !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        overflow-wrap: anywhere !important;
    }

    /* 5.5 Card Body Text & Descriptions */
    .mbbs-expenses-grid p,
    .mbbs-benefits-grid p,
    .vps-expenses-grid p,
    .vps-expenses-5grid p,
    .vps-streams-5grid p,
    .vps-topcourses-6grid p,
    .vps-why-grid p,
    .vps-eligibility-grid p,
    .vps-loan-options-grid p,
    .vps-cosigner-grid p,
    .vps-apply-grid p,
    .svc-programs-grid p,
    .svc-process-grid p,
    .services-unified-grid p,
    .about-philosophy-grid p,
    .about-focus-grid p,
    .about-journey-grid p,
    .mission-values-grid p,
    .about-trust-grid p,
    .who-grid p,
    .students-get-grid p,
    .why-cards-stack p,
    .process-grid p,
    .trust-grid p,
    .docs-cards-grid p,
    .core-cards-grid p,
    .bridging-cards-grid p,
    .pan-india-cards p,
    .mbbs-expense-desc,
    .vps-expense-desc,
    .who-desc,
    .students-get-card-desc,
    .why-benefit-desc,
    .post-card-desc,
    .vps-loan-desc {
        font-size: 11px !important;
        line-height: 1.35 !important;
        color: #5A6E7F !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    /* 5.6 Card Checklists & Points */
    .vps-checklist,
    .doc-checklist,
    .service-checklist,
    .focus-features-list,
    .bridge-points,
    .who-card-features,
    .mbbs-checklist-grid ul,
    .svc-loan-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 4px 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .vps-checklist li,
    .doc-checklist li,
    .service-checklist li,
    .focus-features-list li,
    .bridge-points li,
    .mbbs-checklist-grid li,
    .svc-loan-list li {
        font-size: 10px !important;
        line-height: 1.25 !important;
        color: #475569 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    .vps-checklist li i,
    .doc-checklist li i,
    .service-checklist li i,
    .focus-features-list li i,
    .bridge-points li i,
    .svc-loan-list li i,
    .circle-check {
        font-size: 9px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }

    /* 5.7 Card Badges, Pills & Step Counters */
    .svc-program-tag,
    .svc-step-badge,
    .step-pill,
    .who-pill,
    .benefit-tag,
    .vps-docs-tag,
    .mbbs-option-badge,
    .pan-card-badge {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        width: fit-content !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .focus-card-top,
    .step-card-header,
    .bridge-card-top,
    .who-card-top,
    .benefit-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 6px !important;
        gap: 6px !important;
    }

    .focus-card-num,
    .bridge-number {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #94A3B8 !important;
    }

    /* 5.8 Buttons & Links inside Cards */
    .service-link,
    .focus-card-link,
    .btn-service-action,
    .vps-dest-btn,
    .lic-cta,
    .vps-loan-card button,
    .mbbs-option-card button {
        margin-top: auto !important;
        width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        justify-content: center !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        box-sizing: border-box !important;
    }

    /* 5.9 Cards with Top Images */
    .unified-card-image,
    .vps-dest-img-wrap,
    .mbbs-dest-img-wrap,
    .post-card-img-wrap {
        height: 85px !important;
        min-height: 85px !important;
        max-height: 85px !important;
        width: calc(100% + 20px) !important;
        margin: -14px -10px 8px -10px !important;
        border-radius: 11px 11px 0 0 !important;
        overflow: hidden !important;
    }

    .unified-card-image img,
    .vps-dest-img-wrap img,
    .mbbs-dest-img-wrap img,
    .post-card-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 5.10 Partner Lender Info Cards in 2 Columns */
    .lender-info-card {
        padding: 12px 9px !important;
    }

    .lender-info-card .lic-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .lender-info-card .lic-brand {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .lender-info-card .lic-logo-wrap {
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
    }

    .lender-info-card .lic-logo {
        max-height: 20px !important;
        max-width: 26px !important;
    }

    .lender-info-card .lic-name {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .lender-info-card .lic-tagline {
        display: none !important;
    }

    .lender-info-card .lic-rate-pill {
        font-size: 8.5px !important;
        padding: 2px 5px !important;
        border-radius: 4px !important;
    }

    .lender-info-card .lic-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-bottom: 8px !important;
    }

    .lender-info-card .lic-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.06) !important;
        padding-bottom: 2px !important;
    }

    .lender-info-card .lic-label {
        color: #64748B !important;
    }

    .lender-info-card .lic-value {
        font-weight: 600 !important;
        color: #0F172A !important;
        text-align: right !important;
    }

    /* 5.11 Secured & Unsecured Comparison Cards */
    .vps-loan-card,
    .mbbs-option-card {
        padding: 14px 10px !important;
    }

    .vps-loan-card-header,
    .mbbs-option-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 6px !important;
    }

    .vps-loan-suitable {
        font-size: 10px !important;
        line-height: 1.3 !important;
        color: #475569 !important;
        margin-bottom: 8px !important;
        background: #F8FAFC !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
    }

    /* 5.12 Stat Cards */
    .country-stat-box,
    .snapshot-stat,
    .stat-item,
    .stat-card-item,
    .about-stat-item {
        padding: 10px 8px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .country-stat-val,
    .snapshot-stat-val,
    .stat-number,
    .about-stat-num {
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }

    .country-stat-lbl,
    .snapshot-stat-label,
    .stat-label,
    .about-stat-label {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .stat-card-item .stat-lbl,
    .stat-lbl {
        color: #0F172A !important;
        font-weight: 700 !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .stat-card-item .stat-sub,
    .stat-sub {
        color: #334155 !important;
        font-weight: 500 !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin-top: 3px !important;
    }

    .stats-bar .stat-item-label,
    .stat-item .stat-item-label,
    .stat-item-label {
        color: #0B1F33 !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    .snapshot-stat-val {
        color: #0B1F33 !important;
        font-weight: 800 !important;
    }

    .snapshot-stat-label {
        color: #64748B !important;
        font-weight: 700 !important;
    }

    .snapshot-stat-note {
        color: #475569 !important;
        font-weight: 600 !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 380px) {
    .mbbs-expenses-grid,
    .mbbs-benefits-grid,
    .vps-expenses-grid,
    .vps-expenses-5grid,
    .vps-streams-5grid,
    .vps-topcourses-6grid,
    .vps-why-grid,
    .vps-eligibility-grid,
    .vps-dest-grid,
    .vps-loan-options-grid,
    .vps-cosigner-grid,
    .vps-apply-grid,
    .vps-docs-grid,
    .services-grid,
    .svc-programs-grid,
    .process-grid,
    .svc-process-grid,
    .services-unified-grid,
    .about-philosophy-grid,
    .about-focus-grid,
    .about-journey-grid,
    .mission-values-grid,
    .about-trust-grid,
    .lenders-info-grid,
    .why-cards-stack,
    .who-grid,
    .students-get-grid,
    .trust-grid,
    .docs-cards-grid,
    .pan-india-cards,
    .bridging-cards-grid {
        gap: 8px !important;
    }

    .mbbs-expense-item,
    .vps-expense-card,
    .vps-why-card,
    .service-card,
    .process-card,
    .philosophy-card,
    .focus-card,
    .who-card,
    .trust-card,
    .core-card {
        padding: 10px 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE DUAL ACTION BUTTONS SIDE-BY-SIDE ARCHITECTURE (Space Optimization)
   Ensures Primary & Secondary CTAs ("Check Eligibility" & "Talk to an Expert")
   remain side-by-side everywhere on mobile view to eliminate vertical scroll bloat.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .exact-hero-actions,
    .vps-hero-actions,
    .hero-btns,
    .hero-action-group,
    .vps-final-cta-btns,
    .mbbs-hero-ctas,
    .mbbs-final-btns,
    .about-hero-actions,
    .about-cta-btns,
    .svc-cta-btns,
    .cta-bar .cta-btns,
    .office-cta-col .cta-btns,
    .cta-strip .cta-btns,
    .partner-page-wrap .cta-btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 8px !important;
    }

    /* Primary CTA (Check Eligibility – Free) gets 56% proportional share */
    .exact-hero-actions > :first-child,
    .vps-hero-actions > :first-child,
    .hero-btns > :first-child,
    .hero-action-group > :first-child,
    .vps-final-cta-btns > :first-child,
    .mbbs-hero-ctas > :first-child,
    .mbbs-final-btns > :first-child,
    .about-hero-actions > :first-child,
    .about-cta-btns > :first-child,
    .svc-cta-btns > :first-child,
    .cta-bar .cta-btns > :first-child,
    .office-cta-col .cta-btns > :first-child,
    .cta-strip .cta-btns > :first-child,
    .partner-page-wrap .cta-btns > :first-child {
        flex: 1.25 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        font-size: clamp(10.5px, 2.7vw, 12px) !important;
        font-weight: 700 !important;
        letter-spacing: -0.25px !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        gap: 6px !important;
    }

    /* Secondary CTA (Call Now / Talk to an Expert / WhatsApp) */
    .exact-hero-actions > :last-child,
    .vps-hero-actions > :last-child,
    .hero-btns > :last-child,
    .hero-action-group > :last-child,
    .vps-final-cta-btns > :last-child,
    .mbbs-hero-ctas > :last-child,
    .mbbs-final-btns > :last-child,
    .about-hero-actions > :last-child,
    .about-cta-btns > :last-child,
    .svc-cta-btns > :last-child,
    .cta-bar .cta-btns > :last-child,
    .office-cta-col .cta-btns > :last-child,
    .cta-strip .cta-btns > :last-child,
    .partner-page-wrap .cta-btns > :last-child {
        flex: 0.95 1 0px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        font-size: clamp(10.5px, 2.7vw, 12px) !important;
        font-weight: 700 !important;
        letter-spacing: -0.25px !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        gap: 6px !important;
    }

    .btn-subtext-free {
        display: inline-block !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-left: 2px !important;
    }

    .exact-hero-actions i,
    .vps-hero-actions i,
    .hero-btns i,
    .hero-action-group i,
    .vps-final-cta-btns i,
    .mbbs-hero-ctas i,
    .mbbs-final-btns i,
    .about-hero-actions i,
    .about-cta-btns i,
    .svc-cta-btns i,
    .cta-bar .cta-btns i,
    .office-cta-col .cta-btns i,
    .cta-strip .cta-btns i,
    .partner-page-wrap .cta-btns i {
        font-size: 11px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        margin-left: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

@media (max-width: 400px) {
    .btn-subtext-free {
        display: none !important;
    }

    .exact-hero-actions,
    .vps-hero-actions,
    .hero-btns,
    .hero-action-group,
    .vps-final-cta-btns,
    .mbbs-hero-ctas,
    .mbbs-final-btns,
    .about-hero-actions,
    .about-cta-btns,
    .svc-cta-btns,
    .cta-bar .cta-btns,
    .office-cta-col .cta-btns,
    .cta-strip .cta-btns,
    .partner-page-wrap .cta-btns {
        gap: 5px !important;
    }

    .exact-hero-actions > :first-child,
    .vps-hero-actions > :first-child,
    .hero-btns > :first-child,
    .hero-action-group > :first-child,
    .vps-final-cta-btns > :first-child,
    .mbbs-hero-ctas > :first-child,
    .mbbs-final-btns > :first-child,
    .about-hero-actions > :first-child,
    .about-cta-btns > :first-child,
    .svc-cta-btns > :first-child,
    .cta-bar .cta-btns > :first-child,
    .office-cta-col .cta-btns > :first-child,
    .cta-strip .cta-btns > :first-child,
    .partner-page-wrap .cta-btns > :first-child {
        flex: 1.2 1 0px !important;
        font-size: 10px !important;
        padding: 0 4px !important;
        min-height: 42px !important;
    }

    .exact-hero-actions > :last-child,
    .vps-hero-actions > :last-child,
    .hero-btns > :last-child,
    .hero-action-group > :last-child,
    .vps-final-cta-btns > :last-child,
    .mbbs-hero-ctas > :last-child,
    .mbbs-final-btns > :last-child,
    .about-hero-actions > :last-child,
    .about-cta-btns > :last-child,
    .svc-cta-btns > :last-child,
    .cta-bar .cta-btns > :last-child,
    .office-cta-col .cta-btns > :last-child,
    .cta-strip .cta-btns > :last-child,
    .partner-page-wrap .cta-btns > :last-child {
        flex: 0.9 1 0px !important;
        font-size: 10px !important;
        padding: 0 4px !important;
        min-height: 42px !important;
    }

    .exact-hero-actions i,
    .vps-hero-actions i,
    .hero-btns i,
    .hero-action-group i,
    .vps-final-cta-btns i,
    .mbbs-hero-ctas i,
    .mbbs-final-btns i,
    .about-hero-actions i,
    .about-cta-btns i,
    .svc-cta-btns i,
    .cta-bar .cta-btns i,
    .office-cta-col .cta-btns i,
    .cta-strip .cta-btns i,
    .partner-page-wrap .cta-btns i {
        font-size: 10.5px !important;
        margin: 0 2px !important;
    }
}

/* Hallmark · mobile: pass (34, 49, 50–57) · viewports: 320px · 375px · 414px · 768px */

/* ==========================================================================
   NEGATIVE SPACE & SECTION RHYTHM OPTIMIZER (Anti-Slop / Zero Empty Voids)
   Eliminates excessive empty gaps between sections and hero visual blocks
   ========================================================================== */

/* ── 1. DESKTOP & TABLET CADENCE (Crisp, Proportional 40-48px Paddings) ── */
.exact-hero {
    padding: 32px 0 18px !important;
}

.exact-hero-grid {
    min-height: auto !important;
    padding: 0 !important;
    gap: clamp(20px, 3vw, 36px) !important;
}

.exact-hero-content {
    margin-bottom: 0 !important;
}

.exact-hero-desc {
    margin-bottom: 14px !important;
}

.exact-hero-actions {
    margin-bottom: 10px !important;
}

.exact-hero-safety {
    margin-bottom: 10px !important;
}

.hero-loan-pills {
    margin-bottom: 10px !important;
    gap: 6px !important;
}

.exact-hero .hero-trust-strip {
    padding-top: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.exact-hero-visual {
    margin-bottom: 0 !important;
}

.hero-visual-frame {
    margin: 0 auto !important;
}

/* ── 2. HERO-TO-MARQUEE TRANSITION & MARQUEE SECTION ── */
.home-marquee-section {
    padding: 18px 0 20px !important;
}

.home-marquee-label {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* ── 3. CORE HOMEPAGE SECTIONS TIGHTENING ── */
.pan-india-section {
    padding: 40px 0 !important;
}

.pan-india-box {
    padding: 32px 28px !important;
    gap: 22px !important;
}

.pan-india-header {
    margin-bottom: 22px !important;
}

.pan-india-cards {
    gap: 16px !important;
}

.pan-india-suitability-box {
    margin-top: 22px !important;
    padding: 22px 20px !important;
}

.bridging-section {
    padding: 40px 0 !important;
}

.bridging-inner {
    padding: 32px 28px !important;
}

.bridging-header {
    margin-bottom: 22px !important;
}

.bridging-cards-grid {
    gap: 16px !important;
}

.disclosure-banner {
    margin-top: 18px !important;
    padding: 16px 20px !important;
}

.why-vps-section {
    padding: 40px 0 !important;
}

.why-header-area {
    margin-bottom: 22px !important;
}

.why-nine-grid {
    gap: 16px !important;
}

.vps-final-cta,
.vps-final-cta-domestic,
.mbbs-final-cta-section {
    padding: 36px 0 !important;
}

.vps-cta-content {
    margin-bottom: 0 !important;
}

.vps-final-cta-btns {
    margin-top: 18px !important;
}

.site-disclaimer-wrap {
    padding: 18px 0 !important;
}

.footer {
    padding-top: 48px !important;
}

/* ── 4. ALL SUBPAGE HERO & CONTENT SECTIONS ── */
.page-hero,
.about-hero,
.partner-hero,
.services-hero,
.blog-hub-hero,
.legal-hero,
.mbbs-hero,
.vps-hero,
.vps-hero-domestic,
.other-loans-hero {
    padding: 44px 0 32px !important;
}

.about-purpose-section,
.about-mission-section,
.about-focus-section,
.about-journey-section,
.about-trust-section,
.about-cta-section,
.svc-programs-section,
.svc-process-section,
.svc-loan-types-section,
.svc-cta-strip,
.contact-section,
.office-section,
.lenders-section,
.partner-section,
.services-section,
.vps-journey-section,
.vps-apply-section,
.vps-lenders-section,
.vps-docs-section,
.vps-comparison-section,
.vps-dest-section,
.vps-cosigner-section,
.vps-domestic-info-section,
.vps-expenses-courses-section,
.vps-partners-process-section,
.vps-proof-faq-section,
.vps-streams-section,
.vps-why-section,
.blog-hub-section,
.blog-layout-wrap,
.country-stats-section,
.legal-section-wrap,
.legal-article-block,
.financial-tools-section,
.faq-section,
.solutions-faq-section {
    padding: 40px 0 !important;
}

.section-header,
.section-head,
.section-header-wrap,
.vps-section-header {
    margin-bottom: 22px !important;
}

/* ── 5. TABLET & DESKTOP COLLAPSE (<= 992px) ── */
@media (max-width: 992px) {
    .exact-hero-content {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .exact-hero-visual {
        flex: none !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .pan-india-box {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pan-india-header {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }
}

/* ── 6. MOBILE & TABLET ZERO-VOID TIGHTENING (<= 768px) ── */
@media (max-width: 768px) {
    .exact-hero {
        padding: 16px 0 6px !important;
    }

    .exact-hero-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .exact-hero-content {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
    }

    .exact-hero-visual {
        flex: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .hero-visual-frame {
        margin: 0 auto !important;
        border-radius: 18px !important;
        padding: 6px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .hero-visual-img {
        max-height: 280px !important;
        border-radius: 14px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .home-marquee-section {
        padding: 12px 0 14px !important;
        margin-top: 0 !important;
    }

    .home-marquee-label {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        font-size: 11px !important;
    }

    .loan-categories-section,
    .pan-india-section,
    .bridging-section,
    .why-vps-section,
    .vps-final-cta,
    .vps-final-cta-domestic,
    .mbbs-final-cta-section,
    .about-purpose-section,
    .about-mission-section,
    .about-focus-section,
    .about-journey-section,
    .about-trust-section,
    .about-cta-section,
    .svc-programs-section,
    .svc-process-section,
    .svc-loan-types-section,
    .svc-cta-strip,
    .contact-section,
    .office-section,
    .lenders-section,
    .partner-section,
    .services-section,
    .vps-journey-section,
    .vps-apply-section,
    .vps-lenders-section,
    .vps-docs-section,
    .vps-comparison-section,
    .vps-dest-section,
    .vps-cosigner-section,
    .vps-domestic-info-section,
    .vps-expenses-courses-section,
    .vps-partners-process-section,
    .vps-proof-faq-section,
    .vps-streams-section,
    .vps-why-section,
    .blog-hub-section,
    .blog-layout-wrap,
    .country-stats-section,
    .legal-section-wrap,
    .legal-article-block,
    .financial-tools-section,
    .faq-section,
    .solutions-faq-section {
        padding: 22px 0 !important;
    }

    .page-hero,
    .about-hero,
    .partner-hero,
    .services-hero,
    .blog-hub-hero,
    .legal-hero,
    .mbbs-hero,
    .vps-hero,
    .vps-hero-domestic,
    .other-loans-hero {
        padding: 24px 0 16px !important;
    }

    .section-header,
    .section-head,
    .section-header-wrap,
    .vps-section-header,
    .why-header-area,
    .bridging-header {
        margin-bottom: 14px !important;
    }

    .pan-india-header {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }

    .pan-india-sub {
        margin-bottom: 0 !important;
        max-width: 100% !important;
    }

    .pan-india-box,
    .bridging-inner {
        padding: 16px 14px !important;
        gap: 14px !important;
        min-height: auto !important;
    }

    .pan-india-box {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pan-india-cards {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .pan-india-suitability-box,
    .disclosure-banner {
        margin-top: 14px !important;
        padding: 14px !important;
    }

    .site-disclaimer-wrap {
        padding: 12px 0 !important;
    }

    .footer {
        padding-top: 28px !important;
    }
}

/* ── 7. ULTRA-COMPACT MOBILE TIGHTENING (<= 480px) ── */
@media (max-width: 480px) {
    .exact-hero {
        padding: 12px 0 4px !important;
    }

    .exact-hero-grid {
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .exact-hero-visual {
        max-width: 350px !important;
    }

    .hero-visual-img {
        max-height: 240px !important;
    }

    .home-marquee-section {
        padding: 10px 0 12px !important;
        margin-top: 0 !important;
    }

    .pan-india-header {
        margin-bottom: 10px !important;
    }

    .pan-india-box {
        padding: 14px 12px !important;
        gap: 12px !important;
    }

    .pan-india-section,
    .bridging-section,
    .why-vps-section,
    .vps-final-cta {
        padding: 18px 0 !important;
    }
}

/* ── 4 CRITICAL FACTORS GRID: FOUR CARDS IN ONE LINE ON DESKTOP ── */
.factors-four-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.factors-four-grid .factor-card {
    background: #ffffff !important;
    border: 1px solid var(--color-border, #DCE4EA) !important;
    border-radius: 14px !important;
    padding: 22px 18px !important;
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.factors-four-grid .factor-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(11, 31, 51, 0.08) !important;
}

.factors-four-grid .factor-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}

.factors-four-grid .factor-card h3 {
    font-family: var(--font-heading, 'Manrope', sans-serif) !important;
    font-size: 1.05rem !important;
    color: var(--color-navy, #0B1F33) !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.factors-four-grid .factor-card p {
    font-size: 0.88rem !important;
    color: var(--color-muted, #64748B) !important;
    line-height: 1.58 !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .factors-four-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .factors-four-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .factors-four-grid .factor-card {
        padding: 18px 16px !important;
    }
}

/* ==========================================================================
   14. BOTTOM FIXED/STICKY CTA BAR (Modern High-Converting Action Bar)
   Replaces standalone floating WhatsApp and Eligibility buttons with unified 3-button bar
   ========================================================================== */
.bottom-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 20px rgba(11, 31, 51, 0.08);
    z-index: 990;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
    box-sizing: border-box;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.bottom-cta-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Individual CTA button */
.cta-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 60px;
    padding: 8px 6px;
    border-radius: 16px;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1.5px solid transparent;
}

.cta-bar-btn:active {
    transform: scale(0.97) !important;
}

.cta-bar-btn .cta-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cta-bar-btn:hover .cta-icon {
    transform: scale(1.08);
}

.cta-bar-btn .cta-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Button 1: Call Desk (Crisp white / soft surface with brand navy phone icon) */
.cta-btn-call {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #0B1F33 !important;
}

.cta-btn-call .cta-icon {
    stroke: #0B1F33;
    transform: scaleX(-1);
}

.cta-btn-call:hover {
    background-color: #F8FAFC;
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(11, 31, 51, 0.08);
}

.cta-btn-call:hover .cta-icon {
    transform: scaleX(-1) scale(1.08);
}

/* Button 2: WhatsApp (Fresh pale green with vibrant WhatsApp green icon & label) */
.cta-btn-whatsapp {
    background-color: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D !important;
}

.cta-btn-whatsapp .cta-icon {
    stroke: #16A34A;
}

.cta-btn-whatsapp:hover {
    background-color: #DCFCE7;
    border-color: #86EFAC;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.18);
}

/* Button 3: Book Visit (Signature Brand Orange gradient with white icon & label) */
.cta-btn-book {
    background: var(--color-orange-gradient, linear-gradient(135deg, #FF5A00 0%, #FF8A00 100%));
    border-color: transparent;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(255, 90, 0, 0.32);
}

.cta-btn-book .cta-icon {
    stroke: #FFFFFF;
}

.cta-btn-book:hover {
    background: linear-gradient(135deg, #E04F00 0%, #FF7A00 100%);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 90, 0, 0.44);
}

/* Desktop Floating Action Dock: Only Floating WhatsApp on PC */
@media (min-width: 769px) {
    .bottom-cta-bar {
        bottom: 26px;
        right: 26px;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        max-width: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        z-index: 9000;
        pointer-events: none;
    }
    .bottom-cta-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    /* Hide Call Desk and Book Visit on PC / Desktop */
    .cta-btn-call,
    .cta-btn-book {
        display: none !important;
    }
    /* Floating WhatsApp Pill on Desktop */
    .cta-btn-whatsapp {
        pointer-events: auto;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 9px;
        height: 52px;
        min-height: 52px;
        padding: 0 20px 0 16px;
        background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%);
        border: none;
        border-radius: 9999px;
        color: #FFFFFF !important;
        font-family: var(--font-primary, 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(0, 0, 0, 0.08);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, background 0.22s ease;
        text-decoration: none;
        cursor: pointer;
    }
    .cta-btn-whatsapp .cta-icon {
        width: 24px;
        height: 24px;
        stroke: #FFFFFF;
        fill: none;
        flex-shrink: 0;
    }
    .cta-btn-whatsapp .cta-label {
        color: #FFFFFF !important;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }
    .cta-btn-whatsapp:hover {
        background: linear-gradient(135deg, #1EBE5D 0%, #16A34A 100%);
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.14);
        color: #FFFFFF !important;
    }
    .cta-btn-whatsapp:active {
        transform: translateY(-1px) scale(0.99);
    }
}

/* Responsive downscaling for compact viewports */
@media (max-width: 380px) {
    .bottom-cta-bar {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px;
    }
    .bottom-cta-container {
        gap: 8px;
    }
    .cta-bar-btn {
        min-height: 56px;
        padding: 7px 4px;
        font-size: 12px;
        border-radius: 12px;
    }
    .cta-bar-btn .cta-icon {
        width: 20px;
        height: 20px;
    }
}

/* Hide bar when mobile menu or modal popup is active */
body.menu-open .bottom-cta-bar,
body.modal-open .bottom-cta-bar,
.bottom-cta-bar.hide {
    display: none !important;
}

/* Completely suppress legacy floating icons across all screens */
.floating-eligibility-btn,
.whatsapp-float {
    display: none !important;
}

/* Ensure footer and page content have comfortable clearance */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   15. NAVBAR CTA BUTTONS: IDENTICAL HEIGHT, SIZING, AND CORNER RADIUS
   Desktop: Harmonizes Check Eligibility and Chat on WhatsApp to exact same size
   Mobile (< 960px): Explicitly hidden from header navbar; Hamburger menu takes prominence
   ========================================================================== */
@media (min-width: 961px) {
    .nav-cta {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
}

@media (max-width: 960px) {
    .nav-cta:not(.open) {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.nav-cta .btn-eligibility,
.nav-cta .btn-whatsapp-nav,
.btn-eligibility,
.btn-whatsapp-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    margin: 0 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.nav-cta .btn-eligibility i,
.nav-cta .btn-whatsapp-nav i,
.btn-eligibility i,
.btn-whatsapp-nav i {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.nav-cta .btn-eligibility,
.btn-eligibility {
    background: var(--color-orange-gradient, linear-gradient(135deg, #FF5A00 0%, #FF7A00 100%)) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(255, 90, 0, 0.28) !important;
}

.nav-cta .btn-eligibility:hover,
.btn-eligibility:hover {
    background: linear-gradient(135deg, #E04F00 0%, #FF7A00 100%) !important;
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.38) !important;
    transform: translateY(-1.5px) !important;
}

.nav-cta .btn-whatsapp-nav,
.btn-whatsapp-nav {
    background: #17803d !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(23, 128, 61, 0.28) !important;
}

.nav-cta .btn-whatsapp-nav:hover,
.btn-whatsapp-nav:hover {
    background: #15803d !important;
    box-shadow: 0 6px 18px rgba(23, 128, 61, 0.4) !important;
    transform: translateY(-1.5px) !important;
}

/* Completely suppress hero floating pills across all screens */
.hero-floating-pill {
    display: none !important;
}