/* ============================================================
   National Leisure Finance – Global Content Design Foundation
   assets/css/main.css  |  Theme Version 2.0
   ============================================================
   This file provides shared design tokens and component
   foundations for all new NLF page-content sections.

   IMPORTANT – Scope
   -----------------
   The global header (.nlf-header) and footer (.nlf-site-footer)
   keep their inline styles in header.php and footer.php.
   This file does NOT modify those components.

   All tokens below are verified against the live chrome in
   header.php and footer.php and must be kept in sync.
   ============================================================ */


/* ============================================================
   1. GLOBAL DESIGN TOKENS
   ============================================================ */
:root {

    /* — Colour: Navy family —
       Verified: header.php bg #0b1329 | drawer bg #0f1c3f | footer bg #0f2137 */
    --nlf-navy-dark:        #0b1329;    /* Primary dark navy – header background */
    --nlf-navy:             #0f2137;    /* Secondary navy – footer background     */
    --nlf-navy-mid:         #0f1c3f;    /* Mid navy – hero overlays, drawer       */

    /* — Colour: Accent —
       Verified: header.php drawer-call #e8872b | footer hover #e8872b */
    --nlf-accent:           #e8872b;    /* Brand orange */
    --nlf-accent-hover:     #d4761b;    /* Darker orange for hover states */

    /* — Colour: Neutrals — */
    --nlf-white:            #ffffff;
    --nlf-text:             #1f2937;    /* Body text on light backgrounds */
    --nlf-text-muted:       #6b7280;    /* Secondary / caption text on light */
    --nlf-bg-light:         #f4f6f9;    /* Light section background */
    --nlf-border:           #e5e7eb;    /* Subtle card / section borders */

    /* — Layout —
       Verified: header__inner / footer-inner max-width 1280px, padding 24–32px */
    --nlf-max-width:        1280px;
    --nlf-max-width-narrow: 760px;      /* Centred readable-text column */
    --nlf-gutter:           24px;       /* Horizontal edge padding (mobile) */
    --nlf-gutter-md:        32px;       /* Horizontal edge padding (640px+) */

    /* — Geometry — */
    --nlf-radius:           8px;
    --nlf-radius-lg:        16px;

    /* — Elevation — */
    --nlf-shadow:           0 4px 20px rgba(0, 0, 0, 0.08);
    --nlf-shadow-md:        0 8px 32px rgba(0, 0, 0, 0.13);

    /* — Section spacing — */
    --nlf-section-gap:      80px;
    --nlf-section-gap-sm:   48px;
}


/* ============================================================
   2. GLOBAL BOX SIZING
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ============================================================
   3. BODY TYPOGRAPHY
   ============================================================
   Fonts are loaded by header.php <link> tags:
     Inter 400/500/600 + Montserrat 600/700/800
   Do not add another @import or <link> from this file.
   ============================================================ */
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--nlf-text);
    background-color: var(--nlf-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Global heading defaults for new page content.
   Header / footer use scoped selectors with higher specificity
   and inline order priority, so they remain unaffected. */
h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nlf-navy-dark);
    margin-top: 0;
    margin-bottom: 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: var(--nlf-accent);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--nlf-accent-hover);
}


/* ============================================================
   4. GLOBAL CONTENT CONTAINER
   ============================================================ */

/* Primary container – use on all new page sections */
.nlf-container {
    width: 100%;
    max-width: var(--nlf-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nlf-gutter);
    padding-right: var(--nlf-gutter);
}

@media (min-width: 640px) {
    .nlf-container {
        padding-left: var(--nlf-gutter-md);
        padding-right: var(--nlf-gutter-md);
    }
}

/* Narrow variant – centred readable-text columns */
.nlf-container--narrow {
    max-width: var(--nlf-max-width-narrow);
}

/* Legacy container – kept for index.php WP loop compatibility.
   Updated max-width from 1200px to 1280px to match live chrome. */
.container {
    width: 100%;
    max-width: var(--nlf-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nlf-gutter);
    padding-right: var(--nlf-gutter);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--nlf-gutter-md);
        padding-right: var(--nlf-gutter-md);
    }
}


/* ============================================================
   5. GLOBAL SECTION SYSTEM
   ============================================================ */
.nlf-section {
    padding-block: var(--nlf-section-gap);
}

@media (max-width: 767px) {
    .nlf-section {
        padding-block: var(--nlf-section-gap-sm);
    }
}

.nlf-section--white {
    background-color: var(--nlf-white);
}

.nlf-section--light {
    background-color: var(--nlf-bg-light);
}

.nlf-section--navy {
    background-color: var(--nlf-navy-dark);
    color: rgba(255, 255, 255, 0.85);
}

.nlf-section--navy h1,
.nlf-section--navy h2,
.nlf-section--navy h3,
.nlf-section--navy h4 {
    color: var(--nlf-white);
}

.nlf-section--compact {
    padding-block: var(--nlf-section-gap-sm);
}

@media (max-width: 767px) {
    .nlf-section--compact {
        padding-block: 32px;
    }
}


/* ============================================================
   6. SECTION HEADING / INTRO HELPERS
   ============================================================ */
.nlf-section-header {
    margin-bottom: 3rem;
}

.nlf-section-header--center {
    text-align: center;
}

.nlf-section-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.nlf-section--navy .nlf-section-title {
    color: var(--nlf-white);
}

.nlf-section-intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--nlf-text-muted);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-section-header--center .nlf-section-intro {
    margin-left: auto;
    margin-right: auto;
}

.nlf-section--navy .nlf-section-intro {
    color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   7. GLOBAL BADGE SYSTEM
   ============================================================ */
.nlf-badge {
    display: inline-block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.6875rem;      /* 11px */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--nlf-radius);
    line-height: 1;
    margin-bottom: 1rem;
}

/* Light variant – orange text on tinted background.
   Used for "Why Choose Us" section badge. */
.nlf-badge--light {
    color: var(--nlf-accent);
    background-color: rgba(232, 135, 43, 0.1);
    border: 1px solid rgba(232, 135, 43, 0.25);
}

/* Dark variant – white text on semi-transparent overlay.
   Used on navy/dark section backgrounds. */
.nlf-badge--dark {
    color: var(--nlf-white);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}


/* ============================================================
   8. GLOBAL BUTTON SYSTEM
   ============================================================ */
.nlf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: var(--nlf-radius);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.nlf-btn:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

/* Primary – orange fill. Apply Now. */
.nlf-btn--primary {
    background-color: var(--nlf-accent);
    color: var(--nlf-white);
    border-color: var(--nlf-accent);
}

.nlf-btn--primary:hover {
    background-color: var(--nlf-accent-hover);
    border-color: var(--nlf-accent-hover);
    color: var(--nlf-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 135, 43, 0.35);
}

/* Secondary – translucent white fill. Call Us (dark backgrounds). */
.nlf-btn--secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--nlf-white);
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.nlf-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--nlf-white);
}

/* Outline light – transparent, white border. Calculate Payments (dark backgrounds). */
.nlf-btn--outline-light {
    background-color: transparent;
    color: var(--nlf-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.nlf-btn--outline-light:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--nlf-white);
    color: var(--nlf-white);
}

@media (max-width: 480px) {
    .nlf-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   9. GLOBAL CARD FOUNDATION
   ============================================================
   Base card only. Section-specific variations (e.g. benefit
   card layout, icon styles) are added in section stylesheets.
   ============================================================ */
.nlf-card {
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    padding: 32px 28px;
    box-shadow: var(--nlf-shadow);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.nlf-card:hover {
    box-shadow: var(--nlf-shadow-md);
    transform: translateY(-2px);
}

.nlf-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--nlf-radius);
    background-color: rgba(232, 135, 43, 0.1);
    color: var(--nlf-accent);
    margin-bottom: 20px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.nlf-card__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.nlf-card__text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    margin: 0;
}


/* ============================================================
   10. RESPONSIVE GRID FOUNDATION
   ============================================================ */
.nlf-grid {
    display: grid;
    gap: 24px;
}

.nlf-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.nlf-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
    .nlf-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .nlf-grid--2,
    .nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   11. ACCESSIBILITY
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Respect user motion preference for all future animated
   components (hero fade, card hover, etc.) */
@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;
    }
}


/* ============================================================
   LEGACY WP LOOP SCAFFOLD
   ============================================================
   These selectors support the generic index.php WP loop.
   .site-header / .site-footer / .main-navigation /
   .footer-navigation / .compliance-disclosures have been
   removed — they were unused by the live NLF chrome and
   conflicted with the approved visual language.
   ============================================================ */
.site-main {
    padding-top: 80px;    /* clears the 80px fixed header on non-homepage pages */
    padding-bottom: 40px;
    min-height: 60vh;
}

.entry-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin-bottom: 1rem;
}

.entry-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--nlf-text);
}

.entry-content p {
    margin-bottom: 1rem;
}


/* ============================================================
   HERO SECTION  –  .nlf-hero
   ============================================================
   All selectors are scoped under .nlf-hero.
   Global tokens, buttons, container and typography rules
   from this file are reused — not duplicated here.

   Header offset: the global <nav> is position:fixed (80px tall)
   and takes no layout space. On the homepage, <main id="main-content">
   has no padding-top so the hero section starts at layout 0 — the
   hero background image fills from 0 and is immediately behind the
   header. padding-top:80px pushes the hero *content* (text/buttons)
   below the header bottom. min-height:calc(100vh - 80px) fills the
   remaining visible viewport below the header.
   Non-homepage pages use <main class="site-main"> which carries
   padding-top:80px in main.css to clear the fixed header.
   ============================================================ */

/* --- Layout & background --- */
.nlf-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 80px);
    background-color: var(--nlf-navy-dark); /* solid fallback if image fails to load */
    background-image: var(--nlf-home-hero-image, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 104px;  /* extra bottom clears the scroll arrow */
    text-align: center;
}

/*
 * Dark overlay sitting above the photograph.
 * Gradient darkens the top (headline area) and bottom (compliance strip)
 * more than the mid-section so the photograph remains visible while
 * white text stays highly readable throughout.
 */
.nlf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.80) 0%,
        rgba(11, 19, 41, 0.58) 45%,
        rgba(11, 19, 41, 0.72) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.nlf-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* --- Static headline (single H1; no rotating second line) --- */
.nlf-hero__headline {
    display: block;
    color: var(--nlf-white);
    font-size: clamp(1.75rem, 4.2vw, 2.85rem);
    line-height: 1.15;
    max-width: 18em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.75rem;
}

/* --- Intro paragraph --- */
.nlf-hero__intro {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

/* --- CTA button group --- */
.nlf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.75rem;
}

/* Tertiary calculator action: quieter outline control than Call NLF */
.nlf-hero__cta--tertiary {
    min-height: 44px;
    padding: 14px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    box-shadow: none;
    transform: none;
}

.nlf-hero__cta--tertiary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--nlf-white);
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

.nlf-hero__cta--tertiary:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    text-decoration: none;
}

/* --- Trust points row --- */
.nlf-hero__trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.nlf-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.nlf-hero__trust-item svg {
    flex-shrink: 0;
    color: var(--nlf-accent);
}

/* --- Compliance strip --- */
.nlf-hero__compliance {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: center;
    align-items: center;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.38);
}

.nlf-hero__compliance-sep {
    color: rgba(255, 255, 255, 0.18);
}

/* --- Scroll-down arrow --- */
.nlf-hero__scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    z-index: 1;
    animation: nlf-hero-bounce 2.2s ease-in-out infinite;
    transition: color 0.2s ease;
}

.nlf-hero__scroll:hover {
    color: var(--nlf-accent);
}

.nlf-hero__scroll:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 6px;
    border-radius: 50%;
}

@keyframes nlf-hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0);   }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* The global prefers-reduced-motion block already sets
   animation-duration: 0.01ms, so the bounce is suppressed
   automatically for users who prefer reduced motion. */

/* --- Responsive: tablet (≤ 991px) --- */
@media (max-width: 991px) {
    .nlf-hero {
        padding-top: 64px;
        padding-bottom: 96px;
    }

    .nlf-hero__intro {
        max-width: 560px;
    }
}

/* --- Responsive: mobile (≤ 767px) --- */
@media (max-width: 767px) {
    .nlf-hero {
        padding-top: 56px;
        padding-bottom: 88px;
        align-items: flex-start;    /* top-align on short mobiles */
    }

    .nlf-hero__headline {
        margin-bottom: 1.25rem;
    }

    .nlf-hero__intro {
        font-size: 0.9375rem;
        margin-bottom: 2rem;
    }

    .nlf-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 2rem;
    }

    /* On mobile hero, buttons fill a readable width rather than
       the global full-width rule, to avoid oversized buttons */
    .nlf-hero__actions .nlf-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .nlf-hero__trust-points {
        gap: 10px 20px;
        margin-bottom: 1.5rem;
    }

    .nlf-hero__trust-item {
        font-size: 0.875rem;
        white-space: normal;
    }
}

/* --- Responsive: small mobile (≤ 480px) --- */
@media (max-width: 480px) {
    .nlf-hero__compliance {
        flex-direction: column;
        gap: 3px;
        font-size: 0.625rem;
    }

    .nlf-hero__compliance-sep {
        display: none;
    }

    .nlf-hero__trust-item {
        white-space: normal;
    }
}


/* ============================================================
   HOMEPAGE HERO — Google Reviews trust badge
   ============================================================
   Reuses .nlf-reviews__badge + .nlf-reviews__badge-stars from
   the global Reviews component (dark-background glass pill style
   with orange stars). Both are standalone selectors that work
   unchanged on the hero's dark overlay.

   .nlf-hero__google-badge adds only the two rules the <a>
   element requires that a <div> does not:
     text-decoration  — suppress browser link underline
     focus-visible    — hero-namespace focus ring
   No global or Reviews section rules are altered.
   ============================================================ */

.nlf-hero__google-badge {
    text-decoration: none;
}

.nlf-hero__google-badge:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 4px;
    border-radius: var(--nlf-radius);
}


/* ============================================================
   WHY CHOOSE US SECTION  –  .nlf-why-us
   ============================================================
   Relies entirely on the following global systems above:
     .nlf-section / .nlf-section--light  — layout & background
     .nlf-container                       — width & gutters
     .nlf-section-header / --center       — intro area layout
     .nlf-badge / .nlf-badge--light       — "Why Choose Us" pill
     .nlf-section-title                   — H2 typography
     .nlf-section-intro                   — intro paragraph
     .nlf-grid / .nlf-grid--3             — 3→2→1 responsive grid
     .nlf-card                            — card base (bg, border,
                                            radius, padding, shadow,
                                            hover lift)
     .nlf-card__icon                      — orange icon container
     .nlf-card__title                     — card heading
     .nlf-card__text                      — card body

   Only rules that cannot be expressed through those existing
   classes are added in this block.
   ============================================================ */

/*
 * .nlf-benefit-card
 * Stacks icon → title → text using flex-column so the icon
 * never stretches to card width (which block flow allows on some
 * older engines) and the title/text grow naturally below it.
 * Also establishes a named scope for any future per-section
 * card changes without touching the global .nlf-card.
 */
.nlf-benefit-card {
    display: flex;
    flex-direction: column;
    background-color: var(--nlf-bg-light); /* light grey/slate over white section — matches reference bg-slate-50 */
}

/*
 * .nlf-benefit-card__icon
 * align-self: flex-start prevents the 52px icon container
 * from stretching to 100% width when the parent is flex-column.
 */
.nlf-benefit-card__icon {
    align-self: flex-start;
}

.nlf-why-us__grid {
    max-width: 960px;
    margin-inline: auto;
}

.nlf-why-us__assets {
    margin-top: 3rem;
    text-align: center;
}

.nlf-why-us__assets-heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin: 0 0 1.25rem;
}

.nlf-why-us__assets-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-why-us__assets-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-bg-light);
    color: var(--nlf-navy-dark);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.nlf-why-us__assets-link:hover {
    color: var(--nlf-accent);
    border-color: var(--nlf-accent);
    background-color: var(--nlf-white);
}

.nlf-why-us__assets-link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-why-us__assets-link--flagship {
    border-color: var(--nlf-accent);
    color: var(--nlf-navy-dark);
}

@media (max-width: 599px) {
    .nlf-why-us__assets-list {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
    }

    .nlf-why-us__assets-link {
        width: 100%;
    }
}


/* ============================================================
   CARAVAN SHOWS & EVENTS PROMO  –  .nlf-shows-promo
   ============================================================
   Relies on the following global systems:
     .nlf-section          — vertical spacing
     .nlf-container        — centred content width
     .nlf-badge            — badge base (font, size, padding,
                             border-radius, letter-spacing)
     .nlf-btn / --primary  — orange CTA button
     Global typography     — heading font stack, line-height
     Global tokens         — navy family, accent orange,
                             radius, focus-visible

   New classes added here:
     .nlf-shows-promo         — section background & border
     .nlf-shows-promo__panel  — centred glass panel
     .nlf-shows-promo__badge  — solid-orange badge override
     .nlf-shows-promo__heading — promotional H2 sizing
     .nlf-shows-promo__text   — body copy
   ============================================================ */

