/* =========================================================
   TYPOGRAPHY — Montserrat sitewide
   main.css already sets it on body, headings and paragraphs, so most of the
   page inherits. This block covers what does NOT inherit:
     - form controls, which browsers draw in the system UI font
     - vendor CSS that hardcodes its own family (meanmenu's mobile menu and
       magnific-popup both ship Arial)
     - plugin UI rendered outside the theme (SweetAlert2, Select2)
   Icon fonts are deliberately left alone: Font Awesome and bootstrap-icons
   set their family on .fa* / .bi* classes, which outrank these selectors.
   ========================================================= */
body,
input,
button,
select,
optgroup,
textarea,
.mean-bar,
.mean-nav ul li a,
.mfp-container,
.swal2-popup,
.select2-container {
    font-family: "Montserrat", sans-serif;
}

Header .navbar-custom {
    background: rgba(249, 115, 22, 0.12) !important;
    padding: 12px 0;
    font-weight: 600;
    font-size: 16px;
}

.navbar-nav {
    margin: auto;
    gap: 25px;
}

.main-menu ul li a:hover,
.main-menu ul li.active a {
    /* color: #0F172A; */
    color: #F97316;
    /* color: #0F172A; */
    /* new dev  */
    /* border-bottom: 2px solid #0F172A; */
    /* padding: 1px 5px 1px;
    border: 1px solid #F97316; */
}

/* Base nav link styling */
.navbar-light .navbar-nav .nav-link {
    position: relative;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 17px;
    display: inline-block;
    /* ⭐ IMPORTANT */
    padding: 0 4px 6px 4px;
    transition: 0.3s ease;
}

/* Hover text color */
.navbar-light .navbar-nav .nav-link:hover {
    color: #0F172A;
}

/* Underline Animation */
.navbar-light .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #F97316;
    transition: width 0.3s ease;
}

/* Hover + Active underline */
.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after {
    width: 100%;
}

/* Active link text color */
.navbar-light .navbar-nav .nav-link.active {
    color: #F97316 !important;
}

/* login btn */

/* Modern Login Button */
.login-btn {
    /* background: linear-gradient(135deg, #F97316 0%, #F97316 100%);
    color: #FFFFFF;
    border: none;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease; */
    /* new */
    /* color: #0F172A; */
    /* background-color: #FFFFFF; */
    color: #FFFFFF;
    background-color: #F97316;
    border-color: #F97316;
    /* border-color: #FFFFFF; */
}

.login-btn i {
    font-size: 24px;
}

/* .login-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.45);
    color: #FFFFFF;
} */

/* Modal Design */
.auth-modal-left {
    background: #E5E7EB;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal-left img {
    width: 100%;
    height: auto;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 18px;
}

.auth-switch {
    margin-top: 15px;
    text-align: center;
    font-size: 15px;
}

.auth-switch a {
    font-weight: bold;
    cursor: pointer;
}

/* Search box css */
.media-search-card {
    /* Illustration behind the filters, with a white wash over it. The artwork is
       already pale in the middle and busy at the edges, so the wash is what keeps
       the labels and inputs readable across the whole card. The colour underneath
       is the fallback if the image ever fails to load. */
    background-color: rgba(249, 115, 22, 0.12);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)),
        url('../../../assets/img/search_form_back.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    border: 1px solid #E5E7EB;
}

/* Darker and heavier than the theme default: with the wash dialled back the
   labels sit over the illustration itself, not a near-white panel. */
.media-search-card label {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
}

/* A white halo behind the small text. The artwork is deliberately left vivid,
   which means a few labels land on billboards and buildings rather than sky —
   this keeps them readable there without flattening the illustration. */
.media-search-card label,
.media-search-card .d-flex.justify-content-between>span {
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.95),
        0 0 9px rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(255, 255, 255, 0.9);
}

.media-search-card .form-control,
.media-search-card .form-select {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    font-size: 14px;
}

.media-search-card .form-control:focus,
.media-search-card .form-select:focus {
    border-color: #F97316;
    box-shadow: 0 0 0 0.15rem rgba(249, 115, 22, 0.25);
}

/* The range tracks are mid-grey, which disappears against the illustration.
   White with a hairline ring reads on every part of the artwork; box-shadow is
   used rather than a border so the track keeps its 6px height and stays aligned
   with the orange fill that sits over it. */
.media-search-card .range-slider-container input[type=range]::-webkit-slider-runnable-track {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22);
}

.media-search-card .range-slider-container input[type=range]::-moz-range-track {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22);
}

.media-search-card .range-slider-fill {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}

/* Buttons */
.btn-search {
    height: 46px;
    /* background: linear-gradient(135deg, #0F172A, #0F172A); */
    background: #F97316;
    color: #FFFFFF;
    border-radius: 12px;
    font-weight: 600;
    border: none;
}

.btn-search:hover {
    /* background: linear-gradient(135deg, #0F172A, #0F172A); */
    background: #F97316;
    color: #FFFFFF;
}

.btn-clear {
    height: 46px;
    border-radius: 12px;
    font-weight: 600;
    border: 1px dashed rgba(15, 23, 42, 0.55);
    background: #FFFFFF;
}

/* Mobile polish */
@media (max-width: 575px) {
    .media-search-card {
        padding: 18px;
    }
}

/* Narrow screens get the portrait artwork instead: the illustration sits across
   the top and the filters drop into the blank area beneath it. */
@media (max-width: 767.98px) {
    .media-search-card {
        background-image:
            url('../../../assets/img/serch_from_back_mob.webp'),
            linear-gradient(90deg, #F97316, #F97316 50%, rgba(249, 115, 22, 0.12));
        /* `100% auto` scales the artwork to the card's width and keeps its own
           proportions, so the band always ends at a known fraction of that width
           (measured: 68.1%) no matter how tall the card grows. `cover` would tie
           that band to the card's HEIGHT, which changes with the fields inside. */
        background-size: 100% auto, cover;
        background-position: top center, center;
        background-repeat: no-repeat, no-repeat;
        /* Percentage padding resolves against the width, matching the band above.
           74% clears the 68.1% band and leaves a small gap under it. The gradient
           layer continues the artwork's bottom colours past the image's edge, so
           there is no seam when the card runs longer than the picture. */
        padding: 74% 18px 18px;
    }
}

/* .search-box-wrapper {
    background: rgba(249, 115, 22, 0.12); 
    border-radius: 6px;
}

.search-box .custom-select {
    height: 50px;
    border-radius: 8px !important;
    padding-left: 15px;
    font-size: 15px;
} */

.btn-dark {
    height: 50px;
    border-radius: 8px !important;

}

/* Mobile spacing improvements */
/* @media (max-width: 767px) {
    .search-box {
        padding: 15px !important;
    }
} */

/* loader css */
/* Overlay */
.global-loader {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.global-loader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(6px);
}

/* Wrapper */
.loader-wrapper {
    position: relative;
    text-align: center;
}

/* Dotted circular loader */
.dotted-loader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px dotted #F97316;
    /* YouTube/Google style dotted ring */
    border-top-color: transparent;
    border-right-color: transparent;
    animation: rotateDots 1s linear infinite;
}

/* Animation */
@keyframes rotateDots {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Text */
.loader-text {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    border-radius: 6px;
}

/* show/hide */
.global-loader[aria-hidden="true"] {
    display: none;
}

.global-loader[aria-hidden="false"] {
    display: flex;
}

/* ICONS */
.about-banner-img {
    margin-top: 6rem;
}

@media (max-width: 991px) {
    .about-banner-img {
        margin-top: 5rem;
    }
}

.banner-below-section {
    place-items: anchor-center;
}

/* =========================
   DESKTOP MENU CENTER FIX
========================= */
@media (min-width: 992px) {

    .main-menu-wrap {
        position: relative;
    }

    nav.main-menu {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    nav.main-menu ul {
        display: flex;
        align-items: center;
        gap: 45px;
    }

    /* Right icons stay right */
    .new-header-icons {
        margin-left: auto;
    }
}

/* MOBILE */
@media (max-width: 991px) {
    .site-logo {
        order: 1;
    }

    .new-header-icons {
        order: 2;
    }

    .mobile-menu {
        order: 3;
    }
}

.main-menu-wrap {
    display: flex;
    align-items: center;
    position: relative;
    /* 🔥 important */
}

.new-header-icons {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-left: auto;

    position: relative;
    z-index: 1001;
    /* toggle पेक्षा जास्त */
}

/* =========================
   HEADER ICONS RESPONSIVE
========================= */

/* Desktop - default */
.new-header-icons {
    display: flex;
    align-items: center;
    /* The cart and account tiles are wide solid blocks, so 1rem between them
       read as a seam rather than a gap. */
    gap: 20px;
}

/* Mobile View */
@media (max-width: 991px) {

    .header-icons .btn,
    .header-icons a {
        width: 56px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .new-header-icons {
        display: flex;
        align-items: center;
        gap: 10px;

        margin-left: auto;
        /* margin-right: 3.4rem !important;  */

        position: relative;
        z-index: 1001;
        /* toggle पेक्षा जास्त */
    }

    /* ONLY WHEN USER IS LOGGED IN */
    body.user-logged-in .new-header-icons {
        margin-right: 3rem !important;
    }

    /* WHEN USER NOT LOGGED IN → NO MARGIN */
    body.user-guest .new-header-icons {
        /* margin-right: 0 !important; */
    }

    /* Header row alignment */
    .main-menu-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* margin-right: 64px !important; */
    }

    /* Logo left */
    .site-logo {
        order: 1;
    }

    /* Cart + Login outside toggle */
    .new-header-icons {
        order: 2;
        margin-left: auto;
        /* margin-right: 100px !important; */
    }

    /* Toggle (hamburger) last */
    .mobile-menu {
        order: 3;
    }

    .login-btn {
        margin-right: 3.6rem !important;
    }

    .new-header-icons {
        gap: 1rem;
    }

}

/* card map css */
.media-map img {
    opacity: 0.8;
}

.media-map a:hover img {
    opacity: 1;
}

.media-map span {
    font-size: 1.1rem;
}

.whybrandimg-para {
    font-size: 1.2rem;
}

/* ===============================
   USER DROPDOWN – CARD STYLE
================================ */

.user-menu-v2 {
    width: 200px !important;
    padding: 14px;
    border-radius: 16px;
    border: none;
    background: #E5E7EB;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

/* USER INFO */
.user-menu-v2 .user-info {
    text-align: center;
    padding: 14px 10px;
    border-radius: 12px;
    background: #E5E7EB;
    margin-bottom: 12px;
}

.user-menu-v2 .user-info strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
}

.user-menu-v2 .user-info span {
    font-size: 13px;
    color: #0F172A;
    white-space: normal;
    word-break: break-word;
}

/* ACTIONS WRAPPER */
.user-menu-v2 .menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* BUTTON STYLE */
.user-menu-v2 .menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    background: #E5E7EB;
    color: #0F172A;
    transition: all 0.25s ease;
}

/* ACTIVE (Dashboard) */
.user-menu-v2 .menu-btn.active {
    width: 175px !important;
    background: #F97316;
    color: #FFFFFF;
}

/* LOGOUT */
.user-menu-v2 .menu-btn.logout {
    width: 175px !important;
    color: #F97316;
}

/* HOVER EFFECT */
.user-menu-v2 .menu-btn:hover {
    width: 175px;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

/* profile website */
/* USER DROPDOWN AREA */
.user-dropdown .user-btn {
    /* background: transparent;  new dev*/
    background: #F97316;
    border: none;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 11px;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    object-fit: cover;
    transition: 0.3s;
}

.user-avatar:hover {
    transform: scale(1.05);
}

.user-name {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
}

/* ARROW ANIMATION */
.dropdown.show .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-arrow {
    transition: 0.3s ease;
    color: #FFFFFF;
}

/* MODERN GLASS DROPDOWN MENU */
.user-menu {
    border-radius: 12px;
    backdrop-filter: blur(10px);
    /* background: rgba(255, 255, 255, 0.85); */
    background: rgb(229 231 235 / 85%);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* DROPDOWN ITEMS STYLING */
.user-menu .dropdown-item {
    border-radius: 8px;
    margin: 3px 8px;
    padding: 10px 14px;
    transition: 0.2s;
    width: 90%;
}

.user-menu .dropdown-item:hover {
    background: rgba(15, 23, 42, 0.07);
    transform: translateX(3px);
}

.dropdown-header strong {
    font-size: 16px;
}

.dropdown-header small {
    font-size: 12px;
}

/* password hide and icon */
.password-wrapper {
    position: relative;
}

/* all media card */
.media-card {
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
    transition: 0.3s;
}

.media-card:hover {
    transform: translateY(-5px);
}

.media-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.media-body {
    padding: 12px;
}

.media-body h6 {
    margin: 0;
    font-weight: 600;
}

.media-body p {
    margin: 5px 0;
    color: #0F172A;
    font-weight: bold;
}

.media-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qty-box {
    display: flex;
    align-items: center;
}

.qty-box button {
    width: 30px;
    height: 30px;
    padding: 0;
}

.qty-box input {
    width: 40px;
    text-align: center;
    border: 1px solid #E5E7EB;
    margin: 0 5px;
}

/* =========================
   SERVICES SECTION
========================= */
/* .services-section{
    background: radial-gradient(circle at top, #0F172A, #0F172A);
    padding: 100px 0;
    color: #FFFFFF;
} */
.services-section {
    margin-top: 4rem;
}

/* Header */
.services-header {
    max-width: 720px;
    margin: 0 auto 60px;
}

.services-subtitle {
    color: #F97316;
    font-size: 18px;
    letter-spacing: 2px;
}

.services-title {
    font-size: 42px;
    font-weight: 700;
    margin: 10px 0;
}

.services-title span {
    color: #F97316;
}

.services-desc {
    color: #0F172A;
    font-size: 18px;
}

/* Card — white panel with the service photo bleeding in from the right */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 260px;
    padding: 26px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    /* new stacking context so the photo can sit behind the text at z-index -1
       without falling behind the card's own background */
    isolation: isolate;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* The photo. Masked to fade out towards the left so the copy always lands on
   clean white — no text-over-image contrast problems whatever the picture. */
/* The photo is the card's background — edge to edge, no letterboxing. */
.service-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

/* White scrim over the left of the photo. The copy sits on solid white and
   fades into the picture, so it stays readable whatever the image behind it —
   light sky, dark building or busy street. */
.service-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            #FFFFFF 0%,
            rgba(255, 255, 255, 0.94) 34%,
            rgba(255, 255, 255, 0.62) 55%,
            rgba(255, 255, 255, 0) 82%);
}

.service-card:hover .service-media img {
    transform: scale(1.06);
}

/* Icon */
.service-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F97316;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card:hover .service-icon {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.32);
}

/* Copy is held clear of the photo rather than overlapping it */
.service-card h4 {
    max-width: 62%;
    margin: 20px 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: #0F172A;
}

.service-card p {
    max-width: 56%;
    margin: 0;
    color: #0F172A;
    font-size: 15px;
    line-height: 1.6;
}

/* Hover */
.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.13);
}

/* Responsive */
@media(max-width: 991px) {
    .services-title {
        font-size: 32px;
    }
}

