:root {
    /* Primary brand */
    --primary: #0F4CB7;
    --primary-dark: #083783;
    --primary-light: #3478E5;

    /* Secondary brand */
    --secondary: #031832;
    --secondary-light: #193766;

    /* Accent */
    --accent: #D99A16;
    --accent-dark: #B77B08;
    --accent-light: #FFF0CC;

    /* Backgrounds */
    --bg: #FFFFFF;
    --bg-light: #F5F8FC;
    --bg-blue: #EDF4FD;
    --surface: #FFFFFF;

    /* Text */
    --text: #101F3D;
    --text-secondary: #42516B;
    --text-muted: #718096;
    --text-light: #FFFFFF;
    --text-on-dark: rgba(255, 255, 255, .84);

    /* Borders */
    --border: #DCE5F0;
    --border-light: #EDF1F6;
    --border-on-dark: rgba(255, 255, 255, .14);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0868F5 0%, #083783 100%);
    --gradient-gold: linear-gradient(135deg, #FFE7A3 0%, #D99A16 100%);
    --gradient-navy: linear-gradient(135deg, #031832 0%, #0A2B58 100%);
    --gradient-soft: linear-gradient(135deg, #EDF4FD 0%, #FFFFFF 100%);

    /* Shadows */
    --shadow-sm: 0 4px 14px rgba(3, 24, 50, .06);
    --shadow-md: 0 10px 30px rgba(3, 24, 50, .10);
    --shadow-lg: 0 20px 50px rgba(3, 24, 50, .14);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Typography */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-body: 1rem;
    --fs-sm: .95rem;
    --fs-title: clamp(1.75rem, 3.1vw, 2.85rem);
    --fs-title-md: clamp(1.6rem, 2.5vw, 2.25rem);
    --fs-title-sm: clamp(1.4rem, 1.9vw, 1.75rem);
    --fs-subtitle: clamp(1.05rem, 1.45vw, 1.35rem);

    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --section-py: clamp(2.75rem, 5.2vw, 4.75rem);
    --section-py-tight: clamp(1.75rem, 3.2vw, 2.75rem);

    /* Motion */
    --ease: cubic-bezier(.22, .8, .3, 1);
    --dur: .6s;

    /* Layout helper (the navbar script keeps this in sync with the real header height) */
    --header-h: 72px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------------------------------------- NAVBAR  */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
    border-color: var(--border);
}

.site-header .navbar {
    padding-block: .6rem;
    --bs-navbar-padding-y: .6rem;
}

.site-header .navbar-brand {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.site-header .navbar-brand img {
    height: 40px;
    width: auto;
    display: block;
}

@media (min-width: 576px) {
    .site-header .navbar-brand img {
        height: 46px;
    }
}

.site-header .navbar-toggler {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--secondary);
    background: #fff;
}

.site-header .navbar-toggler:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.site-header .navbar-toggler:focus-visible {
    outline: 3px solid rgba(15, 76, 183, .3);
    outline-offset: 2px;
    box-shadow: none;
}

.site-header .navbar-toggler .bi {
    font-size: 1.75rem;
    line-height: 1;
}

.site-header .nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text);
    position: relative;
    transition: color .2s ease;
}

.site-header .nav-link:hover {
    color: var(--primary);
}

.site-header .nav-link:focus-visible {
    outline: 3px solid rgba(15, 76, 183, .3);
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: none;
}

.site-header .nav-link.active {
    color: var(--primary);
}

@media (max-width: 1199.98px) {
    .site-header .offcanvas {
        --bs-offcanvas-width: min(88vw, 360px);
        --bs-offcanvas-border-width: 0;
        background: #fff;
        box-shadow: var(--shadow-lg);
    }

    .site-header .offcanvas-header {
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-light);
    }

    .site-header .offcanvas-header img {
        height: 38px;
        width: auto;
        display: block;
    }

    .site-header .offcanvas-header .btn-close {
        opacity: .7;
        padding: .75rem;
        margin: -.25rem -.5rem -.25rem 0;
    }

    .site-header .offcanvas-header .btn-close:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(15, 76, 183, .3);
        opacity: 1;
    }

    .site-header .offcanvas-body {
        padding: .5rem 1.25rem 1.5rem;
    }

    .site-header .navbar-nav {
        gap: 0;
    }

    .site-header .nav-item:not(.nav-item-cta) .nav-link {
        padding: .95rem .25rem .95rem .9rem;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--border-light);
        border-left: 3px solid transparent;
    }

    .site-header .nav-item:not(.nav-item-cta) .nav-link.active {
        border-left-color: var(--accent);
        background: linear-gradient(90deg, var(--bg-blue), rgba(237, 244, 253, 0));
    }

    .site-header .nav-item-cta {
        margin-top: 1.25rem;
    }

    .site-header .nav-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        padding: .95rem 1.25rem;
        font-size: 1.05rem;
    }
}

@media (min-width: 1200px) {
    .site-header .navbar>.container-fluid {
        flex-wrap: nowrap;
    }

    .site-header .offcanvas {
        flex-grow: 1;
    }

    .site-header .offcanvas-body {
        justify-content: flex-end;
        padding: 0;
        overflow: visible;
    }

    .site-header .navbar-nav {
        align-items: center;
        gap: clamp(0rem, .25vw, .35rem);
        flex-wrap: nowrap;
    }

    .site-header .nav-link {
        font-size: clamp(.8rem, 1.02vw, .95rem);
        padding: .55rem clamp(.4rem, .72vw, .85rem);
        white-space: nowrap;
    }

    .site-header .nav-item:not(.nav-item-cta) .nav-link::after {
        content: "";
        position: absolute;
        left: clamp(.4rem, .72vw, .85rem);
        right: clamp(.4rem, .72vw, .85rem);
        bottom: .15rem;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .25s ease;
    }

    .site-header .nav-item:not(.nav-item-cta) .nav-link:hover::after,
    .site-header .nav-item:not(.nav-item-cta) .nav-link.active::after {
        transform: scaleX(1);
    }

    .site-header .nav-item-cta {
        margin-left: clamp(.35rem, .8vw, 1rem);
    }
}

.site-header .nav-cta {
    color: #fff;
    background: var(--gradient-primary);
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 76, 183, .28);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

@media (min-width: 1200px) {
    .site-header .nav-cta {
        padding: .6rem clamp(.95rem, 1.35vw, 1.4rem);
    }
}

.site-header .nav-cta:hover,
.site-header .nav-cta.active {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 12px 24px rgba(15, 76, 183, .36);
}