/* --- Section: dark navy gradient with subtle border lines --- */
.nlf-shows-promo {
    background: linear-gradient(
        135deg,
        var(--nlf-navy-dark) 0%,
        var(--nlf-navy-mid)  50%,
        var(--nlf-navy-dark) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * --- Glass promo panel ---
 * Narrower than the full 1280px container, centred.
 * Semi-transparent white background provides contrast even in
 * browsers that do not support backdrop-filter.
 * backdrop-filter: blur() is applied via @supports for browsers
 * that support it, giving the frosted-glass effect.
 */
.nlf-shows-promo__panel {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--nlf-radius-lg);
    padding: 40px;
    text-align: center;
}

@supports (backdrop-filter: blur(1px)) {
    .nlf-shows-promo__panel {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/*
 * --- Badge: solid orange fill ---
 * The base .nlf-badge provides font, size, letter-spacing,
 * padding and border-radius. This modifier overrides only the
 * colour treatment (solid accent fill + white text) to match
 * the reference amber/orange badge over a dark background.
 */
.nlf-shows-promo__badge {
    background-color: var(--nlf-accent);
    color: var(--nlf-white);
    border-color: var(--nlf-accent);
}

/*
 * --- Promotional H2 ---
 * Smaller than the main section H2 (Why Choose Us uses the
 * global clamp(1.75rem, 3.5vw, 2.5rem)). The promo panel
 * sits in a narrower context and carries lower page hierarchy,
 * so a compact size matches the reference text-2xl/text-3xl.
 */
.nlf-shows-promo__heading {
    font-size: clamp(1.5rem, 4.7vw, 1.875rem); /* 24px min → 30px max; reaches max at ≈640px */
    color: var(--nlf-white);
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.25;
}

/* --- Body copy --- */
.nlf-shows-promo__text {
    font-size: 1.125rem; /* 18px — matches reference text-lg */
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* --- Responsive: small mobile (≤ 480px) ---
   .nlf-container already provides the outer horizontal gutter,
   so only the panel's internal padding is reduced here.
   Body text stays at 18px — no small-screen reduction. */
@media (max-width: 480px) {
    .nlf-shows-promo__panel {
        padding: 32px;
    }
}


/* ============================================================
   EXPERT ANSWERS SECTION  –  .nlf-ai-answers
   ============================================================
   Relies on the following global systems:
     .nlf-section / .nlf-section--light  — spacing & background
     .nlf-container                       — centering & gutters
     .nlf-section-header / --center       — intro area layout
     .nlf-badge / .nlf-badge--light       — "Expert Answers" pill
     .nlf-section-title                   — H2 typography
     .nlf-section-intro                   — intro paragraph
     .nlf-card                            — card base (white bg,
                                            border, radius, padding,
                                            shadow, hover lift)
     .nlf-card__title                     — card heading base
     .nlf-card__text                      — card body base

   New classes added here:
     .nlf-ai-answers              — border-top/bottom treatment
     .nlf-ai-answers__container   — narrowed max-width (896px)
     .nlf-ai-answers__list        — single-column flex stack + gap
     .nlf-ai-answer-card__title   — heading size override (18→20px)
     .nlf-ai-answer-card__text    — body size + contrast override
   ============================================================ */

/*
 * Border treatment (reference: border-y border-slate-100).
 * Section background is provided by .nlf-section--light.
 */
.nlf-ai-answers {
    border-top: 1px solid var(--nlf-border);
    border-bottom: 1px solid var(--nlf-border);
}

/*
 * Constrained inner width (reference: max-w-4xl ≈ 896px).
 * Applied alongside .nlf-container; overrides only max-width.
 * Centering (margin-auto) and responsive gutters remain active.
 */
.nlf-ai-answers__container {
    max-width: 896px;
}

/*
 * Single-column stacked answer list.
 * A dedicated flex wrapper keeps vertical gap management
 * separate from .nlf-section-header margin-bottom.
 */
.nlf-ai-answers__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*
 * Answer card heading.
 * Global .nlf-card__title is 1.0625rem (17px).
 * Reference uses text-lg (18px) mobile / text-xl (20px) desktop.
 * A section-specific size override keeps the global system clean.
 */
.nlf-ai-answer-card__title {
    font-size: clamp(1.125rem, 2vw, 1.25rem); /* 18px → 20px */
    margin-bottom: 12px;
}

/*
 * Answer card body text.
 * 16px at all breakpoints (reference: text-base / 16px).
 * Colour uses --nlf-text (#1f2937) rather than --nlf-text-muted
 * (#6b7280) because factual compliance content requires higher
 * contrast — the task explicitly flags against excessive muting.
 */
.nlf-ai-answer-card__text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text);
    margin: 0;
}

.nlf-ai-answer-card__text a {
    color: var(--nlf-accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nlf-ai-answer-card__text a:hover {
    color: var(--nlf-accent-hover);
}

.nlf-ai-answer-card__text a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* <strong> inherits colour from the parent paragraph. */

/* --- Responsive: small mobile (≤ 480px) --- */
@media (max-width: 480px) {
    .nlf-ai-answers__list {
        gap: 16px;
    }

    /*
     * Reduce card internal padding to ~24px on very small viewports.
     * The outer .nlf-container gutter (24px) already handles edge
     * spacing, so no asymmetric horizontal reduction is needed.
     */
    .nlf-ai-answer-card {
        padding: 24px;
    }
}


/* ============================================================
   GOOGLE REVIEWS / CLIENT TESTIMONIALS SECTION  –  .nlf-reviews
   ============================================================
   Section background (#0b1329) and heading / body colours come
   from the global .nlf-section--navy modifier already in this
   file.  Rules here add the Reviews-specific badge, marquee,
   card component, tag variants, and CTA panel.

   All selectors are scoped under .nlf-reviews or
   .nlf-review-card.  No other section's CSS is modified.
   ============================================================ */


/* ── Header area ─────────────────────────────────────────── */

/*
 * Centred header block capped at the reference max-w-4xl (896px).
 * Margin-bottom creates breathing room between header and marquee.
 * text-align: center mirrors .nlf-section-header--center so both
 * classes together are belt-and-braces.
 */
.nlf-reviews__header {
    max-width: 896px;
    margin: 0 auto 48px;
    text-align: center;
}

/* Top rating badge */
.nlf-reviews__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--nlf-radius);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;        /* 13px */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.nlf-reviews__badge-stars {
    color: var(--nlf-accent);   /* #e8872b brand orange */
    letter-spacing: 0.08em;
}

/* Reviews H2 — size override; colour inherits from .nlf-section--navy h2 */
.nlf-reviews__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Secondary rating / count strip */
.nlf-reviews__meta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

.nlf-reviews__meta-stars {
    color: var(--nlf-accent);
    letter-spacing: 0.08em;
    font-size: 0.9375rem;
}

.nlf-reviews__meta-rating strong,
.nlf-reviews__meta-count strong {
    color: var(--nlf-white);
}

.nlf-reviews__meta-sep {
    color: rgba(255, 255, 255, 0.3);
}


/* ── Marquee wrapper and container ───────────────────────── */

/* Outer wrapper provides vertical margin around the full-width marquee */
.nlf-reviews__marquee-wrap {
    position: relative;
    margin-bottom: 48px;
}

/* The marquee clips the scrolling track and anchors the fade overlays */
.nlf-reviews__marquee {
    overflow: hidden;
    position: relative;
}

/*
 * Left and right navy-to-transparent fade overlays.
 * pointer-events: none ensures they never block click or drag
 * interactions on the cards beneath.
 */
.nlf-reviews__marquee::before,
.nlf-reviews__marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.nlf-reviews__marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--nlf-navy-dark), transparent);
}

.nlf-reviews__marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--nlf-navy-dark), transparent);
}

/*
 * Animated track — holds both card lists end-to-end (total width =
 * 2 × one-list-width).  Translating by -50% moves exactly one full
 * list width, creating a seamless infinite loop.
 */
.nlf-reviews__track {
    display: flex;
    width: max-content;
    animation: nlfReviewsMarquee 45s linear infinite;
}

/* Pause scrolling on hover (pointer-capable devices only) */
@media (hover: hover) {
    .nlf-reviews__track:hover {
        animation-play-state: paused;
    }
}

/* Card list — flex row within the track */
.nlf-reviews__list {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 16px 10px;         /* vertical padding allows card shadows to breathe */
    align-items: stretch;       /* equalise <li> heights to the tallest card in the row */
}

/*
 * Pass the stretched <li> height down to the <article> inside it.
 * Without this, the <li> stretches but the card stays intrinsic-height.
 */
.nlf-reviews__list li {
    display: flex;
}

/* Marquee keyframe */
@keyframes nlfReviewsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/*
 * Reduced-motion fallback.
 * Continuous animation is disabled; the marquee becomes a
 * statically scrollable row so all nine reviews remain accessible.
 */
@media (prefers-reduced-motion: reduce) {
    .nlf-reviews__track {
        animation: none;
    }

    .nlf-reviews__marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    /* Edge fades would obscure the first/last scrollable card */
    .nlf-reviews__marquee::before,
    .nlf-reviews__marquee::after {
        display: none;
    }

    /* The duplicate track is redundant without animation */
    .nlf-reviews__list[aria-hidden="true"] {
        display: none;
    }
}


/* ── Review card component ───────────────────────────────── */

.nlf-review-card {
    width: min(350px, calc(100vw - 80px));   /* responsive on small viewports */
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius-lg);     /* 16px */
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-self: stretch;        /* fill the stretched <li> parent */
    /*
     * min-height: sized for the longest review (Mrs C, ~310 chars) at the
     * 350px card / 302px content-width, 15px/1.65 font — approx 340px.
     * Acts as a cross-list floor so both marquee tracks stay equal height.
     * Removed at mobile so narrower cards can grow without clipping.
     */
    min-height: 340px;
}

.nlf-review-card__stars {
    color: var(--nlf-accent);
    font-size: 1rem;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.nlf-review-card__quote {
    font-size: 0.9375rem;        /* 15px */
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    font-style: italic;
    flex-grow: 1;                /* pushes footer to the card bottom */
    quotes: none;                /* quote marks are embedded in the text */
}

/* Card footer: reviewer name + tags */
.nlf-review-card__footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.nlf-review-card__author {
    display: block;
    font-style: normal;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--nlf-white);
    margin-bottom: 8px;
}

.nlf-review-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.nlf-review-card__tag {
    display: inline-block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.625rem;         /* 10px */
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Tag colour variants — only the six colours used by the nine reviews */
.nlf-review-card__tag--accent {
    background-color: rgba(232, 135, 43, 0.20);
    color: #f4a35a;
    border: 1px solid rgba(232, 135, 43, 0.30);
}

.nlf-review-card__tag--neutral {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.nlf-review-card__tag--blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.nlf-review-card__tag--green {
    background-color: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.20);
}

.nlf-review-card__tag--purple {
    background-color: rgba(168, 85, 247, 0.15);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.nlf-review-card__tag--rose {
    background-color: rgba(244, 63, 94, 0.12);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.20);
}


/* ── Post-marquee area ───────────────────────────────────── */

.nlf-reviews__footer {
    text-align: center;
    margin-bottom: 40px;
}

/* Orange star decorating the "Read all Google Reviews" button */
.nlf-reviews__google-star {
    color: var(--nlf-accent);
    font-size: 1.0625rem;
}


/* ── Bottom CTA panel ────────────────────────────────────── */

.nlf-reviews__cta-panel {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--nlf-navy-mid);    /* #0f1c3f — slightly lighter than section */
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius-lg);
    padding: 40px 32px;
    text-align: center;
}

.nlf-reviews__cta-heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--nlf-white);
    margin-top: 0;
    margin-bottom: 8px;
}

.nlf-reviews__cta-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.nlf-reviews__cta-alt {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
}

.nlf-reviews__cta-alt a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nlf-reviews__cta-alt a:hover {
    color: var(--nlf-white);
}

.nlf-reviews__cta-alt a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 2px;
}


/* ── Responsive adjustments ─────────────────────────────── */

@media (max-width: 767px) {
    .nlf-reviews__header {
        margin-bottom: 32px;
    }

    .nlf-reviews__marquee-wrap {
        margin-bottom: 32px;
    }

    /* Reduce fade width on narrow viewports so cards are more visible */
    .nlf-reviews__marquee::before,
    .nlf-reviews__marquee::after {
        width: 48px;
    }

    .nlf-reviews__cta-panel {
        padding: 32px 24px;
    }

    /* Remove the desktop min-height floor so narrow cards can grow
       naturally with wrapped text — no clipping on mobile. */
    .nlf-review-card {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .nlf-reviews__badge {
        font-size: 0.75rem;
        padding: 5px 12px;
        gap: 6px;
    }
}


/* ============================================================
   REPAYMENT CALCULATOR SECTION  –  .nlf-calculator-section / .nlf-calculator
   ============================================================
   Section background uses an existing light-bg token plus a
   subtle gradient.  The dark navy .nlf-calculator panel is a
   self-contained component that does not inherit from .nlf-card
   (which is a white light-surface card).

   All selectors scoped under .nlf-calculator-section or
   .nlf-calculator.  No other section's CSS is modified.
   ============================================================ */


/* ── Section shell ───────────────────────────────────────── */

.nlf-calculator-section {
    background: linear-gradient(180deg, #f8fafc 0%, var(--nlf-bg-light) 100%);
}

/* Narrowed to ~896px to match the reference max-w-4xl */
.nlf-calculator-section__container {
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
}

/* Widen the intro paragraph — the copy is longer than typical section intros */
.nlf-calculator-section__intro {
    max-width: 760px;
}

.nlf-calculator-section__bridge {
    margin-top: 2.5rem;
    text-align: center;
}

.nlf-calculator-section__bridge-heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.5rem;
}

.nlf-calculator-section__bridge-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--nlf-text-muted);
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

@media (max-width: 767px) {
    .nlf-calculator-section__bridge {
        margin-top: 2rem;
    }
}


/* ── Calculator panel ────────────────────────────────────── */

.nlf-calculator {
    background-color: var(--nlf-navy-dark);
    border-radius: 24px;          /* intentionally more rounded than the global 16px */
    padding: 40px;
    box-shadow: var(--nlf-shadow-md);
    color: rgba(255, 255, 255, 0.9);
}

.nlf-calculator__header {
    margin-bottom: 28px;
    text-align: center;
}

/* H3 colour inherits white from .nlf-section--navy h3 — not used here since
   .nlf-calculator-section has a light background, so set explicitly. */
.nlf-calculator__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nlf-white);
    margin-top: 0;
    margin-bottom: 6px;
}

.nlf-calculator__subtitle {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}


/* ── Form grid ───────────────────────────────────────────── */

.nlf-calculator__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
}

.nlf-calculator__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Span both grid columns (used for Residential Status) */
.nlf-calculator__field--full {
    grid-column: 1 / -1;
}

.nlf-calculator__label {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.02em;
}


/* ── Number inputs ───────────────────────────────────────── */

.nlf-calculator__input[type="number"] {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--nlf-radius);
    color: var(--nlf-white);
    padding: 10px 14px;
    font-size: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    /* Remove browser spinners — slider provides equivalent affordance */
    -moz-appearance: textfield;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nlf-calculator__input[type="number"]::-webkit-inner-spin-button,
.nlf-calculator__input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nlf-calculator__input[type="number"]:focus {
    outline: none;
    border-color: var(--nlf-accent);
    box-shadow: 0 0 0 3px rgba(232, 135, 43, 0.22);
}


/* ── Range sliders ───────────────────────────────────────── */

.nlf-calculator__slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
    margin-top: 4px;
}

/* WebKit track */
.nlf-calculator__slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.15);
    height: 4px;
    border-radius: 2px;
}

/* WebKit thumb */
.nlf-calculator__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nlf-accent);
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 2px 6px rgba(232, 135, 43, 0.4);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.nlf-calculator__slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
}

/* Firefox track */
.nlf-calculator__slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.15);
    height: 4px;
    border-radius: 2px;
}

/* Firefox thumb */
.nlf-calculator__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nlf-accent);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(232, 135, 43, 0.4);
}


/* ── Select inputs ───────────────────────────────────────── */

.nlf-calculator__select {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--nlf-radius);
    color: var(--nlf-white);
    padding: 10px 14px;
    font-size: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nlf-calculator__select:focus {
    outline: none;
    border-color: var(--nlf-accent);
    box-shadow: 0 0 0 3px rgba(232, 135, 43, 0.22);
}

/* Progressive enhancement — browsers that support option styling */
.nlf-calculator__select option {
    background-color: var(--nlf-navy-dark);
    color: var(--nlf-white);
}


/* ── Live results area ───────────────────────────────────── */

.nlf-calculator__results {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--nlf-radius-lg);
    padding: 28px 24px 20px;
    margin-top: 28px;
    text-align: center;
}

.nlf-calculator__repayment-label {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 6px;
}

.nlf-calculator__repayment-value {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    color: var(--nlf-accent);
    line-height: 1;
    margin: 0 0 4px;
}

.nlf-calculator__repayment-freq {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
}

.nlf-calculator__rates {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px 40px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.nlf-calculator__rate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.nlf-calculator__rate-label {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.nlf-calculator__rate-value {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--nlf-white);
}

.nlf-calculator__comparison-basis {
    max-width: 36rem;
    margin: 14px auto 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
}

.nlf-calculator__cr-help {
    max-width: 36rem;
    margin: 8px auto 0;
    text-align: left;
}

.nlf-calculator__cr-help-summary {
    display: inline-block;
    width: auto;
    max-width: 100%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    list-style: none;
}

.nlf-calculator__cr-help-summary::-webkit-details-marker {
    display: none;
}

.nlf-calculator__cr-help-summary::marker {
    content: none;
}

.nlf-calculator__cr-help-summary:hover {
    color: var(--nlf-white);
}

.nlf-calculator__cr-help-summary:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.nlf-calculator__cr-help-text {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}


/* ── Disclaimer / compliance text ────────────────────────── */

.nlf-calculator__indicative {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    margin: 16px 0 6px;
}

.nlf-calculator__disclaimer-summary {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    margin: 0 0 8px;
    line-height: 1.5;
}

.nlf-calculator__disclaimer-extended {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.6;
}

.nlf-calculator__warning {
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Disclaimer expand/collapse toggle button */
.nlf-calculator__toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8125rem;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    padding: 8px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: center;
    transition: color 0.2s ease;
}

.nlf-calculator__toggle:hover {
    color: rgba(255, 255, 255, 0.8);
}

.nlf-calculator__toggle:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Expanded disclaimer panel — shown when [hidden] is removed by JS */
.nlf-calculator__disclaimer-detail {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--nlf-radius);
    padding: 20px 24px;
    margin-top: 12px;
}

.nlf-calculator__disclaimer-detail p {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0;
    margin-bottom: 12px;
}

.nlf-calculator__disclaimer-detail p:last-child {
    margin-bottom: 0;
}

.nlf-calculator__disclaimer-detail a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nlf-calculator__disclaimer-detail a:hover {
    color: var(--nlf-white);
}

/* Final compliance line — visually quieter than body disclaimer */
.nlf-calculator__compliance {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.38);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 12px;
    margin-bottom: 0;
}


/* ── Responsive adjustments ─────────────────────────────── */