/* Two-up and single-column cards are much wider than the 4-up ones, so the
   photo is given more room and the copy is allowed to run further. */
@media(max-width: 991px) and (min-width: 576px) {

    .service-card h4,
    .service-card p {
        max-width: 54%;
    }
}

@media(max-width: 575px) {
    .services-section {
        padding: 10px 0;
    }

    .service-card {
        min-height: 210px;
    }
}

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

    .service-card,
    .service-icon,
    .service-media img {
        transition: none;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card:hover .service-media img {
        transform: none;
    }
}

/* =========================
   PROCESS SECTION – WHITE
========================= */

.process-section {
    background: #FFFFFF;
    padding: 75px 0;
}

.work-process-section {
    background: #FFFFFF;
    padding: 0 0 75px;
}

/* Header */
.process-header {
    max-width: 750px;
    margin: 0 auto 40px;
}

.process-subtitle {
    color: #F97316;
    font-size: 18px;
    letter-spacing: 2px;
}

.process-title {
    font-size: 42px;
    font-weight: 700;
    margin: 10px 0;
}

.process-title span {
    color: #F97316;
}

.process-desc {
    color: #0F172A;
    font-size: 18px;
}

/* Timeline Wrapper */
.process-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Full Connecting Line */
.timeline-line {
    position: absolute;
    top: 55px;
    /* ⬅ circle center */
    left: 8.33%;
    right: 8.33%;
    height: 2px;
    background: linear-gradient(to right, #F97316, #F97316);
    z-index: 1;
}

/* Step */
.process-step {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 16.66%;
    padding: 0 10px;
}

/* Circle */
.process-circle {
    width: 100px;
    /* ⬅ bigger */
    height: 100px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.process-circle i {
    font-size: 30px;
    color: #F97316;
}

/* Step number INSIDE circle */
.step-no {
    position: absolute;
    bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #F97316;
}

/* Text */
.process-step h4 {
    font-size: 18px;
    margin-bottom: 6px;
}

.process-step p {
    font-size: 16px;
    color: #0F172A;
}

/* Hover */
.process-step:hover .process-circle {
    border-color: #F97316;
    background: #FFFFFF;
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.25);
    transform: translateY(-6px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 991px) {
    .process-timeline {
        flex-wrap: wrap;
        gap: 40px;
    }

    .timeline-line {
        display: none;
    }

    .process-step {
        width: 50%;
    }
}

@media(max-width: 575px) {
    .process-step {
        width: 100%;
    }

    .process-title {
        font-size: 32px;
    }
}

/* =========================
   ABOUT SECTION – WHITE
========================= */

.about-modern {
    background: #E5E7EB;
    padding: 4rem 0;
}

/* LEFT CONTENT */
.about-subtitle {
    color: #F97316;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 600;
}

.about-title {
    font-size: 44px;
    font-weight: 700;
    margin: 15px 0 25px;
    line-height: 1.2;
    color: #0F172A;
}

.about-title span {
    color: #F97316;
}

.about-modern p {
    text-align: justify;
    font-size: 17px;
    color: #0F172A;
    margin-bottom: 18px;
    line-height: 1.7;
}

/* BUTTON */
.about-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 26px;
    background: #F97316;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    transition: 0.3s ease;
}

.about-btn:hover {
    background: #F97316;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* =========================
   STATS GRID
========================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.stat-card {
    background: linear-gradient(135deg, #F97316, #F97316);
    border-radius: 18px;
    padding: 35px;
    border: 1px solid #E5E7EB;
    transition: 0.35s ease;
}

.stat-card i {
    font-size: 34px;
    color: white;
    display: block;
    margin-bottom: 20px;
}

.stat-card h3 {
    font-size: 46px;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
}

.stat-card span {
    font-size: 16px;
    color: #ffffff;
}

/* HOVER */
/* The fill and the text-colour flip belonged to the old text tiles. The cards
   are artwork now, and "background: white" here is the shorthand, so it also
   set background-image: none at :hover specificity — which blanked the picture
   the moment the pointer touched a card. The lift is kept; see the artwork
   block at the end of this file for the rest. */
.stat-card:hover {
    transform: translateY(-8px);
}

.aboutcounter::after {
    content: " +";
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 991px) {
    .about-title {
        font-size: 36px;
    }

    .stats-grid {
        margin-top: 20px;
    }
}

@media(max-width: 575px) {
    .about-title {
        font-size: 30px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== FEATURE SECTION FIX ===== */

.feature-bg {
    background: #FFFFFF;
}

/* Ensure equal left-right space */
.feature-bg .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* Image wrapper */
.feature-image-wrapper {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

/* Image itself */
.feature-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Prevent image touching screen edge */
@media (min-width: 992px) {
    .feature-image-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Mobile spacing */
@media (max-width: 991px) {
    .feature-image-wrapper {
        margin-top: 40px;
    }
}

/* =========================
   CTA SECTION – WHITE VERSION
========================= */

.cta-section {
    background: #ffffff;
    margin-bottom: 4rem;
    margin-top: 4rem;
}

/* CTA Box */
.cta-box {
    position: relative;
    padding: 80px 40px;
    border-radius: 28px;

    /* 🌟 Warm premium gradient */
    /* background: linear-gradient(
        135deg,
        rgba(249, 115, 22, 0.12) 0%,
        #ffffff 40%,
        rgba(249, 115, 22, 0.12) 100%
    ); */
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0.12) 40%, #F97316 100%);

    /* background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0.12) 35%, rgba(249, 115, 22, 0.7) 65%, rgba(249, 115, 22, 0.88) 100%); */

    border: 1px solid rgba(249, 115, 22, 0.35);
    /* box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6); */
    box-shadow: 0 20px 50px rgb(15 23 42 / 3%), inset 0 0 0 1px rgb(255 255 255 / 0%);
}

/* Heading */
.cta-box h2 {
    font-size: 48px;
    font-weight: 700;
    color: #0F172A;
    /* ✅ dark text */
    margin-bottom: 20px;
}

.cta-box h2 span {
    color: #F97316;
}

/* Description */
.cta-box p {
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: 17px;
    color: #0F172A;
    line-height: 1.6;
}

/* Buttons */
.cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-cta {
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Primary Button */
.btn-cta.primary {
    background: #F97316;
    color: #0F172A;
}

.btn-cta.primary:hover {
    background: #F97316;
    transform: translateY(-3px);
}

/* Outline Button */
.btn-cta.outline {
    border: 1.5px solid rgba(15, 23, 42, 0.3);
    color: #0F172A;
    background: transparent;
}

.btn-cta.outline:hover {
    border-color: #F97316;
    color: #F97316;
    transform: translateY(-3px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 991px) {
    .cta-box h2 {
        font-size: 36px;
    }
}

@media(max-width: 575px) {
    .cta-box {
        padding: 60px 20px;
    }

    .cta-box h2 {
        font-size: 28px;
    }

    .cta-box p {
        font-size: 15px;
    }
}

/* =========================
   PREMIUM FOOTER
========================= */
/* ===== SERVICES CENTER ALIGN ===== */
.footer-services-wrap {
    text-align: center;
}

/* Grid with centered items */
.footer-services {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 10px 40px;
    padding: 0;
    margin-top: 20px;
}

/* Each li center aligned */
.footer-services li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
}

/* Icon style */
.footer-services .icon {
    color: #F97316;
    font-size: 18px;
    font-weight: bold;
}

/* ===== MOBILE VIEW ===== */
@media (max-width: 575px) {
    .footer-services {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.footer-links li.active a {
    color: #F97316;
    font-weight: 600;
}

/* Common icon list */
.footer-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-icon-list li {
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.footer-icon-list .icon {
    color: #F97316;
    /* brand color */
    font-size: 18px;
    font-weight: bold;
    margin-right: 0.3rem;
}

/* Services in 2 columns */
/* .footer-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 2px;
} */

/* Mobile – single column */
@media (max-width: 575px) {
    .footer-services {
        grid-template-columns: 1fr;
    }
}

/* ================= QUICK LINKS CENTER ================= */
.footer-links-wrap {
    text-align: center;
}

.footer-links-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 20px; */
}

.footer-links-center li {
    display: flex;
    margin-bottom: 10px;
    width: 160px;
    /* SAME WIDTH FOR ALL */
    margin-bottom: 10px;
}

.footer-links-center a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* center whole row */
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.footer-links-center .icon {
    color: #F97316;
    font-size: 18px;
    width: 12px;
    /* 🔑 icon fixed width */
    text-align: center;
}

.premium-footer {
    /* background: linear-gradient(180deg, #0F172A, #0F172A); */
    /* background-color: #0F172A; */
    /* Solid brand navy: the old value was a translucent dark that mixed with
       the white page into an off-palette grey. */
    background: var(--brand-navy);
    color: var(--brand-white);
    padding-top: 30px;
}

/* Brand */
.footer-brand p {
    font-size: 15px;
    line-height: 1.7;
    /* margin: 20px 0; */
    margin: 20px 30px 20px 0;
    color: #FFFFFF;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo span {
    background: #F97316;
    color: #0F172A;
    font-weight: 700;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo h4 {
    color: #FFFFFF;
    margin: 0;
}

.brand-logo h4 span {
    color: #F97316;
}

/* Titles */
.footer-title {
    color: #FFFFFF;
    font-size: 18px;
    margin-bottom: 20px;
}

/* Links */
.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    /* margin-bottom: 10px; */
    color: #FFFFFF;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #F97316;
    padding-left: 4px;
}

/* Contact */
.footer-links.no-anchor {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links.no-anchor li {
    display: block;
    /* 🔥 each item new line */
    color: #FFFFFF;
    font-size: 15px;
    /* cursor: pointer; */
    margin-bottom: 1px;
    position: relative;
    width: fit-content;
    /* hover only on text */
    transition: color 0.3s ease;
}

.footer-links.no-anchor li:hover {
    /* color: #F97316; */
}

.footer-contact li {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    color: #FFFFFF;
}

.footer-contact i {
    color: #F97316;
    font-size: 18px;
}

.footer-contact a {
    color: #FFFFFF;
}

.footer-contact a:hover {
    color: #F97316;
}

/* Social */
.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    /* background: rgba(255, 255, 255, 0.08); */
    background: #F97316;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #FFFFFF; */
    color: #0F172A;
    transition: 0.3s;
}

.footer-social a:hover {
    /* background: #F97316; */
    background: rgba(255, 255, 255, 0.08);
    /* color: #0F172A; */
    color: #FFFFFF;
}

.footer-bottom-line {
    color: #FFFFFF;
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* margin-top: 60px; */
    padding: 10px 0;
    font-size: 14px;
}

.footer-bottom a {
    color: #FFFFFF;
    margin-left: 1px;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #F97316;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 767px) {
    .footer-col {
        margin-bottom: 40px;
    }

    .footer-bottom a {
        display: inline-block;
        margin: 8px;
    }
}

/* Hide left image cleanly */
.auth-modal-left {
    display: none;
}

/* Right side full width */
#authModal .col-md-7 {
    width: 100%;
}

/* Glass modal */
#authModal .modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}

#authModal .modal-header {
    border-bottom: none;
    padding: 24px 30px 10px;
}

#authModal .modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #0F172A;
}

#authModal .modal-body {
    padding: 0;
}

#authModal .p-4 {
    padding: 30px 40px !important;
}

#authModal .form-control {
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: rgba(255, 255, 255, 0.75);
    font-size: 15px;
}

#authModal .form-control:focus {
    border-color: #F97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
    background: #FFFFFF;
}

#authModal .btn-dark {
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #F97316, #F97316);
    color: #0F172A;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
}

#authModal .btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4);
}

/* Password wrapper fix */
.password-wrapper {
    position: relative;
}

/* Eye icon always center */
.password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    font-size: 18px;
}

/* Reserve space for error message */
.password-wrapper+.text-danger,
.form-control+.text-danger {
    display: block;
    min-height: 18px;
    /* 🔥 space reserve */
    margin-top: 6px;
    font-size: 13px;
}

.password-toggle {
    color: #0F172A;
}

.password-toggle:hover {
    color: #F97316;
}

.password-wrapper {
    position: relative;
}

/* Eye icon NEVER depends on content */
.password-toggle {
    position: absolute;
    right: 14px;
    top: 26px;
    /* 🔥 exact half of 52px */
    transform: translateY(-50%);
    z-index: 10;
}

.auth-switch {
    margin-top: 18px;
    font-size: 14px;
}

.auth-switch a {
    color: #F97316;
    font-weight: 700;
}

.auth-switch a:hover {
    text-decoration: underline;
}

@media(max-width: 575px) {
    #authModal .p-4 {
        padding: 25px 20px !important;
    }

    #authModal .modal-title {
        font-size: 20px;
    }
}

.social-login {
    margin-bottom: 18px;
    text-align: center;
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    height: 50px;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    color: #0F172A;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.3s ease;
}

.google-btn img {
    width: 20px;
    height: 20px;
}

.google-btn:hover {
    background: #E5E7EB;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

/* Webkit Browsers scroll bar thin */
.modal-body::-webkit-scrollbar {
    width: 6px;
    /* 🔥 thin */
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.25);
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.45);
}

/* User Dashboard */
.accordion-button:focus {
    box-shadow: none;
}

/* ================= DASHBOARD LAYOUT ================= */
.dashboard-wrapper {
    max-width: 1300px;
    margin: auto;
}

/* ================= SIDEBAR ================= */
.dashboard-sidebar {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 110px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* MENU */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 10px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    color: #0F172A;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease;
}

.sidebar-menu a i {
    font-size: 18px;
    color: #F97316;
}

/* Hover */
.sidebar-menu a:hover {
    background: rgba(249, 115, 22, 0.12);
    color: #F97316;
}