.site-header .nav-cta:hover {
    transform: translateY(-1px);
}

.site-header .nav-cta.active {
    box-shadow: 0 0 0 3px rgba(217, 154, 22, .55), 0 12px 24px rgba(15, 76, 183, .3);
}

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .site-header .nav-link,
    .site-header .nav-link::after,
    .site-header .nav-cta {
        transition: none;
    }

    .site-header .nav-cta:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------------------------- HERO SECTION CSS */
.hero {
    position: relative;
    isolation: isolate;
    background: var(--bg);
    overflow: hidden;
    padding-top: clamp(1.75rem, 3.4vw, 3.4rem);
}

.hero-visual {
    background-color: var(--bg);
    background-image: url("../assets/images/hero-img.webp");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, #fff 0%, rgba(255, 255, 255, .96) 10%, rgba(255, 255, 255, .8) 24%, rgba(255, 255, 255, .38) 38%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .92) 5%, rgba(255, 255, 255, 0) 15%),
        linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 3%);
}

@media (min-width: 1200px) {
    .hero-visual {
        position: absolute;
        z-index: 0;
        top: -4.7vw;
        right: 0;
        width: 74vw;
        aspect-ratio: 1542 / 1020;
        background-size: 100% 100%;
        background-position: right top;
    }

    .hero .hero-lead {
        max-width: min(46rem, 45vw);
    }
}

@media (max-width: 1199.98px) {
    .hero-visual {
        position: relative;
        height: clamp(260px, 60vw, 420px);
        margin-inline: calc(-1 * (var(--bs-gutter-x) * .5 + 1rem));
        background-position: 84% 18%;
    }

    .hero-visual::after {
        background:
            linear-gradient(to right, #fff 0%, rgba(255, 255, 255, .55) 8%, rgba(255, 255, 255, 0) 26%),
            linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .9) 8%, rgba(255, 255, 255, 0) 40%),
            linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, .6) 8%, rgba(255, 255, 255, 0) 24%);
    }
}

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

@media (max-width: 575.98px) {
    .hero-visual {
        height: 300px;
        background-size: 172% auto;
        background-position: right top;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-visual {
        margin-inline: calc(-1 * (var(--bs-gutter-x) * .5 + 1.5rem));
    }
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.4rem;
    font-size: clamp(.68rem, .95vw, .82rem);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--secondary-light);
}

.hero-eyebrow::before {
    content: "";
    flex: 0 0 clamp(36px, 3.6vw, 56px);
    height: 2px;
    background: var(--accent);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 4.62vw, 5.2rem);
    line-height: 1.04;
    letter-spacing: -.01em;
    color: var(--secondary);
    margin: 0 0 1.25rem;
}

.hero-title .t-blue {
    color: var(--primary);
    display: inline;
}

.hero-title .t-gold {
    color: var(--accent);
}

.hero-subtitle {
    font-weight: 800;
    font-size: clamp(1.3rem, 2.34vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--secondary);
    margin: 0 0 .45rem;
}

.hero-tags {
    font-weight: 600;
    font-size: clamp(.95rem, 1.5vw, 1.6rem);
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 1.35rem;
}

.hero-tags .sep {
    color: var(--secondary-light);
    padding-inline: .2em;
}

.hero-lead {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 46rem;
    margin: 0 0 2rem;
}

.hero-lead a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.hero-lead a:hover,
.hero-lead a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.benefit {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
}

.benefit-icon {
    flex: 0 0 auto;
    width: clamp(46px, 3.9vw, 66px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: clamp(1.25rem, 1.9vw, 2rem);
    background: radial-gradient(circle at 30% 25%, #fff 0%, #FFF7E3 100%);
    border: 2px solid #E8C879;
    box-shadow: var(--shadow-sm);
}

.benefit-text {
    font-weight: 700;
    font-size: clamp(.82rem, .98vw, 1.05rem);
    line-height: 1.3;
    color: var(--secondary);
}

@media (min-width: 768px) {
    .benefit-text {
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .benefit-col+.benefit-col .benefit {
        border-left: 1px solid var(--border);
        padding-left: clamp(.7rem, 1.2vw, 1.3rem);
    }

    .benefit-col {
        padding-right: clamp(.6rem, 1.2vw, 1.3rem);
    }
}

.btn-hero {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1rem, 1.28vw, 1.32rem);
    padding: .95rem 2rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    min-height: 3.5rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-hero:hover {
    transform: translateY(-2px);
}

.btn-hero:focus-visible {
    outline: 3px solid rgba(217, 154, 22, .55);
    outline-offset: 3px;
}

.btn-hero-primary {
    color: #fff;
    border: 0;
    background: var(--gradient-primary);
    box-shadow: 0 12px 26px rgba(15, 76, 183, .32);
    min-width: min(100%, 21.5rem);
}

.btn-hero-primary:hover {
    color: #fff;
    box-shadow: 0 16px 32px rgba(15, 76, 183, .4);
}

.btn-hero-outline {
    color: var(--secondary);
    background: rgba(255, 255, 255, .85);
    border: 2px solid var(--accent);
    min-width: min(100%, 16.5rem);
}

.btn-hero-outline:hover {
    color: var(--secondary);
    background: var(--accent-light);
}

.consult-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 22.5rem;
    margin-inline: auto;
    padding: clamp(1.15rem, 1.4vw, 1.4rem);
    border-radius: var(--radius-lg);
    color: var(--text-light);
    background: var(--gradient-navy);
    box-shadow: var(--shadow-lg);
}

.consult-card h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.55rem, 1.85vw, 1.95rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 .6rem;
}

.consult-card .consult-desc {
    font-size: clamp(.92rem, 1.02vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);
    margin: 0 0 .85rem;
}

.field {
    position: relative;
    margin-bottom: .6rem;
}

.field .field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15rem;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 2;
}

.field .form-control,
.field .form-select {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    height: 2.85rem;
    padding-left: 3rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background-color: #fff;
}

.field .form-control::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.field .form-select:invalid {
    color: var(--text-secondary);
}

.field .form-select option {
    color: var(--text);
}

.field .form-control:focus,
.field .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .22rem rgba(217, 154, 22, .35);
}

.was-validated .field .form-control:invalid,
.was-validated .field .form-select:invalid {
    border-color: #E5484D;
    background-image: none;
}

.was-validated .field .form-select:invalid {
    background-image: var(--bs-form-select-bg-img);
}

.was-validated .field .form-control:valid,
.was-validated .field .form-select:valid {
    border-color: transparent;
    background-image: none;
}