@media (max-width: 767px) {
    .nlf-calculator {
        padding: 28px 24px;
        border-radius: 16px;
    }

    .nlf-calculator__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* In single-column layout the --full modifier has no extra effect */
    .nlf-calculator__field--full {
        grid-column: 1;
    }

    .nlf-calculator__rates {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .nlf-calculator__rate-item {
        align-items: flex-start;
        text-align: left;
    }

    .nlf-calculator__comparison-basis,
    .nlf-calculator__warning {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    .nlf-calculator__cr-help {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .nlf-calculator {
        padding: 24px 16px;
    }

    .nlf-calculator__repayment-value {
        font-size: 2rem;
    }

    .nlf-calculator__rates {
        gap: 12px;
    }
}


/* ============================================================
   APPLICATION FORM SECTION  –  .nlf-apply / .nlf-gravity-wrapper
   ============================================================
   Architecture:

     .nlf-apply              Homepage section shell (spacing, background).
     .nlf-apply__container   Narrows the form to a comfortable reading width.
     .nlf-apply__panel       White card surface (border, shadow, radius, padding).
     .nlf-gravity-wrapper    REUSABLE site-wide GF styling scope.

   Any page can wrap any Gravity Form in:
     <div class="nlf-gravity-wrapper">
         [gravityform ...]
     </div>
   …and receive full NLF form styling independently of .nlf-apply.

   Selectors target both classic GF classes (.gfield_label) and
   modern GF 2.5+ classes (.gform-field-label, .gfield_required_asterisk,
   .gform_validation_errors, .gfield_validation_message) for compatibility
   across plugin versions.
   ============================================================ */


/* ── Homepage section shell ──────────────────────────────── */

/* Narrows to a comfortable form reading width */
.nlf-apply__container {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Form card/panel — white surface that lifts off the section background.
 * The .nlf-apply section uses .nlf-section--light, so this white card
 * reads clearly against the off-white #f4f6f9 backdrop.
 */
.nlf-apply__panel {
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: 16px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.08);
    padding: 40px 44px;
}

/* Compact process line under the enquiry intro — not a proof band. */
.nlf-apply__reassure {
    margin: 10px auto 0;
    max-width: 36rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--nlf-text-muted);
}


/* ── GF wrapper / form reset ─────────────────────────────── */

/* Prevent GF from adding its own horizontal sizing or chrome */
.nlf-gravity-wrapper .gform_wrapper,
.nlf-gravity-wrapper .gform_wrapper.gravity-theme,
.nlf-gravity-wrapper form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/*
 * GF Orbital CSS variable overrides.
 * The Orbital theme drives all button colours through CSS custom properties
 * set on .gform-theme--framework.  Setting them here makes GF's own button
 * rules produce NLF colours without needing !important on individual
 * background-color declarations.
 */
.nlf-gravity-wrapper .gform-theme--framework {
    --gf-ctrl-btn-bg-color-primary:       var(--nlf-accent);
    --gf-ctrl-btn-bg-color-hover-primary: var(--nlf-accent-hover);
    --gf-ctrl-btn-color-primary:          var(--nlf-white);
    --gf-ctrl-btn-border-color-primary:   var(--nlf-accent);
}

/* Remove GF list styling from field list */
.nlf-gravity-wrapper ul.gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ── Field spacing ───────────────────────────────────────── */

.nlf-gravity-wrapper .gfield,
.nlf-gravity-wrapper .gform-field {
    margin-bottom: 20px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* No double bottom margin on final field before footer */
.nlf-gravity-wrapper .gfield:last-of-type,
.nlf-gravity-wrapper .gform-field:last-of-type {
    margin-bottom: 0;
}


/* ── Labels ──────────────────────────────────────────────── */

/* Primary labels — both classic and GF 2.5+ class */
.nlf-gravity-wrapper .gfield_label,
.nlf-gravity-wrapper .gform-field-label {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.875rem;         /* 14px */
    font-weight: 600;
    color: var(--nlf-navy-dark);
    margin-bottom: 7px;
    line-height: 1.4;
}

/* Sub-labels inside compound fields (First / Last, HH / MM, etc.) */
.nlf-gravity-wrapper .gform-field-label--type-sub,
.nlf-gravity-wrapper .ginput_complex label,
.nlf-gravity-wrapper .ginput_complex legend,
.nlf-gravity-wrapper .ginput_container_time label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.75rem;          /* 12px */
    font-weight: 500;
    color: var(--nlf-text-muted);
    margin-top: 5px;
    margin-bottom: 0;
    display: block;
}

/* Required indicators — accent orange */
.nlf-gravity-wrapper .gfield_required,
.nlf-gravity-wrapper .gfield_required_asterisk {
    color: var(--nlf-accent);
    margin-left: 2px;
}

/* GF 2.5+ outputs "Required" as text — hide the word, keep the asterisk */
.nlf-gravity-wrapper .gfield_required_text {
    display: none;
}

/* Non-error field helper text (e.g. Credit History description). */
.nlf-gravity-wrapper .gfield_description:not(.validation_message) {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    color: var(--nlf-text-muted);
    margin-top: 6px;
    line-height: 1.45;
}


/* ── Standard input base (text, email, tel, number, url, password, date) ── */
/*
 * body prefix raises specificity to 1-1-1, beating Gravity Forms Orbital's
 * 0-2-1 rules that load after main.css and would otherwise override these.
 */
body .nlf-gravity-wrapper input[type="text"],
body .nlf-gravity-wrapper input[type="email"],
body .nlf-gravity-wrapper input[type="tel"],
body .nlf-gravity-wrapper input[type="number"],
body .nlf-gravity-wrapper input[type="url"],
body .nlf-gravity-wrapper input[type="password"],
body .nlf-gravity-wrapper input[type="date"] {
    width: 100%;
    height: 50px;
    border: 1.5px solid var(--nlf-border);
    border-radius: 11px;
    padding: 0 14px;
    font-size: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--nlf-text);
    background-color: var(--nlf-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Placeholder colour */
body .nlf-gravity-wrapper input::placeholder,
body .nlf-gravity-wrapper textarea::placeholder {
    color: var(--nlf-text-muted);
    opacity: 1;
}


/* ── Textarea ─────────────────────────────────────────────── */

body .nlf-gravity-wrapper textarea {
    width: 100%;
    min-height: 120px;
    height: auto;
    border: 1.5px solid var(--nlf-border);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--nlf-text);
    background-color: var(--nlf-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.6;
    -webkit-appearance: none;
    appearance: none;
}


/* ── Select ───────────────────────────────────────────────── */

body .nlf-gravity-wrapper select {
    width: 100%;
    height: 50px;
    border: 1.5px solid var(--nlf-border);
    border-radius: 11px;
    padding: 0 40px 0 14px;
    font-size: 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--nlf-text);
    background-color: var(--nlf-white);
    /* Custom chevron arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}


/* ── Focus states (orange accent ring) ───────────────────── */

body .nlf-gravity-wrapper input[type="text"]:focus,
body .nlf-gravity-wrapper input[type="email"]:focus,
body .nlf-gravity-wrapper input[type="tel"]:focus,
body .nlf-gravity-wrapper input[type="number"]:focus,
body .nlf-gravity-wrapper input[type="url"]:focus,
body .nlf-gravity-wrapper input[type="password"]:focus,
body .nlf-gravity-wrapper input[type="date"]:focus,
body .nlf-gravity-wrapper select:focus,
body .nlf-gravity-wrapper textarea:focus {
    outline: none;
    border-color: var(--nlf-accent);
    box-shadow: 0 0 0 3px rgba(232, 135, 43, 0.15);
}


/* ── Checkboxes & radio buttons ──────────────────────────── */

.nlf-gravity-wrapper input[type="checkbox"],
.nlf-gravity-wrapper input[type="radio"] {
    accent-color: var(--nlf-accent);
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Checkbox / radio list items */
.nlf-gravity-wrapper .gfield_checkbox,
.nlf-gravity-wrapper .gfield_radio {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-gravity-wrapper .gfield_checkbox li,
.nlf-gravity-wrapper .gfield_radio li {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    list-style: none;
}

.nlf-gravity-wrapper .gfield_checkbox li:last-child,
.nlf-gravity-wrapper .gfield_radio li:last-child {
    margin-bottom: 0;
}

.nlf-gravity-wrapper .gfield_checkbox label,
.nlf-gravity-wrapper .gfield_radio label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--nlf-text);
    cursor: pointer;
    margin-bottom: 0;
    line-height: 1.5;
}


/* ── Compound fields (Name / Address) ───────────────────── */

/* Flex row for two-or-more sub-inputs */
.nlf-gravity-wrapper .ginput_complex {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.nlf-gravity-wrapper .ginput_complex .ginput_full {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nlf-gravity-wrapper .ginput_complex .ginput_left,
.nlf-gravity-wrapper .ginput_complex .ginput_right {
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Inputs inside compound spans fill their span */
.nlf-gravity-wrapper .ginput_complex input,
.nlf-gravity-wrapper .ginput_complex select {
    width: 100%;
}

/* Address field: stack full-width spans, then row for city/state/zip */
.nlf-gravity-wrapper .ginput_container_address {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nlf-gravity-wrapper .ginput_container_address .ginput_full {
    display: flex;
    flex-direction: column;
}

.nlf-gravity-wrapper .ginput_container_address .ginput_left,
.nlf-gravity-wrapper .ginput_container_address .ginput_right {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
}

/* City / state / zip / country sit side-by-side on one row */
.nlf-gravity-wrapper .ginput_container_address .address_city,
.nlf-gravity-wrapper .ginput_container_address .address_state,
.nlf-gravity-wrapper .ginput_container_address .address_zip,
.nlf-gravity-wrapper .ginput_container_address .address_country {
    display: inline-flex;
    flex-direction: column;
}


/* ── Time fields (native GF Time: HH / MM / AM-PM) ────────── */
/*
 * Shared wrapper styles keep Hour / Minute / AM-PM on one row.
 * Home Form 1 (#apply #gform_wrapper_1) further compact-groups the
 * control so it cannot dominate the callback row. No custom JS.
 */
body .nlf-gravity-wrapper .ginput_container_time {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

body .nlf-gravity-wrapper .gfield_time_hour,
body .nlf-gravity-wrapper .gfield_time_minute {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

body .nlf-gravity-wrapper .gfield_time_hour input,
body .nlf-gravity-wrapper .gfield_time_minute input {
    width: 72px;
    text-align: center;
}

body .nlf-gravity-wrapper .gfield_time_ampm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

body .nlf-gravity-wrapper .gfield_time_ampm select {
    width: 86px;
    padding-right: 28px;
    text-align: center;
}

body .nlf-gravity-wrapper .hour_minute_colon {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--nlf-text-muted);
    line-height: 50px;
    margin-bottom: 0;
    flex-shrink: 0;
}

/*
 * Home Form 1 only — 3-step enquiry presentation.
 * Scoped to #apply #gform_wrapper_1 so Forms 2–9 are unchanged.
 * Does not alter GF field order, IDs, labels or validation.
 */
body #apply #gform_wrapper_1 {
    overflow-x: hidden;
    max-width: 100%;
}

body #apply #gform_wrapper_1 .gform_page {
    margin: 0;
    padding: 0;
}

body #apply #gform_wrapper_1 .gfield--type-page {
    margin: 0;
    padding: 0;
}

body #apply #gform_wrapper_1 .gfield,
body #apply #gform_wrapper_1 .gform-field {
    margin-bottom: 18px;
}

body #apply #gform_wrapper_1 #field_1_14 .gfield_description:not(.validation_message) {
    display: block;
    margin-top: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--nlf-text-muted);
}

/* ── Native GF step indicator ────────────────────────────── */
body #apply #gform_wrapper_1 .gf_page_steps,
body #apply #gform_wrapper_1 .gform-page-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    margin: 0 0 28px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--nlf-border);
    box-sizing: border-box;
}

body #apply #gform_wrapper_1 .gf_step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 8px;
    text-align: center;
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--nlf-text-muted);
}

body #apply #gform_wrapper_1 .gf_step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--nlf-border);
    z-index: 0;
}

body #apply #gform_wrapper_1 .gf_step_completed:not(:first-child)::before,
body #apply #gform_wrapper_1 .gf_step_active:not(:first-child)::before {
    background-color: var(--nlf-navy-dark);
}

body #apply #gform_wrapper_1 .gf_step_number,
body #apply #gform_wrapper_1 .gf_step .gf_step_number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--nlf-border);
    border-radius: 50%;
    background-color: var(--nlf-white);
    color: var(--nlf-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

body #apply #gform_wrapper_1 .gf_step_completed .gf_step_number::before,
body #apply #gform_wrapper_1 .gf_step_completed .gf_step_number::after {
    content: none;
    display: none;
}

body #apply #gform_wrapper_1 .gf_step_active {
    color: var(--nlf-navy-dark);
}

body #apply #gform_wrapper_1 .gf_step_active .gf_step_number {
    border-color: var(--nlf-accent);
    background-color: var(--nlf-accent);
    color: var(--nlf-white);
}

body #apply #gform_wrapper_1 .gf_step_completed {
    color: var(--nlf-navy-dark);
}

body #apply #gform_wrapper_1 .gf_step_completed .gf_step_number {
    border-color: var(--nlf-navy-dark);
    background-color: var(--nlf-navy-dark);
    color: var(--nlf-white);
}

body #apply #gform_wrapper_1 .gf_step_label {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

body #apply #gform_wrapper_1 .gf_step_hidden {
    display: none;
}

/* ── Callback group: State | Date | Time (IDs 5 / 7 / 6) ─── */
body #apply #gform_wrapper_1 #field_1_5,
body #apply #gform_wrapper_1 #field_1_7,
body #apply #gform_wrapper_1 #field_1_6 {
    min-width: 0;
}

body #apply #gform_wrapper_1 #field_1_6.gfield--width-third {
    flex: 1 1 0;
}

/* Native Time field (ID 6): HH + MM + AM/PM as one compact group.
 * Do NOT use flex: 1 1 0 / min-width: 0 on the inner columns — that
 * collapses GF 2.10 number+select controls below usable width. */
body #apply #gform_wrapper_1 .gfield--type-time .ginput_complex,
body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-row,
body #apply #gform_wrapper_1 .gfield--type-time .ginput_container_time {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    max-width: 100%;
}

body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col.gfield_time_hour,
body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col.gfield_time_minute,
body #apply #gform_wrapper_1 .gfield--type-time .gfield_time_hour,
body #apply #gform_wrapper_1 .gfield--type-time .gfield_time_minute {
    display: flex;
    flex-direction: column;
    flex: 1 1 60px;
    flex-shrink: 0;
    width: auto;
    min-width: 60px;
    max-width: 70px;
    inline-size: auto !important;
}

body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col.gfield_time_ampm,
body #apply #gform_wrapper_1 .gfield--type-time .gfield_time_ampm {
    display: flex;
    flex-direction: column;
    flex: 1.25 1 80px;
    flex-shrink: 0;
    width: auto;
    min-width: 80px;
    max-width: 95px;
    inline-size: auto !important;
}

body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col input,
body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col select,
body #apply #gform_wrapper_1 .gfield--type-time input[type="number"],
body #apply #gform_wrapper_1 .gfield--type-time select {
    width: 100%;
    min-width: 0;
    height: 50px;
    min-height: 44px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    box-sizing: border-box;
}

body #apply #gform_wrapper_1 .gfield--type-time input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

body #apply #gform_wrapper_1 .gfield--type-time input[type="number"]::-webkit-outer-spin-button,
body #apply #gform_wrapper_1 .gfield--type-time input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body #apply #gform_wrapper_1 .gfield--type-time select {
    padding-right: 20px;
    background-position: right 4px center;
}

body #apply #gform_wrapper_1 .gfield--type-time .hour_minute_colon {
    flex: 0 0 8px;
    width: 8px;
    min-width: 8px;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 50px;
    text-align: center;
}

/* ── Page footer / button hierarchy ──────────────────────── */
body #apply #gform_wrapper_1 .gform_page_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
}

body #apply #gform_wrapper_1 .gform_next_button,
body #apply #gform_wrapper_1 #gform_submit_button_1 {
    background-color: var(--nlf-accent);
    color: var(--nlf-white);
    border-color: var(--nlf-accent);
}

body #apply #gform_wrapper_1 .gform_previous_button,
body #apply #gform_wrapper_1 input.gform_previous_button,
body #apply #gform_wrapper_1 button.gform_previous_button {
    background-color: var(--nlf-white);
    color: var(--nlf-navy-dark);
    border: 2px solid var(--nlf-border);
    box-shadow: none;
    transform: none;
}

body #apply #gform_wrapper_1 .gform_previous_button:hover,
body #apply #gform_wrapper_1 input.gform_previous_button:hover,
body #apply #gform_wrapper_1 button.gform_previous_button:hover {
    background-color: var(--nlf-white);
    color: var(--nlf-navy-dark);
    border-color: var(--nlf-navy-dark);
    box-shadow: none;
    transform: none;
}

body #apply #gform_wrapper_1 .gform_previous_button:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}


/* ── Validation / errors ─────────────────────────────────── */

/* Error border on field inputs */
.nlf-gravity-wrapper .gfield_error input[type="text"],
.nlf-gravity-wrapper .gfield_error input[type="email"],
.nlf-gravity-wrapper .gfield_error input[type="tel"],
.nlf-gravity-wrapper .gfield_error input[type="number"],
.nlf-gravity-wrapper .gfield_error input[type="date"],
.nlf-gravity-wrapper .gfield_error select,
.nlf-gravity-wrapper .gfield_error textarea {
    border-color: #dc2626;
}

/* Error label colour */
.nlf-gravity-wrapper .gfield_error .gfield_label,
.nlf-gravity-wrapper .gfield_error .gform-field-label {
    color: #b91c1c;
}

/* Inline field validation message — classic + GF 2.5+ class */
.nlf-gravity-wrapper .validation_message,
.nlf-gravity-wrapper .gfield_description.validation_message,
.nlf-gravity-wrapper .gfield_validation_message {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;   /* 13px */
    color: #dc2626;
    margin-top: 5px;
    line-height: 1.4;
}

/* Form-level error banner — classic + GF 2.5+ class */
.nlf-gravity-wrapper .validation_error,
.nlf-gravity-wrapper .gform_validation_errors {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    color: #991b1b;
    background-color: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--nlf-radius);
    padding: 14px 18px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.nlf-gravity-wrapper .validation_error h2,
.nlf-gravity-wrapper .gform_validation_errors h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 4px;
}


/* ── Form footer (submit area) ───────────────────────────── */

.nlf-gravity-wrapper .gform_footer,
.nlf-gravity-wrapper .gform_page_footer {
    margin-top: 28px;
    padding: 0;
}

/* Submit button — NLF orange primary CTA.
 * Three selectors for maximum GF version coverage:
 *   .gform_button          — present in all GF versions
 *   button[type="submit"]  — GF 3.0+ (replaces input[type="submit"])
 *   input[type="submit"]   — GF 2.x legacy (kept for backwards compatibility)
 * body prefix raises specificity above Orbital's 0-2-0 rule.
 * Orbital variable overrides above (.gform-theme--framework block) handle
 * GF's CSS-variable-driven button colour; these direct properties cover
 * non-Orbital / legacy GF installs.
 */
body .nlf-gravity-wrapper .gform_button,
body .nlf-gravity-wrapper input[type="submit"],
body .nlf-gravity-wrapper button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 40px;
    background-color: var(--nlf-accent);
    color: var(--nlf-white);
    border: 2px solid var(--nlf-accent);
    border-radius: 12px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color     0.2s ease,
        transform        0.15s ease,
        box-shadow       0.2s ease;
}

body .nlf-gravity-wrapper .gform_button:hover,
body .nlf-gravity-wrapper input[type="submit"]:hover,
body .nlf-gravity-wrapper button[type="submit"]:hover {
    background-color: var(--nlf-accent-hover);
    border-color: var(--nlf-accent-hover);
    color: var(--nlf-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(232, 135, 43, 0.35);
}

body .nlf-gravity-wrapper .gform_button:focus-visible,
body .nlf-gravity-wrapper input[type="submit"]:focus-visible,
body .nlf-gravity-wrapper button[type="submit"]:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}


/* ── Confirmation / success ───────────────────────────────── */

.nlf-gravity-wrapper .gform_confirmation_wrapper {
    padding: 32px;
    background-color: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--nlf-radius-lg);
    text-align: center;
    color: var(--nlf-text);
}

.nlf-gravity-wrapper .gform_confirmation_message {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--nlf-text);
    margin: 0;
}


/* ── Responsive ──────────────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
    .nlf-apply__panel {
        padding: 32px 28px;
    }

    /* Compound name / address fields collapse to single column */
    .nlf-gravity-wrapper .ginput_complex .ginput_left,
    .nlf-gravity-wrapper .ginput_complex .ginput_right {
        flex: 1 1 100%;
    }

    body #apply #gform_wrapper_1 .gf_step_label {
        font-size: 0.625rem;
    }
}

/* Home Form 1 — stack GF half/third columns below tablet */
@media (max-width: 767px) {
    body #apply #gform_wrapper_1 .gfield--width-half,
    body #apply #gform_wrapper_1 .gfield--width-third {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        grid-column: 1 / -1;
    }

    body #apply #gform_wrapper_1 .gform_page_footer {
        flex-direction: column;
        align-items: stretch;
    }

    body #apply #gform_wrapper_1 .gform_page_footer .gform_button,
    body #apply #gform_wrapper_1 .gform_page_footer input[type="submit"],
    body #apply #gform_wrapper_1 .gform_page_footer button[type="submit"] {
        width: 100%;
    }

    /*
     * Time field is full-width here. Keep HH | MM | AM/PM on one row
     * and let the controls grow; do not reintroduce flex: 1 1 0.
     */
    body #apply #gform_wrapper_1 .gfield--type-time .ginput_complex,
    body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-row,
    body #apply #gform_wrapper_1 .gfield--type-time .ginput_container_time {
        flex-wrap: nowrap !important;
        width: 100%;
        max-width: none;
        gap: 8px;
    }

    body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col.gfield_time_hour,
    body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col.gfield_time_minute,
    body #apply #gform_wrapper_1 .gfield--type-time .gfield_time_hour,
    body #apply #gform_wrapper_1 .gfield--type-time .gfield_time_minute {
        flex: 1 1 60px;
        width: auto;
        min-width: 60px;
        max-width: none;
        inline-size: auto !important;
    }

    body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-col.gfield_time_ampm,
    body #apply #gform_wrapper_1 .gfield--type-time .gfield_time_ampm {
        flex: 1.2 1 84px;
        width: auto;
        min-width: 84px;
        max-width: none;
        inline-size: auto !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .nlf-apply__panel {
        padding: 24px 18px;
        border-radius: 12px;
    }

    /* Full-width submit / next on small screens (Forms 2–9 unchanged besides existing reusable rule) */
    body .nlf-gravity-wrapper .gform_button,
    body .nlf-gravity-wrapper input[type="submit"],
    body .nlf-gravity-wrapper button[type="submit"] {
        width: 100%;
        padding: 0 24px;
    }

    body #apply #gform_wrapper_1 .gf_page_steps,
    body #apply #gform_wrapper_1 .gform-page-steps {
        margin-bottom: 22px;
        padding-bottom: 16px;
    }

    body #apply #gform_wrapper_1 .gf_step {
        padding: 0 4px;
    }

    body #apply #gform_wrapper_1 .gf_step_number,
    body #apply #gform_wrapper_1 .gf_step .gf_step_number {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    body #apply #gform_wrapper_1 .gf_step:not(:first-child)::before {
        top: 14px;
    }

    body #apply #gform_wrapper_1 .gf_step_label {
        font-size: 0.625rem;
        letter-spacing: 0.02em;
    }
}