/* Active */
.sidebar-menu li.active a {
    background: linear-gradient(135deg, #F97316, #F97316);
    color: #0F172A;
    font-weight: 600;
}

.sidebar-menu li.active a i {
    color: #0F172A;
}

/* ================= CONTENT ================= */
.dashboard-content {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
    .dashboard-sidebar {
        position: static;
    }

    .mission_img {
        margin: 30px !important;
    }

}

@media (max-width: 575px) {
    .dashboard-content {
        padding: 20px;
    }
}

/* vision mission design */
.vision_img {
    padding: 20px;
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.mission_img {
    padding: 20px;
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

/* SECTION */
.mv-section {
    /* background: #0F172A; */
    padding: 40px 20px 80px;
}

/* GRID */
.mv-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
}

/* WRAPPER (for bottom shape) */
.mv-wrapper {
    position: relative;
}

/* CARD */
.mv-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 10px 35px 25px;
    text-align: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 25px 45px rgba(15, 23, 42, 0.15);
}

/* ICON */
.mv-icon {
    font-size: 4rem;
    /* margin-bottom: 20px; */
}

/* TITLE */
.mv-card h3 {
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* TEXT */
.mv-card p {
    font-size: 18px;
    line-height: 1.7;
    color: #0F172A;
    text-align: justify;
}

/* BOTTOM SHAPE BASE */
.mv-wrapper::after {
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 120px;
    border-radius: 0 0 100px 100px;
    z-index: 1;
}

/* MISSION COLOR */
.mv-wrapper.mission::after {
    background: linear-gradient(135deg, #F97316, #F97316);
}

/* VISION COLOR */
.mv-wrapper.vision::after {
    background: linear-gradient(135deg, #0F172A, #0F172A);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .mv-container {
        grid-template-columns: 1fr;
        gap: 100px;
    }

    .mv-wrapper::after {
        width: 95%;
        height: 110px;
    }
}

/* testimonial */

.testimonial-section {
    background: linear-gradient(135deg, #F97316, #F97316);
    padding: 60px 20px;
}

.testimonial-wrapper {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* LEFT */
.testimonial-left {
    flex: 1;
}

.testimonial-left h2 {
    font-size: 22px;
    font-weight: 400;
    color: #0F172A;
}

/* RIGHT CARD */
.testimonial-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 22px 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
}

.testimonial-card .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.testimonial-card .title::after {
    content: "";
    height: 4px;
    width: 60%;
    background: rgba(249, 115, 22, 0.12);
    position: absolute;
    bottom: -6px;
    left: 20%;
}

.testimonial-card .nav-arrows {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* transform: translateY(-50%); */
    pointer-events: none;
    position: relative;
}

.testimonial-card .nav-arrows .arrow {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
    padding: 8px 12px;
    user-select: none;
    margin: 5px;
}

/* PROFILE */
.profile img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin: 5px 0 10px auto;
}

.testimonial-card h5 {
    font-size: 18px;
    margin-bottom: 4px;
}

.location {
    font-size: 14px;
    color: #0F172A;
}

/* STARS */
.stars {
    color: #F97316;
    font-size: 18px;
    margin: 10px 0;
}

/* CONTENT */
.content {
    font-size: 18px;
    color: #0F172A;
    line-height: 1.7;
    margin-top: 15px;
}

/* ARROWS */
.nav-arrows {
    display: flex;
    justify-content: space-between;
}

.nav-arrows .arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F97316, #F97316);
    color: #0F172A;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 34px;
    font-weight: 700;
    cursor: pointer;

    /* 🔥 KEY FIX */
    line-height: 0;
    padding-bottom: 6px;
    /* micro-adjust */
}

.arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.arrow:hover {
    background: #0F172A;
    color: #FFFFFF;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .testimonial-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-left h2 {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .testimonial-card {
        padding: 30px 20px;
    }

    .testimonial-left h2 {
        font-size: 22px;
    }
}

/* vision */
.vision_mission_heading {
    color: #F97316;
}

.vision_mission_para {
    font-size: 1.3rem;
}

/* card cart btn */

.single-latest-news {
    height: 100%;
    display: flex;
    flex-direction: row;
}

.news-text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 0px 15px 20px;
}

.news-text-box h3 {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.blog-meta {
    font-size: 16px;
    margin-bottom: 8px;
    color: #0F172A
}

.media-price {
    font-size: 18px;
    font-weight: 700;
    color: #F97316;
    /* margin: 6px 0 10px; */
}

.card-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 30px;
    font-weight: 600;
}

.card-btn.cart {
    background: #F97316;
    color: #FFFFFF;
}

.card-btn.contact {
    background: #F97316;
    color: #0F172A;
}

.card-btn.read {
    background: transparent;
    color: #F97316;
}

.pricepermonth {
    color: rgba(15, 23, 42, 0.55);
    font-weight: 400;
}

/* ===============================
   HOARDINGS SLIDER
================================ */

.hoarding-slider {
    position: relative;
    padding: 0 40px;
    /* cards la space */
}

.hoarding-slider {
    pointer-events: auto;
}

/* Keep card height perfect */
.swiper-slide {
    height: auto;
    display: flex;
}

/* Arrows */
/* Common arrow */
.hoarding-slider .swiper-button-prev,
.hoarding-slider .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;

    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);

    color: #F97316;
    z-index: 20;
    /* 🔥 card var yenar nahi */
}

/* LEFT */
.hoarding-slider .swiper-button-prev {
    left: -22px;
    /* 🔥 container baher */
}

/* RIGHT */
.hoarding-slider .swiper-button-next {
    right: -22px;
    /* 🔥 container baher */
}

/* Arrow icon */
.hoarding-slider .swiper-button-prev::after,
.hoarding-slider .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
}

/* Pagination dots */
.hoarding-slider .swiper-pagination-bullet {
    background: #E5E7EB;
    opacity: 1;
}

.hoarding-slider .swiper-pagination-bullet-active {
    background: #F97316;
}

/* 🔥 MOST IMPORTANT FIX */
/* .hoarding-slider {
    overflow: visible !important;
} */
@media (max-width: 768px) {

    .hoarding-slider .swiper-button-prev,
    .hoarding-slider .swiper-button-next {
        display: none;
    }
}

/* details page css */
.detail-title {
    color: #F97316 !important;
}

/* ===============================
   FOOTER MOBILE – FULL CENTER FIX
================================ */
@media (max-width: 767px) {

    /* ALL FOOTER COLUMNS CENTER */
    .premium-footer .footer-col {
        text-align: center !important;
    }

    /* ================= BRAND ================= */
    .footer-brand,
    .footer-brand p {
        text-align: center !important;
    }

    .footer-social {
        justify-content: center !important;
    }

    /* ================= QUICK LINKS ================= */
    .footer-links-center {
        align-items: center !important;
    }

    .footer-links-center li {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* ================= SERVICES ================= */
    .footer-services {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
    }

    .footer-services li {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .footer-services .icon {
        margin-right: 6px;
    }

    /* ================= CONTACT ================= */

    .footer-contact {
        align-items: center !important;
    }

    .footer-contact li {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px;
    }

    .footer-contact a {
        text-align: center !important;
    }

    /* ================= FOOTER BOTTOM ================= */
    .footer-bottom {
        text-align: center !important;
    }

    .footer-brand p {
        margin: 20px 0px 20px 0;
    }
}

.foterhr {
    width: 100px;
    background: #F97316;
    height: 1.2px;
    margin-top: 7px;
}

.table-campaign {
    background-color: linear-gradient(90deg, #F97316, #F97316) !important;
}
/* =========================================================
   HOME HERO — full-bleed slider with overlaid headline
   The admin slider is the background; the copy sits on top of it and the
   feature row below floats up over the bottom edge.
   ========================================================= */
.bi-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* Taller than the viewport on purpose: the feature card below sits fully
       inside the hero image, the way the reference tucks its panel into the
       artwork. The bottom padding reserves that space so the headline and CTAs
       stay centred above the card rather than being pushed under it. */
    /* Taller than the screen on purpose: the headline and buttons fill the
       first view, and the three points below sit just past the fold so they
       are revealed on scroll rather than competing for attention on load. */
    min-height: calc(100vh + 340px);
    /* The site header is position:fixed and 69px tall, so the top of the hero
       sits behind it. The padding clears the header AND leaves a real gap under
       it — at just 69px the headline sat right against the navbar once the map
       panel made the content tall enough to stop being centred. */
    padding: 132px 0 260px;
    overflow: hidden;
}

.bi-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bi-hero-bg .carousel,
.bi-hero-bg .carousel-inner,
.bi-hero-bg .carousel-item {
    height: 100%;
}

.bi-hero-bg .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bi-hero-fallback {
    height: 100%;
    background: linear-gradient(135deg, #0F172A, #0F172A);
}

/* Slow drift on the visible slide. Purely decorative — the reduced-motion
   block at the end of this section switches it off. */
@keyframes bi-hero-drift {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.09);
    }
}

.bi-hero-bg .carousel-item.active .carousel-img {
    animation: bi-hero-drift 14s ease-out forwards;
}

/* Scrim. Not optional: the slider images are uploaded from the admin panel and
   can be light (a bright factory floor, a white wall), so white text needs a
   guaranteed dark base rather than luck. */
.bi-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(15, 23, 42, 0.82) 0%,
            rgba(15, 23, 42, 0.62) 40%,
            rgba(15, 23, 42, 0.22) 72%,
            rgba(15, 23, 42, 0.1) 100%),
        linear-gradient(to top,
            rgba(15, 23, 42, 0.78) 0%,
            rgba(15, 23, 42, 0.46) 20%,
            transparent 48%);
}

.bi-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Each line is its own block so the headline keeps the reference's two-line
   shape instead of wrapping wherever the container happens to end. */
.bi-hero-title>span {
    display: block;
}

.bi-hero-title {
    margin: 0 0 22px;
    color: #FFFFFF;
    font-size: clamp(2.3rem, 5.2vw, 4.75rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -1.2px;
}

/* The stepped second line is what gives the reference headline its shape: the
   eye drops down and well to the right, so the two lines together span the
   column and the block reads as centred even though every line is
   left-aligned within it. */
.bi-hero-line2 {
    display: block;
    margin-left: 38%;
}

.bi-hero-sub {
    max-width: 52ch;
    margin: 0 0 34px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.06rem;
    line-height: 1.75;
}

.bi-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.bi-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 30px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    /* the lift, the shadow and the arrow all ease together */
    transition: background .28s ease, color .28s ease, border-color .28s ease,
        transform .28s ease, box-shadow .28s ease;
}

/* The leading icon carries the button's meaning — a pin for the map, a
   magnifier for search — so it sits at reading size and nudges on hover. */
.bi-hero-btn>.bi {
    font-size: 1.15em;
    line-height: 1;
    margin-right: 4px;
    transition: transform .28s ease;
}


.bi-hero-btn:hover>.bi:first-child {
    transform: scale(1.12);
}

/* Keyboard users get the same affordance as the mouse. */
.bi-hero-btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.bi-hero-btn:active {
    transform: translateY(0) scale(.98);
}

/* A slow breathing pulse on the primary action, so the eye lands on it
   before anything else in the hero. It stops as soon as the pointer or
   keyboard arrives, to avoid competing with the hover state. */
@keyframes bi-hero-pulse {

    0%,
    100% {
        box-shadow: 0 8px 22px rgba(15, 23, 42, .18), 0 0 0 0 rgba(249, 115, 22, .45);
    }

    50% {
        box-shadow: 0 8px 22px rgba(15, 23, 42, .18), 0 0 0 12px rgba(249, 115, 22, 0);
    }
}

.bi-hero-btn-solid {
    background: #FFFFFF;
    color: #0F172A;
    animation: bi-hero-pulse 2.8s ease-in-out infinite;
}

.bi-hero-btn-solid:hover,
.bi-hero-btn-solid:focus-visible {
    background: #F97316;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .28);
    animation: none;
}

.bi-hero-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.55);
    color: #FFFFFF;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bi-hero-btn-ghost:hover,
.bi-hero-btn-ghost:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #0F172A;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .28);
}

/* The hero carries its own message, so the slider arrows are hidden here —
   it auto-advances. Remove this rule to bring them back. */
.bi-hero-bg .carousel-control-prev,
.bi-hero-bg .carousel-control-next {
    display: none;
}

/* ---- feature row sitting on the hero's lower third ----
   Desktop only. The three points stack on a phone and run far past the hero,
   so inverting them to white there would leave two of the three as white text
   on the white page. Below 992px they keep the normal grey section. */
@media (min-width: 992px) {

    .bi-float-panel {
        position: relative;
        z-index: 3;
        /* .list-section carries a grey background in main.css, which would
           paint over the hero image now that the items sit on it. */
        background: transparent;
        /* row height plus breathing room, so the whole group clears the
           hero's bottom edge instead of half-hanging off it */
        margin-top: -210px;
        padding-top: 0 !important;
        /* The negative margin above lifts this group onto the hero, but it also
           drags EVERY later section up by the same 210px — which pulled the
           search panel's heading back under the hero, where the hero (being
           positioned) painted over it. This padding gives those pixels back so
           the rest of the page keeps its normal position.

           It has to give back the lift EXACTLY, or the leftover shows as a
           white strip between the hero image and the section below. A fixed
           padding cannot do that: the cards are 96px tall at 1440 but 167px at
           992, where the copy wraps. Pinning the height to the lift itself is
           exact at every width — the cards still sit at the top of the box, on
           the hero, and the box ends precisely where the hero image does. */
        height: 210px;
        padding-bottom: 0 !important;
    }

    /* No card behind them — they sit straight on the artwork. */
    .bi-float-panel>.container>.row {
        background: transparent;
        box-shadow: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .bi-float-panel .list-box .content h3 {
        color: #FFFFFF;
    }

    .bi-float-panel .list-box .content p {
        color: #FFFFFF;
        opacity: .82;
    }
}

@media (max-width: 991.98px) {
    .bi-hero {
        min-height: 88vh;
        /* same reasoning as the desktop rule: clear the fixed header and then
           leave a real gap beneath it */
        padding: 118px 0 100px;
    }

    .bi-hero-line2 {
        margin-left: 8%;
    }
}

@media (max-width: 767.98px) {
    .bi-hero {
        min-height: 76vh;
        padding: 112px 0 90px;
        text-align: left;
    }

    /* the stepped line reads as a mistake once the heading wraps on a phone */
    .bi-hero-line2 {
        margin-left: 0;
    }

    .bi-hero-sub {
        font-size: 1rem;
    }

    .bi-hero-btn {
        flex: 1 1 100%;
    }

}

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

    .bi-hero-bg .carousel-item.active .carousel-img {
        animation: none;
    }

    .bi-hero-btn,
    .bi-hero-btn>.bi {
        transition: none;
    }

    .bi-hero-btn:hover {
        transform: none;
    }

    .bi-hero-btn-solid {
        animation: none;
    }


    .bi-hero-btn:hover>.bi:first-child {
        transform: none;
    }
}

/* ---- hero map panel (sits under the CTAs, like the reference's product shot) ---- */
.bi-hero-panel {
    /* centred in the hero column, unlike the copy above it which stays left */
    margin: 46px auto 0;
    max-width: 1080px;
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.42);
}

/* The framed page is the real Explore page, which lays itself out to fill a
   viewport — it needs a genuine height here, not a thumbnail strip. */
.bi-hero-frame {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    background: rgba(249, 115, 22, 0.12);
}

@media (max-width: 991.98px) {
    .bi-hero-panel {
        margin-top: 34px;
        max-width: 100%;
    }

    .bi-hero-frame {
        height: 420px;
    }
}

@media (max-width: 767.98px) {
    .bi-hero-frame {
        height: 340px;
    }
}

/* =========================================================
   SLIDER CONTROL BAR — autoplay + dots left, arrows right
   Sits under the cards instead of floating above them.
   ========================================================= */
.bi-slider-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
}

.bi-slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* autoplay toggle */
.bi-slider-play {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    border: 1.5px solid #E5E7EB;
    background: #FFFFFF;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.bi-slider-play:hover {
    background: #F97316;
    border-color: #F97316;
    color: #FFFFFF;
}

/* pagination dots — the current one stretches into a pill */
.bi-slider-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    position: static !important;
}

.bi-slider-dots .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 !important;
    border-radius: 100px;
    background: #E5E7EB;
    opacity: 1;
    transition: width .3s ease, background .3s ease;
}

.bi-slider-dots .swiper-pagination-bullet-active {
    width: 30px;
    background: #F97316;
}