.was-validated .field .form-select:valid {
    background-image: var(--bs-form-select-bg-img);
}

.field .invalid-feedback {
    color: #FFB4B7;
    font-size: .8rem;
    margin-top: .25rem;
}

.btn-gold {
    font-family: var(--font-body);
    width: 100%;
    min-height: 3.1rem;
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--secondary);
    border: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #F2C14E 0%, #D99A16 55%, #B77B08 100%);
    box-shadow: 0 10px 22px rgba(217, 154, 22, .35);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gold:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    color: var(--secondary);
    box-shadow: 0 14px 28px rgba(217, 154, 22, .45);
}

.btn-gold:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.consult-note {
    margin: .75rem 0 0;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .78);
}

.consult-note i {
    margin-right: .35rem;
}

@media (min-width: 1200px) {
    .form-col {
        align-self: flex-end;
    }

    .consult-card {
        margin-right: 0;
        margin-bottom: -2.2rem;
    }
}

@media (min-width: 1200px) {
    .consult-card {
        margin-right: -2rem;
        max-width: clamp(19rem, 21.5vw, 22.5rem);
    }
}

@media (max-width: 1199.98px) {
    .form-col {
        margin-top: 0;
    }

    .consult-card {
        margin-top: -4.5rem;
        max-width: 34rem;
    }
}

.services-wrap {
    position: relative;
    z-index: 4;
    padding-top: clamp(1.5rem, 2.4vw, 2.5rem);
    padding-bottom: 1rem;
}

.services-strip {
    background: rgba(255, 255, 255, .96);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.15rem 1.25rem;
}

.service-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    height: 100%;
}

.service-item .bi,
.service-item svg.gads {
    flex: 0 0 auto;
}

.service-item .bi {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--primary);
}

.service-item svg.gads {
    width: 2.1rem;
    height: 2.1rem;
}

.service-item .s-title {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    color: var(--secondary);
}

.service-item .s-sub {
    display: block;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--text-muted);
    margin-top: .1rem;
}

@media (min-width: 1400px) {
    .services-strip {
        padding: 1.1rem 1.35rem;
    }

    .service-item {
        gap: .55rem;
    }

    .service-item .bi {
        font-size: clamp(1.55rem, 1.9vw, 2rem);
    }

    .service-item svg.gads {
        width: clamp(1.7rem, 2vw, 2.1rem);
        height: clamp(1.7rem, 2vw, 2.1rem);
    }

    .service-item .s-title {
        font-size: clamp(.74rem, .87vw, .95rem);
        white-space: nowrap;
    }

    .service-item .s-sub {
        font-size: clamp(.6rem, .66vw, .72rem);
        white-space: nowrap;
    }

    .service-col+.service-col .service-item {
        border-left: 1px solid var(--border);
        padding-left: clamp(.6rem, .85vw, 1rem);
    }
}


.stats-bar {
    position: relative;
    background: var(--gradient-navy);
    color: #fff;
    overflow: hidden;
}

.stats-bar .stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: 1.5rem .75rem;
}

.stat>.bi {
    flex: 0 0 auto;
    font-size: clamp(1.8rem, 2.5vw, 2.7rem);
    line-height: 1;
    color: var(--accent);
}

.stat-content {
    min-width: 0;
}

.stat .num {
    display: block;
    font-size: clamp(1.5rem, 2.1vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    overflow-wrap: anywhere;
}

.stat .lbl {
    display: block;
    margin-top: .4rem;
    font-size: clamp(.78rem, .9vw, .95rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
}

/* Statistics separators */
@media (min-width: 992px) {
    .stat-col+.stat-col .stat {
        border-left: 1px solid rgba(255, 255, 255, .18);
    }
}

/* Tagline */
.stats-tagline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .2rem;
    height: 100%;
    padding: 1.5rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.25vw, 1.4rem);
    font-weight: 600;
    font-style: italic;
    line-height: 1.35;
    color: rgba(255, 255, 255, .95);
}

/* Desktop layout */
@media (min-width: 1200px) {
    .stats-tagline {
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, .18);
        padding: 1.5rem 0 1.5rem 1.5rem;
    }
}

/* Tablet and mobile */
@media (max-width: 767.98px) {
    .stats-bar .stat {
        gap: .65rem;
        padding: 1.2rem .5rem;
    }

    .stat>.bi {
        font-size: 1.65rem;
    }

    .stat .num {
        font-size: clamp(1.35rem, 5vw, 1.8rem);
    }

    .stat .lbl {
        font-size: .78rem;
    }

    .stats-tagline {
        padding: 1.25rem .5rem;
        font-size: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }
}

/* Small mobile */
@media (max-width: 359.98px) {
    .stats-bar .stat {
        flex-direction: column;
        align-items: flex-start;
        gap: .55rem;
    }

    .stat .num {
        font-size: 1.35rem;
    }

    .stat .lbl {
        font-size: .75rem;
    }
}


img {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn-hero,
    .btn-gold {
        transition: none;
    }

    .btn-hero:hover,
    .btn-gold:hover {
        transform: none;
    }
}



/* --------------------------------------------------------------------------
   2. Section shell, backgrounds, headings
   -------------------------------------------------------------------------- */
.rle-section {
    position: relative;
    padding-block: var(--section-py);
    overflow-x: clip;
    /* clip (not hidden) keeps position:sticky working */
    font-family: var(--font-body);
    color: var(--text);
}

.rle-section--tight {
    padding-block: var(--section-py-tight);
}

.rle-section>.container-fluid {
    position: relative;
    z-index: 1;
}

.rle-bg-white {
    background: var(--bg);
}

.rle-bg-light {
    background: var(--bg-light);
}

.rle-bg-blue {
    background: var(--bg-blue);
}

.rle-bg-navy {
    background: var(--gradient-navy);
}

.rle-bg-navy::before,
.rle-bg-blue::before {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.rle-bg-navy::before {
    width: clamp(18rem, 42vw, 38rem);
    aspect-ratio: 1;
    right: -12%;
    top: -30%;
    background: radial-gradient(circle, rgba(52, 120, 229, .28) 0%, rgba(52, 120, 229, 0) 68%);
}

.rle-bg-blue::before {
    width: clamp(16rem, 34vw, 30rem);
    aspect-ratio: 1;
    left: -10%;
    bottom: -28%;
    background: radial-gradient(circle, rgba(217, 154, 22, .13) 0%, rgba(217, 154, 22, 0) 70%);
}

/* Heading block */
.rle-head {
    margin-bottom: 1.25rem;
}

.rle-head:last-child {
    margin-bottom: 0;
}

.rle-head--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rle-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .3rem .75rem .3rem .35rem;
    border-radius: var(--radius-pill);
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.rle-eyebrow .bi {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    color: var(--secondary);
    font-size: .85rem;
}

.rle-eyebrow:not(:has(span)) {
    padding: .35rem;
}

.rle-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-title);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--secondary);
    margin: 0;
}