@media (max-width: 374px) {
    body #apply #gform_wrapper_1 .gf_step_label {
        font-size: 0.5625rem;
    }

    body #apply #gform_wrapper_1 .gfield--type-time .gform-grid-row,
    body #apply #gform_wrapper_1 .gfield--type-time .ginput_complex {
        gap: 6px;
    }
}


/* ============================================================
   FAQ SECTION  –  .nlf-faq / .nlf-faq-item
   ============================================================
   Section background uses the existing .nlf-section--light token.
   Header and FAQ list narrowed to 768px within .nlf-container.
   All open/close behaviour is driven by native <details>/<summary>
   with no JavaScript.  Plus icon rotates to × via CSS only.
   ============================================================ */


/* ── Section layout ──────────────────────────────────────── */

/* Narrow header and list to ~768px, centred within the 1280px container */
.nlf-faq__header,
.nlf-faq__list {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

/* Stacked list with 16px gap between items */
.nlf-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ── FAQ card (the <details> element) ────────────────────── */

.nlf-faq-item {
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: 12px;
    box-shadow: var(--nlf-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.nlf-faq-item:hover {
    box-shadow: var(--nlf-shadow-md);
}

/* Subtle orange border when the item is expanded */
.nlf-faq-item[open] {
    border-color: rgba(232, 135, 43, 0.35);
}


/* ── Summary (the clickable question row) ────────────────── */

.nlf-faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;               /* Firefox: remove native marker */
    user-select: none;
    transition: background-color 0.15s ease;
}

/* Blink/WebKit: remove the native disclosure triangle */
.nlf-faq-item__summary::-webkit-details-marker {
    display: none;
}

.nlf-faq-item__summary:hover {
    background-color: rgba(232, 135, 43, 0.04);
}

/* Inset focus ring so it sits cleanly within the card */
.nlf-faq-item__summary:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: -3px;
}


/* ── Question heading ────────────────────────────────────── */

.nlf-faq-item__question {
    flex: 1;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.125rem;            /* 18px */
    font-weight: 700;
    color: var(--nlf-navy-dark);
    line-height: 1.3;
    margin: 0;
    text-align: left;
}


/* ── Plus / × icon ───────────────────────────────────────── */

.nlf-faq-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

/*
 * When the <details> is open, rotate the plus by 45° so it
 * visually becomes an ×.  Pure CSS — no JavaScript involved.
 */
details[open] .nlf-faq-item__icon {
    transform: rotate(45deg);
}

/* Honour prefers-reduced-motion by removing the transition */
@media (prefers-reduced-motion: reduce) {
    .nlf-faq-item__icon {
        transition: none;
    }
}


/* ── Answer region ───────────────────────────────────────── */

.nlf-faq-item__answer {
    border-top: 1px solid var(--nlf-border);
    padding: 16px 24px 20px;
}

.nlf-faq-item__answer p {
    font-size: 0.9375rem;           /* 15px */
    line-height: 1.7;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 12px;
}

.nlf-faq-item__answer p:last-child {
    margin-bottom: 0;
}

/* <strong> inside answers uses the darker body text for emphasis */
.nlf-faq-item__answer strong {
    color: var(--nlf-text);
    font-weight: 600;
}


/* ── Responsive adjustments ─────────────────────────────── */

@media (max-width: 640px) {
    .nlf-faq-item__summary {
        padding: 16px 20px;
        gap: 12px;
    }

    .nlf-faq-item__answer {
        padding: 14px 20px 18px;
    }

    /* Slightly smaller question text on mobile to help long questions wrap */
    .nlf-faq-item__question {
        font-size: 1rem;            /* 16px */
    }
}


/* ============================================================
   CONTACT US — PAGE-SCOPED ADAPTATIONS
   ============================================================
   Composition uses existing V2 systems:
     compact navy hero  →  .nlf-about-hero
     methods / pathways →  .nlf-benefit-card + .nlf-grid
     general enquiry    →  .nlf-apply + .nlf-gravity-wrapper (GF2)
     FAQ                →  .nlf-faq
     closing CTA        →  .nlf-about-cta

   Do not restore a two-column Contact Details | Form layout,
   .nlf-contact-card, or Contact-specific typography/button systems.

   2.0.114 density (scoped only; do not change About/Partners/Home):
     Hero: tighter than About credentials-hero; keep 80px header clearance.
     Form: compact enquiry shell; GF2 Message starts at input height and
           autosizes (theme JS; no GF2 config change).
     Pathways: lightweight routing cards, not Why Choose feature weight.
   ============================================================ */

.nlf-contact-methods address {
    font-style: normal;
}

.nlf-contact-methods .nlf-benefit-card {
    text-align: center;
    align-items: center;
}

.nlf-contact-methods .nlf-benefit-card__icon {
    align-self: center;
}

.nlf-contact-methods .nlf-card__text a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--nlf-navy-dark);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.nlf-contact-methods .nlf-card__text a:hover {
    color: var(--nlf-accent);
}

/* Contact hero: visibly compact vs About (no credentials row).
   80px clears the fixed header; extra 24px is breathing room, not
   the full compact-section 48px used on longer entity heroes. */
#contact-hero.nlf-about-hero {
    padding-top: calc(80px + 24px);
    padding-bottom: 28px;
}

#contact-hero .nlf-about-hero__heading {
    margin-top: 0.5rem;
    margin-bottom: 0.875rem;
}

#contact-hero .nlf-about-hero__intro {
    margin-bottom: 1.25rem;
}

#contact-hero .nlf-about-hero__actions {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    #contact-hero.nlf-about-hero {
        padding-top: calc(80px + 16px);
        padding-bottom: 24px;
    }
}

/* Contact enquiry shell — not the Home multi-step apply proportions. */
.nlf-contact-form {
    padding-block: var(--nlf-section-gap-sm);
}

.nlf-contact-form .nlf-section-header {
    margin-bottom: 1.25rem;
}

.nlf-contact-form .nlf-apply__panel {
    padding: 24px 28px;
}

.nlf-contact-form .nlf-gravity-wrapper .gfield,
.nlf-contact-form .nlf-gravity-wrapper .gform-field {
    margin-bottom: 14px;
}

/*
 * GF2 Message (Field 4). Start at the 50px input height.
 * JS autosize then grows to max-height. Do not bind the retired Field 6 id.
 */
#contact-form #gform_wrapper_2 textarea {
    min-height: 50px;
    height: 50px;
    max-height: 240px;
    overflow-y: hidden;
    resize: none;
}

@media (max-width: 768px) {
    .nlf-contact-form {
        padding-block: 32px;
    }

    .nlf-contact-form .nlf-apply__panel {
        padding: 20px;
    }
}

/* Routing cards: same benefit-card system, utility density. */
.nlf-contact-pathways {
    padding-block: var(--nlf-section-gap-sm);
}

.nlf-contact-pathways .nlf-section-header {
    margin-bottom: 1.5rem;
}

.nlf-contact-pathways .nlf-grid {
    gap: 16px;
}

.nlf-contact-pathways .nlf-benefit-card {
    padding: 16px 18px;
}

.nlf-contact-pathways .nlf-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

.nlf-contact-pathways .nlf-card__icon svg {
    width: 20px;
    height: 20px;
}

.nlf-contact-pathways .nlf-card__title {
    margin-bottom: 6px;
}

.nlf-contact-pathways .nlf-benefit-card > :last-child {
    padding-top: 0.5rem;
}

.nlf-contact-pathways .nlf-btn {
    align-self: flex-start;
    padding: 10px 18px;
    min-height: 44px;
    font-size: 0.875rem;
}

@media (max-width: 767px) {
    .nlf-contact-pathways {
        padding-block: 32px;
    }
}

.nlf-contact-form__privacy {
    margin: 0.75rem 0 0;
    max-width: none;
}

.nlf-contact-form__privacy a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nlf-contact-pathways .nlf-card__text a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ============================================================
   ABOUT HERO SECTION  –  .nlf-about-hero
   ============================================================
   D37 Section 1. Text-only navy entity hero.
   No background image. No overlay. No JavaScript.

   Reuses globally:
     .nlf-section, .nlf-section--navy, .nlf-section--compact
     .nlf-container, .nlf-container--narrow
     .nlf-badge, .nlf-badge--dark
     .nlf-btn, .nlf-btn--primary, .nlf-btn--secondary
     --nlf-* design tokens throughout

   Does NOT modify .nlf-hero or finance heroes.
   ============================================================ */

.nlf-about-hero {
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
    padding-bottom: calc( var(--nlf-section-gap-sm) + 8px );
}

.nlf-about-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    line-height: 1.15;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.nlf-about-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 0;
    margin-bottom: 1.75rem;
}

.nlf-about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 1.75rem;
}

.nlf-about-hero__credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

.nlf-about-hero__cred {
    white-space: nowrap;
}

.nlf-about-hero__cred-sep {
    color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 767px) {
    .nlf-about-hero {
        padding-top: calc( 32px + 80px );
        padding-bottom: 40px;
    }

    .nlf-about-hero__heading {
        font-size: clamp(1.625rem, 7vw, 2rem);
        margin-bottom: 1rem;
    }

    .nlf-about-hero__intro {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .nlf-about-hero__actions {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .nlf-about-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nlf-about-hero__credentials {
        font-size: 0.8125rem;
    }
}


/* ============================================================
   ABOUT EXPERIENCE / PROOF  –  .nlf-about-proof
   ============================================================
   D37 Section 2. Static server-rendered proof items.
   No counters, animation, or JavaScript.

   4 columns on desktop, 2 on tablet, 1 on small mobile.
   ============================================================ */

.nlf-about-proof .nlf-section-header {
    margin-bottom: 2.25rem;
}

.nlf-about-proof__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 2.5rem;
}

.nlf-about-proof__item {
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    box-shadow: var(--nlf-shadow);
    padding: 28px 22px;
    text-align: center;
}

.nlf-about-proof__value {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.2;
    color: var(--nlf-accent);
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

.nlf-about-proof__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--nlf-text-muted);
    margin: 0;
}

.nlf-about-proof__copy {
    max-width: 760px;
    margin: 0 auto;
}

.nlf-about-proof__copy p {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text-muted);
    margin: 0 0 1rem;
}

.nlf-about-proof__copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .nlf-about-proof__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .nlf-about-proof__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 2rem;
    }

    .nlf-about-proof__item {
        padding: 24px 20px;
    }

    .nlf-about-proof__value {
        font-size: 1.5rem;
    }
}


/* ============================================================
   ABOUT STORY / ORIGIN BRIDGE  –  .nlf-about-story
   ============================================================
   D37 Section 3. Editorial two-column origin bridge below
   Experience & Proof. Not a second stats/proof section.
   No first-section header offset — the hero clears the header.

   White, two-column CSS Grid: left content (~55%), right image (~45%).
   Stacks to a single column below 767px (copy then image).

   Reuses globally:
     .nlf-section, .nlf-section--white
     .nlf-container
     .nlf-badge, .nlf-badge--light
     --nlf-* design tokens throughout

   Does NOT modify Homepage, Contact, About hero, About proof,
   or any shared global rule.
   ============================================================ */

.nlf-about-story {
    padding-bottom: 56px;
}

.nlf-about-story__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 64px;
    align-items: start;
}

.nlf-about-story__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* prevents badge from stretching to full column width */
}

.nlf-about-story__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-navy-dark);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.nlf-about-story__body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 1rem;
}

.nlf-about-story__body:last-of-type {
    margin-bottom: 1.25rem;
}

.nlf-about-story__note {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.nlf-about-story__link {
    color: var(--nlf-accent);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nlf-about-story__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration: underline;
}

.nlf-about-story__link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-about-story__image-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;       /* locks image to landscape frame; prevents portrait height blowout */
    overflow: hidden;
    border-radius: var(--nlf-radius-lg);
}

/* <picture> is display:inline by default; make it fill the wrapper */
.nlf-about-story__image-wrap picture,
.nlf-about-story__image-wrap .nlf-about-story__image {
    display: block;
    width: 100%;
    height: 100%;
}

.nlf-about-story__image {
    display: block;
    width: 100%;
    height: 100%;               /* fills the aspect-ratio wrapper, not natural portrait height */
    object-fit: cover;
    object-position: center 58%;    /* shifts crop window down; keeps team members in frame */
}

/* ── Mobile: single column ──────────────────────────────── */
@media (max-width: 767px) {
    .nlf-about-story {
        padding-bottom: 44px;
    }

    .nlf-about-story__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}


/* ============================================================
   ABOUT TECHNOLOGY SECTION  –  .nlf-about-tech
   ============================================================
   D37 Section 4. Editorial two-column process section below
   the white origin bridge. Light background for visual rhythm.
   Not a second proof/stat grid. Not a giant card wall.

   Desktop: copy (~55%) + stacked capability items (~45%).
   Mobile: copy first, capability items second.

   Reuses globally:
     .nlf-section, .nlf-section--light
     .nlf-container
     .nlf-badge, .nlf-badge--light
     --nlf-* design tokens throughout

   Does NOT modify Homepage, Contact, About hero, proof, story,
   or any shared global rule.
   ============================================================ */

.nlf-about-tech__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 64px;
    align-items: start;
}

.nlf-about-tech__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.nlf-about-tech__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-navy-dark);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.nlf-about-tech__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--nlf-text);
    margin-top: 0;
    margin-bottom: 1rem;
}

.nlf-about-tech__body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 1rem;
}

.nlf-about-tech__body:last-child {
    margin-bottom: 0;
}

.nlf-about-tech__capabilities {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nlf-about-tech__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    box-shadow: var(--nlf-shadow);
    padding: 20px 22px;
}

.nlf-about-tech__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nlf-radius);
    background-color: rgba(232, 135, 43, 0.1);
    color: var(--nlf-accent);
    flex-shrink: 0;
}

.nlf-about-tech__item-heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.4rem;
}

.nlf-about-tech__item-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
    margin: 0;
}

@media (max-width: 991px) {
    .nlf-about-tech__grid {
        gap: 40px;
    }
}

@media (max-width: 767px) {
    .nlf-about-tech__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}


/* ============================================================
   ABOUT SPECIALISATION SECTION  –  .nlf-about-spec
   ============================================================
   D37 Section 5. White section after the light technology band.
   Centered heading + six linked asset-navigation cards (3×2).
   Not a second proof grid and not the old Why Choose card wall.

   Reuses globally:
     .nlf-section, .nlf-section--white
     .nlf-container
     .nlf-section-header, .nlf-section-header--center
     .nlf-badge, .nlf-badge--light
     .nlf-section-title, .nlf-section-intro
     .nlf-grid, .nlf-grid--3
     --nlf-* design tokens throughout

   Does NOT modify Homepage, Contact, About Sections 1–4,
   or any shared global rule.
   ============================================================ */

.nlf-about-spec .nlf-section-header {
    margin-bottom: 2rem;
}

.nlf-about-spec__intro {
    max-width: var(--nlf-max-width-narrow);
    margin: 0 auto;
    text-align: center;
}

.nlf-about-spec__lead {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--nlf-text-muted);
    margin: 0 0 1rem;
}

.nlf-about-spec__support {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text-muted);
    margin: 0;
}

.nlf-about-spec__close {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text-muted);
    max-width: var(--nlf-max-width-narrow);
    margin: 0 auto;
    text-align: center;
}

.nlf-about-spec__grid {
    margin-bottom: 2rem;
}

.nlf-about-spec__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    box-shadow: var(--nlf-shadow);
    padding: 24px 22px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.nlf-about-spec__card:hover {
    box-shadow: var(--nlf-shadow-md);
    transform: translateY(-2px);
}

.nlf-about-spec__card:hover .nlf-about-spec__card-title {
    color: var(--nlf-accent);
}

.nlf-about-spec__card:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 2px;
}

.nlf-about-spec__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nlf-radius);
    background-color: rgba(232, 135, 43, 0.1);
    color: var(--nlf-accent);
    margin-bottom: 14px;
    flex-shrink: 0;
}

.nlf-about-spec__card-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin: 0 0 8px;
    transition: color 0.2s ease;
}

.nlf-about-spec__card-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    margin: 0;
}

@media (max-width: 599px) {
    .nlf-about-spec__card {
        padding: 22px 20px;
    }
}


/* ============================================================
   ABOUT REVIEWS SECTION  –  .nlf-about-reviews
   ============================================================
   D37 Section 6. Reuses the established navy review system:
     .nlf-section--navy, .nlf-reviews, .nlf-review-card,
     .nlf-reviews__badge / __heading / __meta-strip,
     .nlf-reviews__footer, .nlf-btn--outline-light

   About-only: static 3-card grid (not Home marquee, not the
   Caravan 4-card grid, no conversion CTA panel).

   Does NOT modify Homepage or finance-page review CSS.
   ============================================================ */

.nlf-about-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
    align-items: stretch;
}

.nlf-about-reviews__grid > .nlf-review-card {
    width: 100%;
    min-height: 0;
}

.nlf-about-reviews .nlf-reviews__footer {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .nlf-about-reviews__grid {
        grid-template-columns: 1fr;
        margin-bottom: 32px;
    }
}


/* ============================================================
   ABOUT WHY CHOOSE NLF SECTION  –  .nlf-about-why-choose
   ============================================================
   Second section on the About Us page, below Our Story.
   Uses .nlf-section--light background for a clean visual
   transition from the white Story section above.

   Reuses the full V2 shared component system with zero changes:
     .nlf-grid / .nlf-grid--3   – responsive 3→2→1 column grid
     .nlf-card                  – base white card (border + shadow);
                                  .nlf-benefit-card is NOT used here
                                  because its bg-light override would
                                  blend into the --light section bg
     .nlf-card__icon            – 52px orange icon container
     .nlf-card__title / __text  – V2 card typography
     .nlf-section-header / --center, .nlf-badge, .nlf-section-title,
     .nlf-section-intro         – centred header system

   The only About-specific rule is the pre-approval text link on
   Card 6. The global .nlf-card system has no built-in <a> styling;
   scoping it here keeps global card rules clean.
   ============================================================ */

/* Pre-approval contextual link — Card 6 only.
   Scoped to .nlf-about-why-choose__card-link so no global rule changes. */
.nlf-about-why-choose__card-link {
    display: inline-block;
    margin-top: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nlf-about-why-choose__card-link:hover {
    color: var(--nlf-accent-hover);
    text-decoration: underline;
}

.nlf-about-why-choose__card-link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 3px;
}


/* ============================================================
   ABOUT FOCUS SECTION  –  .nlf-about-focus
   ============================================================
   Third section on the About Us page, below Why Customers Choose NLF.
   White background (.nlf-section--white) provides a clean visual
   break from the light-grey Why NLF section immediately above.

   Reuses the full V2 shared component system with zero changes:
     .nlf-section / .nlf-section--white  — global vertical padding + bg
     .nlf-container / .nlf-container--narrow — centred 760px column
     .nlf-section-title                  — H2 sizing, weight, colour

   About-specific rules are minimal:
     .nlf-about-focus__heading  — centres the H2 within the narrow col;
                                  .nlf-section-title does not self-centre
                                  outside a .nlf-section-header--center
     .nlf-about-focus__body p   — paragraph spacing and colour;
                                  no global prose wrapper exists yet
     .nlf-about-focus__link     — inline orange accent links scoped to
                                  this section only; no global link rule
                                  is modified
   ============================================================ */

.nlf-about-focus__heading {
    text-align: center;
    margin-bottom: 1.75rem;
}

.nlf-about-focus__body p {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 1rem;
}

.nlf-about-focus__body p:last-child {
    margin-bottom: 0;
}

.nlf-about-focus__link {
    color: var(--nlf-accent);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nlf-about-focus__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration: underline;
}

.nlf-about-focus__link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ============================================================
   ABOUT TEAM SECTION  –  .nlf-about-team
   ============================================================
   D37 Section 7. White photographic section after the light
   customer-proof band. Directors: 2 larger centred cards.
   Team: 3 equal cards. Not a quote/review card style.

   Reuses globally:
     .nlf-section, .nlf-section--white
     .nlf-container
     .nlf-section-header, .nlf-section-header--center
     .nlf-section-title, .nlf-section-intro
     .nlf-badge, .nlf-badge--light

   Does NOT modify Homepage, finance pages, About Sections 1–6,
   or the global .nlf-card / .nlf-review-card components.
   ============================================================ */