/* prev / next — quiet outlined circles, overriding the old solid orange pair */
.hoarding-slider-wrapper .swiper-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    box-shadow: none;
    padding: 0;
    transition: background .3s ease, border-color .3s ease;
}

.hoarding-slider-wrapper .swiper-btn i {
    font-size: 14px;
    color: #0F172A;
    transition: color .3s ease;
}

.hoarding-slider-wrapper .swiper-btn:hover {
    background: #F97316;
    border-color: #F97316;
}

.hoarding-slider-wrapper .swiper-btn:hover i {
    color: #FFFFFF;
}

/* Swiper greys these out at the ends; with loop on it rarely shows, but keep
   the disabled state honest if looping is ever turned off. */
.hoarding-slider-wrapper .swiper-btn.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}

@media (max-width: 575px) {
    .bi-slider-bar {
        margin-top: 18px;
    }

    .bi-slider-play,
    .hoarding-slider-wrapper .swiper-btn {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

/* =========================================================
   SECTION EYEBROW
   The small orange kicker above a section heading. Services and Process each
   had their own copy of this (.services-subtitle / .process-subtitle); this is
   the shared one for every other section, styled to match them exactly.
   ========================================================= */
.bi-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #F97316;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* The search panel's heading block, so it reads like the other sections
   instead of a bare h3. */
.bi-search-head {
    max-width: 720px;
    margin: 0 auto 26px;
    text-align: center;
}

.bi-search-head .bi-search-desc {
    color: #0F172A;
    font-size: 18px;
    margin: 0;
}

@media (max-width: 767.98px) {
    .bi-search-head .bi-search-desc {
        font-size: 15px;
    }
}

/* Section heading matched to .services-title — dark, 42px, with the accent
   words in amber. The extra `.section-title h3` selector is there to outrank
   main.css's own `.section-title h3` rule, which sets 40px and a bottom pad. */
.bi-section-title,
.section-title h3.bi-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #0F172A;
    margin: 10px 0;
    padding-bottom: 0;
}

.bi-section-title .accent {
    color: #F97316;
}

@media (max-width: 991.98px) {

    .bi-section-title,
    .section-title h3.bi-section-title {
        font-size: 32px;
    }
}

/* ===== Section headings: one shared scale =====
   Every home-page block now leads with eyebrow + heading + subtext. These rules
   pull the older Process / About / CTA blocks onto the exact values the Services
   block already uses (42px / 700 / #0F172A heading, #F97316 accent, 18px black
   subtext) so the page reads as one system instead of three near-misses.
   Placed last in the file, after the theme's own responsive overrides, so the
   small-screen sizes below have to be restated here too. */
.bi-eyebrow,
.about-subtitle {
    font-weight: 400;
}

.process-title span {
    color: #F97316;
}

.about-title,
.cta-box h2 {
    font-size: 42px;
    color: #0F172A;
}

.about-title span,
.cta-box h2 span {
    color: #F97316;
}

.about-modern p,
.cta-box p {
    font-size: 18px;
    color: #0F172A;
}

@media (max-width: 991.98px) {

    .about-title,
    .cta-box h2 {
        font-size: 32px;
    }
}

/* =========================================================
   BRAND PALETTE — the only four colours on the site
     BRAND NAVY   #0F172A   trust, stability, technology, premium
     BRAND ORANGE #F97316   energy, visibility, growth, action
     WHITE        #FFFFFF   clean, clarity, simplicity
     LIGHT GREY   #E5E7EB   balance, background, secondary use

   Everything the site itself styles is already written in these four. This
   last block re-bases the parts we do NOT own — Bootstrap, Leaflet, Swiper,
   Select2, flatpickr and the browser's own form defaults — which otherwise
   paint their stock blues, greys and reds over the top. Tints such as
   rgba(15, 23, 42, .55) are the palette navy at reduced opacity, not a
   fifth colour.
   ========================================================= */
:root {
    --brand-navy: #0F172A;
    --brand-orange: #F97316;
    --brand-white: #FFFFFF;
    --brand-grey: #E5E7EB;
    /* Swiper reads this for its bullets, arrows and progress bar. */
    --swiper-theme-color: #F97316;
}

/* The document default is the browser's black; anything that never sets a
   colour of its own inherits from here instead. */
html,
body {
    color: var(--brand-navy);
}

::selection {
    background: var(--brand-orange);
    color: var(--brand-white);
}

/* ---------- Bootstrap ---------- */
a {
    color: var(--brand-orange);
}

a:hover,
a:focus {
    color: var(--brand-navy);
}

.text-primary,
.link-primary,
.text-warning,
.text-danger,
.text-info {
    color: var(--brand-orange) !important;
}

.text-muted,
.text-secondary,
.text-dark,
.text-body,
.text-success {
    color: var(--brand-navy) !important;
}

.bg-primary,
.bg-warning,
.bg-danger,
.bg-success,
.bg-info,
.bg-dark,
.bg-secondary {
    background-color: var(--brand-navy) !important;
}

.bg-light {
    background-color: var(--brand-grey) !important;
}

.btn-primary,
.btn-warning,
.btn-danger,
.btn-success,
.btn-info {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--brand-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-warning:hover,
.btn-danger:hover,
.btn-success:hover,
.btn-info:hover {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--brand-white);
}

.btn-secondary,
.btn-dark {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--brand-white);
}

.btn-light,
.btn-outline-secondary {
    background-color: var(--brand-white);
    border-color: var(--brand-grey);
    color: var(--brand-navy);
}

.btn-outline-primary,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-success {
    color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-success:hover {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--brand-white);
}

.btn:focus,
.btn.focus,
.btn-check:focus+.btn {
    box-shadow: 0 0 0 .25rem rgba(249, 115, 22, .25);
}

/* Form controls: Bootstrap ships #212529 text, #ced4da borders and a blue
   focus ring, and the select caret is a dark-grey inline SVG. */
.form-control,
.form-select,
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    color: var(--brand-navy);
    background-color: var(--brand-white);
    border-color: var(--brand-grey);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    color: var(--brand-navy);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 .25rem rgba(249, 115, 22, .25);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Chrome paints its own placeholder grey and date-picker chrome. */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(15, 23, 42, .55);
    opacity: 1;
}

input,
select,
textarea,
button {
    color: var(--brand-navy);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(6%) sepia(18%) saturate(2600%) hue-rotate(191deg) brightness(96%) contrast(97%);
}

.form-check-input:checked {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.invalid-feedback,
.valid-feedback,
.form-text {
    color: var(--brand-orange);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--brand-orange);
    background-image: none;
}

.alert-danger,
.alert-warning,
.alert-success,
.alert-primary,
.alert-info {
    background-color: var(--brand-grey);
    border-color: var(--brand-grey);
    color: var(--brand-navy);
}

.badge.bg-primary,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-success,
.badge.bg-info {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white);
}

.modal-header,
.modal-footer,
.dropdown-menu,
.card,
.list-group-item,
.table,
.table> :not(caption)>*>* {
    border-color: var(--brand-grey);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-grey);
    color: var(--brand-navy);
}

.nav-tabs .nav-link.active,
.page-link {
    color: var(--brand-orange);
}

.page-item.active .page-link {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--brand-white);
}

.spinner-border,
.spinner-grow {
    color: var(--brand-orange);
}

/* ---------- Leaflet (map pages) ---------- */
.leaflet-container {
    background: var(--brand-grey);
}

.leaflet-container a {
    color: var(--brand-orange);
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, .85);
    color: rgba(15, 23, 42, .55);
}

.leaflet-bar a,
.leaflet-bar a:hover {
    background: var(--brand-white);
    color: var(--brand-navy);
    border-bottom-color: var(--brand-grey);
}

.leaflet-bar a:hover {
    background: var(--brand-grey);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--brand-white);
    color: var(--brand-navy);
}

/* ---------- Select2 (District / Town search) ---------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
    border-color: var(--brand-grey);
    background-color: var(--brand-white);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-orange);
}

/* ---------- flatpickr (date fields) ---------- */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--brand-white);
}

.flatpickr-day:hover {
    background: var(--brand-grey);
    border-color: var(--brand-grey);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
    color: var(--brand-navy);
    fill: var(--brand-navy);
}

/* ---------- SweetAlert2 ---------- */
.swal2-styled.swal2-confirm {
    background-color: var(--brand-orange) !important;
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    background-color: var(--brand-navy) !important;
}

.swal2-icon {
    border-color: var(--brand-orange) !important;
    color: var(--brand-orange) !important;
}

.swal2-icon .swal2-icon-content,
.swal2-icon [class^="swal2-"][class$="-line"],
.swal2-icon .swal2-success-ring {
    color: var(--brand-orange) !important;
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}

/* The map pages pull Leaflet's stylesheet in their own @section, so it lands
   after this file and wins on source order. These few need the weight. */
.leaflet-container {
    background: var(--brand-grey) !important;
}

.leaflet-container a,
.leaflet-control-attribution a {
    color: var(--brand-orange) !important;
}

.leaflet-control-attribution {
    color: rgba(15, 23, 42, .55) !important;
    background: rgba(255, 255, 255, .85) !important;
}

.leaflet-bar {
    border-color: rgba(15, 23, 42, .2) !important;
}

.leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    color: var(--brand-navy) !important;
    background-color: var(--brand-white) !important;
    border-bottom-color: var(--brand-grey) !important;
}

.leaflet-bar a:hover {
    background-color: var(--brand-grey) !important;
}

.leaflet-bar a.leaflet-disabled {
    color: rgba(15, 23, 42, .55) !important;
    background-color: var(--brand-grey) !important;
}

/* Leaflet 1.9 ships a blue-and-yellow flag in the attribution line. It is
   decoration rather than required credit, and it is the only thing left on
   the page painting outside the palette. */
.leaflet-control-attribution svg.leaflet-attribution-flag {
    /* Leaflet declares this one !important itself, so it needs the extra
       specificity as well as the flag. */
    display: none !important;
}

/* Select2 draws its caret as a <b> made of borders, coloured #888. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    /* select2.min.css is pulled in by the search partial, after this file. */
    border-color: var(--brand-navy) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--brand-navy) transparent !important;
}

/* Bootstrap's base .btn colour (#212529) reaches any button that does not set
   its own — the search form's dashed "Clear" button, for one. */
.btn {
    color: var(--brand-navy);
}

/* An <svg> with no fill of its own defaults to black. */
svg {
    fill: currentColor;
}

/* The header's cart and account controls are solid orange tiles; their glyphs
   read as white, not as the .btn default the block above sets. */
.header-icons .btn,
.header-icons a,
.header-icons .btn i,
.header-icons a i {
    color: var(--brand-white);
}

/* Footer social tiles are solid orange; their glyphs read white. */
.footer-social a,
.footer-social a i {
    color: var(--brand-white);
}

/* =========================================================
   HOME CTA — artwork background
   Two pieces of art, shaped very differently, so each gets its own
   treatment rather than one image squeezed into both.

   Desktop: a 3:1 panorama whose subjects sit at the far left (megaphone)
   and far right (billboard), with open sky between. The copy is centred,
   so a navy veil is strongest across the middle and fades out at both
   ends — the text gets a dark ground to sit on and the two subjects stay
   clear. Copy flips to white, which is also how the hero treats text on
   its slider photo.

   Mobile: the art puts the scene in the top ~28% and leaves the rest
   intentionally blank for content, so nothing is veiled — the copy keeps
   its dark navy and simply starts below the scene.
   ========================================================= */
.cta-box {
    background-image:
        linear-gradient(90deg,
            rgba(15, 23, 42, .30) 0%,
            rgba(15, 23, 42, .74) 26%,
            rgba(15, 23, 42, .74) 74%,
            rgba(15, 23, 42, .30) 100%),
        url("../../../assets/img/home_cta_desktop.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: rgba(255, 255, 255, .18);
}

.cta-box h2 {
    color: var(--brand-white);
}

.cta-box h2 span {
    color: var(--brand-orange);
}

.cta-box p {
    color: rgba(255, 255, 255, .9);
}

.btn-cta.outline {
    border-color: rgba(255, 255, 255, .55);
    color: var(--brand-white);
}

.btn-cta.outline:hover {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
    background: transparent;
}

/* The primary button sits on the veil, so it needs the solid fill to carry
   its own contrast rather than borrowing the panel's. */
.btn-cta.primary {
    background: var(--brand-orange);
    color: var(--brand-navy);
}

@media (max-width: 767.98px) {

    /* Width-matched rather than cover: the art has to keep its own
       proportions for the blank area to land where the copy goes. */
    .cta-box {
        background-image: url("../../../assets/img/home_cta_mobile.webp");
        background-size: 100% auto;
        background-position: top center;
        border-color: rgba(249, 115, 22, .35);
        /* Clears the scene band at the top of the artwork; the value tracks
           the box width, since the art scales with it. */
        padding: 58vw 20px 48px;
    }

    .cta-box h2,
    .cta-box p {
        color: var(--brand-navy);
    }

    .btn-cta.outline {
        border-color: rgba(15, 23, 42, .3);
        color: var(--brand-navy);
    }
}


/* =========================================================
   ABOUT STAT CARDS — artwork tiles
   Each card is now just its picture: the figure, the "+" and the caption are
   drawn into the artwork, so the card carries no text of its own and needs no
   padding. Height came from the text before, so the tiles get an aspect ratio
   instead — 1.2, which is the native ratio of three of the four images.
   ========================================================= */
.stat-card {
    padding: 0;
    aspect-ratio: 1.2;
    background-color: var(--brand-orange);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    overflow: hidden;
}

.stat-card-years {
    background-image: url("../../../assets/img/two_years.webp");
}

.stat-card-clients {
    background-image: url("../../../assets/img/happy_clients.webp");
}

.stat-card-cities {
    background-image: url("../../../assets/img/city_covered.webp");
}

.stat-card-campaigns {
    background-image: url("../../../assets/img/campaign.webp");
}

/* The old hover flipped the fill to white, which as a background shorthand
   also cleared the image — the tile would blank out on hover. Now it just
   lifts on a neutral shadow, and the artwork stays put. */
.stat-card:hover {
    background-color: var(--brand-orange);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
}

/* =========================================================
   SEARCH SECTION — hero treatment
   The artwork, the headline and the category shortcuts wrap around the
   existing filter form; the form itself is untouched. The artwork moved
   from the card to the section, so the card's own background, its label
   halo and its mobile band padding are switched off here — they were
   solving a problem that no longer exists.
   ========================================================= */
.bi-search-hero {
    position: relative;
    /* The artwork reads as a rounded panel rather than a full-bleed band.
       Clipped so the corners cut the picture itself, not just the box, and
       inset from the page edges so all four corners read. */
    border-radius: 32px;
    overflow: hidden;
    margin: 28px 28px 0;
    padding: 64px 0;
    /* Two veils over the artwork: a white one to knock it back to a faint
       backdrop, and a thin brand-navy wash on top for the cool cast. Navy is
       the palette's only blue, so the tint stays inside it. */
    background-image:
        linear-gradient(rgba(15, 23, 42, .12), rgba(15, 23, 42, .12)),
        linear-gradient(rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)),
        url("../../../assets/img/search_form_desktop.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--brand-white);
}

/* The form partial sits in a container-fluid, which would run the card the
   full width of the page. Reined in to the same measure as the rest of the
   site so the artwork reads either side of it. */
.bi-search-hero>.container-fluid {
    max-width: 1320px;
    margin-inline: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.bi-search-hero-copy {
    /* Wide enough for the headline to stay on one line: it measures 994px at
       56px, and the container is 1320px. Still a max, so the smaller type at
       the breakpoints below wraps naturally once it no longer fits. */
    max-width: 1040px;
    margin-bottom: 34px;
}

.bi-search-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(15, 23, 42, .55);
}

.bi-search-hero-title {
    margin: 0 0 16px;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--brand-navy);
}