.rle-title--md {
    font-size: var(--fs-title-md);
}

.rle-title--sm {
    font-size: var(--fs-title-sm);
}

.rle-subtitle {
    margin: .8rem 0 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-subtitle);
    line-height: 1.35;
    color: var(--primary);
}

.rle-kicker {
    margin: 0 0 .9rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.rle-dark {
    color: var(--text-on-dark);
}

.rle-dark .rle-title {
    color: #fff;
}

.rle-dark .rle-subtitle {
    color: #F2C14E;
}

.rle-dark .rle-eyebrow {
    background: rgba(255, 255, 255, .08);
    color: #F2C14E;
}

.rle-sticky {
    position: static;
}

@media (min-width: 992px) {
    .rle-sticky {
        position: sticky;
    }
}

/* --------------------------------------------------------------------------
   3. Bullet lists (verbatim paragraphs presented as bullet points)
   -------------------------------------------------------------------------- */
.rle-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    counter-reset: rle-n;
}

.rle-points>li {
    position: relative;
    padding-left: 1.65rem;
    font-size: var(--fs-body);
    line-height: 1.68;
    color: var(--text-secondary);
}

.rle-points>li::before {
    content: "";
    position: absolute;
    left: .12rem;
    top: .62em;
    width: .5rem;
    height: .5rem;
    border-radius: 2px;
    background: var(--gradient-gold);
    transform: rotate(45deg);
}

.rle-points strong {
    color: var(--text);
    font-weight: 700;
}

.rle-points--sm {
    gap: .6rem;
}

.rle-points--sm>li {
    font-size: var(--fs-sm);
    line-height: 1.62;
}

.rle-dark .rle-points>li {
    color: var(--text-on-dark);
}

.rle-dark .rle-points strong {
    color: #fff;
}

/* numbered */
.rle-points--num>li {
    padding-left: 2.6rem;
    counter-increment: rle-n;
}

.rle-points--num>li::before {
    content: counter(rle-n);
    left: 0;
    top: .12rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

/* check marks */
.rle-points--check>li {
    padding-left: 2.2rem;
}

.rle-points--check>li::before {
    left: 0;
    top: .3rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    transform: none;
    background: var(--gradient-primary);
}

.rle-points--check>li::after {
    content: "";
    position: absolute;
    left: .47rem;
    top: .56rem;
    width: .4rem;
    height: .22rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* vertical rail */
.rle-points--rail {
    gap: 0;
    position: relative;
}

.rle-points--rail::before {
    content: "";
    position: absolute;
    left: .34rem;
    top: .9rem;
    bottom: .9rem;
    width: 2px;
    background: linear-gradient(var(--accent), var(--primary-light));
    opacity: .45;
}

.rle-points--rail>li {
    padding-block: .55rem;
    padding-left: 1.9rem;
}

.rle-points--rail>li::before {
    left: 0;
    top: 1.15rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    transform: none;
    background: #fff;
    border: 2px solid var(--accent);
}

/* two text columns (CSS multi-column) */
.rle-points--cols {
    display: block;
}

.rle-points--cols>li {
    break-inside: avoid;
    margin-bottom: .85rem;
}

@media (min-width: 992px) {
    .rle-points--cols {
        column-count: 2;
        column-gap: 2.5rem;
    }
}

/* label cards (bold "Label:" lead-ins) */
.rle-labels {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.rle-label {
    height: 100%;
    padding: .95rem 1.1rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.rle-label strong {
    display: block;
    margin-bottom: .2rem;
    color: var(--primary-dark);
    font-size: .98rem;
}

/* --------------------------------------------------------------------------
   4. Buttons, statement, CTA bands, pull quote
   -------------------------------------------------------------------------- */
.rle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .75rem 1.35rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}

.rle-btn:hover {
    transform: translateY(-2px);
}

.rle-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 3px;
}

.rle-btn--gold {
    background: var(--gradient-gold);
    color: var(--secondary);
    box-shadow: 0 10px 22px rgba(217, 154, 22, .32);
}

.rle-btn--gold:hover {
    color: var(--secondary);
    box-shadow: 0 14px 28px rgba(217, 154, 22, .42);
}

.rle-btn--ghost {
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.rle-btn--ghost:hover {
    color: var(--secondary);
    background: #fff;
    border-color: #fff;
}

.rle-statement {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--border-on-dark);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
}

.rle-statement__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    color: var(--secondary);
    font-size: 1.2rem;
}

.rle-ctaband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding: clamp(1.15rem, 2.2vw, 1.75rem);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .05);
}

.rle-ctaband__line {
    margin: 0;
    flex: 1 1 18rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.3;
    color: #F2C14E;
}

.rle-ctaband__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.rle-ctaband--stack {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.rle-ctaband--stack .rle-ctaband__line {
    flex: 0 0 auto;
}

.rle-ctaband--soft {
    background: var(--bg-blue);
    border-color: var(--border);
}

.rle-pull {
    position: relative;
    margin: 1.5rem 0 0;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    border-radius: var(--radius-lg);
    background: var(--gradient-navy);
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    box-shadow: var(--shadow-md);
}

.rle-pull strong {
    color: #F2C14E;
    font-weight: 700;
}

.rle-pull__mark {
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    font-size: 1.8rem;
    color: var(--accent);
    opacity: .9;
}

/* --------------------------------------------------------------------------
   5. Cards, rows, tiles
   -------------------------------------------------------------------------- */
.rle-card {
    position: relative;
    padding: clamp(1.15rem, 1.8vw, 1.6rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}

.rle-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: #C3D5EC;
}

.rle-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .95rem;
}

.rle-card__icon {
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-blue);
    color: var(--primary);
    font-size: 1.3rem;
}

.rle-card>.rle-card__icon {
    margin-bottom: .95rem;
}

.rle-card__icon--gold {
    background: var(--gradient-gold);
    color: var(--secondary);
    margin-bottom: .95rem;
}

.rle-card__index {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--border);
}

.rle-card__title {
    margin: 0 0 .65rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--secondary);
}

.rle-card__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.62;
    color: var(--text-secondary);
}

.rle-card--dark {
    background: rgba(255, 255, 255, .045);
    border-color: var(--border-on-dark);
    box-shadow: none;
}