/* --- Group spacing ------------------------------------------ */
.nlf-about-team__group {
    margin-bottom: 3rem;
}

.nlf-about-team__group:last-child {
    margin-bottom: 0;
}

/* --- Group badge header ------------------------------------- */
.nlf-about-team__group-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

/* --- Director grid (2-col, centred, max 920px) -------------- */
/*
 * max-width + margin-inline: auto centres the two director cards
 * at a width narrower than full container, giving them slightly
 * more visual weight than the three-column team grid.
 */
.nlf-about-team__grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 920px;
    margin-inline: auto;
}

/* --- Specialist grid (3-col, full container width) ---------- */
.nlf-about-team__grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* --- Team card ---------------------------------------------- */
/*
 * Uses existing design tokens to match the established V2 card
 * visual language without modifying the global .nlf-card rule.
 * overflow: hidden is required so the photo bleeds to card edges.
 */
.nlf-about-team__card {
    background: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    box-shadow: var(--nlf-shadow);
    overflow: hidden;
}

.nlf-about-team__card--director .nlf-about-team__name {
    font-size: 1.1875rem;
}

.nlf-about-team__card--director .nlf-about-team__info {
    padding: 28px;
}

/* --- Photo frame -------------------------------------------- */
/*
 * aspect-ratio: 1 / 1 normalises the displayed presentation of
 * all five photos regardless of their native dimensions
 * (2560×2560, 2048×2048 square; 1448×1086 landscape for Trish).
 */
.nlf-about-team__photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.nlf-about-team__photo-wrap picture,
.nlf-about-team__photo-wrap .nlf-about-team__photo {
    display: block;
    width: 100%;
    height: 100%;
}

.nlf-about-team__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;    /* shifts crop window up; keeps face in frame */
}

/*
 * Trish Damba — 1448 × 1086 landscape.
 * Cropping a wide image to 1:1: center crop is the safest
 * choice to keep the face in frame horizontally and vertically.
 */
.nlf-about-team__photo--landscape {
    object-position: center center;
}

/* --- Card info area ----------------------------------------- */
.nlf-about-team__info {
    padding: 24px;
}

/* --- Name (H3) --------------------------------------------- */
.nlf-about-team__name {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin-top: 0;
    margin-bottom: 0.25rem;
}

/* --- Role (plain <p>, not a heading) ----------------------- */
.nlf-about-team__role {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nlf-accent);
    margin-top: 0;
    margin-bottom: 0.875rem;
}

/* --- Biography <p> ------------------------------------------ */
.nlf-about-team__bio {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 991px) {
    /* Specialist grid: 3 → 2 columns at tablet */
    .nlf-about-team__grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    /* Both grids: 1 column on mobile */
    .nlf-about-team__grid--2,
    .nlf-about-team__grid--3 {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================================
   ABOUT PROCESS SECTION  –  .nlf-about-process
   ============================================================
   D37 Section 8. Light band after the white team section.
   Numbered 01–04 progression. Not a four-card benefits grid.

   Desktop: 4 columns with a CSS connector.
   Mobile: 1 column vertical order.

   Does NOT modify Contact .nlf-contact-next, Home expert-answers,
   finance pages, or About Sections 1–7.
   ============================================================ */

.nlf-about-process .nlf-section-header {
    margin-bottom: 2.5rem;
}

.nlf-about-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.nlf-about-process__step {
    position: relative;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

@media (min-width: 992px) {
    .nlf-about-process__step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 18px;
        right: -18px;
        width: 36px;
        height: 2px;
        background-color: var(--nlf-accent);
        opacity: 0.35;
        pointer-events: none;
    }
}

.nlf-about-process__number {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--nlf-accent);
    margin: 0 0 12px;
}

.nlf-about-process__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin: 0 0 8px;
}

.nlf-about-process__text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    margin: 0;
}

@media (max-width: 991px) {
    .nlf-about-process__steps {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 640px;
        margin-inline: auto;
    }

    .nlf-about-process__step {
        padding-left: 16px;
        border-left: 2px solid rgba(232, 135, 43, 0.35);
    }
}

/* ============================================================
   ABOUT TRUST / LICENSING SECTION  — .nlf-about-trust
   ============================================================
   D37 Section 9. White band after the light process section.
   Compact credential items, not a sales-card grid.

   Does NOT modify global .nlf-card or finance pages.
   ============================================================ */

.nlf-about-trust .nlf-section-header {
    margin-bottom: 2.5rem;
}

.nlf-about-trust__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.nlf-about-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.nlf-about-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nlf-radius);
    background-color: rgba(232, 135, 43, 0.1);
    color: var(--nlf-accent);
    flex-shrink: 0;
}

.nlf-about-trust__item-heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.4rem;
}

.nlf-about-trust__item-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
    margin: 0;
}

.nlf-about-trust__abn {
    margin: 2rem 0 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--nlf-text-muted);
}

.nlf-about-trust__links {
    margin: 0.75rem 0 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.nlf-about-trust__links a {
    color: var(--nlf-accent);
    font-weight: 600;
    text-decoration: none;
}

.nlf-about-trust__links a:hover {
    color: var(--nlf-accent-hover);
    text-decoration: underline;
}

.nlf-about-trust__links a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-about-trust__link-sep {
    margin: 0 0.5rem;
    color: var(--nlf-text-muted);
}

@media (max-width: 991px) {
    .nlf-about-trust__items {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin-inline: auto;
        gap: 22px;
    }
}

/* ============================================================
   ABOUT CONVERSION CLOSE  — .nlf-about-cta
   ============================================================
   D37 Section 11. Navy close. Button row matches About hero.
   Does NOT modify .nlf-about-hero or finance-page CTAs.
   ============================================================ */

.nlf-about-cta .nlf-section-header {
    margin-bottom: 1.75rem;
}

.nlf-about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .nlf-about-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   CARAVAN FINANCE HERO SECTION  —  .nlf-cf-hero
   ============================================================
   Full-width photographic hero for the Caravan Finance landing page.
   Left-aligned content capped at 760px within the global container.

   Reuses globally:
     .nlf-container
     .nlf-badge, .nlf-badge--dark
     .nlf-btn, .nlf-btn--primary, .nlf-btn--secondary
     --nlf-* design tokens throughout

   Caravan-specific rules:
     .nlf-cf-hero          — background image, overlay, spacing
     .nlf-cf-hero__content — content max-width + z-order above overlay
     .nlf-cf-hero__heading — H1 colour and sizing
     .nlf-cf-hero__intro   — intro paragraph colour and sizing
     .nlf-cf-hero__actions — button row left-alignment

   Does NOT modify .nlf-hero, .nlf-about-hero,
   or any other existing selector.
   ============================================================ */

.nlf-cf-hero {
    position: relative;
    background-color: var(--nlf-navy-dark);     /* solid fallback if image fails */
    background-image: var(--nlf-cf-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );   /* 48px + 80px fixed header = 128px */
    padding-bottom: var(--nlf-section-gap);                   /* 80px */
    overflow: hidden;
}

/* Dark gradient overlay — text readability over photograph */
.nlf-cf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.75) 0%,
        rgba(11, 19, 41, 0.52) 50%,
        rgba(11, 19, 41, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Content layer sits above the overlay */
.nlf-cf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.nlf-cf-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-cf-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-cf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .nlf-cf-hero {
        padding-top: calc( 32px + 80px );              /* 32px + 80px fixed header = 112px */
        padding-bottom: var(--nlf-section-gap-sm);     /* 48px */
    }
}


/* ============================================================
   CARAVAN FINANCE BENEFITS SECTION  —  .nlf-cf-benefits
   ============================================================
   Third section on the Caravan Finance page, immediately below
   the Why NLF section. Both share a white background.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white
     .nlf-container
     .nlf-grid / .nlf-grid--3
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   Responsive grid (from global .nlf-grid--3):
     ≥ 992 px  — 3 equal columns
     768–991 px — 2 columns
     ≤ 599 px  — 1 column

   New Caravan-scoped selectors:
     .nlf-cf-benefits           — spacing connector to §2
     .nlf-cf-benefits__card     — light-grey bg override
     .nlf-cf-benefits__link     — inline contextual text-link
     .nlf-cf-benefits__licence  — small centred licensing line
   ============================================================ */

/* Collapse top padding so §2 (Why NLF) and §3 (Benefits) feel
   visually connected on the shared white canvas.
   §2's own padding-bottom (80 px) supplies the only breathing gap. */
.nlf-cf-benefits {
    padding-top: 0;
}

/* Light-grey card backgrounds distinguish cards from the white section.
   .nlf-card base sets --nlf-white; this overrides for Benefits only. */
.nlf-cf-benefits__card {
    background-color: var(--nlf-bg-light);
}

/* Inline contextual links within card body paragraphs.
   Scoped to .nlf-cf-benefits__link — does not touch global <a> styles. */