.bi-search-hero-title .accent {
    color: var(--brand-orange);
}

.bi-search-hero-sub {
    /* One line as well — it measures 618px. */
    max-width: 680px;
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(15, 23, 42, .75);
}

.bi-search-rule {
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--brand-orange);
}

/* ---- the filter card ---- */
.bi-search-hero .media-search-card {
    background-color: var(--brand-white);
    background-image: none;
    border: 0;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}

/* The halo existed to lift labels off the illustration behind them. The card
   is solid white now, so it only makes the text look smudged. */
.bi-search-hero .media-search-card label,
.bi-search-hero .media-search-card .d-flex.justify-content-between>span {
    text-shadow: none;
}

.bi-search-hero .media-search-card label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(15, 23, 42, .6);
}

.bi-search-hero .btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 1199.98px) {
    .bi-search-hero-title {
        font-size: 46px;
    }
}

@media (max-width: 991.98px) {
    .bi-search-hero {
        margin: 20px 20px 0;
        padding: 56px 0;
    }

    .bi-search-hero-title {
        font-size: 38px;
    }
}

/* Narrow screens take the portrait artwork, which holds the scene in its top
   43% and leaves the rest pale for content. Width-matched, so that band stays
   a fixed share of the section width however tall the form grows. */
@media (max-width: 767.98px) {
    .bi-search-hero {
        background-image:
            linear-gradient(rgba(15, 23, 42, .12), rgba(15, 23, 42, .12)),
            linear-gradient(rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)),
            url("../../../assets/img/search_form_mobile.webp");
        /* The veils have no intrinsic size, so they are told to cover; only the
           photograph is width-matched. */
        background-size: cover, cover, 100% auto;
        background-position: top center, top center, top center;
        border-radius: 22px;
        margin: 14px 14px 0;
        /* 43% of an image 2.18x as tall as it is wide. */
        padding: 92vw 0 48px;
    }

    .bi-search-hero-title {
        font-size: 32px;
    }

    .bi-search-hero-sub {
        font-size: 16px;
    }

    .bi-search-hero .media-search-card {
        padding: 18px;
    }

}

/* =========================================================
   JOURNEY SECTION — the six steps, on the sunset artwork
   Replaces the old light "Our Process" timeline. The artwork is dark at the
   top and burns orange at the horizon, so the copy is white with an orange
   accent and everything sits in the upper half, clear of the road.
   ========================================================= */
.journey-section {
    position: relative;
    padding: 84px 0 96px;
    /* A navy scrim that deepens through the middle of the frame. The step
       captions land right where the artwork burns brightest at the horizon,
       and white text on that was unreadable; the sky above and the road below
       stay largely untouched. */
    background-image:
        linear-gradient(180deg,
            rgba(15, 23, 42, .10) 0%,
            rgba(15, 23, 42, .26) 32%,
            rgba(15, 23, 42, .70) 58%,
            rgba(15, 23, 42, .80) 82%,
            rgba(15, 23, 42, .60) 100%),
        url("../../../assets/img/jour_background.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--brand-navy);
}

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

.journey-title {
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--brand-white);
}

.journey-title .accent {
    color: var(--brand-orange);
}

.journey-rule {
    display: block;
    width: 132px;
    height: 5px;
    margin: 14px auto 20px;
    border-radius: 3px;
    background: var(--brand-orange);
}

.journey-desc {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

/* ---- the six steps ---- */
.journey-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.journey-step {
    position: relative;
    padding: 0 12px;
    text-align: center;
}

/* The dashed arrow between one step and the next. Drawn on the step rather
   than added as markup, and dropped on the last one and whenever the row
   wraps to fewer columns. */
.journey-step+.journey-step::before {
    content: "";
    position: absolute;
    top: 60px;
    left: -22px;
    width: 44px;
    height: 2px;
    background-image: linear-gradient(to right, var(--brand-orange) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
}

.journey-step+.journey-step::after {
    content: "";
    position: absolute;
    top: 55px;
    left: 18px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--brand-orange);
}

.journey-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 124px;
    height: 124px;
    margin: 0 auto 18px;
    border-radius: 50%;
    /* A softly lit disc, so the artwork still shows through behind the icon
       instead of sitting on a flat plate. */
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .10), rgba(15, 23, 42, .55) 70%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 14px 34px rgba(15, 23, 42, .45);
}

.journey-icon img {
    width: 72%;
    height: auto;
    display: block;
}

.journey-step h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-white);
}

.journey-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .8);
}

/* ---- the travelling spark ----
   A glowing dot runs up each arrow in turn and the disc it reaches flashes,
   so the six steps light one after another and then the cycle starts over.
   One 6s timeline for the lot: each element sits idle for the rest of it and
   is offset by its position in the row, which keeps the relay in step
   without any JS. */
.journey-spark {
    position: absolute;
    /* The arrow is a 2px line at top:60px, so its centre is 61px; half the
       dot's 10px puts it on that centre. */
    top: 56px;
    left: -22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFD9A8;
    box-shadow:
        0 0 6px 2px rgba(249, 115, 22, .9),
        0 0 18px 7px rgba(249, 115, 22, .45);
    opacity: 0;
    animation: journey-spark-run 6s linear infinite;
}

/* The first step has no arrow running into it, so it has no dot either. */
.journey-step:first-child .journey-spark {
    display: none;
}

.journey-step:nth-child(2) .journey-spark {
    animation-delay: 0s;
}

.journey-step:nth-child(3) .journey-spark {
    animation-delay: 1s;
}

.journey-step:nth-child(4) .journey-spark {
    animation-delay: 2s;
}

.journey-step:nth-child(5) .journey-spark {
    animation-delay: 3s;
}

.journey-step:nth-child(6) .journey-spark {
    animation-delay: 4s;
}

/* Travels the 44px of arrow, fading in as it leaves and out as it lands —
   which is 18% of the timeline, so each dot is visible only in its own slot. */
@keyframes journey-spark-run {
    0% {
        opacity: 0;
        transform: translateX(0) scale(.5);
    }

    3% {
        opacity: 1;
        transform: translateX(3px) scale(1);
    }

    14% {
        opacity: 1;
        transform: translateX(36px) scale(1);
    }

    18%,
    100% {
        opacity: 0;
        transform: translateX(42px) scale(.5);
    }
}

/* The disc flashes as the dot lands on it: a ring just outside the icon,
   one second per step so it stays in time with the relay above. */
.journey-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(249, 115, 22, .55),
        0 0 30px 8px rgba(249, 115, 22, .35);
    opacity: 0;
    pointer-events: none;
    animation: journey-step-glow 6s ease-out infinite;
}

.journey-step:nth-child(1) .journey-icon::after {
    animation-delay: 0s;
}

.journey-step:nth-child(2) .journey-icon::after {
    animation-delay: 1s;
}

.journey-step:nth-child(3) .journey-icon::after {
    animation-delay: 2s;
}

.journey-step:nth-child(4) .journey-icon::after {
    animation-delay: 3s;
}

.journey-step:nth-child(5) .journey-icon::after {
    animation-delay: 4s;
}

.journey-step:nth-child(6) .journey-icon::after {
    animation-delay: 5s;
}

@keyframes journey-step-glow {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

    4% {
        opacity: 1;
        transform: scale(1);
    }

    16%,
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@media (max-width: 1199.98px) {
    .journey-title {
        font-size: 42px;
    }

    .journey-icon {
        width: 104px;
        height: 104px;
    }

    .journey-step+.journey-step::before {
        top: 50px;
    }

    .journey-step+.journey-step::after {
        top: 45px;
    }

    /* Follows the arrow up to its new line. */
    .journey-spark {
        top: 46px;
    }
}

/* Three across, then two, then one — the connector is dropped as soon as the
   row wraps, since it would then point at a step on the line below. */
@media (max-width: 991.98px) {
    .journey-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 44px 0;
    }

    .journey-step+.journey-step::before,
    .journey-step+.journey-step::after {
        content: none;
    }

    /* No arrow to run along once the row wraps. The discs keep flashing in
       order, which still reads as the journey. */
    .journey-spark {
        display: none;
    }

    .journey-title {
        font-size: 36px;
    }
}

@media (max-width: 767.98px) {
    .journey-section {
        padding: 64px 0 72px;
        background-image:
            linear-gradient(180deg,
                rgba(15, 23, 42, .10) 0%,
                rgba(15, 23, 42, .30) 26%,
                rgba(15, 23, 42, .74) 48%,
                rgba(15, 23, 42, .82) 88%,
                rgba(15, 23, 42, .62) 100%),
            url("../../../assets/img/jour_mobile_background.webp");
    }

    .journey-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 0;
    }

    .journey-title {
        font-size: 30px;
    }

    .journey-rule {
        width: 96px;
        margin-top: 12px;
    }

    .journey-desc {
        font-size: 16px;
    }

    .journey-icon {
        width: 96px;
        height: 96px;
        margin-bottom: 14px;
    }

    .journey-step h4 {
        font-size: 17px;
    }

    .journey-step p {
        font-size: 14px;
    }
}

@media (max-width: 479.98px) {
    .journey-steps {
        grid-template-columns: 1fr;
        gap: 32px 0;
    }
}

/* AOS animates the steps in one at a time as the section arrives. It has no
   reduced-motion handling of its own, so anyone who asked for less movement
   gets the finished state immediately instead of a staggered reveal. */
@media (prefers-reduced-motion: reduce) {

    .journey-header[data-aos],
    .journey-step[data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* The relay is decoration that never stops, so it is the first thing to
       go: the dots are dropped and the discs are left unlit. */
    .journey-spark,
    .journey-icon::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* Spacing only — the size and tracking come from the shared scale. */
.journey-header .bi-eyebrow {
    margin-bottom: 10px;
}

/* =========================================================
   SEARCH SECTION — compact variant (results page)
   On /search the visitor has already searched, so the headline is decoration
   standing between them and their results. Dropping it and tightening the
   card lifts the first results above the fold.
   ========================================================= */
.bi-search-hero.is-compact {
    /* The site header is fixed and main carries no offset, so on the home page
       the hero's own tall padding is what keeps content clear of it. With that
       padding cut back, the panel has to clear the 77px header itself. */
    /* 80px clears the 77px fixed header with a hair to spare; every pixel
       here pushes the first result further down the page. */
    margin-top: 80px;
    padding: 8px 0 8px;
    /* The artwork is decoration behind a card that now spans the whole panel,
       so none of it would read anyway. Dropped here rather than in the
       partial so the home page keeps its hero picture. */
    background-image: none;
    background-color: transparent;
    border-radius: 0;
    /* Nothing left to clip, and the base overflow:hidden would cut the card's
       drop shadow off against the 8px padding. */
    overflow: visible;
}

/* The home page reins the partial's container-fluid in to 1320px so the artwork
   reads either side of the card. With no artwork here, that measure just makes
   the form narrower than the panel — let it fill the section instead. */
.bi-search-hero.is-compact>.container-fluid {
    max-width: none;
    padding-inline: 0;
}

.bi-search-hero.is-compact .bi-search-hero-copy {
    display: none;
}

.bi-search-hero.is-compact .media-search-card {
    padding: 26px 22px;
    border-radius: 14px;
    /* The card is the whole panel on this page, so it carries the brand navy
       itself instead of borrowing a tint from artwork that is no longer there.
       The illustration underneath goes with it. */
    background-color: var(--brand-navy);
    background-image: none;
    border: 2px solid var(--brand-navy);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .26);
}

/* Everything inside the card that was navy-on-white has to flip, or it is
   navy on navy: the field labels, the slider value captions, the dashed
   outline button and the text in the result badge. */
.bi-search-hero.is-compact .media-search-card label {
    color: rgba(255, 255, 255, .82);
}

.bi-search-hero.is-compact .media-search-card .d-flex.justify-content-between>span {
    color: var(--brand-white);
}

.bi-search-hero.is-compact .btn-clear {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: var(--brand-white);
}

.bi-search-hero.is-compact .media-search-card .result-badge .count,
.bi-search-hero.is-compact .media-search-card .result-badge .label {
    color: var(--brand-white);
}

/* The empty-state badge keeps its orange, lightened to carry on navy. */
.bi-search-hero.is-compact .media-search-card .result-badge.no-result .count {
    color: #FDBA74;
}

.bi-search-hero.is-compact .media-search-card label {
    margin-bottom: 6px;
    font-size: 11.5px;
    line-height: 1.2;
}

.bi-search-hero.is-compact .media-search-card .form-control,
.bi-search-hero.is-compact .media-search-card .form-select,
.bi-search-hero.is-compact .media-search-card .landmark-toggle {
    height: 46px;
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 0;
}

.bi-search-hero.is-compact .media-search-card .row.g-3 {
    --bs-gutter-y: .7rem;
}

/* The partial declares .range-slider-container twice: the first sets 15px
   top / 30px bottom padding plus a 10px top margin, the second only sets a
   height — so those 55px survive any height change. They are what made the
   slider block 82px tall, the largest single row in the card. */
.bi-search-hero.is-compact .media-search-card .range-slider-container {
    height: 28px;
    margin-top: 4px;
    padding-top: 0;
    padding-bottom: 0;
}

.bi-search-hero.is-compact .btn-search,
.bi-search-hero.is-compact .btn-clear {
    height: 46px;
    font-size: 15px;
}

/* The button row is a nested .row with its own top padding. */
.bi-search-hero.is-compact .media-search-card .row .row {
    padding-top: 12px !important;
}

/* Slider value captions sit above a 20px track; they do not need 15px of
   their own line height on this page. */
.bi-search-hero.is-compact .media-search-card .d-flex.justify-content-between>span {
    font-size: 11px;
    line-height: 1.2;
}

/* On a phone every filter is its own full-width row, which is 690px of card
   before a single result. Pairing the plain dropdowns halves that. Scoped with
   :has() to columns holding a bare select or date input, so the sliders, the
   landmark menu and the buttons keep their own full width. */
@media (max-width: 575.98px) {

    .bi-search-hero.is-compact .media-search-card .row>div:has(>select),
    .bi-search-hero.is-compact .media-search-card .row>div:has(>input[type="date"]) {
        width: 50%;
    }

    .bi-search-hero.is-compact .media-search-card label {
        font-size: 10px;
        letter-spacing: .4px;
    }
}

/* =========================================================
   SEARCH FORM — District / Town parity, and the result badge
   District and Town are Select2 widgets (they carry the type-ahead), so the
   visible control is Select2's own box, not the .form-select the other four
   use. It ships its own height and draws its caret as a <b> made of borders,
   which is why those two sat taller and wore a different arrow.
   ========================================================= */
.bi-search-hero .media-search-card .select2-container--default .select2-selection--single {
    /* Same height as the plain selects in this card, which the partial pins
       to 46px in that same inline block. */
    height: 46px;
    padding: 0 34px 0 12px;
    border-radius: 10px;
    border-color: var(--brand-grey);
    /* The same chevron Bootstrap paints on .form-select, in place of
       Select2's triangle, so all six fields carry one arrow. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
}

.bi-search-hero .media-search-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 44px;
    font-size: 14px;
    color: var(--brand-navy);
}

/* Select2's caret is a <b> built from border triangles; the chevron above
   replaces it, so the arrow box is hidden rather than restyled. */
.bi-search-hero .media-search-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

/* ---- compact (results page) ---- */
/* Same 46px as every other field in the card; these two were still carrying
   the heights from the old tighter layout, which left them visibly short
   beside the plain State / Area selects. */
.bi-search-hero.is-compact .media-search-card .select2-container--default .select2-selection--single {
    height: 46px;
    background-size: 16px 12px;
}

.bi-search-hero.is-compact .media-search-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    font-size: 14px;
}

/* ---- the result badge ---- */
/* It sits in the button row, so it matches the buttons: same height, centred
   contents, and no extra top margin knocking it out of line. */
.media-search-card .result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    line-height: 1;
}