.rle-card--dark:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}

.rle-card--dark .rle-card__icon {
    background: rgba(217, 154, 22, .16);
    color: #F2C14E;
}

.rle-card--dark .rle-card__index {
    color: rgba(255, 255, 255, .18);
}

.rle-card--dark .rle-card__title {
    color: #fff;
}

.rle-card--tint {
    background: linear-gradient(160deg, #fff 0%, var(--accent-light) 160%);
}

/* spec rows (Commercial) */
.rle-rows {
    border-top: 1px solid var(--border);
}

.rle-row {
    padding-block: clamp(1.15rem, 2vw, 1.75rem);
    border-bottom: 1px solid var(--border);
    transition: background .3s;
}

.rle-row:hover {
    background: linear-gradient(90deg, var(--bg-blue), rgba(237, 244, 253, 0));
}

.rle-row__head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

/* lead-quality pipeline */
.rle-flow__step {
    position: relative;
}

@media (min-width: 1200px) {
    .rle-flow>.col:not(:last-child) .rle-flow__step::after {
        content: "";
        position: absolute;
        top: 2.1rem;
        right: -1.3rem;
        width: .65rem;
        height: .65rem;
        border-top: 3px solid var(--accent);
        border-right: 3px solid var(--accent);
        transform: rotate(45deg);
        z-index: 2;
    }
}

/* city cards */
.rle-city .rle-card__icon {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.rle-emerge {
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 2.6vw, 2rem);
    border-radius: var(--radius-lg);
    color: var(--text-on-dark);
    background:
        radial-gradient(rgba(255, 255, 255, .12) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
        var(--gradient-navy);
    box-shadow: var(--shadow-md);
}

.rle-emerge .rle-card__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.45rem;
}

.rle-emerge .rle-points>li {
    color: var(--text-on-dark);
}

/* persona cards */
.rle-persona {
    overflow: hidden;
    padding-top: 1.9rem;
}

.rle-persona::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--gradient-primary);
}

.rle-persona__avatar {
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-soft);
    border: 2px solid var(--primary-light);
    color: var(--primary);
    font-size: 1.4rem;
}

/* conversion checklist */
.rle-check {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.rle-check:last-child {
    margin-bottom: 0;
}

.rle-check__tick {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.15rem;
}

.rle-check__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* funnel */
.rle-funnel__row {
    padding-block: .85rem;
    border-bottom: 1px dashed var(--border);
}

.rle-funnel__row:last-child {
    border-bottom: 0;
}

.rle-funnel__bar {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-inline: auto;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 76, 183, .22);
}

@media (min-width: 992px) {
    .rle-funnel__bar {
        width: var(--rle-w, 100%);
    }
}

.rle-funnel__icon {
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: #F2C14E;
}

.rle-funnel__title {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #fff;
}

/* dashboard (ROI) */
.rle-dash {
    padding: .9rem clamp(.85rem, 1.6vw, 1.25rem) clamp(.95rem, 1.8vw, 1.4rem);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .05);
}

.rle-dash__bar,
.rle-mock__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .9rem;
}

.rle-dash__bar i,
.rle-mock__bar i {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
}

.rle-dash__bar i:first-child,
.rle-mock__bar i:first-child {
    background: #FF6B6B;
}

.rle-dash__bar i:nth-child(2),
.rle-mock__bar i:nth-child(2) {
    background: #F2C14E;
}

.rle-dash__bar i:nth-child(3),
.rle-mock__bar i:nth-child(3) {
    background: #4ADE80;
}

.rle-dash__bar span,
.rle-mock__bar span {
    flex: 1;
    height: .55rem;
    margin-left: .6rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
}

.rle-tile {
    padding: 1.2rem;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease);
}

.rle-tile:hover {
    transform: translateY(-3px);
}

.rle-tile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .95rem;
}

.rle-tile__top .rle-spark {
    width: 45%;
}

.rle-spark {
    display: block;
    width: 100%;
    height: 2.4rem;
}

.rle-spark__fill {
    fill: rgba(52, 120, 229, .13);
    stroke: none;
}