.nlf-cf-benefits__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-cf-benefits__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-cf-benefits__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Small centred licensing footer line below the card grid. */
.nlf-cf-benefits__licence {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;    /* 13 px */
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   CARAVAN FINANCE ANSWERS  —  .nlf-cf-content
   ============================================================
   Seventh section on the Caravan Finance page (D31), after Apply.
   Information cards reuse the global card/grid system. Full
   section padding is required because Apply uses a light
   background; do not collapse padding-top.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white, .nlf-container
     .nlf-grid / .nlf-grid--3 (except the scoped 1-column override)
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   New / updated Caravan-scoped selectors:
     .nlf-cf-content__grid       — 3-col desktop; 1-col below 1100px
     .nlf-cf-content__card       — light-grey information card
     .nlf-cf-content__link       — inline contextual text-link
     .nlf-cf-content__disclaimer — small muted compliance line
   ============================================================ */

.nlf-cf-content__grid.nlf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1099px) {
    .nlf-cf-content__grid.nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.nlf-cf-content__card {
    background-color: var(--nlf-bg-light);
    min-width: 0;
}

@media (max-width: 599px) {
    .nlf-cf-content__card {
        padding: 24px 20px;
    }
}

.nlf-cf-content__card:hover {
    transform: none;
}

.nlf-cf-content__card .nlf-card__title {
    font-size: 1.25rem;
}

.nlf-cf-content__card .nlf-card__text + .nlf-card__text {
    margin-top: 0.85rem;
}

.nlf-cf-content__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-cf-content__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-cf-content__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-cf-content__disclaimer {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}

/* ============================================================
   CARAVAN FINANCE REVIEWS  —  .nlf-cf-reviews
   ============================================================
   Reuses from main.css (zero duplication):
     .nlf-section--navy            — dark background
     .nlf-reviews__header          — centred header block
     .nlf-reviews__badge / __badge-stars / __heading — header elements
     .nlf-reviews__meta-strip / __meta-stars / __meta-rating
     .nlf-reviews__meta-sep / __meta-count — trust/rating line
     .nlf-review-card and all sub-elements — card component
     .nlf-review-card__tag--* colour variants
     .nlf-reviews__footer / __google-star — footer link area
     .nlf-btn / .nlf-btn--outline-light   — Google Reviews button

   New selector .nlf-cf-reviews__grid:
     Provides a static 4-col grid (no global .nlf-grid--4 exists).
     The child > .nlf-review-card width override clears the marquee-
     specific min(350px, …) constraint so cards fill their grid tracks.
   ============================================================ */

/* Static 4-column card grid — desktop */
.nlf-cf-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* Clear the marquee-specific fixed width so cards fill grid columns */
.nlf-cf-reviews__grid > .nlf-review-card {
    width: 100%;
}

/* Tablet — 2 columns */
@media (max-width: 991px) {
    .nlf-cf-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — 1 column */
@media (max-width: 599px) {
    .nlf-cf-reviews__grid {
        grid-template-columns: 1fr;
    }
}

/*
 * In the Caravan Finance reviews section the CTA panel appears ABOVE the
 * Google Reviews footer link (order is reversed vs the Homepage).
 * The global .nlf-reviews__footer carries margin-bottom only, so a
 * scoped margin-top restores the visual gap between the two elements.
 */
.nlf-cf-reviews .nlf-reviews__footer {
    margin-top: 32px;
}


/* ============================================================
   HYBRID CAMPER FINANCE HERO SECTION  —  .nlf-hcf-hero
   ============================================================
   Full-width photographic hero for the Hybrid Camper Finance page.
   Structurally identical to .nlf-cf-hero; only the background image
   URL differs. All other tokens, sizing and overlay values are shared
   by parallel rules to keep both heroes visually consistent.

   Does NOT modify .nlf-cf-hero or any other existing selector.
   ============================================================ */

.nlf-hcf-hero {
    position: relative;
    background-color: var(--nlf-navy-dark);     /* solid fallback if image fails */
    background-image: var(--nlf-hcf-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );   /* 48px + 80px fixed header = 128px */
    padding-bottom: var(--nlf-section-gap);                   /* 80px */
    overflow: hidden;
}

/* Dark gradient overlay — text readability over photograph */
.nlf-hcf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.75) 0%,
        rgba(11, 19, 41, 0.52) 50%,
        rgba(11, 19, 41, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Content layer sits above the overlay */
.nlf-hcf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.nlf-hcf-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-hcf-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-hcf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .nlf-hcf-hero {
        padding-top: calc( 32px + 80px );              /* 32px + 80px fixed header = 112px */
        padding-bottom: var(--nlf-section-gap-sm);     /* 48px */
    }
}


/* ============================================================
   HYBRID CAMPER FINANCE BENEFITS  —  .nlf-hcf-benefits
   ============================================================
   Third section on the Hybrid Camper Finance page, immediately below
   the Why NLF section. Both share a white background.

   Structurally identical to .nlf-cf-benefits rules; scoped under
   .nlf-hcf-* to keep Hybrid and Caravan Finance independent.
   ============================================================ */

/* Collapse top padding so §2 (Why NLF) and §3 (Benefits) feel
   visually connected on the shared white canvas. */
.nlf-hcf-benefits {
    padding-top: 0;
}

/* Light-grey card backgrounds distinguish cards from the white section. */
.nlf-hcf-benefits__card {
    background-color: var(--nlf-bg-light);
}

/* Inline contextual links within card body paragraphs. */
.nlf-hcf-benefits__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-hcf-benefits__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-hcf-benefits__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Small centred licensing footer line below the card grid. */
.nlf-hcf-benefits__licence {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;    /* 13 px */
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   HYBRID CAMPER FINANCE GUIDE  —  .nlf-hcf-content
   ============================================================
   Seventh section on the Hybrid Camper Finance page (D32), after Apply.
   Information cards reuse the same V2 card/grid language as Caravan
   Section 7. Full section padding is required because Apply uses a
   light background; do not collapse padding-top.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white, .nlf-container
     .nlf-grid / .nlf-grid--3 (except the scoped 1-column override)
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   Hybrid-scoped selectors (same visual treatment as .nlf-cf-content*):
     .nlf-hcf-content__grid       — 3-col desktop; 1-col below 1100px
     .nlf-hcf-content__card       — light-grey information card
     .nlf-hcf-content__link       — inline contextual text-link
     .nlf-hcf-content__disclaimer — small muted compliance line
   ============================================================ */

.nlf-hcf-content__grid.nlf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1099px) {
    .nlf-hcf-content__grid.nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.nlf-hcf-content__card {
    background-color: var(--nlf-bg-light);
    min-width: 0;
}

@media (max-width: 599px) {
    .nlf-hcf-content__card {
        padding: 24px 20px;
    }
}

.nlf-hcf-content__card:hover {
    transform: none;
}

.nlf-hcf-content__card .nlf-card__title {
    font-size: 1.25rem;
}

.nlf-hcf-content__card .nlf-card__text + .nlf-card__text {
    margin-top: 0.85rem;
}

.nlf-hcf-content__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-hcf-content__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-hcf-content__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-hcf-content__disclaimer {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   HYBRID CAMPER FINANCE REVIEWS  —  .nlf-hcf-reviews
   ============================================================
   Fifth section on the Hybrid Camper Finance page.
   Navy section background matches the global reviews design system.

   Static 4-column grid (not an nlf-grid variant) mirrors the
   approved Caravan Finance reviews grid pattern, scoped here under
   .nlf-hcf-reviews__grid to keep both pages independent.
   ============================================================ */

.nlf-hcf-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.nlf-hcf-reviews__grid > .nlf-review-card {
    width: 100%;
}

/* Tablet — 2 columns */
@media (max-width: 991px) {
    .nlf-hcf-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — 1 column */
@media (max-width: 599px) {
    .nlf-hcf-reviews__grid {
        grid-template-columns: 1fr;
    }
}

/*
 * In the Hybrid Camper Finance reviews section the CTA panel appears ABOVE the
 * Google Reviews footer link (same order as Caravan Finance).
 * Scoped margin-top restores the visual gap between the two elements.
 */
.nlf-hcf-reviews .nlf-reviews__footer {
    margin-top: 32px;
}


/* ============================================================
   CAMPER TRAILER FINANCE HERO SECTION  —  .nlf-ctf-hero
   ============================================================
   Full-width photographic hero for the Camper Trailer Finance page.
   Structurally identical to .nlf-cf-hero and .nlf-hcf-hero; only the
   background image URL and namespace differ.

   Does NOT modify .nlf-cf-hero, .nlf-hcf-hero, or any other selector.
   ============================================================ */

.nlf-ctf-hero {
    position: relative;
    background-color: var(--nlf-navy-dark);     /* solid fallback if image fails */
    background-image: var(--nlf-ctf-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );   /* 48px + 80px fixed header = 128px */
    padding-bottom: var(--nlf-section-gap);                   /* 80px */
    overflow: hidden;
}

/* Dark gradient overlay — text readability over photograph */
.nlf-ctf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.75) 0%,
        rgba(11, 19, 41, 0.52) 50%,
        rgba(11, 19, 41, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Content layer sits above the overlay */
.nlf-ctf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.nlf-ctf-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-ctf-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-ctf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .nlf-ctf-hero {
        padding-top: calc( 32px + 80px );              /* 32px + 80px fixed header = 112px */
        padding-bottom: var(--nlf-section-gap-sm);     /* 48px */
    }
}


/* ============================================================
   CAMPER TRAILER FINANCE BENEFITS  —  .nlf-ctf-benefits
   ============================================================
   Third section on the Camper Trailer Finance page, immediately below
   the Why NLF section. Both share a white background.

   Structurally identical to .nlf-cf-benefits and .nlf-hcf-benefits;
   scoped under .nlf-ctf-* to keep all three finance pages independent.
   ============================================================ */

/* Collapse top padding so §2 (Why NLF) and §3 (Benefits) feel
   visually connected on the shared white canvas. */
.nlf-ctf-benefits {
    padding-top: 0;
}

/* Light-grey card backgrounds distinguish cards from the white section. */
.nlf-ctf-benefits__card {
    background-color: var(--nlf-bg-light);
}

/* Inline contextual links within card body paragraphs. */
.nlf-ctf-benefits__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-ctf-benefits__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-ctf-benefits__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Small centred licensing footer line below the card grid. */
.nlf-ctf-benefits__licence {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;    /* 13 px */
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   CAMPER TRAILER FINANCE GUIDE  —  .nlf-ctf-content
   ============================================================
   Seventh section on the Camper Trailer Finance page (D33), after Apply.
   Information cards reuse the same V2 card/grid language as Caravan
   and Hybrid Section 7. Full section padding is required because
   Apply uses a light background; do not collapse padding-top.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white, .nlf-container
     .nlf-grid / .nlf-grid--3 (except the scoped 1-column override)
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   Camper Trailer-scoped selectors (same visual treatment as
   .nlf-cf-content* and .nlf-hcf-content*):
     .nlf-ctf-content__grid       — 3-col desktop; 1-col below 1100px
     .nlf-ctf-content__card       — light-grey information card
     .nlf-ctf-content__link       — inline contextual text-link
     .nlf-ctf-content__disclaimer — small muted compliance line
   ============================================================ */

.nlf-ctf-content__grid.nlf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1099px) {
    .nlf-ctf-content__grid.nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.nlf-ctf-content__card {
    background-color: var(--nlf-bg-light);
    min-width: 0;
}

@media (max-width: 599px) {
    .nlf-ctf-content__card {
        padding: 24px 20px;
    }
}

.nlf-ctf-content__card:hover {
    transform: none;
}

.nlf-ctf-content__card .nlf-card__title {
    font-size: 1.25rem;
}

.nlf-ctf-content__card .nlf-card__text + .nlf-card__text {
    margin-top: 0.85rem;
}

.nlf-ctf-content__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-ctf-content__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-ctf-content__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-ctf-content__disclaimer {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   CAMPER TRAILER FINANCE REVIEWS  —  .nlf-ctf-reviews
   ============================================================
   Fifth section on the Camper Trailer Finance page.
   Navy section background matches the global reviews design system.

   IMPORTANT: This page supplies exactly TWO review cards.
   A 2-column grid (max-width capped and centred) is used rather than
   the 4-column grid used by Caravan Finance and Hybrid Camper Finance.
   At mobile (≤599px) this collapses to 1 column.
   ============================================================ */

.nlf-ctf-reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
}

.nlf-ctf-reviews__grid > .nlf-review-card {
    width: 100%;
}

/* Mobile — 1 column */
@media (max-width: 599px) {
    .nlf-ctf-reviews__grid {
        grid-template-columns: 1fr;
    }
}

/*
 * In the Camper Trailer Finance reviews section the CTA panel appears ABOVE the
 * Google Reviews footer link (same order as Caravan and Hybrid Camper Finance).
 * Scoped margin-top restores the visual gap between the two elements.
 */
.nlf-ctf-reviews .nlf-reviews__footer {
    margin-top: 32px;
}


/* ============================================================
   MOTORHOME FINANCE HERO SECTION  —  .nlf-mhf-hero
   ============================================================
   Structurally identical to .nlf-cf-hero / .nlf-hcf-hero / .nlf-ctf-hero.
   Only the background image URL and namespace differ.
   ============================================================ */

.nlf-mhf-hero {
    position: relative;
    background-color: var(--nlf-navy-dark);
    background-image: var(--nlf-mhf-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
    padding-bottom: var(--nlf-section-gap);
    overflow: hidden;
}

.nlf-mhf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.75) 0%,
        rgba(11, 19, 41, 0.52) 50%,
        rgba(11, 19, 41, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.nlf-mhf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.nlf-mhf-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-mhf-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-mhf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .nlf-mhf-hero {
        padding-top: calc( 32px + 80px );
        padding-bottom: var(--nlf-section-gap-sm);
    }
}


/* ============================================================
   MOTORHOME FINANCE BENEFITS  —  .nlf-mhf-benefits
   ============================================================ */

.nlf-mhf-benefits {
    padding-top: 0;
}

.nlf-mhf-benefits__card {
    background-color: var(--nlf-bg-light);
}

.nlf-mhf-benefits__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-mhf-benefits__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-mhf-benefits__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-mhf-benefits__licence {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   MOTORHOME FINANCE GUIDE  —  .nlf-mhf-content
   ============================================================
   Seventh section on the Motorhome Finance page (D34), after Apply.
   Information cards reuse the same V2 card/grid language as Caravan,
   Hybrid and Camper Trailer Section 7. Full section padding is required
   because Apply uses a light background; do not collapse padding-top.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white, .nlf-container
     .nlf-grid / .nlf-grid--3 (except the scoped 1-column override)
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   Motorhome-scoped selectors (same visual treatment as
   .nlf-cf-content*, .nlf-hcf-content* and .nlf-ctf-content*):
     .nlf-mhf-content__grid       — 3-col desktop; 1-col below 1100px
     .nlf-mhf-content__card       — light-grey information card
     .nlf-mhf-content__link       — inline contextual text-link
     .nlf-mhf-content__disclaimer — small muted compliance line
   ============================================================ */

.nlf-mhf-content__grid.nlf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1099px) {
    .nlf-mhf-content__grid.nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.nlf-mhf-content__card {
    background-color: var(--nlf-bg-light);
    min-width: 0;
}

@media (max-width: 599px) {
    .nlf-mhf-content__card {
        padding: 24px 20px;
    }
}

.nlf-mhf-content__card:hover {
    transform: none;
}

.nlf-mhf-content__card .nlf-card__title {
    font-size: 1.25rem;
}

.nlf-mhf-content__card .nlf-card__text + .nlf-card__text {
    margin-top: 0.85rem;
}

.nlf-mhf-content__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-mhf-content__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-mhf-content__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-mhf-content__disclaimer {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   MOTORHOME FINANCE REVIEWS  —  .nlf-mhf-reviews
   ============================================================
   Exactly 3 reviews. 3-col desktop → 1-col mobile.
   ============================================================ */

.nlf-mhf-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.nlf-mhf-reviews__grid > .nlf-review-card {
    width: 100%;
}

@media (max-width: 767px) {
    .nlf-mhf-reviews__grid {
        grid-template-columns: 1fr;
    }
}

.nlf-mhf-reviews .nlf-reviews__footer {
    margin-top: 32px;
}


/* ============================================================
   BOAT FINANCE HERO SECTION  —  .nlf-bf-hero
   ============================================================ */

.nlf-bf-hero {
    position: relative;
    background-color: var(--nlf-navy-dark);
    background-image: var(--nlf-bf-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
    padding-bottom: var(--nlf-section-gap);
    overflow: hidden;
}

.nlf-bf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.75) 0%,
        rgba(11, 19, 41, 0.52) 50%,
        rgba(11, 19, 41, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.nlf-bf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.nlf-bf-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-bf-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-bf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .nlf-bf-hero {
        padding-top: calc( 32px + 80px );
        padding-bottom: var(--nlf-section-gap-sm);
    }
}


/* ============================================================
   BOAT FINANCE BENEFITS  —  .nlf-bf-benefits
   ============================================================ */

.nlf-bf-benefits {
    padding-top: 0;
}

.nlf-bf-benefits__card {
    background-color: var(--nlf-bg-light);
}

.nlf-bf-benefits__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-bf-benefits__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-bf-benefits__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-bf-benefits__licence {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   BOAT FINANCE GUIDE  —  .nlf-bf-content
   ============================================================
   Seventh section on the Boat Finance page (D35), after Apply.
   Information cards reuse the same V2 card/grid language as Caravan,
   Hybrid, Camper Trailer and Motorhome Section 7. Full section padding
   is required because Apply uses a light background; do not collapse
   padding-top.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white, .nlf-container
     .nlf-grid / .nlf-grid--3 (except the scoped 1-column override)
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   Boat-scoped selectors (same visual treatment as
   .nlf-cf-content*, .nlf-hcf-content*, .nlf-ctf-content* and
   .nlf-mhf-content*):
     .nlf-bf-content__grid       — 3-col desktop; 1-col below 1100px
     .nlf-bf-content__card       — light-grey information card
     .nlf-bf-content__disclaimer — small muted compliance line
   ============================================================ */

.nlf-bf-content__grid.nlf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1099px) {
    .nlf-bf-content__grid.nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.nlf-bf-content__card {
    background-color: var(--nlf-bg-light);
    min-width: 0;
}

@media (max-width: 599px) {
    .nlf-bf-content__card {
        padding: 24px 20px;
    }
}

.nlf-bf-content__card:hover {
    transform: none;
}

.nlf-bf-content__card .nlf-card__title {
    font-size: 1.25rem;
}

.nlf-bf-content__card .nlf-card__text + .nlf-card__text {
    margin-top: 0.85rem;
}

.nlf-bf-content__disclaimer {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   BOAT FINANCE REVIEWS  —  .nlf-bf-reviews
   ============================================================
   4-col desktop → 2-col tablet → 1-col mobile.
   Mirrors CF/HCF 4-review pattern.
   ============================================================ */

.nlf-bf-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* Clear the marquee-specific fixed width so cards fill their grid columns */
.nlf-bf-reviews__grid > .nlf-review-card {
    width: 100%;
}

@media (max-width: 991px) {
    .nlf-bf-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .nlf-bf-reviews__grid {
        grid-template-columns: 1fr;
    }
}

.nlf-bf-reviews .nlf-reviews__footer {
    margin-top: 32px;
}

/* Reviews H2 — explicit centring for longer heading that wraps on narrow viewports */
.nlf-bf-reviews .nlf-reviews__heading {
    text-align: center;
}


/* ============================================================
   MOTORCYCLE FINANCE HERO SECTION  —  .nlf-mcf-hero
   ============================================================ */

.nlf-mcf-hero {
    position: relative;
    background-color: var(--nlf-navy-dark);
    background-image: var(--nlf-mcf-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
    padding-bottom: var(--nlf-section-gap);
    overflow: hidden;
}

.nlf-mcf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 41, 0.75) 0%,
        rgba(11, 19, 41, 0.52) 50%,
        rgba(11, 19, 41, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.nlf-mcf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.nlf-mcf-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-mcf-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
}

.nlf-mcf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .nlf-mcf-hero {
        padding-top: calc( 32px + 80px );
        padding-bottom: var(--nlf-section-gap-sm);
    }
}


/* ============================================================
   MOTORCYCLE FINANCE BENEFITS  —  .nlf-mcf-benefits
   ============================================================ */

.nlf-mcf-benefits {
    padding-top: 0;
}

.nlf-mcf-benefits__card {
    background-color: var(--nlf-bg-light);
}

.nlf-mcf-benefits__link {
    font-weight: 500;
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nlf-mcf-benefits__link:hover {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
}

.nlf-mcf-benefits__link:focus-visible {
    color: var(--nlf-accent-hover);
    text-decoration-color: var(--nlf-accent-hover);
    outline: 2px solid var(--nlf-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.nlf-mcf-benefits__licence {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   MOTORCYCLE FINANCE GUIDE  —  .nlf-mcf-content
   ============================================================
   Seventh section on the Motorcycle Finance page (D36), after Apply.
   Information cards reuse the same V2 card/grid language as Caravan,
   Hybrid, Camper Trailer, Motorhome and Boat Section 7. Full section
   padding is required because Apply uses a light background; do not
   collapse padding-top.

   Global infrastructure reused — no rules here modify:
     .nlf-section, .nlf-section--white, .nlf-container
     .nlf-grid / .nlf-grid--3 (except the scoped 1-column override)
     .nlf-card, .nlf-card__icon, .nlf-card__title, .nlf-card__text

   Motorcycle-scoped selectors (same visual treatment as
   .nlf-cf-content*, .nlf-hcf-content*, .nlf-ctf-content*,
   .nlf-mhf-content* and .nlf-bf-content*):
     .nlf-mcf-content__grid       — 3-col desktop; 1-col below 1100px
     .nlf-mcf-content__card       — light-grey information card
     .nlf-mcf-content__disclaimer — small muted compliance line
   ============================================================ */

.nlf-mcf-content__grid.nlf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1099px) {
    .nlf-mcf-content__grid.nlf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.nlf-mcf-content__card {
    background-color: var(--nlf-bg-light);
    min-width: 0;
}

@media (max-width: 599px) {
    .nlf-mcf-content__card {
        padding: 24px 20px;
    }
}

.nlf-mcf-content__card:hover {
    transform: none;
}

.nlf-mcf-content__card .nlf-card__title {
    font-size: 1.25rem;
}

.nlf-mcf-content__card .nlf-card__text + .nlf-card__text {
    margin-top: 0.85rem;
}

.nlf-mcf-content__disclaimer {
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}


/* ============================================================
   MOTORCYCLE FINANCE REVIEWS  —  .nlf-mcf-reviews
   ============================================================
   4-col desktop → 2-col tablet → 1-col mobile.
   Width reset required: global .nlf-review-card carries a
   homepage-marquee fixed width that prevents cards from filling
   grid columns. Heading centring applied explicitly.
   ============================================================ */

.nlf-mcf-reviews__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* Clear the marquee-specific fixed width so cards fill their grid columns */
.nlf-mcf-reviews__grid > .nlf-review-card {
    width: 100%;
}

@media (max-width: 991px) {
    .nlf-mcf-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .nlf-mcf-reviews__grid {
        grid-template-columns: 1fr;
    }
}

/* Explicit heading centring — heading text wraps on narrower viewports */
.nlf-mcf-reviews .nlf-reviews__heading {
    text-align: center;
}

.nlf-mcf-reviews .nlf-reviews__footer {
    margin-top: 32px;
}


/* ============================================================
   BRANDS WE FINANCE HERO  –  .nlf-brands-hero
   ============================================================
   Text-only navy hero. Pattern matches .nlf-about-hero.
   No background image. No overlay. No JavaScript.

   Reuses globally:
     .nlf-section, .nlf-section--navy, .nlf-section--compact
     .nlf-container, .nlf-container--narrow
     .nlf-badge, .nlf-badge--dark

   Brands-specific rules are limited to:
     .nlf-brands-hero          — top padding to clear the fixed 80px header
     .nlf-brands-hero__heading — H1 sizing on navy
     .nlf-brands-hero__intro   — lead paragraph on navy
   ============================================================ */

.nlf-brands-hero {
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
}

.nlf-brands-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-brands-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .nlf-brands-hero {
        padding-top: calc( 32px + 80px );
    }
}


/* ============================================================
   BRANDS WE FINANCE FINDER  –  .nlf-brands-finder
   ============================================================
   Server-rendered text A–Z manufacturer index. No JavaScript.
   Name-only navigation. Logos belong on Slice 3 profiles.
   ============================================================ */

.nlf-brands-finder__az {
    margin-bottom: 2.5rem;
}

.nlf-brands-finder__az-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-brands-finder__az-item {
    margin: 0;
}

.nlf-brands-finder__az-link,
.nlf-brands-finder__az-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 0.4rem;
    border-radius: var(--nlf-radius);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1;
    text-decoration: none;
}

.nlf-brands-finder__az-link {
    font-weight: 700;
    color: var(--nlf-navy-dark);
    background-color: var(--nlf-bg-light);
    border: 1px solid var(--nlf-border);
}

.nlf-brands-finder__az-link:hover {
    color: var(--nlf-accent);
    border-color: rgba(232, 135, 43, 0.45);
}

.nlf-brands-finder__az-empty {
    font-weight: 400;
    color: var(--nlf-text-muted);
    background-color: transparent;
    border: 1px dashed var(--nlf-border);
    opacity: 0.55;
    cursor: default;
}

.nlf-brands-finder__group {
    margin-bottom: 1.5rem;
    scroll-margin-top: 96px;
}

.nlf-brands-finder__letter {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--nlf-border);
}

.nlf-brands-finder__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    column-gap: 16px;
    row-gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-brands-finder__item {
    position: relative;
    margin: 0;
    min-width: 0;
}

.nlf-brands-finder__brand {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: var(--nlf-radius);
    text-decoration: none;
    color: var(--nlf-navy-dark);
}

.nlf-brands-finder__brand:hover {
    color: var(--nlf-accent);
}

.nlf-brands-finder__aliases {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nlf-brands-finder__name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 599px) {
    .nlf-brands-finder__list {
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        column-gap: 8px;
    }

    .nlf-brands-finder__az-link {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ============================================================
   BRANDS WE FINANCE DIRECTORY  –  .nlf-brands-directory
   ============================================================
   Native <details>/<summary> manufacturer profiles. No JavaScript.
   Compact when closed. Finance Content remains in the HTML.
   ============================================================ */

.nlf-brands-directory__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

.nlf-brands-directory__entity {
    display: contents;
}

.nlf-brands-alias-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nlf-brands-directory__profile {
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    scroll-margin-top: 96px;
}

.nlf-brands-directory__profile[open] {
    border-color: rgba(232, 135, 43, 0.35);
}

.nlf-brands-directory__profile:target {
    border-color: rgba(232, 135, 43, 0.55);
}

.nlf-brands-directory__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.nlf-brands-directory__summary::-webkit-details-marker,
.nlf-brands-directory__summary::marker {
    display: none;
    content: '';
}

.nlf-brands-directory__summary:hover {
    background-color: rgba(232, 135, 43, 0.04);
}

.nlf-brands-directory__summary:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: -3px;
}

.nlf-brands-directory__logo {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-width: 80px;
    height: 40px;
    object-fit: contain;
    object-position: left center;
}

.nlf-brands-directory__heading {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    text-align: left;
    overflow-wrap: anywhere;
}

.nlf-brands-directory__icon {
    position: relative;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgba(232, 135, 43, 0.12);
    transition: transform 0.25s ease;
}

.nlf-brands-directory__icon::before,
.nlf-brands-directory__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--nlf-accent);
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.nlf-brands-directory__icon::before {
    width: 10px;
    height: 2.5px;
}

.nlf-brands-directory__icon::after {
    width: 2.5px;
    height: 10px;
}

.nlf-brands-directory__profile[open] .nlf-brands-directory__icon {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .nlf-brands-directory__icon {
        transition: none;
    }
}

.nlf-brands-directory__body {
    border-top: 1px solid var(--nlf-border);
    padding: 14px 16px 16px;
    overflow-wrap: anywhere;
}

.nlf-brands-directory__body p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--nlf-text-muted);
    margin-top: 0;
    margin-bottom: 12px;
}

.nlf-brands-directory__body p:last-child {
    margin-bottom: 0;
}

.nlf-brands-directory__body strong {
    color: var(--nlf-text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .nlf-brands-directory__summary {
        gap: 10px;
        padding: 10px 12px;
    }

    .nlf-brands-directory__logo {
        max-width: 64px;
        height: 32px;
    }

    .nlf-brands-directory__heading {
        font-size: 0.9375rem;
    }

    .nlf-brands-directory__body {
        padding: 12px 12px 14px;
    }
}


/* ============================================================
   PARTNERS HERO  –  .nlf-partners-hero
   ============================================================
   Text-only navy hero. Pattern matches .nlf-about-hero / .nlf-brands-hero.
   No background image. No overlay. No JavaScript.

   Reuses globally:
     .nlf-section, .nlf-section--navy, .nlf-section--compact
     .nlf-container, .nlf-container--narrow
     .nlf-badge, .nlf-badge--dark

   Partners-specific rules are limited to:
     .nlf-partners-hero          — top padding to clear the fixed 80px header
     .nlf-partners-hero__heading — H1 sizing on navy
     .nlf-partners-hero__intro   — lead paragraph on navy
     .nlf-partners-hero__support — supporting paragraph, slightly muted
   ============================================================ */

.nlf-partners-hero {
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
}

.nlf-partners-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-partners-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.nlf-partners-hero__support {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0;
    margin-bottom: 1.75rem;
}

@media (max-width: 767px) {
    .nlf-partners-hero {
        padding-top: calc( 32px + 80px );
    }

    .nlf-partners-hero__support {
        margin-bottom: 1.5rem;
    }
}


/* ============================================================
   PARTNERS LENDER LOGO GRID  –  .nlf-partners-lenders
   ============================================================
   Static responsive logo display. Not a marquee, slider or card list.
   Reuses global tokens for colour, radius, border and section chrome.
   ============================================================ */

.nlf-partners-lenders__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-partners-lenders__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin: 0;
    padding: 16px;
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
}

.nlf-partners-lenders__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    text-decoration: none;
}

.nlf-partners-lenders__item:has(.nlf-partners-lenders__link:hover) {
    border-color: rgba(232, 135, 43, 0.35);
}

.nlf-partners-lenders__link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: var(--nlf-radius);
}

.nlf-partners-lenders__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    object-position: center;
}

/* Desktop 6-col only: if the last row has 4 items (28 lenders),
   start that row at column 2 so the four tiles sit in columns 2–5. */
@media (min-width: 992px) {
    .nlf-partners-lenders__item:nth-child(6n + 1):nth-last-child(4) {
        grid-column-start: 2;
    }
}

@media (max-width: 991px) {
    .nlf-partners-lenders__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .nlf-partners-lenders__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .nlf-partners-lenders__item {
        min-height: 76px;
        padding: 12px;
    }

    .nlf-partners-lenders__logo {
        max-height: 40px;
    }
}

@media (max-width: 599px) {
    .nlf-partners-lenders__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   PARTNERS DEALERSHIP DIRECTORY  –  .nlf-partners-dealers
   ============================================================
   Region-grouped dealer cards. Sticky region jump nav +
   compact mid-directory assist callout. No JavaScript filter.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    html:has(.nlf-partners-dealers) {
        scroll-behavior: smooth;
    }
}

.nlf-partners-dealers__nav {
    position: sticky;
    top: 80px;
    z-index: 30;
    margin: 0 0 2.5rem;
    padding: 12px 0 14px;
    background-color: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--nlf-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.nlf-partners-dealers__nav-hint {
    margin: 0 0 8px;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nlf-text-muted);
}

.nlf-partners-dealers__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-partners-dealers__nav-item {
    margin: 0;
}

.nlf-partners-dealers__nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-bg-light);
    color: var(--nlf-navy-dark);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.nlf-partners-dealers__nav-link:hover {
    color: var(--nlf-accent);
    border-color: rgba(232, 135, 43, 0.45);
}

.nlf-partners-dealers__nav-link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-partners-dealers__region {
    margin-bottom: 2.75rem;
    /* Fixed header (80px) + sticky region nav (~72px) */
    scroll-margin-top: 160px;
}

.nlf-partners-dealers__region:last-of-type {
    margin-bottom: 0;
}

.nlf-partners-dealers__region-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin: 0 0 1.25rem;
}

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

.nlf-partners-dealers__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 24px 22px;
}