.media-search-card .result-badge .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* main.css gives every .icon a 10px bottom margin for the theme's info
       cards. Flexbox centres the box PLUS its margin, so that margin was
       lifting the glyph exactly 5px above the middle of the badge. */
    margin: 0;
    /* Emoji carry their own baseline; centring the glyph in its own flex box
       stops it riding high against the text beside it. */
    line-height: 1;
    font-size: 15px;
}

.media-search-card .result-badge .count,
.media-search-card .result-badge .label {
    line-height: 1;
}

/* The badge shares the button row, so it takes the buttons' height and type
   size rather than a smaller size of its own. */
.bi-search-hero.is-compact .media-search-card .result-badge {
    height: 46px;
    font-size: 15px;
    padding: 0 16px;
}

/* The badge column carries mt-3 for the stacked layouts; on one line that
   just drops it below the buttons. */
@media (min-width: 992px) {
    .media-search-card .row .row>div.mt-3 {
        margin-top: 0 !important;
    }
}

/* =========================================================
   CONTACT PAGE
   Split layout on the brand artwork: the pitch and the contact details sit on
   the flat navy left of the picture, the form on a white card over the sunset.
   ========================================================= */
.bi-contact {
    position: relative;
    padding: 96px 0 104px;
    background-image: url("../../../assets/img/brand_contact_desktop.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--brand-navy);
}

.bi-contact-row {
    align-items: center;
    row-gap: 40px;
}

/* ---- left column ---- */
.bi-contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.bi-contact-eyebrow .rule {
    display: block;
    width: 34px;
    height: 2px;
    background: var(--brand-orange);
}

.bi-contact-eyebrow.dark {
    color: var(--brand-navy);
}

.bi-contact-title {
    margin: 0 0 20px;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.16;
    color: var(--brand-white);
}

.bi-contact-title .accent {
    color: var(--brand-orange);
}

.bi-contact-lead {
    max-width: 460px;
    margin: 0 0 38px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

.bi-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bi-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
}

.bi-contact-ico {
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(249, 115, 22, .55);
    background: rgba(249, 115, 22, .12);
    color: var(--brand-orange);
    font-size: 20px;
}

.bi-contact-k {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.bi-contact-v {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--brand-white);
    text-decoration: none;
}

.bi-contact-v:hover {
    color: var(--brand-orange);
}

.bi-contact-addr {
    font-size: 15px;
    font-weight: 500;
}

.bi-contact-note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

/* ---- the card ---- */
.bi-contact-card {
    padding: 40px;
    border-radius: 22px;
    background: var(--brand-white);
    box-shadow: 0 40px 90px rgba(15, 23, 42, .35);
}

.bi-contact-h2 {
    margin: 0 0 8px;
    font-size: 44px;
    font-weight: 700;
    color: var(--brand-navy);
}

.bi-contact-sub {
    margin: 0 0 28px;
    font-size: 16px;
    color: rgba(15, 23, 42, .7);
}

/* ---- fields ---- */
.bi-contact-card .form-control {
    min-height: 54px;
    padding: 15px 16px;
    border: 1px solid var(--brand-grey);
    border-radius: 12px;
    font-size: 15px;
    color: var(--brand-navy);
    background: var(--brand-white);
}

.bi-contact-card textarea.form-control {
    min-height: 54px;
    line-height: 1.5;
    resize: vertical;
}

.bi-contact-card .form-control::placeholder {
    color: rgba(15, 23, 42, .5);
}

.bi-contact-card .form-control:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .18);
}

.bi-contact-card .form-control.is-invalid {
    border-color: var(--brand-orange);
}

.bi-contact-card .error-space:empty {
    display: none;
}

/* The theme's .boxed-btn drives the submit; it only needs to sit on the
   card's rhythm. */
.bi-contact-card .boxed-btn {
    border: 0;
    border-radius: 12px;
    background: var(--brand-orange);
    color: var(--brand-white);
    cursor: pointer;
}

/* background-color, not the `background` shorthand: the shorthand also resets
   background-image, which is where the paper-plane icon lives — it vanished
   the moment the pointer touched the button. */
.bi-contact-card .boxed-btn:hover {
    background-color: var(--brand-navy);
    color: var(--brand-white);
}

.bi-contact-card #contactCaptcha {
    transform-origin: left top;
}

@media (max-width: 1199.98px) {
    .bi-contact-title {
        font-size: 42px;
    }

    .bi-contact-h2 {
        font-size: 36px;
    }

    .bi-contact-card {
        padding: 32px;
    }
}

@media (max-width: 991.98px) {
    .bi-contact {
        padding: 72px 0 80px;
    }

    .bi-contact-title {
        font-size: 36px;
    }

}

/* The portrait artwork holds its scene in the top third and leaves the rest
   dark, which is where the copy and the card go. */
@media (max-width: 767.98px) {
    .bi-contact {
        /* This section is the first thing on the page and the site header is
           fixed with no offset on main, so the padding has to clear its ~70px
           itself — at 56px the eyebrow sat 1px below it and looked clipped. */
        padding: 112px 0 64px;
        /* The portrait artwork is bright through its middle, and on a phone the
           contact details land right on it — a navy scrim keeps the white text
           readable without hiding the picture. */
        background-image:
            linear-gradient(180deg,
                rgba(15, 23, 42, .30) 0%,
                rgba(15, 23, 42, .74) 28%,
                rgba(15, 23, 42, .82) 62%,
                rgba(15, 23, 42, .70) 100%),
            url("../../../assets/img/brand_contact_mobile.webp");
    }

    .bi-contact-title {
        font-size: 30px;
    }

    .bi-contact-card {
        padding: 22px 18px;
    }

    .bi-contact-h2 {
        font-size: 30px;
    }

}

/* ---- contact fields: leading icons ---- */
/* The icon sits inside the control's own padding rather than in a sibling
   column, so the .mb-3 / .error-space structure the validation script walks
   is left exactly as it was. */
.bi-contact-card .bi-field {
    position: relative;
}

.bi-contact-card .bi-field>i {
    position: absolute;
    top: 18px;
    left: 17px;
    font-size: 17px;
    line-height: 1;
    color: rgba(15, 23, 42, .45);
    pointer-events: none;
}

.bi-contact-card .bi-field .form-control {
    padding-left: 46px;
}

/* ---- reassurance strip ---- */
.bi-contact-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 4px 0 22px;
    padding: 18px 4px;
    list-style: none;
    border-radius: 14px;
    background: rgba(15, 23, 42, .04);
}

.bi-contact-trust li {
    padding: 0 16px;
    border-left: 1px solid var(--brand-grey);
}

.bi-contact-trust li:first-child {
    border-left: 0;
}

.bi-contact-trust i {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
    color: var(--brand-navy);
}

.bi-contact-trust strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-navy);
}

.bi-contact-trust span {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(15, 23, 42, .62);
}

@media (max-width: 767.98px) {
    .bi-contact-trust {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .bi-contact-trust li {
        padding: 0;
        border-left: 0;
    }
}

/* ---- contact footer: captcha above, strip + submit below ---- */
.bi-contact-captcha {
    margin: 4px 0 20px;
}

.bi-contact-foot {
    display: flex;
    align-items: center;
    gap: 24px;
}

.bi-contact-foot .bi-contact-trust {
    flex: 1 1 auto;
    margin: 0;
}

.bi-contact-send {
    flex: 0 0 auto;
}

/* Darker than the placeholder text they sit beside: these read as part of the
   field's furniture, not as another piece of hint text. */
.bi-contact-card .bi-field>i {
    color: var(--brand-navy);
}

@media (max-width: 767.98px) {
    .bi-contact-foot {
        display: block;
    }

    .bi-contact-send {
        margin-top: 18px;
        text-align: center;
    }
}

/* =========================================================
   CONTACT CARD — fit the whole form in one screen
   Measured at 1366x900 the card ran 834px: padding 80, heading block 152,
   fields 315, captcha 102, and the reassurance strip alone 180 because its
   stacked icons and wrapped captions pile up. On a 1280x720 laptop that
   overflowed by 210px. Everything below buys those pixels back.
   ========================================================= */
.bi-contact-card {
    padding: 26px 30px;
}

.bi-contact-card .bi-contact-eyebrow.dark {
    margin-bottom: 10px;
}

.bi-contact-h2 {
    margin-bottom: 4px;
    font-size: 34px;
}

.bi-contact-sub {
    margin-bottom: 16px;
    font-size: 15px;
}

.bi-contact-card .contact-form .mb-3 {
    margin-bottom: 10px !important;
}

.bi-contact-card .form-control {
    min-height: 46px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.bi-contact-card .bi-field>i {
    top: 14px;
}

/* rows="5" renders ~145px; the field still grows if the visitor drags it. */
.bi-contact-card textarea.form-control {
    height: 92px;
    min-height: 92px;
}

.bi-contact-captcha {
    margin: 2px 0 12px;
}

/* Icon beside the title rather than stacked above it — the single biggest
   saving, and the captions stop wrapping to three lines. */
.bi-contact-trust {
    margin: 0;
    padding: 12px 4px;
}

.bi-contact-trust li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
    padding: 0 12px;
}

.bi-contact-trust i {
    grid-row: span 2;
    margin-bottom: 0;
    font-size: 18px;
}

.bi-contact-trust strong {
    margin-bottom: 1px;
    font-size: 12.5px;
    line-height: 1.25;
}

.bi-contact-trust span {
    font-size: 11.5px;
    line-height: 1.35;
}

.bi-contact-card .boxed-btn {
    margin-top: 0;
    padding: 12px 30px;
}

@media (max-width: 767.98px) {
    .bi-contact-card {
        padding: 20px 18px;
    }

    .bi-contact-trust li {
        padding: 0;
    }
}

/* Short laptops (720p and the like): the card lands exactly on the fold, so
   the submit sits on the last pixel. A little more comes off there only —
   taller screens keep the roomier version above. */
@media (min-width: 992px) and (max-height: 790px) {
    .bi-contact {
        padding-top: 86px;
        padding-bottom: 56px;
    }

    .bi-contact-card {
        padding: 20px 26px;
    }

    .bi-contact-h2 {
        font-size: 30px;
    }

    .bi-contact-sub {
        margin-bottom: 12px;
    }

    .bi-contact-card textarea.form-control {
        height: 78px;
        min-height: 78px;
    }

    .bi-contact-captcha {
        margin: 0 0 10px;
    }
}

/* =========================================================
   CONTACT — even breathing room, and an icon on the submit
   The site header is fixed and overlays the top of this section, so equal
   padding does NOT read as equal space: at 96px top / 104px bottom the
   visible gap above the card was only 96 - 77 = 19px. The top padding now
   carries the header's height on top of the margin it should show.
   ========================================================= */
.bi-contact {
    padding: 130px 0 52px;
}

@media (min-width: 992px) and (max-height: 790px) {
    .bi-contact {
        padding-top: 108px;
        padding-bottom: 40px;
    }
}

/* #submitBtn is an <input>, which cannot hold a child icon or a pseudo
   element — and it has to stay an input, because the validation script sets
   its label with .val(). A background image is the way in.

   The :hover/:focus selectors are listed too: the theme declares its own hover
   with the `background` SHORTHAND, which resets background-image to none, and
   the plane vanished the moment the pointer touched the button. */
.bi-contact-card .boxed-btn,
.bi-contact-card .boxed-btn:hover,
.bi-contact-card .boxed-btn:focus {
    padding-left: 52px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.68 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 24px center;
    background-size: 17px 17px;
}

@media (max-width: 767.98px) {
    .bi-contact {
        padding-bottom: 48px;
    }

    .bi-contact-card .boxed-btn {
        background-position: left 30px center;
    }
}

/* =========================================================
   FOOTER — three columns across the full row
   The Services column is commented out, which left col-lg-3 + col-lg-2 +
   col-lg-3 = 8 of 12 columns and a third of the row empty on the right. The
   remaining three now span it, and all three align left instead of the brand
   column reading left while the other two centred.

   Desktop only: below 992px the footer stacks and centres itself, and
   left-aligning there stranded each title rule away from its heading.
   ========================================================= */
@media (min-width: 992px) {

    .footer-links-wrap,
    .footer-services-wrap {
        text-align: left;
    }

    .footer-links-center {
        align-items: flex-start;
    }

    .footer-links-center li {
        /* The fixed 160px existed to centre equal-width rows; left-aligned
           they just sit on the column edge. */
        width: auto;
    }

    .footer-links-center a {
        justify-content: flex-start;
    }

    /* .mx-auto centres these rules on the stacked mobile footer and declares
       !important, so the desktop override has to match it. */
    .premium-footer .foterhr.mx-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* A measure for the blurb, rather than the full five-column width. */
    .footer-brand p {
        max-width: 420px;
    }
}

/* Stacked footer: the link rows each centred their own text, so every "›"
   landed at a different x. Centre the list as one block instead and let the
   rows share a left edge. Same for the contact row, whose icon was wrapping
   onto its own line. */
@media (max-width: 991.98px) {
    .premium-footer .footer-links-center {
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .premium-footer .footer-links-center li {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .premium-footer .footer-contact {
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
    }

    /* The stacked rules above declare flex-direction: column !important, which
       put the envelope on its own line above the address. */
    .premium-footer .footer-contact li {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px;
        text-align: left !important;
    }

    .premium-footer .footer-contact a {
        text-align: left !important;
    }
}

/* The social row moved from the brand column into Contact Us, under its own
   heading, so it needs the spacing a second heading in a column wants. */
.footer-title-social {
    margin-top: 28px;
}

@media (min-width: 992px) {
    .premium-footer .footer-social {
        justify-content: flex-start;
    }
}

/* =========================================================
   ABOUT BANNER — flush to the header, with a heading on it
   The site header is fixed and main carries no offset, so this banner clears
   it with its own margin. That margin was a fixed 6rem (84px) while the
   header's height changes with width — 77px above 1400, 66px from 1200, and
   85px from 992 — which is where the gap came from. Each range now matches.
   ========================================================= */
.about-banner-img {
    position: relative;
    margin-top: 77px;
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
    .about-banner-img {
        margin-top: 66px;
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .about-banner-img {
        margin-top: 85px;
    }
}

/* Below 992 the header is 70px. This has to be restated here: the base rule
   above sits later in the file than the older max-width:991px one, so it was
   winning and putting a 7px gap back on phones and tablets. */
@media (max-width: 991.98px) {
    .about-banner-img {
        margin-top: 70px;
    }
}

.about-banner-copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* The links inside stay clickable if any are ever added; only the empty
   overlay area lets clicks through to the artwork beneath. */
.about-banner-copy .container {
    pointer-events: auto;
}

.about-banner-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-orange);
}

.about-banner-title {
    margin: 0 0 10px;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--brand-navy);
}

.about-banner-title .accent {
    color: var(--brand-orange);
}

.about-banner-sub {
    margin: 0;
    max-width: 380px;
    font-size: 17px;
    color: rgba(15, 23, 42, .75);
}

@media (max-width: 1199.98px) {
    .about-banner-title {
        font-size: 42px;
    }
}

@media (max-width: 991.98px) {
    .about-banner-title {
        font-size: 30px;
    }

    .about-banner-eyebrow {
        margin-bottom: 6px;
        font-size: 11px;
        letter-spacing: 3px;
    }

    .about-banner-sub {
        font-size: 14px;
    }
}

/* The portrait banner is only ~184px tall on a phone; the sub-line does not
   fit beside the heading there. */
@media (max-width: 575.98px) {
    .about-banner-title {
        font-size: 22px;
    }

    .about-banner-sub {
        display: none;
    }
}

/* The portrait banner is busy edge to edge on a phone — the skyline and the
   silhouette run straight under the heading, which made it unreadable. A pale
   wash from the left gives the copy ground without hiding the artwork. The
   desktop banner needs none: its left half is already open sky. */
@media (max-width: 991.98px) {
    .about-banner-copy::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
                rgba(255, 255, 255, .94) 0%,
                rgba(255, 255, 255, .88) 42%,
                rgba(255, 255, 255, .45) 72%,
                rgba(255, 255, 255, 0) 100%);
    }

    /* Lift the copy above the wash. */
    .about-banner-copy .container {
        position: relative;
        z-index: 1;
    }
}