.rle-spark__line {
    fill: none;
    stroke: var(--primary-light);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* integrated hub */
.rle-hubcol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rle-hubitem {
    display: flex;
    gap: .95rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.rle-hubitem:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.rle-hub {
    position: relative;
    width: min(100%, 18rem);
    aspect-ratio: 1;
    margin-inline: auto;
}

.rle-hub__ring {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed var(--border);
}

.rle-hub__ring--1 {
    inset: 0;
    animation: rle-spin 60s linear infinite;
}

.rle-hub__ring--2 {
    inset: 17%;
    border-color: #C3D5EC;
    animation: rle-spin 40s linear infinite reverse;
}

.rle-hub__core {
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 2.1rem;
    box-shadow: 0 14px 30px rgba(15, 76, 183, .3);
}

/* challenge tiles */
.rle-issue {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.rle-issue:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.rle-issue__icon {
    flex: 0 0 auto;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 1.2rem;
}

/* navy panel (unique value) */
.rle-panel {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: var(--radius-lg);
    background: var(--gradient-navy);
    box-shadow: var(--shadow-md);
}

.rle-panel .rle-points>li {
    color: var(--text-on-dark);
}

.rle-panel .rle-points strong {
    color: #fff;
}

/* multi-project node diagram (decorative) */
.rle-nodes {
    position: relative;
    width: min(100%, 17rem);
    aspect-ratio: 1;
    margin: 1.75rem 0 0;
}

.rle-nodes::before {
    content: "";
    position: absolute;
    inset: 14%;
    border: 2px dashed #C3D5EC;
    border-radius: 50%;
}

.rle-nodes__hub,
.rle-nodes__n {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rle-nodes__hub {
    inset: 36%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 12px 26px rgba(15, 76, 183, .28);
}

.rle-nodes__n {
    width: 3rem;
    height: 3rem;
    background: #fff;
    border: 2px solid var(--accent);
    color: var(--accent-dark);
    font-size: 1.15rem;
    box-shadow: var(--shadow-sm);
}

.rle-nodes__n--1 {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.rle-nodes__n--2 {
    right: 2%;
    bottom: 20%;
}

.rle-nodes__n--3 {
    left: 2%;
    bottom: 20%;
}

/* chain (long-term growth) */
.rle-chain {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rle-chain__item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text-secondary);
}

.rle-chain__item:last-child {
    padding-bottom: 0;
}

.rle-chain__item::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 2.7rem;
    bottom: .15rem;
    width: 2px;
    background: linear-gradient(var(--primary-light), var(--border));
}

.rle-chain__item:last-child::before {
    display: none;
}

.rle-chain__dot {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(15, 76, 183, .25);
}

.rle-chain__item p {
    padding-top: .35rem;
}

/* notice */
.rle-notice {
    display: flex;
    gap: 1.1rem;
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
    border: 1px solid #F0D58F;
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-light);
}

.rle-notice__icon {
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    color: var(--secondary);
    font-size: 1.3rem;
}

.rle-notice>div {
    flex: 1 1 auto;
    min-width: 0;
}

/* principle cards */
.rle-principle {
    overflow: hidden;
}

.rle-principle__num {
    position: absolute;
    right: 1rem;
    top: .35rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.6rem;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
}

.rle-principle .rle-card__title {
    position: relative;
    padding-top: .35rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.rle-tilecard {
    border-top: 4px solid var(--primary-light);
}

.rle-tilecard:nth-child(even) {
    border-top-color: var(--accent);
}

/* light card on dark section (Let's build ...) */
.rle-cardlight {
    padding: clamp(1.25rem, 2.6vw, 2.1rem);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.rle-dark .rle-cardlight .rle-title {
    color: var(--secondary);
}

.rle-dark .rle-cardlight .rle-subtitle {
    color: var(--primary);
}

.rle-dark .rle-cardlight .rle-points>li {
    color: var(--text-secondary);
}

.rle-dark .rle-cardlight .rle-points strong {
    color: var(--text);
}

/* closing brand block */
.rle-closing {
    margin-top: clamp(2rem, 4vw, 3.25rem);
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 1px solid var(--border-on-dark);
    text-align: center;
}

.rle-closing .rle-points {
    text-align: left;
    margin-top: 1.5rem;
}

.rle-closing__brand {
    margin: 0 0 .65rem;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #F2C14E;
}

.rle-closing__line {
    margin: 1.5rem 0 .5rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.4;
    color: #fff;
}

.rle-closing__url {
    display: inline-block;
    font-weight: 700;
    color: #F2C14E;
    text-decoration: underline;
    text-underline-offset: 4px;
    word-break: break-word;
}

.rle-closing__url:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   6. Decorative UI mock (browser / profile card)
   -------------------------------------------------------------------------- */
.rle-mock {
    padding: 1rem 1.15rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.rle-mock__bar span {
    background: var(--border-light);
}

.rle-mock__body {
    display: flex;
    flex-direction: column;
    gap: .95rem;
}

.rle-mock__row {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.rle-mock__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.rle-mock__chip,
.rle-mock__avatar {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-blue);
    color: var(--primary);
    font-size: 1.1rem;
}

.rle-mock__avatar {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.5rem;
}

.rle-mock__line {
    display: block;
    width: var(--rle-w, 60%);
    height: .7rem;
    border-radius: var(--radius-pill);
    background: var(--border-light);
}

.rle-mock__chart {
    margin-top: .35rem;
    padding: .9rem 1rem .4rem;
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.rle-mock__chart .rle-spark {
    height: 4.5rem;
}

/* --------------------------------------------------------------------------
   7. Logo marquee (Media Coverage / Our Clients)
   -------------------------------------------------------------------------- */
.rle-marquee {
    overflow-x: auto;
    scrollbar-width: none;
}

.rle-marquee::-webkit-scrollbar {
    display: none;
}

.rle-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    margin: 0;
    padding: .4rem 1.25rem .4rem 0;
    list-style: none;
}

.rle-marquee--on {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.rle-marquee__lane {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: rle-marquee 46s linear infinite;
}

.rle-marquee--on[data-rle-reverse] .rle-marquee__lane {
    animation-direction: reverse;
    animation-duration: 54s;
}

.rle-marquee--on:hover .rle-marquee__lane,
.rle-marquee--on:focus-within .rle-marquee__lane {
    animation-play-state: paused;
}

.rle-logo-slot {
    flex: 0 0 auto;
}

.rle-logo-slot__frame,
.rle-logo-slot__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(8.5rem, 14vw, 11.5rem);
    border-radius: var(--radius-md);
}

.rle-logo-slot__frame {
    border: 1.5px dashed #C3D5EC;
    background: rgba(255, 255, 255, .7);
    color: #A9BCD6;
    font-size: 1.5rem;
}

.rle-logo-slot__img {
    object-fit: contain;
    border: 1px solid var(--border);
    background: #fff;
    filter: grayscale(1);
    opacity: .75;
    transition: filter .3s, opacity .3s, transform .3s var(--ease);
}

.rle-logo-slot__img:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8. What We Do: animated bullet index + service panels
   -------------------------------------------------------------------------- */
.rle-svc__nav {
    position: relative;
    padding: .4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: auto;
    scrollbar-width: thin;
}

.rle-svc__nav.rle-sticky {
    max-height: calc(100vh - var(--header-h) - 2.5rem);
}

.rle-svc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.rle-svc__indicator {
    position: absolute;
    left: .4rem;
    right: .4rem;
    top: 0;
    height: var(--h, 0);
    transform: translateY(var(--y, 0));
    border: 1px solid #CFE0F7;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--bg-blue), #fff);
    opacity: 0;
    transition: transform .55s var(--ease), height .55s var(--ease), opacity .3s;
    pointer-events: none;
}

.rle-svc__indicator::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: var(--gradient-gold);
}

.rle-svc--ready .rle-svc__indicator {
    opacity: 1;
}

.rle-svc__tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .62rem .75rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .93rem;
    line-height: 1.3;
    color: var(--text-secondary);
    transition: color .3s, transform .4s var(--ease), background .3s;
}

.rle-svc__tab:hover {
    color: var(--primary);
    transform: translateX(5px);
}

.rle-svc__tab:focus-visible {
    outline: 3px solid rgba(15, 76, 183, .35);
    outline-offset: -2px;
}

.rle-svc__tab[aria-selected="true"] {
    color: var(--primary-dark);
    font-weight: 800;
}

.rle-svc__dot {
    position: relative;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-blue);
    color: var(--primary);
    font-size: .95rem;
    transition: background .35s, color .35s, transform .4s var(--ease);
}

.rle-svc__tab[aria-selected="true"] .rle-svc__dot {
    background: var(--gradient-primary);
    color: #fff;
    transform: scale(1.08);
}

.rle-svc__tab[aria-selected="true"] .rle-svc__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary-light);
    opacity: 0;
    animation: rle-pulse 2.6s ease-out infinite;
}

.rle-svc__label .rle-num {
    color: var(--accent-dark);
    font-weight: 800;
}