.nlf-partners-dealers__card:hover {
    transform: none;
}

.nlf-partners-dealers__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin: 0 0 16px;
    padding: 12px;
    background-color: var(--nlf-bg-light);
    border-radius: var(--nlf-radius);
}

.nlf-partners-dealers__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    object-position: center;
}

.nlf-partners-dealers__name {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.nlf-partners-dealers__brands,
.nlf-partners-dealers__address,
.nlf-partners-dealers__phone-wrap {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--nlf-text-muted);
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.nlf-partners-dealers__label {
    display: inline;
    font-weight: 600;
    color: var(--nlf-navy-dark);
}

.nlf-partners-dealers__phone,
.nlf-partners-dealers__website {
    color: var(--nlf-accent);
    text-decoration: none;
}

.nlf-partners-dealers__phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nlf-partners-dealers__phone:hover,
.nlf-partners-dealers__website:hover {
    color: var(--nlf-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nlf-partners-dealers__phone:focus-visible,
.nlf-partners-dealers__website:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.nlf-partners-dealers__website {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: auto;
    padding-top: 8px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Single restrained conversion callout after the directory list.
   Navy panel reuses About dual-CTA button treatment. */
.nlf-partners-dealers__assist {
    margin-top: 2.75rem;
    padding: 2rem 1.75rem;
    border-radius: var(--nlf-radius-lg);
    background-color: var(--nlf-navy-dark);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.nlf-partners-dealers__assist-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-white);
    margin: 0 0 0.75rem;
}

.nlf-partners-dealers__assist-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 42rem;
    margin: 0 auto 1.5rem;
}

.nlf-partners-dealers__assist .nlf-about-cta__actions {
    margin-top: 0;
}

@media (max-width: 991px) {
    .nlf-partners-dealers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .nlf-partners-dealers__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nlf-partners-dealers__nav {
        top: 80px;
        padding-left: 0;
        padding-right: 0;
    }

    .nlf-partners-dealers__nav-link {
        min-height: 44px;
        padding: 0 12px;
        font-size: 0.75rem;
    }

    .nlf-partners-dealers__region {
        scroll-margin-top: 168px;
    }

    .nlf-partners-dealers__assist {
        padding: 1.5rem 1.15rem;
        text-align: left;
    }
}


/* ============================================================
   MANUFACTURER ROUTE PROTOTYPE  –  .nlf-mfr-*
   D38 Leader Caravans only. Reuses About process + CTA actions.
   Does not modify Home, finance pages, Partners, or Contact.
   ============================================================ */

.nlf-mfr-hero {
    padding-top: calc( var(--nlf-section-gap-sm) + 80px );
}

.nlf-mfr-hero__logo {
    display: block;
    width: auto;
    max-width: 140px;
    height: 56px;
    object-fit: contain;
    object-position: left center;
    background-color: #fff;
    padding: 8px 12px;
    border-radius: var(--nlf-radius);
    margin: 0 0 1rem;
}

.nlf-mfr-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    line-height: 1.12;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.nlf-mfr-hero__intro {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 1.75rem;
}

.nlf-mfr-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.nlf-mfr-answer {
    padding-block: 40px;
}

.nlf-mfr-answer .nlf-section-header {
    margin-bottom: 1.15rem;
}

.nlf-mfr-answer__text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--nlf-text);
    max-width: 42rem;
    margin: 0 auto 0.85rem;
}

.nlf-mfr-answer__text:last-of-type {
    margin-bottom: 0;
}

.nlf-mfr-answer__note {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    max-width: 42rem;
    margin: 1rem auto 0;
}

.nlf-mfr-proof {
    padding-block: 48px;
}

.nlf-mfr-proof .nlf-section-header {
    margin-bottom: 1.5rem;
}

.nlf-mfr-proof .nlf-about-proof__grid {
    margin-bottom: 0;
}

.nlf-mfr-proof .nlf-about-proof__value {
    font-size: clamp(1.2rem, 1.8vw, 1.625rem);
}

.nlf-mfr-about {
    padding-block: 48px;
}

.nlf-mfr-about__layout {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.nlf-mfr-about__identity {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    box-shadow: var(--nlf-shadow);
    padding: 28px 24px;
    min-height: 160px;
}

.nlf-mfr-about__logo {
    display: block;
    width: auto;
    max-width: 180px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

.nlf-mfr-about__identity-name {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--nlf-navy-dark);
    margin: 0;
    text-align: center;
}

.nlf-mfr-about__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    color: var(--nlf-navy-dark);
    margin: 0.75rem 0 1rem;
}

.nlf-mfr-about__text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--nlf-text-muted);
    margin: 0 0 0.85rem;
}

.nlf-mfr-about__text:last-of-type {
    margin-bottom: 0;
}

.nlf-mfr-about__official {
    margin: 1.15rem 0 0;
}

.nlf-mfr-about__official-link {
    display: inline-block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--nlf-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.nlf-mfr-about__official-link:hover,
.nlf-mfr-about__official-link:focus-visible {
    color: var(--nlf-accent-hover);
}

.nlf-mfr-about__official-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--nlf-text-muted);
}

.nlf-mfr-consider__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.nlf-mfr-consider__group-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.75rem;
}

.nlf-mfr-consider__list {
    margin: 0;
    padding-left: 1.15rem;
}

.nlf-mfr-consider__list li {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
    margin-bottom: 0.4rem;
}

.nlf-brands-directory__guide {
    margin: 1rem 0 0;
}

.nlf-brands-directory__guide a {
    font-weight: 600;
    color: var(--nlf-accent);
    text-decoration: none;
}

.nlf-brands-directory__guide a:hover {
    color: var(--nlf-accent-hover);
}

@media (max-width: 767px) {
    .nlf-mfr-hero {
        padding-top: calc( 32px + 80px );
    }

    .nlf-mfr-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nlf-mfr-answer,
    .nlf-mfr-proof,
    .nlf-mfr-about {
        padding-block: 32px;
    }

    .nlf-mfr-about__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .nlf-mfr-about__identity {
        min-height: 0;
        padding: 20px;
    }

    .nlf-mfr-about__logo {
        max-width: 140px;
        max-height: 64px;
    }
}

@media (max-width: 640px) {
    .nlf-mfr-consider__groups {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============================================================
   CARAVAN SHOWS & EVENTS  –  public card grid (2.0.119)
   ============================================================
   Reuses About hero/CTA, FAQ, badges, buttons, Home asset chips.
   Unique CSS is the compact event card grid — V1 composition,
   V2 tokens. 2.0.120: equal-height rows via grid stretch + flex column.
   ============================================================ */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#shows-hero.nlf-about-hero {
    padding-top: calc(80px + 24px);
    padding-bottom: 28px;
}

#shows-hero .nlf-about-hero__heading {
    margin-top: 0.5rem;
    margin-bottom: 0.875rem;
}

#shows-hero .nlf-about-hero__intro {
    margin-bottom: 1.25rem;
}

#shows-hero .nlf-about-hero__actions {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    #shows-hero.nlf-about-hero {
        padding-top: calc(80px + 16px);
        padding-bottom: 24px;
    }

    #shows-hero .nlf-about-hero__actions .nlf-btn {
        width: 100%;
    }
}

.nlf-shows-intro__header {
    margin-bottom: 1.5rem;
}

.nlf-shows-intro__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.nlf-shows-intro__points li {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--nlf-text-muted);
}

.nlf-shows-intro__points strong {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin-bottom: 0.2rem;
}

.nlf-shows-intro__points a {
    color: var(--nlf-accent);
}

.nlf-shows-states.nlf-why-us__assets {
    margin-top: 0;
    margin-bottom: 2rem;
}

.nlf-shows-states .nlf-why-us__assets-link {
    background-color: var(--nlf-white);
}

.nlf-shows-states__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    color: var(--nlf-text-muted);
    margin: 0 0 0.75rem;
}

.nlf-shows-state-target {
    scroll-margin-top: 96px;
}

.nlf-shows-empty {
    max-width: 640px;
    margin: 0 auto 1rem;
    text-align: center;
}

.nlf-shows-empty__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.75rem;
}

.nlf-shows-empty a,
.nlf-show-card__action a,
.nlf-shows-pathway__secondary {
    color: var(--nlf-accent);
}

.nlf-shows-month {
    margin-bottom: 2.25rem;
}

.nlf-shows-month__heading {
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nlf-navy-dark);
    margin: 0 0 1rem;
}

.nlf-shows-group {
    margin-top: 2.25rem;
}

.nlf-shows-group__intro {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--nlf-text-muted);
    margin: 0 0 1rem;
}

.nlf-show-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.nlf-show-card {
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    box-shadow: var(--nlf-shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    position: relative;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.nlf-show-card:hover {
    box-shadow: var(--nlf-shadow-md);
    transform: translateY(-2px);
}

.nlf-show-card__status {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.65rem;
    border: 1px solid var(--nlf-border);
    background-color: var(--nlf-white);
    color: var(--nlf-navy-dark);
}

.nlf-show-card__status--cancelled {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.nlf-show-card__status--postponed {
    background-color: rgba(232, 135, 43, 0.1);
    color: var(--nlf-accent);
    border-color: rgba(232, 135, 43, 0.28);
}

.nlf-show-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nlf-navy-dark);
    margin: 0 0 0.75rem;
    overflow-wrap: anywhere;
}

.nlf-show-card__meta,
.nlf-show-card__desc,
.nlf-show-card__notice,
.nlf-show-card__action {
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 0.45rem;
    overflow-wrap: anywhere;
}

.nlf-show-card__meta {
    color: var(--nlf-text-muted);
}

.nlf-show-card__meta strong {
    font-weight: 600;
    color: var(--nlf-navy-dark);
}

.nlf-show-card__meta--staff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.nlf-show-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nlf-show-card__staff-names {
    color: var(--nlf-navy-dark);
}

.nlf-show-card__desc {
    color: var(--nlf-text-muted);
    margin-top: 0.3rem;
    margin-bottom: 0.65rem;
}

.nlf-show-card__notice {
    color: var(--nlf-text);
    margin-bottom: 0.65rem;
}

.nlf-show-card__action {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--nlf-text-muted);
}

.nlf-show-card__action-sep {
    color: var(--nlf-text-muted);
    margin: 0 0.15rem;
}

.nlf-show-card--cancelled {
    border-color: #fecaca;
    background-color: #fffafa;
}

.nlf-show-card--cancelled:hover,
.nlf-show-card--recent:hover {
    transform: none;
}

.nlf-show-card--postponed,
.nlf-show-card--tbc {
    border-color: rgba(232, 135, 43, 0.28);
}

.nlf-shows-group--recent .nlf-show-card {
    box-shadow: none;
}

.nlf-show-card__action a:focus-visible,
.nlf-shows-pathway__secondary:focus-visible,
.nlf-shows-intro__points a:focus-visible,
.nlf-shows-empty a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .nlf-show-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .nlf-show-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.nlf-shows-pathway__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 20px;
}

.nlf-shows-pathway__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 639px) {
    .nlf-shows-pathway__actions {
        flex-direction: column;
    }

    .nlf-shows-pathway__actions .nlf-btn,
    .nlf-shows-pathway__secondary {
        width: 100%;
    }
}

/* ============================================================
   BLOG ARTICLE  —  native Posts (single.php)
   ============================================================
   Slice 1D. Dark NLF editorial canvas (D55).
   Canvas: --nlf-navy-dark (header navy). Footer stays --nlf-navy.
   Shell: .nlf-container (1280px).
   Reading measure: 62.5rem (~1000px), left-aligned.
   Featured image / tables / galleries / embeds use the shell.
   Closing CTA is a navy-mid panel on the same canvas.
   No sidebar. No schema in this CSS/template.

   Does NOT modify .nlf-hero, finance heroes, or global footer.
   ============================================================ */

.nlf-article {
    --nlf-article-measure: 62.5rem;
    background-color: var(--nlf-navy-dark);
}

.nlf-article-hero {
    padding-top: calc(80px + 40px);
    padding-bottom: 28px;
    background-color: var(--nlf-navy-dark);
}

.nlf-article-hero__back {
    margin: 0 0 1.25rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
}

.nlf-article-hero__back a {
    color: var(--nlf-accent);
    text-decoration: none;
}

.nlf-article-hero__back a::before {
    content: '\2190\00a0';
}

.nlf-article-hero__back a:hover {
    color: var(--nlf-white);
}

.nlf-article-hero .nlf-badge {
    margin-bottom: 0.85rem;
}

.nlf-article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 1.25rem;
}

.nlf-article-hero__meta-label {
    display: inline-block;
    margin-right: 0.3em;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.nlf-article-hero__meta-dot {
    color: var(--nlf-accent);
    font-weight: 700;
}

.nlf-article-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 1.12;
    margin: 0;
    max-width: var(--nlf-article-measure);
    text-wrap: balance;
}

@media (max-width: 767px) {
    .nlf-article-hero {
        padding-top: calc(80px + 20px);
        padding-bottom: 32px;
    }

    .nlf-article-hero__heading {
        font-size: clamp(1.625rem, 8vw, 2.25rem);
        max-width: none;
    }

    .nlf-article-hero__meta {
        margin-bottom: 1rem;
    }
}

.nlf-article-body {
    padding-top: 8px;
    background-color: var(--nlf-navy-dark);
}

.nlf-article-shell {
    overflow-x: clip;
}

.nlf-article-featured {
    margin: 0 0 2.5rem;
}

.nlf-article-featured__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--nlf-radius-lg);
    background-color: var(--nlf-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.nlf-article-featured__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

/* Long-form Gutenberg / classic HTML — article only. */
.nlf-article-prose {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
}

.nlf-article-prose > *:first-child {
    margin-top: 0;
}

/* Reading measure ~1000px, left-aligned in the 1280px shell. */
.nlf-article-prose > p,
.nlf-article-prose > ul,
.nlf-article-prose > ol,
.nlf-article-prose > blockquote,
.nlf-article-prose > .wp-block-quote,
.nlf-article-prose > .wp-block-pullquote,
.nlf-article-prose > .wp-block-list,
.nlf-article-prose > h2,
.nlf-article-prose > h3,
.nlf-article-prose > h4,
.nlf-article-prose > .wp-block-heading {
    max-width: var(--nlf-article-measure);
}

.nlf-article-prose p,
.nlf-article-prose ul,
.nlf-article-prose ol,
.nlf-article-prose pre,
.nlf-article-prose figure {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.nlf-article-prose h2,
.nlf-article-prose h3,
.nlf-article-prose h4 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    color: var(--nlf-white);
    line-height: 1.25;
    text-wrap: balance;
}

.nlf-article-prose h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    margin-top: 3.15rem;
    margin-bottom: 1rem;
}

.nlf-article-prose h2::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: 0.7rem;
    background-color: var(--nlf-accent);
    border-radius: 2px;
}

.nlf-article-prose h3 {
    font-size: clamp(1.1875rem, 2vw, 1.375rem);
    margin-top: 2.15rem;
    margin-bottom: 0.7rem;
}

.nlf-article-prose h4 {
    font-size: 1.0625rem;
    margin-top: 1.65rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.82);
}

.nlf-article-prose a {
    color: var(--nlf-accent);
    text-decoration: underline;
    text-decoration-color: rgba(232, 135, 43, 0.55);
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

.nlf-article-prose a:hover {
    color: var(--nlf-white);
    text-decoration-color: var(--nlf-accent);
}

.nlf-article-prose a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.nlf-article-prose strong,
.nlf-article-prose b {
    font-weight: 600;
    color: var(--nlf-white);
}

.nlf-article-prose em,
.nlf-article-prose i {
    font-style: italic;
}

.nlf-article-prose ul,
.nlf-article-prose ol {
    padding-left: 1.5rem;
}

.nlf-article-prose ul {
    list-style: disc;
}

.nlf-article-prose ol {
    list-style: decimal;
}

.nlf-article-prose li {
    margin-bottom: 0.55rem;
    padding-left: 0.2rem;
}

.nlf-article-prose li::marker {
    color: var(--nlf-accent);
    font-weight: 700;
}

.nlf-article-prose ol > li::marker {
    color: var(--nlf-white);
}

.nlf-article-prose li > ul,
.nlf-article-prose li > ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/*
 * Quote callout is scoped to the Quote element only. Sibling H2/Table
 * blocks are not selected. Gutenberg hierarchy is rendered as authored.
 */
.nlf-article-prose blockquote,
.nlf-article-prose .wp-block-quote {
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.35rem 1.25rem 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid var(--nlf-accent);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-navy-mid);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.0625rem;
    line-height: 1.7;
    box-sizing: border-box;
}

.nlf-article-prose blockquote p,
.nlf-article-prose .wp-block-quote p {
    margin-bottom: 0.85rem;
}

.nlf-article-prose blockquote p:last-child,
.nlf-article-prose .wp-block-quote p:last-child {
    margin-bottom: 0;
}

.nlf-article-prose cite,
.nlf-article-prose .wp-block-quote cite,
.nlf-article-prose .wp-block-pullquote cite {
    display: block;
    margin-top: 0.85rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
}

.nlf-article-prose .wp-block-pullquote {
    margin: 0 0 1.75rem;
    padding: 1.35rem 0;
    border: 0;
    border-top: 3px solid var(--nlf-accent);
    border-bottom: 3px solid var(--nlf-accent);
    background: none;
    text-align: left;
    display: flow-root;
    overflow: hidden;
    isolation: isolate;
}

.nlf-article-prose .wp-block-pullquote p {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.125rem, 2vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.45;
    color: var(--nlf-white);
    margin-bottom: 0;
}

.nlf-article-prose .wp-block-group.has-background {
    padding: 1.25rem 1.35rem;
    border-radius: var(--nlf-radius);
    margin-bottom: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.nlf-article-prose img,
.nlf-article-prose video,
.nlf-article-prose iframe,
.nlf-article-prose embed,
.nlf-article-prose object {
    max-width: 100%;
    height: auto;
}

.nlf-article-prose iframe,
.nlf-article-prose embed,
.nlf-article-prose object {
    display: block;
}

.nlf-article-prose figure {
    max-width: 100%;
}

.nlf-article-prose figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--nlf-radius-lg);
}