/* =========================================================
   ABOUT — PURPOSE (mission & vision)
   The billboard photo and the decorative shapes live in the artwork, so the
   middle column of the grid is empty by design and the copy and the two cards
   sit either side of it.
   ========================================================= */
.bi-purpose {
    position: relative;
    padding: 90px 0;
    background-image: url("../../../assets/img/vis_mis_desktop.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--brand-white);
}

.bi-purpose-row {
    row-gap: 36px;
}

/* ---- left copy ---- */
.bi-purpose-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-orange);
}

.bi-purpose-eyebrow .rule {
    display: block;
    width: 34px;
    height: 2px;
    background: var(--brand-orange);
}

.bi-purpose-title {
    margin: 0 0 16px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.16;
    color: var(--brand-navy);
}

.bi-purpose-title .accent {
    color: var(--brand-orange);
}

.bi-purpose-sub {
    margin: 0;
    max-width: 330px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(15, 23, 42, .7);
}

/* ---- the two cards ---- */
.bi-purpose-cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bi-purpose-cards li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    margin-bottom: 26px;
    padding: 26px 26px 22px;
    border-radius: 18px;
    /* The orange spine down the left edge, as a border so the card's own
       rounding follows it. */
    border-left: 4px solid var(--brand-orange);
    background: var(--brand-white);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .10);
    overflow: hidden;
}

.bi-purpose-cards li:last-child {
    margin-bottom: 0;
}

/* The oversized step number, ghosted into the top-right corner. */
.bi-purpose-num {
    position: absolute;
    top: 6px;
    right: 18px;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    color: rgba(249, 115, 22, .13);
    pointer-events: none;
}

.bi-purpose-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--brand-white);
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(249, 115, 22, .35);
}

.bi-purpose-k {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-orange);
}

.bi-purpose-body h3 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--brand-navy);
}

.bi-purpose-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(15, 23, 42, .68);
}

.bi-purpose-rule {
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--brand-orange);
}

@media (max-width: 1199.98px) {
    .bi-purpose-title {
        font-size: 36px;
    }

    .bi-purpose-cards li {
        padding: 22px 20px 18px;
    }
}

/* Below the three-column layout the artwork's billboard no longer lines up
   with an empty column, so the portrait version takes over as a soft backdrop
   and the copy and cards simply stack on it. */
/* 992-1399: the columns still sit side by side, but cover crops the 3:1
   artwork sideways until its billboard spans nearly the whole width. Rather
   than fight it for a gap the column cannot spare, the picture is veiled back
   to a backdrop and the cards simply sit on it. */
@media (max-width: 1399.98px) {
    .bi-purpose {
        padding: 64px 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)),
            url("../../../assets/img/vis_mis_desktop.png");
    }

    .bi-purpose-title {
        font-size: 32px;
    }

    .bi-purpose-sub {
        max-width: 520px;
    }
}

@media (max-width: 575.98px) {
    .bi-purpose-title {
        font-size: 27px;
    }

    .bi-purpose-num {
        font-size: 44px;
    }

    .bi-purpose-cards li {
        column-gap: 14px;
        padding: 20px 16px 16px;
    }

    .bi-purpose-ico {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }
}

/* The artwork's billboard is wider than the middle third: measured, its visual
   ends at 63.5% of the section at 1920 and 68.1% at 1440, while the cards
   column starts at 66.7% — so the cards sat 29px inside it. This clears them.
   Below 1400 the section is shorter than it is wide, so cover crops the 3:1
   artwork sideways and its billboard spans nearly the whole width — measured
   1319 of 1366. No amount of padding clears that, so the stacked treatment
   takes over there instead. */
@media (min-width: 1400px) {
    .bi-purpose-cards {
        padding-left: 70px;
    }
}

/* Below 992 the section is taller than it is wide, so the portrait artwork
   is the one that crops sensibly. */
@media (max-width: 991.98px) {
    .bi-purpose {
        background-image:
            linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)),
            url("../../../assets/img/vis_mis_mobile.png");
    }
}

/* Stacked layouts: the artwork becomes a real element sitting between the copy
   and the cards, rather than a veiled backdrop behind them.
   Measured off the file: it is 733x2146 (0.342) and its billboard occupies
   29.8%-64.3% of the height. Scaled to the element's width the image stands
   2.93x as tall, putting that band at 0.87W-1.88W — almost exactly one square
   window tall, centred by object-position 45.5%. */
.bi-purpose-visual {
    display: block;
    width: 100%;
    /* Capped, or the square runs to 723px tall on a tablet and swamps the
       section; on a phone the container is narrower than this anyway. */
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 26px auto 30px;
    object-fit: cover;
    object-position: center 45.5%;
}

/* No backdrop behind the copy and cards now that the picture is its own
   element — it would only show through as a second, blurrier copy. */
@media (max-width: 991.98px) {
    .bi-purpose {
        background-image: none;
    }
}

/* The About page's version of this section sits on white; the home page keeps
   the grey it was set to, so the change is scoped rather than applied to the
   shared .about-modern rule. */
.about-modern.about-modern-plain {
    background: var(--brand-white);
}

/* =========================================================
   TESTIMONIALS
   Centred heading, then the oversized quote mark on the left with the quote
   itself beside it — the arrangement from the reference. Sits on brand navy,
   which is the only dark ground in the palette.
   ========================================================= */
.bi-quotes {
    padding: 54px 0 48px;
    background: var(--brand-navy);
}

.bi-quotes-head {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.bi-quotes-head .bi-eyebrow {
    color: var(--brand-orange);
}

/* The shared section title is navy; on this ground it has to invert. */
.bi-quotes-head .bi-section-title {
    color: var(--brand-white);
}

.bi-quotes-sub {
    margin: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, .72);
}

/* ---- the quote ---- */
.bi-quotes-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 54px;
    max-width: 1040px;
    margin: 0 auto;
}

.bi-quotes-mark {
    flex: 0 0 190px;
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--brand-navy);
    /* The glyph carries a lot of its own leading; this pulls it optically
       into the middle of the circle. */
    font-size: 170px;
    line-height: 1;
    /* Measured: the glyph ink centres 32px above the disc at 22px of padding,
       so this lands it on the middle. */
    padding-top: 54px;
    overflow: hidden;
}

.bi-quotes-figure {
    margin: 0;
    max-width: 620px;
    text-align: center;
}

.bi-quotes-figure blockquote {
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--brand-white);
}

/* The script writes the text in without the marks around it. */
.bi-quotes-figure blockquote::before {
    content: "\201C";
}

.bi-quotes-figure blockquote::after {
    content: "\201D";
}

.bi-quotes-figure figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.bi-quotes-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .35);
}

.bi-quotes-name {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-white);
}

.bi-quotes .stars {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--brand-orange);
}

/* ---- arrows ---- */
.bi-quotes-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.bi-quotes-nav .arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: transparent;
    color: var(--brand-white);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.bi-quotes-nav .arrow:hover,
.bi-quotes-nav .arrow:focus-visible {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--brand-white);
}

@media (max-width: 991.98px) {
    .bi-quotes {
        padding: 44px 0 40px;
    }

    .bi-quotes-body {
        gap: 34px;
    }

    .bi-quotes-mark {
        flex-basis: 140px;
        width: 140px;
        height: 140px;
        font-size: 126px;
        padding-top: 40px;
    }

    .bi-quotes-figure blockquote {
        font-size: 20px;
    }
}

/* Side by side, the circle leaves the quote too little room to read on a
   phone, so it sits above instead. */
@media (max-width: 767.98px) {
    .bi-quotes-body {
        flex-direction: column;
        gap: 26px;
    }

    .bi-quotes-mark {
        flex-basis: auto;
        width: 104px;
        height: 104px;
        font-size: 94px;
        padding-top: 30px;
    }

    .bi-quotes-figure blockquote {
        font-size: 17px;
    }

    .bi-quotes-sub {
        font-size: 16px;
    }
}

/* ---- portrait in place of the quote mark ---- */
.bi-quotes-portrait {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

/* Quotes run to different lengths — measured, the section jumped 36px between
   them as the copy went from three lines to four. A floor of four lines
   (1.5 line-height x 4) keeps the block still while they change. */
.bi-quotes-figure blockquote {
    min-height: 6em;
}

.bi-quotes-figure figcaption {
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 991.98px) {
    .bi-quotes-portrait {
        flex-basis: 140px;
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 767.98px) {
    .bi-quotes-portrait {
        flex-basis: auto;
        width: 116px;
        height: 116px;
    }

    /* Narrower column, so the longest quote runs to five lines here. */
    .bi-quotes-figure blockquote {
        min-height: 7.5em;
    }
}

/* =========================================================
   ABOUT — CORE USP
   The laptop and billboards live in the artwork, so the right half of the row
   is empty by design and the copy and cards sit to its left.
   ========================================================= */
.bi-usp {
    padding: 80px 0 64px;
    background-image: url("../../../assets/img/our_usp_desktop.webp");
    /* The artwork is a laptop on white occupying its right half — the left half
       is empty. cover scaled it to fill the width and blew the laptop up past
       the frame; matching its height to the section and anchoring it right
       keeps the laptop whole, and its white ground meets the section colour
       with no seam. */
    /* Sized so the laptop clears the cards: it occupies the right ~55% of the
       artwork, so at 82% of the section width its left edge lands beyond the
       copy column. */
    background-size: 82% auto;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: var(--brand-white);
}

.bi-usp-rule {
    display: block;
    width: 74px;
    height: 4px;
    margin-bottom: 18px;
    border-radius: 2px;
    background: var(--brand-orange);
}

.bi-usp-title {
    margin: 0 0 14px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.14;
    color: var(--brand-navy);
}

.bi-usp-title .accent {
    color: var(--brand-orange);
}

.bi-usp-lead {
    margin: 0 0 30px;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(15, 23, 42, .75);
}

/* ---- the four cards ---- */
.bi-usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bi-usp-grid li {
    padding: 22px 20px;
    border-radius: 16px;
    background: var(--brand-white);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.bi-usp-ico {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--brand-white);
    font-size: 22px;
    box-shadow: 0 10px 20px rgba(249, 115, 22, .32);
}

.bi-usp-grid h3 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-navy);
}

.bi-usp-grid p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(15, 23, 42, .68);
}

/* ---- the audience strip ---- */
.bi-usp-audience {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

.bi-usp-audience li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    border-left: 1px solid var(--brand-grey);
}

.bi-usp-audience li:first-child {
    border-left: 0;
    padding-left: 0;
}

.bi-usp-audience i {
    font-size: 30px;
    color: rgba(15, 23, 42, .55);
}

.bi-usp-audience strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-navy);
}

.bi-usp-audience span {
    display: block;
    font-size: 14px;
    color: rgba(15, 23, 42, .62);
}

@media (max-width: 1199.98px) {
    .bi-usp-title {
        font-size: 38px;
    }

    .bi-usp-grid li {
        padding: 18px 16px;
    }
}

/* Below the two-column split, cover crops the 3:1 artwork sideways until the
   laptop runs under the copy, so it is veiled back to a backdrop. */
@media (max-width: 991.98px) {
    .bi-usp {
        padding: 60px 0 52px;
        background-image:
            linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)),
            url("../../../assets/img/our_usp_mobile.webp");
    }

    .bi-usp-title {
        font-size: 32px;
    }

    .bi-usp-audience {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 0;
        margin-top: 42px;
    }

    .bi-usp-audience li:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    .bi-usp-title {
        font-size: 27px;
    }

    .bi-usp-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bi-usp-audience {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bi-usp-audience li {
        border-left: 0;
        padding: 0;
    }
}

/* Stacked layouts: the laptop becomes a real element between the copy and the
   cards rather than a washed-out backdrop behind them.
   Measured off the portrait file (731x2152, 0.340): its content sits between
   33.3% and 54.8% of the height, which scaled to the element's width is a band
   0.632W tall — so a 1.58:1 window at 42% lands on it. */
.bi-usp-visual {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1.58;
    margin: 4px auto 26px;
    object-fit: cover;
    object-position: center 42%;
}

@media (max-width: 991.98px) {

    /* No veiled copy behind the cards now that the picture is its own element. */
    .bi-usp {
        background-image: none;
    }
}

/* =========================================================
   ABOUT — THE WAY WE DELIVER
   Copy on the left, a 2x2 grid of service cards on the right. Replaces the
   four numbered "diamond" cards that ran the full width.
   ========================================================= */
.bi-deliver {
    padding: 76px 0;
    background: var(--brand-white);
}

.bi-deliver-row {
    row-gap: 34px;
}

.bi-deliver-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-orange);
}

.bi-deliver-eyebrow .rule {
    display: block;
    width: 30px;
    height: 2px;
    background: var(--brand-orange);
}