.rle-svc__stage {
    min-width: 0;
}

.rle-svc__panel {
    padding: clamp(1.25rem, 2.6vw, 2.25rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.rle-svc__panel:not([hidden]) {
    animation: rle-panel .6s var(--ease) backwards;
}

.rle-svc__panel:focus-visible,
.rle-tabs__panel:focus-visible {
    outline: 3px solid rgba(15, 76, 183, .3);
    outline-offset: 3px;
}

.rle-svc__top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.rle-svc__icon {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 22px rgba(15, 76, 183, .25);
}

.rle-svc__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.2;
    color: var(--secondary);
}

.rle-svc__title .rle-num {
    color: var(--accent);
}

.rle-svc__sub {
    margin: .3rem 0 0;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--primary);
}

.rle-svc__block {
    margin-top: 1.6rem;
}

.rle-svc__h4 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .85rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.3;
    color: var(--secondary);
}

.rle-svc__h4::before {
    content: "";
    width: 1.4rem;
    height: 3px;
    border-radius: 3px;
    background: var(--gradient-gold);
}

/* bullet entrance (staggered slide) */
.rle-js .rle-svc__nav:not(.rle-in) .rle-svc__list li {
    opacity: 0;
}

.rle-svc__nav.rle-in .rle-svc__list li {
    animation: rle-slide .65s var(--ease) calc(var(--rle-i, 0) * 55ms) backwards;
}

@media (max-width: 991.98px) {
    .rle-svc__nav {
        padding: .35rem;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .rle-svc__list {
        flex-direction: row;
        gap: .35rem;
        width: max-content;
    }

    .rle-svc__indicator {
        display: none;
    }

    .rle-svc__tab {
        width: auto;
        white-space: nowrap;
        scroll-snap-align: center;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-pill);
        padding: .5rem .9rem .5rem .55rem;
    }

    .rle-svc__tab:hover {
        transform: none;
    }

    .rle-svc__tab[aria-selected="true"] {
        background: var(--bg-blue);
        border-color: #CFE0F7;
    }

    .rle-svc__top {
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   9. Tabs (persona + stepper variants)
   -------------------------------------------------------------------------- */
.rle-tabs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .2rem .2rem .55rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.rle-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
    scroll-snap-align: center;
    padding: .65rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .92rem;
    color: var(--text-secondary);
    transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}

.rle-tabs__tab:hover {
    color: var(--primary);
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.rle-tabs__tab:focus-visible {
    outline: 3px solid rgba(15, 76, 183, .35);
    outline-offset: 2px;
}

.rle-tabs__tab[aria-selected="true"] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 76, 183, .26);
}

.rle-dark .rle-tile .rle-points>li {
    color: var(--text-secondary);
}

.rle-dark .rle-tile .rle-points strong {
    color: var(--text);
}

.row>[class*="col"]>.rle-card {
    height: 100%;
}

@media (min-width: 992px) {
    .rle-tabs:not(.rle-tabs--stepper) .rle-tabs__list {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.rle-tabs__stage {
    padding: clamp(1.25rem, 2.8vw, 2.25rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
}

.rle-tabs__panel:not([hidden]) {
    animation: rle-panel .6s var(--ease) backwards;
}

.rle-tabs__big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 1.65rem;
    box-shadow: 0 12px 24px rgba(15, 76, 183, .26);
}

.rle-tabs__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
    color: var(--secondary);
}

/* stepper (navy section) */
.rle-tabs--stepper .rle-tabs__list {
    gap: 0;
    padding-bottom: .9rem;
}

.rle-tabs--stepper .rle-tabs__tab {
    position: relative;
    flex: 1 0 9rem;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    white-space: normal;
    padding: .5rem .6rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: .85rem;
    line-height: 1.3;
    color: var(--text-on-dark);
    box-shadow: none;
    transform: none;
}

.rle-tabs--stepper .rle-tabs__tab::before {
    content: "";
    position: absolute;
    top: 1.6rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .2);
}

.rle-tabs--stepper li:first-child .rle-tabs__tab::before {
    display: none;
}

.rle-tabs--stepper .rle-tabs__tab:hover {
    color: #fff;
}

.rle-tabs--stepper .rle-tabs__tab[aria-selected="true"] {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.rle-tabs--stepper .rle-tabs__node {
    position: relative;
    z-index: 1;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-light);
    border: 2px solid rgba(255, 255, 255, .3);
    font-weight: 800;
    color: #fff;
    transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease);
}

.rle-tabs--stepper .rle-tabs__tab[aria-selected="true"] .rle-tabs__node {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--secondary);
    transform: scale(1.15);
}

.rle-tabs--stepper .rle-tabs__stage {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border-on-dark);
}

.rle-tabs--stepper .rle-tabs__title {
    color: #fff;
}

.rle-tabs--stepper .rle-tabs__big {
    background: var(--gradient-gold);
    color: var(--secondary);
    box-shadow: none;
}

.rle-tabs--stepper li {
    display: flex;
    flex: 1 0 9rem;
}

/* --------------------------------------------------------------------------
   10. Strategy timeline
   -------------------------------------------------------------------------- */
.rle-steps {
    position: relative;
    padding-left: 3.25rem;
}

.rle-steps::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(var(--accent), var(--primary-light) 50%, var(--accent));
    opacity: .5;
}

.rle-steps__item {
    margin-bottom: 1.25rem;
}

.rle-steps__item:last-child {
    margin-bottom: 0;
}

.rle-steps__card {
    height: auto;
}

.rle-steps__dot {
    position: absolute;
    left: -3.25rem;
    top: 1.1rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border: 3px solid var(--bg);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(15, 76, 183, .28);
}

@media (min-width: 992px) {
    .rle-steps {
        padding-left: 0;
    }

    .rle-steps::before {
        left: 50%;
        transform: translateX(-1px);
    }

    .rle-steps__item {
        margin-bottom: 1.5rem;
    }

    .rle-steps__dot {
        top: 1.35rem;
        right: -2.15rem;
        left: auto;
    }

    .rle-steps__item .offset-lg-6 .rle-steps__dot {
        left: -2.15rem;
        right: auto;
    }
}

/* --------------------------------------------------------------------------
   11. Accordion (objectives + FAQ) and FAQ search
   -------------------------------------------------------------------------- */
.rle-acc .accordion-item {
    margin-bottom: .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md) !important;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.rle-acc .accordion-item:last-child {
    margin-bottom: 0;
}