.nlf-article-prose figcaption,
.nlf-article-prose .wp-element-caption {
    margin-top: 0.65rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.nlf-article-prose .alignleft,
.nlf-article-prose img.alignleft {
    float: left;
    margin: 0.35rem 1.25rem 1rem 0;
    max-width: 46%;
}

.nlf-article-prose .alignright,
.nlf-article-prose img.alignright {
    float: right;
    margin: 0.35rem 0 1rem 1.25rem;
    max-width: 46%;
}

.nlf-article-prose .aligncenter,
.nlf-article-prose img.aligncenter,
.nlf-article-prose .wp-block-image .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nlf-article-prose .alignwide,
.nlf-article-prose .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.nlf-article-prose .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}

.nlf-article-prose .wp-block-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--nlf-radius);
}

.nlf-article-prose .wp-block-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 2rem;
    background-color: var(--nlf-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius-lg);
}

.nlf-article-prose .wp-block-table table,
.nlf-article-prose table {
    display: table;
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.nlf-article-prose .wp-block-table table {
    min-width: 32rem;
}

.nlf-article-prose th,
.nlf-article-prose td {
    padding: 0.9rem 1.1rem;
    text-align: left;
    vertical-align: top;
}

.nlf-article-prose thead th,
.nlf-article-prose tr > th {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    background-color: var(--nlf-navy-dark);
    color: var(--nlf-white);
    border: 0;
    border-bottom: 3px solid var(--nlf-accent);
}

.nlf-article-prose tbody td,
.nlf-article-prose tfoot td {
    color: rgba(255, 255, 255, 0.88);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nlf-article-prose tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.04);
}

.nlf-article-prose tbody tr:last-child td {
    border-bottom: 0;
}

@media (hover: hover) {
    .nlf-article-prose tbody tr:hover td {
        background-color: rgba(232, 135, 43, 0.12);
    }
}

.nlf-article-prose tfoot td {
    background-color: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    color: var(--nlf-white);
}

.nlf-article-prose .wp-block-table figcaption {
    padding: 0 1.1rem 1rem;
}

/*
 * Mobile / small-tablet only. Gutenberg tables stay real tables.
 * The existing .wp-block-table figure is the horizontal scrollport.
 * Desktop / large-tablet rules above are unchanged.
 */
@media (max-width: 767px) {
    .nlf-article-prose .wp-block-table {
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--nlf-accent) rgba(255, 255, 255, 0.12);
        border-right-color: var(--nlf-accent);
    }

    .nlf-article-prose .wp-block-table::-webkit-scrollbar {
        height: 8px;
    }

    .nlf-article-prose .wp-block-table::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .nlf-article-prose .wp-block-table::-webkit-scrollbar-thumb {
        background-color: var(--nlf-accent);
        border-radius: 99px;
    }

    .nlf-article-prose .wp-block-table table,
    .nlf-article-prose table {
        width: 100%;
        max-width: none;
        min-width: 40rem;
    }
}

.nlf-article-prose hr,
.nlf-article-prose .wp-block-separator {
    border: 0;
    width: 4rem;
    height: 3px;
    margin: 2.5rem 0;
    background-color: var(--nlf-accent);
    border-radius: 2px;
}

.nlf-article-prose .wp-block-separator.is-style-wide {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
}

.nlf-article-prose pre,
.nlf-article-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.nlf-article-prose pre {
    padding: 1rem 1.15rem;
    overflow-x: auto;
    background-color: var(--nlf-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.nlf-article-prose :not(pre) > code {
    padding: 0.1em 0.35em;
    background-color: var(--nlf-navy-mid);
    border-radius: 4px;
    font-size: 0.9em;
}

.nlf-article-prose .wp-block-embed,
.nlf-article-prose .wp-block-video,
.nlf-article-prose .wp-block-audio {
    margin-bottom: 1.5rem;
}

.nlf-article-prose .wp-block-embed__wrapper {
    position: relative;
    max-width: 100%;
}

.nlf-article-prose .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.nlf-article-prose .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 24px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--nlf-radius);
    overflow-wrap: anywhere;
}

.nlf-article-prose .wp-block-button__link:not(.has-background) {
    background-color: var(--nlf-accent);
    color: var(--nlf-white);
}

.nlf-article-prose .wp-block-button__link:not(.has-background):hover {
    background-color: var(--nlf-accent-hover);
    color: var(--nlf-white);
}

.nlf-article-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    max-width: var(--nlf-article-measure);
}

.nlf-article-footer__row {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.nlf-article-footer__label {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0.6rem;
}

.nlf-article-back {
    margin: 1.75rem 0 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
}

.nlf-article-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.nlf-article-back a::before {
    content: '\2190\00a0';
    color: var(--nlf-accent);
}

.nlf-article-back a:hover {
    color: var(--nlf-accent);
}

.nlf-article-cta {
    background-color: var(--nlf-navy-dark);
    padding-top: 24px;
}

.nlf-article-cta__panel {
    max-width: var(--nlf-max-width);
    margin: 0 auto;
    padding: 48px 40px;
    background-color: var(--nlf-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius-lg);
    text-align: center;
}

.nlf-article-cta .nlf-section-title {
    color: var(--nlf-white);
}

.nlf-article-cta .nlf-section-intro {
    color: rgba(255, 255, 255, 0.75);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .nlf-article-body {
        padding-top: 12px;
        padding-bottom: 40px;
    }

    .nlf-article-featured {
        margin-bottom: 1.75rem;
    }

    .nlf-article-prose {
        font-size: 1rem;
        line-height: 1.75;
    }

    .nlf-article-prose > p,
    .nlf-article-prose > ul,
    .nlf-article-prose > ol,
    .nlf-article-prose > blockquote,
    .nlf-article-prose > .wp-block-quote,
    .nlf-article-prose > .wp-block-pullquote,
    .nlf-article-prose > .wp-block-list,
    .nlf-article-prose > h2,
    .nlf-article-prose > h3,
    .nlf-article-prose > h4,
    .nlf-article-prose > .wp-block-heading {
        max-width: none;
    }

    .nlf-article-footer {
        max-width: none;
    }

    .nlf-article-prose blockquote,
    .nlf-article-prose .wp-block-quote {
        padding: 1.05rem 1.1rem 1.05rem 1.15rem;
    }

    .nlf-article-prose th,
    .nlf-article-prose td {
        padding: 0.8rem 0.95rem;
    }

    .nlf-article-prose h2 {
        margin-top: 2.5rem;
    }

    .nlf-article-prose .alignleft,
    .nlf-article-prose .alignright,
    .nlf-article-prose img.alignleft,
    .nlf-article-prose img.alignright {
        float: none;
        display: block;
        max-width: 100%;
        margin: 0 0 1.25rem;
    }

    .nlf-article-cta__panel {
        padding: 32px 20px;
    }
}

@media (max-width: 480px) {
    #article-cta .nlf-about-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ============================================================
   BLOG HUB  –  .nlf-hub  (theme 2.0.130; card media 2.0.132/2.0.133)
   ============================================================
   Predominantly dark editorial family matching the locked
   single-article canvas (D55). Hierarchy via imagery, navy-dark
   vs navy-mid, white-10 borders, spacing, and orange accents.
   Cards are image-led on the canvas — not identical navy boxes.
   Standard cards crop featured images in a 16/10 frame so source
   aspect ratio cannot change card image height. Featured remains
   a separate left-image panel and contains the full graphic.
   Does NOT modify .nlf-article-*.
   ============================================================ */

.nlf-hub {
    background-color: var(--nlf-navy-dark);
    color: rgba(255, 255, 255, 0.85);
}

.nlf-hub-hero {
    padding-top: calc(80px + 40px);
    padding-bottom: 28px;
    background-color: var(--nlf-navy-dark);
}

.nlf-hub-hero .nlf-badge {
    margin-bottom: 0.85rem;
}

.nlf-hub-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 1.12;
    margin: 0 0 1rem;
    max-width: 40rem;
    text-wrap: balance;
}

.nlf-hub-hero__intro {
    margin: 0;
    max-width: 40rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.nlf-hub-empty {
    padding-top: 8px;
    padding-bottom: var(--nlf-section-gap-sm);
    background-color: var(--nlf-navy-dark);
}

.nlf-hub-empty__heading {
    color: var(--nlf-white);
    margin-bottom: 0.75rem;
}

.nlf-hub-empty__text {
    margin: 0;
    max-width: 40rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.nlf-hub-featured {
    padding-top: 8px;
    padding-bottom: var(--nlf-section-gap-sm);
    background-color: var(--nlf-navy-dark);
}

.nlf-hub-featured__panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    background-color: var(--nlf-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius-lg);
}

.nlf-hub-featured__media {
    position: relative;
    min-width: 0;
    min-height: 280px;
    overflow: hidden;
    background-color: var(--nlf-navy-mid);
}

.nlf-hub-featured__media-link,
.nlf-hub-featured__fallback {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--nlf-navy-mid);
}

.nlf-hub-featured__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: var(--nlf-navy-mid);
}

.nlf-hub-featured__fallback {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.nlf-hub-featured__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 36px 36px 32px;
}

.nlf-hub-featured__body .nlf-badge {
    margin-bottom: 0.85rem;
}

.nlf-hub-featured__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.2;
    margin: 0 0 0.85rem;
    color: var(--nlf-white);
    text-wrap: balance;
}

.nlf-hub-featured__title a {
    color: var(--nlf-white);
    text-decoration: none;
}

.nlf-hub-featured__title a:hover {
    color: var(--nlf-accent);
}

.nlf-hub-featured__title a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-hub-featured__excerpt {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
}

.nlf-hub-featured__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin: 0 0 1.5rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.72);
}

.nlf-hub-featured__meta-dot {
    color: var(--nlf-accent);
    font-weight: 700;
}

.nlf-hub-featured__cta {
    margin-top: auto;
    min-height: 44px;
}

.nlf-hub-grid {
    padding-top: 8px;
    padding-bottom: var(--nlf-section-gap-sm);
    background-color: var(--nlf-navy-dark);
}

.nlf-hub-grid .nlf-section-header {
    margin-bottom: 2rem;
}

.nlf-hub-grid__list {
    align-items: stretch;
}

.nlf-hub-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: transparent;
}

.nlf-hub-card__media {
    margin-bottom: 1rem;
}

.nlf-hub-card__media-link,
.nlf-hub-card__fallback {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--nlf-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-color: var(--nlf-navy-mid);
}

.nlf-hub-card__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Pioneers of the Show Circuit (WP post 1055): portrait source.
   Keep the shared 16/10 cover frame; bias the crop to faces/upper body. */
.nlf-hub-card.post-1055 .nlf-hub-card__img {
    object-position: center top;
}

.nlf-hub-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.nlf-hub-card__body .nlf-badge {
    margin-bottom: 0.65rem;
}

.nlf-hub-card__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.3;
    margin: 0 0 0.65rem;
    color: var(--nlf-white);
}

.nlf-hub-card__title a {
    color: var(--nlf-white);
    text-decoration: none;
}

.nlf-hub-card__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.nlf-hub-card__title a:hover {
    color: var(--nlf-accent);
}

.nlf-hub-card__title a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-hub-card__excerpt {
    margin: 0 0 0.85rem;
    flex: 1 1 auto;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.nlf-hub-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.62);
}

.nlf-hub-card__meta-dot {
    color: var(--nlf-accent);
    font-weight: 700;
}

.nlf-hub-pagination-wrap {
    padding-top: 8px;
    padding-bottom: var(--nlf-section-gap-sm);
    background-color: var(--nlf-navy-dark);
}

.nlf-hub-pagination {
    margin: 0;
}

.nlf-hub-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.nlf-hub-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-navy-mid);
    color: var(--nlf-white);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.nlf-hub-pagination a.page-numbers:hover {
    border-color: var(--nlf-accent);
    color: var(--nlf-accent);
}

.nlf-hub-pagination a.page-numbers:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-hub-pagination .page-numbers.current {
    background-color: transparent;
    border-color: var(--nlf-accent);
    color: var(--nlf-accent);
}

.nlf-hub-pagination .page-numbers.dots {
    background-color: transparent;
    border-color: transparent;
    min-width: 2rem;
}

.nlf-hub-pathways {
    padding-top: var(--nlf-section-gap-sm);
    background-color: var(--nlf-navy-dark);
}

.nlf-hub-pathways__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-hub-pathways__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-navy-mid);
    color: var(--nlf-white);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.nlf-hub-pathways__link:hover {
    color: var(--nlf-accent);
    border-color: var(--nlf-accent);
}

.nlf-hub-pathways__link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-hub-pathways__link--flagship {
    border-color: var(--nlf-accent);
}

.nlf-hub .nlf-article-cta {
    background-color: var(--nlf-navy-dark);
}

@media (max-width: 991px) {
    .nlf-hub-featured__panel {
        grid-template-columns: 1fr;
    }

    .nlf-hub-featured__media {
        min-height: 220px;
        aspect-ratio: 16 / 9;
    }

    .nlf-hub-featured__fallback {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nlf-hub-featured__body {
        padding: 28px 24px 32px;
    }
}

@media (max-width: 767px) {
    .nlf-hub-hero {
        padding-top: calc(80px + 20px);
        padding-bottom: 24px;
    }

    .nlf-hub-hero__heading {
        font-size: clamp(1.625rem, 8vw, 2.25rem);
        max-width: none;
    }

    .nlf-hub-hero__intro {
        font-size: 1rem;
        max-width: none;
    }

    .nlf-hub-featured__title {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }

    .nlf-hub-featured__body {
        padding: 24px 20px 28px;
    }

    .nlf-hub-grid .nlf-section-header {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 599px) {
    .nlf-hub-pathways__list {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
    }

    .nlf-hub-pathways__link {
        width: 100%;
    }

    .nlf-hub-featured__cta {
        width: 100%;
    }
}


/* ============================================================
   LEGAL DOCUMENTS  –  .nlf-legal  (theme 2.0.134)
   ============================================================
   Shared Privacy / Credit Guide / Complaints / Terms chrome.
   Reuses V2 tokens, badges, cards, grid, buttons, focus.
   Does NOT modify header/footer, Blog, finance, or manufacturer.
   ============================================================ */

.nlf-legal {
    background-color: var(--nlf-bg-light);
    color: var(--nlf-text);
}

.nlf-section.nlf-legal-hero {
    padding-top: calc(80px + 40px);
    padding-bottom: 32px;
    background-color: var(--nlf-navy-dark);
}

.nlf-legal-hero__heading {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 800;
    color: var(--nlf-white);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    max-width: 46rem;
    text-wrap: balance;
}

.nlf-legal-hero__intro {
    margin: 0 0 1.75rem;
    max-width: 46rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.nlf-legal-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nlf-legal-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-navy-mid);
    color: var(--nlf-white);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.nlf-legal-nav__link:hover {
    color: var(--nlf-accent);
    border-color: var(--nlf-accent);
}

.nlf-legal-nav__link:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-legal-nav__link--current {
    border-color: var(--nlf-accent);
    color: var(--nlf-accent);
}

.nlf-legal-meta-wrap {
    padding: 24px 0;
    background-color: var(--nlf-navy-dark);
}

.nlf-legal-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 24px;
    background-color: var(--nlf-navy-mid);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--nlf-radius-lg);
}

.nlf-legal-meta__item {
    min-width: 0;
}

.nlf-legal-meta dt {
    margin: 0 0 0.35rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.nlf-legal-meta dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nlf-white);
    overflow-wrap: anywhere;
}

.nlf-legal-body {
    padding-top: var(--nlf-section-gap-sm);
    padding-bottom: var(--nlf-section-gap-sm);
}

.nlf-legal-prose {
    max-width: 62.5rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--nlf-text);
    overflow-wrap: break-word;
    min-width: 0;
}

.nlf-legal-prose > *:first-child {
    margin-top: 0;
}

.nlf-legal-section {
    margin: 0 0 2.5rem;
}

.nlf-legal-section:last-child {
    margin-bottom: 0;
}

.nlf-legal-prose h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: baseline;
    margin: 0 0 1rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--nlf-navy-dark);
}

.nlf-legal-section__num {
    color: var(--nlf-accent);
    font-variant-numeric: tabular-nums;
}

.nlf-legal-prose h3 {
    margin: 1.25rem 0 0.5rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--nlf-navy-dark);
}

.nlf-legal-prose p,
.nlf-legal-prose ul,
.nlf-legal-prose ol {
    margin: 0 0 1rem;
}

.nlf-legal-prose ul,
.nlf-legal-prose ol {
    padding-left: 1.25rem;
}

.nlf-legal-prose li {
    margin-bottom: 0.45rem;
}

.nlf-legal-prose a {
    color: var(--nlf-accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.nlf-legal-prose a:focus-visible {
    outline: 3px solid var(--nlf-accent);
    outline-offset: 3px;
}

.nlf-legal-notice {
    margin: 1.25rem 0;
    padding: 16px 18px;
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-left: 4px solid var(--nlf-accent);
    border-radius: var(--nlf-radius);
}

.nlf-legal-notice p {
    margin: 0;
}

.nlf-legal-ack p + p {
    margin-top: 0.85rem;
}

.nlf-legal-prose .wp-block-table,
.nlf-legal-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1.5rem;
}

.nlf-legal-table-wrap {
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    background-color: var(--nlf-white);
}

.nlf-legal-prose table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    background-color: var(--nlf-white);
}

.nlf-legal-prose th,
.nlf-legal-prose td {
    padding: 10px 12px;
    border: 1px solid var(--nlf-border);
    text-align: left;
    vertical-align: top;
}

.nlf-legal-prose th {
    background-color: var(--nlf-navy-dark);
    color: var(--nlf-white);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.nlf-legal-prose tbody tr:nth-child(even) {
    background-color: var(--nlf-bg-light);
}

.nlf-legal-prose td:last-child a {
    overflow-wrap: anywhere;
}

.nlf-legal-contact {
    padding-bottom: var(--nlf-section-gap-sm);
}

.nlf-legal-contact__header {
    max-width: 62.5rem;
    margin-bottom: 1.5rem;
}

.nlf-legal-contact__heading {
    margin: 0 0 0.5rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    color: var(--nlf-navy-dark);
}

.nlf-legal-contact__intro {
    margin: 0;
    color: var(--nlf-text-muted);
}

.nlf-legal-contact__grid {
    font-style: normal;
}

.nlf-legal-contact__card .nlf-card__text a {
    color: var(--nlf-accent);
}

.nlf-legal-download {
    padding-bottom: var(--nlf-section-gap);
}

.nlf-legal-download__panel {
    max-width: 62.5rem;
    padding: 28px 32px;
    background-color: var(--nlf-navy-dark);
    border-radius: var(--nlf-radius-lg);
    color: rgba(255, 255, 255, 0.82);
}

.nlf-legal-download__heading {
    margin: 0 0 0.5rem;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.25rem;
    color: var(--nlf-white);
}

.nlf-legal-download__text {
    margin: 0 0 1.25rem;
}

.nlf-legal-download__btn {
    min-height: 44px;
    white-space: normal;
}

.nlf-legal-lodge {
    margin: 1.25rem 0 1.5rem;
    font-style: normal;
}

.nlf-legal-steps {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.nlf-legal-steps__item {
    min-width: 0;
    padding: 20px 18px;
    background-color: var(--nlf-white);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
}

.nlf-legal-steps__num {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--nlf-accent);
    margin: 0 0 10px;
}

.nlf-legal-prose .nlf-legal-steps__title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.nlf-legal-steps__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--nlf-text-muted);
}

@media (max-width: 991px) {
    .nlf-legal-steps {
        grid-template-columns: 1fr;
    }

    .nlf-legal-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .nlf-section.nlf-legal-hero {
        padding-top: calc(80px + 20px);
        padding-bottom: 24px;
    }

    .nlf-legal-hero__heading {
        font-size: clamp(1.5rem, 7vw, 2rem);
        max-width: none;
    }

    .nlf-legal-hero__intro {
        font-size: 1rem;
        max-width: none;
    }

    .nlf-legal-nav__link {
        width: 100%;
    }

    .nlf-legal-meta {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .nlf-legal-download__panel {
        padding: 24px 20px;
    }

    .nlf-legal-download__btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
}

@media (max-width: 599px) {
    .nlf-legal-nav__list {
        display: grid;
        grid-template-columns: 1fr;
    }
}