.bi-deliver-title {
    margin: 0 0 14px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.16;
    color: var(--brand-navy);
}

.bi-deliver-title .accent {
    color: var(--brand-orange);
}

.bi-deliver-sub {
    margin: 0 0 26px;
    max-width: 340px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(15, 23, 42, .7);
}

.bi-deliver-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--brand-orange);
    color: var(--brand-white);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}

.bi-deliver-btn:hover {
    background: var(--brand-navy);
    color: var(--brand-white);
    transform: translateY(-2px);
}

/* ---- the four cards ---- */
.bi-deliver-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bi-deliver-grid li {
    position: relative;
    padding: 24px 22px;
    border-radius: 16px;
    background: var(--brand-white);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .09);
    transition: transform .25s ease, box-shadow .25s ease;
}

.bi-deliver-grid li:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(15, 23, 42, .14);
}

.bi-deliver-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--brand-orange);
    color: var(--brand-white);
    font-size: 20px;
}

/* Pinned to the corner opposite the icon, as in the reference. */
.bi-deliver-arrow {
    position: absolute;
    top: 26px;
    right: 22px;
    font-size: 18px;
    color: var(--brand-orange);
}

.bi-deliver-grid h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--brand-navy);
}

.bi-deliver-grid p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(15, 23, 42, .68);
}

@media (max-width: 1199.98px) {
    .bi-deliver-title {
        font-size: 36px;
    }
}

@media (max-width: 991.98px) {
    .bi-deliver {
        padding: 60px 0;
    }

    .bi-deliver-title {
        font-size: 32px;
    }

    .bi-deliver-sub {
        max-width: 520px;
    }
}

@media (max-width: 575.98px) {
    .bi-deliver-title {
        font-size: 27px;
    }

    .bi-deliver-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ---- services artwork ---- */
.bi-deliver {
    background-image: url("../../../assets/img/services_desktop.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--brand-white);
}

/* Measured off the portrait file (732x2149, 0.341): its billboard-and-road
   band sits between 26.8% and 58.8% of the height, which scaled to the
   element's width is 0.939W tall — so a 1.07:1 window at 39.4% lands on it.
   Copy sits above it in the artwork's blank top, cards below. */
.bi-deliver-visual {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1.07;
    margin: 10px auto 24px;
    object-fit: cover;
    object-position: center 39.4%;
    border-radius: 14px;
}

@media (max-width: 991.98px) {

    /* The picture is its own element here, so no second copy behind it. */
    .bi-deliver {
        background-image: none;
    }
}

/* =========================================================
   FOOTER — single compact bar
   Logo, links, follow and copyright on one line. Replaces the three-column
   block; the rules for that markup above are now inert.
   ========================================================= */
.premium-footer {
    padding: 0;
}

.footer-bar {
    display: flex;
    align-items: center;
    /* space-between spreads the leftover width equally between the four
       blocks. The auto margin that used to sit on .footer-follow dumped all
       of it into one gap instead. */
    justify-content: space-between;
    gap: 34px;
    padding: 50px 0;
}

.footer-mark {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.footer-mark img {
    height: 64px;
    width: auto;
}

/* ---- links ---- */
.footer-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.footer-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-white);
    text-decoration: none;
    transition: color .25s ease;
}

.footer-nav a:hover,
.footer-nav a.active {
    color: var(--brand-orange);
}

/* ---- follow ---- */
/* Pushed to the right of the links, with the copyright after it, so the bar
   reads logo / links ... follow / copyright. */
.footer-follow {
    padding-left: 34px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.footer-follow-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-white);
}

.premium-footer .footer-social {
    display: flex;
    gap: 10px;
}

.premium-footer .footer-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--brand-white);
    font-size: 14px;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease;
}

/* The marks keep their brand orange on hover; only the lift responds. */
.premium-footer .footer-social a:hover {
    background: var(--brand-orange);
    color: var(--brand-white);
    transform: translateY(-2px);
}

/* ---- copyright ---- */
.footer-copy {
    flex: 0 0 auto;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
    color: rgba(255, 255, 255, .75);
}

.footer-copy a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.footer-copy a:hover {
    color: var(--brand-orange);
}

@media (max-width: 991.98px) {
    .footer-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 28px;
        padding: 26px 0;
        text-align: center;
    }

    .footer-follow {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .premium-footer .footer-social {
        justify-content: center;
    }

    .footer-copy {
        flex-basis: 100%;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .footer-nav {
        gap: 18px;
    }

    .footer-mark img {
        height: 52px;
    }
}

/* The bar now spans the page rather than the centred measure, so it needs its
   own side padding; and the links get the same label treatment as Follow Us,
   which means they stack under it like that block does. */
/* Capped to the same measure the rest of the site uses. Left full width the
   bar stretched edge to edge and opened an 866px void in the middle at 1920;
   this closes most of it and gives the ends real margins. */
.premium-footer>.container-fluid {
    max-width: 1320px;
    margin-inline: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.footer-copy {
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .premium-footer>.container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-bar {
        gap: 26px;
    }
}

@media (max-width: 991.98px) {
    .footer-copy {
        white-space: normal;
    }
}

/* =========================================================
   CLIENT LOGOS — statement left, marks in a row beside it
   Replaces the boxed carousel items; the logo images themselves are
   unchanged.
   ========================================================= */
.bi-logos {
    padding: 54px 0;
    background: var(--brand-white);
}

.bi-logos-bar {
    display: flex;
    align-items: center;
    gap: 48px;
}

.bi-logos-head {
    flex: 0 0 340px;
    max-width: 340px;
    margin: 0;
    text-align: left;
}

.bi-logos-sub {
    margin: 0;
    font-size: 18px;
    color: rgba(15, 23, 42, .7);
}

/* ---- the scrolling marks ---- */
.bi-logos-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* Fades the marks in and out at the edges rather than clipping them. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bi-logos-track {
    display: flex;
    width: max-content;
    animation: bi-logos-scroll 52s linear infinite;
}

.bi-logos-marquee:hover .bi-logos-track {
    animation-play-state: paused;
}

/* Four copies, not two. One list is 672px but the viewport is 911px, so a
   two-copy track (1345px) ran out mid-cycle and left a gap before the marks
   came round again. Four copies make each half 1344px — wider than the
   viewport — so something is always on screen. */
@keyframes bi-logos-scroll {
    to {
        transform: translateX(-50%);
    }
}

.bi-logos-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    margin: 0;
    /* The trailing space has to equal the gap, or the seam between the two
       copies reads wider than the spacing inside each one. It is also what
       makes translateX(-50%) land exactly one cycle on. */
    padding: 0 56px 0 0;
    list-style: none;
}

.bi-logos-row li {
    flex: 0 1 auto;
    display: grid;
    place-items: center;
}

/* The marks arrive at different sizes and some carry their own white plate;
   a common height is what makes the row read as one line. */
.bi-logos-row img {
    max-height: 76px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .bi-logos {
        padding: 42px 0;
    }

    .bi-logos-row {
        gap: 36px;
    }

    .bi-logos-sub {
        font-size: 16px;
    }

}

@media (max-width: 575.98px) {
    .bi-logos-row img {
        max-height: 56px;
    }

    .bi-logos-row {
        gap: 28px;
        padding-right: 28px;
    }
}

/* The marquee is decoration; anyone who asked for less motion gets a static
   row instead of a moving one. */
@media (prefers-reduced-motion: reduce) {
    .bi-logos-track {
        animation: none;
    }
}

@media (max-width: 991.98px) {
    .bi-logos-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .bi-logos-head {
        flex-basis: auto;
        max-width: none;
        text-align: center;
    }
}

/* =========================================================
   SERVICE CARDS — even titles, centred content
   Some titles wrap to two lines and some do not, so the icon-and-title group
   sat at a different height in each card. The title reserves two lines and
   the group is centred, which lines them up whichever way the text falls.
   ========================================================= */
.service-card {
    justify-content: center;
}

.service-card h4 {
    /* Block, not flex: the titles now carry a <br>, which a flex container
       would swallow into one anonymous item. */
    display: block;
    line-height: 1.25;
    min-height: 2.5em;
}

/* =========================================================
   SITE TYPE SCALE — one size and style per role
   Every section's eyebrow / heading / subtext now shares the same metrics,
   whatever local rule set them before. Placed last so it also overrides the
   smaller values the per-breakpoint blocks above set.

   Colour is deliberately NOT set here: several of these sit on navy (the
   journey, testimonials and contact panels) where the heading and subtext
   invert to white, and a shared colour would flatten them into the ground.
   ========================================================= */

/* ---- eyebrow : 8px ---- */
.bi-eyebrow,
.services-subtitle,
.about-subtitle,
.process-subtitle,
.about-banner-eyebrow,
.bi-search-eyebrow,
.bi-contact-eyebrow,
.bi-purpose-eyebrow,
.bi-deliver-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.4;
    text-transform: uppercase;
}

/* ---- heading : 36px ---- */
.bi-section-title,
.section-title h3.bi-section-title,
.services-title,
.process-title,
.about-title,
.about-banner-title,
.cta-box h2,
.journey-title,
.bi-search-hero-title,
.bi-contact-title,
.bi-contact-h2,
.bi-purpose-title,
.bi-deliver-title,
.bi-usp-title,
.vision_mission_heading {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

/* ---- subtext : 14px ---- */
.bi-search-desc,
.services-desc,
.process-desc,
.journey-desc,
.about-banner-sub,
.bi-search-hero-sub,
.bi-quotes-sub,
.bi-purpose-sub,
.bi-deliver-sub,
.bi-usp-lead,
.bi-contact-sub,
.bi-contact-lead,
.bi-logos-sub,
.cta-box p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* ---- body copy : 16px ----
   The running paragraphs inside content sections, as distinct from the single
   subtext line under a heading. */
.about-modern p,
.about-modern .mission-desc,
.whybrandimg-para,
.vision_mission_para {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

/* Back on the site's centred measure, so the copy keeps the same left margin
   as every other section rather than sitting on the page edge. Capping it
   keeps the heading clear of the artwork in the middle. */
@media (min-width: 992px) {
    .bi-purpose-copy {
        max-width: 300px;
    }
}

/* =========================================================
   PURPOSE — stack below 1300px
   The three-column arrangement only works while the row is wide enough for
   the artwork to sit between the copy and the cards. Measured, the cards run
   onto the billboard from about 1300px down. Rather than shrink them, the
   section takes the stacked layout there — copy, then the picture as its own
   element, then the cards at full width.
   ========================================================= */
@media (min-width: 992px) and (max-width: 1299.98px) {

    /* full-width columns instead of thirds */
    .bi-purpose .bi-purpose-row>[class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* the empty column that held the artwork's place is not needed stacked */
    .bi-purpose .bi-purpose-row>.col-lg-4.d-none {
        display: none !important;
    }

    /* the portrait visual is hidden by d-lg-none above 992; bring it back */
    .bi-purpose .bi-purpose-row>.col-12.d-lg-none {
        display: block !important;
    }

    .bi-purpose {
        background-image: none;
    }

    .bi-purpose-copy {
        max-width: none;
    }
}

/* Measured: the cards began 92px before the artwork's photo ended, at every
   width from 1400 up. There is unused room to their right inside the
   container, so they shift into it.

   A transform rather than a margin or a max-width: narrowing the cards makes
   their text wrap more, which makes the section taller, which makes the
   cover-sized artwork scale UP and the overlap worse. Shifting leaves the
   layout — and so the artwork — exactly as it was. */
@media (min-width: 1300px) {
    .bi-purpose-cards {
        transform: translateX(122px);
    }
}

/* The layout keeps the footer at the bottom by letting <main> grow, and on a
   short page that growth shows as blank space under the last section — 55px
   on the contact page at 1000px tall. Letting the contact section itself take
   that space means its artwork runs all the way down to the footer.
   Scoped with :has() so no other page's main becomes a flex container. */
body:has(.bi-contact) main.flex-fill {
    display: flex;
    flex-direction: column;
}

body:has(.bi-contact) .bi-contact {
    flex: 1 1 auto;
}

/* =========================================================
   MOBILE MENU — make the hamburger tappable
   The header's cart/account cluster is z-index 1001 and overlaps the reveal
   button, so taps landed on that div instead of the menu. The button cannot
   simply be raised: it lives inside .mean-bar, whose own z-index:2 creates a
   stacking context it cannot escape. So the bar is lifted above the icons and
   made transparent to pointers, with only its interactive parts catching them
   — the cart and account buttons underneath stay clickable.
   ========================================================= */
@media (max-width: 991px) {

    /* responsive.css pins this at 2 via .mean-container .mean-bar, so the
       selector here has to carry the same weight to win. */
    .mean-container .mean-bar {
        z-index: 1002;
        pointer-events: none;
    }

    .mean-container .mean-bar a.meanmenu-reveal,
    .mean-container .mean-bar nav.mean-nav {
        pointer-events: auto;
    }
}

/* =========================================================
   CONTACT — the "Thank you!" confirmation
   The palette layer flattens every Bootstrap alert to grey so nothing paints
   a stock green or red. Inside the contact card the confirmation is the one
   thing the visitor is waiting for, so it gets the navy highlight instead of
   sitting quietly in the form's own grey.
   ========================================================= */
.bi-contact-card .alert {
    border: 0;
    border-radius: 12px;
    margin-bottom: 22px;
    padding: 15px 18px 15px 50px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    background-repeat: no-repeat;
    background-position: left 18px center;
    background-size: 20px 20px;
}

.bi-contact-card .alert-success {
    background-color: var(--brand-navy);
    color: var(--brand-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Kept distinct from the confirmation without reaching outside the palette. */
.bi-contact-card .alert-danger {
    background-color: var(--brand-orange);
    color: var(--brand-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* The meanmenu stylesheet paints the open panel amber. Navy matches the
   header's own ground and keeps the orange for the buttons alone. */
@media (max-width: 991px) {
    .mean-container .mean-nav {
        background: var(--brand-navy);
    }

    .mean-container .mean-nav ul li a {
        color: var(--brand-white);
        border-top-color: rgba(255, 255, 255, .14);
    }

    .mean-container .mean-nav ul li a:hover,
    .mean-container .mean-nav ul li a.mean-clicked {
        background: rgba(255, 255, 255, .08);
    }
}

/* =========================================================
   HERO — trim the empty band under the three feature points
   The panel's box is 210px tall so it can still contain the copy where it
   wraps to two lines (992-1199px, cards 152px). From 1200px up the copy fits
   on one line and the cards are only 96px, leaving 114px of empty artwork
   under them before the section ends.

   Both numbers have to move together: the lift and the height must stay
   equal, or the 210px the panel borrows from the flow is not given back and
   every section below shifts. The hero's own bottom padding comes down by the
   same amount so the gap between the map panel and the points is unchanged,
   and min-height comes down with it — otherwise it becomes the binding
   constraint at tall viewports and simply reinstates the gap.
   ========================================================= */
@media (min-width: 1200px) {
    .bi-hero {
        min-height: calc(100vh + 250px);
        padding-bottom: 170px;
    }

    .bi-float-panel {
        margin-top: -120px;
        height: 120px;
    }
}