.rle-acc .accordion-button {
    gap: .85rem;
    padding: 1rem 1.2rem;
    background: #fff;
    box-shadow: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--secondary);
}

.rle-acc .accordion-button:not(.collapsed) {
    background: var(--bg-blue);
    color: var(--primary-dark);
}

.rle-acc .accordion-button:focus-visible {
    outline: 3px solid rgba(15, 76, 183, .35);
    outline-offset: -3px;
}

.rle-acc .accordion-body {
    padding: 1rem 1.25rem 1.3rem;
}

.rle-acc .rle-num {
    color: var(--accent-dark);
    font-weight: 800;
    margin-right: .1rem;
}

.rle-search {
    position: relative;
    margin-top: 1.25rem;
}

.rle-search .bi {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.rle-search .form-control {
    height: 3rem;
    padding-left: 2.7rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}

.rle-search .form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 .22rem rgba(52, 120, 229, .2);
}

.rle-search__empty {
    margin: .75rem 0 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   12. Motion
   -------------------------------------------------------------------------- */
.rle-js [data-rle-reveal]:not(.rle-in) {
    opacity: 0;
}

.rle-js [data-rle-reveal].rle-in {
    animation: rle-rise var(--dur) var(--ease) var(--rle-d, 0ms) backwards;
}

@keyframes rle-rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
}

@keyframes rle-slide {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
}

@keyframes rle-panel {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@keyframes rle-marquee {
    to {
        transform: translateX(-50%);
    }
}

@keyframes rle-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rle-pulse {
    0% {
        opacity: .7;
        transform: scale(.85);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .rle-js [data-rle-reveal]:not(.rle-in) {
        opacity: 1;
    }

    .rle-js [data-rle-reveal].rle-in,
    .rle-svc__nav.rle-in .rle-svc__list li,
    .rle-svc__panel:not([hidden]),
    .rle-tabs__panel:not([hidden]) {
        animation: none;
    }

    .rle-js .rle-svc__nav:not(.rle-in) .rle-svc__list li {
        opacity: 1;
    }

    .rle-marquee__lane,
    .rle-hub__ring,
    .rle-svc__tab[aria-selected="true"] .rle-svc__dot::after {
        animation: none;
    }

    .rle-card,
    .rle-btn,
    .rle-tile,
    .rle-hubitem,
    .rle-issue,
    .rle-svc__tab,
    .rle-svc__indicator,
    .rle-tabs__tab {
        transition: none;
    }

    .rle-card:hover,
    .rle-btn:hover,
    .rle-tile:hover,
    .rle-hubitem:hover,
    .rle-issue:hover,
    .rle-svc__tab:hover,
    .rle-tabs__tab:hover {
        transform: none;
    }
}


/* ==========================================================================
   Real Estate Marketing Agency India - site footer
   Uses the global :root tokens from style.css (no new tokens here).
   Layout = Bootstrap rows / cols + flexbox. No CSS Grid.
   ========================================================================== */
.rle-footer {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--gradient-navy);
    color: var(--text-on-dark);
    font-family: var(--font-body);
}

.rle-footer::before {
    /* gold hairline on top */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent) 35%, #FFE7A3 55%, var(--accent) 75%, var(--accent-dark));
}

.rle-footer__glow {
    position: absolute;
    right: -10rem;
    top: -10rem;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 154, 22, .22), rgba(217, 154, 22, 0) 70%);
    pointer-events: none;
}

.rle-footer>.container-fluid {
    position: relative;
    z-index: 1;
}

/* ---- CTA band */
.rle-footer__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    padding: clamp(1.15rem, 2.6vw, 2rem);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    box-shadow: 0 24px 50px rgba(0, 0, 0, .22);
}

.rle-footer__cta-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 24rem;
    min-width: 0;
}

.rle-footer__cta-icon {
    flex: 0 0 3.4rem;
    width: 3.4rem;
    height: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--gradient-gold);
    color: var(--secondary);
    font-size: 1.5rem;
}

.rle-footer__cta-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    line-height: 1.3;
    color: #fff;
    text-wrap: balance;
}

.rle-footer__cta .rle-btn {
    white-space: normal;
    max-width: 100%;
}

/* ---- brand column */
.rle-footer__logo {
    display: inline-flex;
    padding: .6rem .9rem;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.rle-footer__logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.rle-footer__about {
    max-width: 26rem;
    margin: 1.25rem 0 1.4rem;
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.6;
    color: #fff;
}

.rle-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rle-footer__contact li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .4rem 0;
    font-size: .95rem;
    line-height: 1.45;
}

.rle-footer__contact a,
.rle-footer__contact span:not(.rle-footer__ico) {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-on-dark);
    text-decoration: none;
    transition: color .2s;
}

.rle-footer__contact a:hover {
    color: #F2C14E;
}

.rle-footer__ico {
    flex: 0 0 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(242, 193, 78, .14);
    color: #F2C14E;
    transition: background .25s, color .25s;
}

.rle-footer__contact li:hover .rle-footer__ico {
    background: var(--gradient-gold);
    color: var(--secondary);
}

/* ---- link columns */
.rle-footer__heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border-on-dark);
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #F2C14E;
}

.rle-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rle-footer__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .32rem 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--text-on-dark);
    text-decoration: none;
    transition: color .25s, transform .25s var(--ease);
}

.rle-footer__links a::before {
    content: "";
    width: 0;
    height: 2px;
    margin-right: 0;
    border-radius: 2px;
    background: var(--accent);
    transition: width .25s var(--ease), margin-right .25s var(--ease);
}

.rle-footer__links a:hover,
.rle-footer__links a:focus-visible {
    color: #fff;
}

.rle-footer__links a:hover::before,
.rle-footer__links a:focus-visible::before {
    width: .9rem;
    margin-right: .5rem;
}

.rle-footer a:focus-visible {
    outline: 3px solid rgba(242, 193, 78, .7);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---- bottom bar */
.rle-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-block: 1.25rem;
    border-top: 1px solid var(--border-on-dark);
}

.rle-footer__copy {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}

.rle-footer__top {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-on-dark);
    border-radius: 50%;
    color: #fff;
    transition: background .25s, color .25s, transform .3s var(--ease), border-color .25s;
}

.rle-footer__top:hover {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--secondary);
    transform: translateY(-4px);
}

@media (max-width: 575.98px) {
    .rle-footer__cta-text {
        align-items: flex-start;
    }

    .rle-footer__cta .rle-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rle-footer__links a,
    .rle-footer__links a::before,
    .rle-footer__top {
        transition: none;
    }

    .rle-footer__top:hover {
        transform: none;
    }
}