/* ==========================================================================
   Mr Hazir — Editorial Landing System
   A Swiss-grid inspired design language: sharp corners, strong typographic
   scale, visible rules, generous whitespace. Light + dark parity throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.landing-refresh,
.landing-refresh-footer,
.modern-landing-header {
    --lr-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --lr-primary: var(--bs-primary, #5f60b9);
    --lr-primary-rgb: 95, 96, 185;
    --lr-primary-ink: #4a4b96;
    --lr-primary-soft: rgba(var(--lr-primary-rgb), 0.08);
    --lr-primary-line: rgba(var(--lr-primary-rgb), 0.22);

    /* Surfaces — paper-like, warm neutral rather than blue-grey */
    --lr-paper: #ffffff;
    --lr-paper-sunk: #f6f6f4;
    --lr-paper-raised: #ffffff;

    /* Ink */
    --lr-ink: #14131c;
    --lr-ink-2: #43414f;
    --lr-ink-3: #6f6c7d;
    --lr-ink-4: #9a97a6;

    /* Rules — the structural signature of this design */
    --lr-rule: #e4e2de;
    --lr-rule-strong: #c9c6c0;
    --lr-rule-ink: #14131c;

    --lr-accent: #e0562d;
    --lr-gold: #d99b1c;
    --lr-green: #1f8a5f;

    /* Corners: light, deliberate roundness. Soft enough to feel modern,
       restrained enough that nothing reads as a pill or a bubble. */
    --lr-r-0: 6px;
    --lr-r-1: 8px;
    --lr-r-2: 10px;
    --lr-r-3: 14px;

    --lr-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --lr-section-y: clamp(64px, 7vw, 108px);
}

/* Dark theme token overrides */
[data-bs-theme="dark"] .landing-refresh,
[data-bs-theme="dark"] .landing-refresh-footer,
[data-bs-theme="dark"] .modern-landing-header,
body.dark .landing-refresh,
body.dark .landing-refresh-footer,
body.dark .modern-landing-header {
    --lr-paper: #0f0e14;
    --lr-paper-sunk: #16151d;
    --lr-paper-raised: #1a1922;

    --lr-ink: #f4f3f7;
    --lr-ink-2: #c3c0cf;
    --lr-ink-3: #928fa1;
    --lr-ink-4: #6c697b;

    --lr-rule: #2a2833;
    --lr-rule-strong: #3d3a49;
    --lr-rule-ink: #f4f3f7;

    --lr-primary-ink: #a3a4ee;
    --lr-primary-soft: rgba(var(--lr-primary-rgb), 0.16);
    --lr-primary-line: rgba(var(--lr-primary-rgb), 0.34);

    --lr-accent: #ff7a4d;
    --lr-gold: #f0b537;
    --lr-green: #35c98d;
}

/* --------------------------------------------------------------------------
   2. Foundations
   -------------------------------------------------------------------------- */
.landing-refresh {
    font-family: var(--lr-font);
    color: var(--lr-ink);
    background-color: var(--lr-paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.landing-refresh .container,
.landing-refresh-footer .container {
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
}

.landing-refresh .section-padding,
.landing-refresh .padding-top-bottom-90 {
    padding-top: var(--lr-section-y);
    padding-bottom: var(--lr-section-y);
}

/* Neutralise inherited bootstrap tints so sections read as one paper stack */
.landing-refresh .bg-light {
    background-color: var(--lr-paper-sunk) !important;
}

.landing-refresh h1,
.landing-refresh h2,
.landing-refresh h3,
.landing-refresh h4,
.landing-refresh h5,
.landing-refresh h6 {
    font-family: var(--lr-font);
    color: var(--lr-ink);
    font-weight: 700;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.landing-refresh h1 {
    font-size: clamp(44px, 5.4vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.landing-refresh h2 {
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.landing-refresh h3 {
    font-size: clamp(27px, 2.9vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.038em;
}

.landing-refresh h5 {
    font-size: 17px;
    line-height: 1.35;
}

.landing-refresh p {
    color: var(--lr-ink-2);
}

.landing-refresh a {
    text-decoration: none;
}

/* Retire the legacy hand-drawn underline flourish — the rule system replaces it */
.landing-refresh .highlighted-image,
.landing-refresh .highlighted-text-swipe {
    display: none !important;
}

.landing-refresh .highlighted-text {
    display: inline;
}

/* --------------------------------------------------------------------------
   3. Section header framework — numbered, ruled, editorial
   -------------------------------------------------------------------------- */
.landing-refresh .lr-sec-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--lr-rule);
    margin-bottom: 44px;
}

.landing-refresh .lr-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lr-ink-3);
    margin-bottom: 14px;
}

.landing-refresh .lr-eyebrow::before {
    content: attr(data-num);
    font-variant-numeric: tabular-nums;
    color: var(--lr-primary-ink);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.landing-refresh .lr-eyebrow::after {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--lr-rule-strong);
}

.landing-refresh .lr-sec-head .iq-title-box {
    margin-bottom: 0;
}

.landing-refresh .lr-sec-head h2,
.landing-refresh .lr-sec-head h3 {
    margin: 0;
    max-width: 20ch;
}

.landing-refresh .lr-sec-lede {
    margin: 14px 0 0;
    max-width: 56ch;
    font-size: 16px;
    color: var(--lr-ink-3);
}

.landing-refresh .lr-sec-head.is-centered {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.landing-refresh .lr-sec-head.is-centered .lr-eyebrow {
    justify-content: center;
}

.landing-refresh .lr-sec-head.is-centered h2,
.landing-refresh .lr-sec-head.is-centered h3 {
    max-width: 24ch;
}

.landing-refresh .lr-sec-head.is-centered .lr-sec-lede {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .landing-refresh .lr-sec-head {
        grid-template-columns: 1fr;
        align-items: start;
        margin-bottom: 32px;
    }
}

/* --------------------------------------------------------------------------
   4. Links & buttons — square, confident, no capsules
   -------------------------------------------------------------------------- */
.landing-refresh .lr-link,
.landing-refresh .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lr-ink) !important;
    padding: 0 0 5px;
    border-bottom: 1.5px solid var(--lr-rule-ink);
    border-radius: 0;
    text-decoration: none !important;
    transition: gap 0.28s var(--lr-ease), color 0.2s ease, border-color 0.2s ease;
}

.landing-refresh .lr-link::after,
.landing-refresh .btn-link::after {
    content: '→';
    font-size: 14px;
    line-height: 1;
}

.landing-refresh .lr-link:hover,
.landing-refresh .btn-link:hover {
    gap: 14px;
    color: var(--lr-primary-ink) !important;
    border-color: var(--lr-primary-ink);
}

.landing-refresh .btn {
    border-radius: var(--lr-r-1);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.24s var(--lr-ease), background-color 0.2s ease,
        border-color 0.2s ease, color 0.2s ease;
}

.landing-refresh .lr-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--lr-ink);
    color: var(--lr-paper);
    border: 1px solid var(--lr-ink);
    border-radius: var(--lr-r-1);
    padding: 15px 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.landing-refresh .lr-btn-solid:hover {
    background: var(--lr-primary);
    border-color: var(--lr-primary);
    color: #fff;
}

/* ==========================================================================
   5. HERO — asymmetric editorial split with a measured stat rail
   ========================================================================== */
.landing-refresh .home-hero {
    position: relative;
    background: var(--lr-paper) !important;
    padding-top: clamp(68px, 7.5vw, 104px);
    padding-bottom: 0;
    border-bottom: 1px solid var(--lr-rule);
    overflow: hidden;
}

/* Faint structural grid — the Swiss signature, kept very quiet */
.landing-refresh .home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--lr-rule) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    opacity: 0.5;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.landing-refresh .home-hero > .container {
    position: relative;
    z-index: 1;
}

.landing-refresh .home-hero .hero-title {
    margin-bottom: 0;
}

/* Editorial kicker above the headline */
.landing-refresh .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lr-ink-3);
    margin-bottom: 30px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lr-rule);
}

.landing-refresh .hero-kicker .dot {
    width: 7px;
    height: 7px;
    background: var(--lr-green);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(31, 138, 95, 0.16);
    flex-shrink: 0;
}

.landing-refresh .home-hero .iq-title-desc {
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.62;
    color: var(--lr-ink-3);
    max-width: 46ch;
    margin-top: 24px !important;
}

.landing-refresh .home-hero .iq-title-box {
    margin-bottom: 0 !important;
}

/* Hero stat rail — hard-edged, ruled, tabular */
.landing-refresh .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 44px;
    border-top: 1px solid var(--lr-rule);
}

.landing-refresh .hero-stats .stat {
    padding: 22px 20px 0 0;
    border-right: 1px solid var(--lr-rule);
}

.landing-refresh .hero-stats .stat:last-child {
    border-right: 0;
}

.landing-refresh .hero-stats .stat:not(:first-child) {
    padding-left: 22px;
}

.landing-refresh .hero-stats .stat-num {
    display: block;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--lr-ink);
    font-variant-numeric: tabular-nums;
}

.landing-refresh .hero-stats .stat-label {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--lr-ink-4);
}

/* Hero visual — squared frame with an offset rule, no soft blob */
.landing-refresh .hero-visual,
.landing-refresh .home-hero .iq-banner-img {
    position: relative;
    border-radius: var(--lr-r-2);
}

.landing-refresh .hero-visual {
    position: relative;
    aspect-ratio: 4 / 3.25;
    background: var(--lr-paper-sunk);
    border: 1px solid var(--lr-rule);
}

.landing-refresh .hero-visual::after {
    content: '';
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1px solid var(--lr-primary-line);
    z-index: -1;
}

.landing-refresh .hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--lr-r-2);
    display: block;
}

/* Provider slider inside hero keeps square framing */
.landing-refresh .home-hero .iq-banner-img img,
.landing-refresh .home-hero .border-radius-12 {
    border-radius: var(--lr-r-1) !important;
}

.landing-refresh .home-hero .card-description {
    background: var(--lr-ink);
    border-radius: var(--lr-r-1) !important;
    padding: 12px 18px;
}

.landing-refresh .home-hero .card-description .heading {
    color: #fff;
    font-size: 15px;
    margin: 0;
}

.landing-refresh .home-hero .rating-text {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1199px) {
    .landing-refresh .hero-stats {
        margin-bottom: 8px;
    }

    .landing-refresh .hero-visual::after {
        display: none;
    }
}

@media (max-width: 575px) {
    .landing-refresh .hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .landing-refresh .hero-stats .stat:nth-child(2) {
        border-right: 0;
    }

    .landing-refresh .hero-stats .stat:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid var(--lr-rule);
        padding-left: 0;
        margin-top: 4px;
    }
}

/* --------------------------------------------------------------------------
   6. Hero search — clean, balanced console (compact and sharp, not a bulky pill)
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .search-box-wrapper,
.landing-refresh .home-hero .iq-search-box {
    margin-top: 28px;
}

.landing-refresh .home-hero .search-box-wrapper {
    background: var(--lr-paper-raised);
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    padding: 0;
    overflow: visible;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    max-width: 580px;
}

.landing-refresh .home-hero .search-box-wrapper:focus-within {
    border-color: var(--lr-primary);
    box-shadow: 0 0 0 3px var(--lr-primary-soft);
}

.landing-refresh .location-search input,
.landing-refresh .home-hero input[type="text"],
.landing-refresh .home-hero input[type="search"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--lr-ink) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.5;
    box-shadow: none !important;
}

.landing-refresh .location-search input::placeholder,
.landing-refresh .home-hero input::placeholder {
    color: var(--lr-ink-4) !important;
    font-weight: 400;
}

/* The hero search is a live-search: there is no submit button in the markup.
   The only button[type=submit] here belongs to the location modal, so scope
   the solid treatment to it rather than to a phantom search button. */
.landing-refresh .home-hero .modal button[type="submit"] {
    border-radius: var(--lr-r-1) !important;
    background: var(--lr-ink);
    color: var(--lr-paper);
    border: 0;
    padding: 12px 26px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease;
}

.landing-refresh .home-hero .modal button[type="submit"]:hover {
    background: var(--lr-primary);
    color: #fff;
}

/* Trust line under the search console */
.landing-refresh .hero-trust-line {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--lr-ink-4);
    display: flex;
    align-items: center;
    gap: 9px;
}

.landing-refresh .hero-trust-line svg {
    flex-shrink: 0;
    color: var(--lr-green);
}

/* ==========================================================================
   7. CATEGORIES — flat ruled tiles on a shared grid, zero rounding
   ========================================================================== */
.landing-refresh .home-categories {
    background: var(--lr-paper);
    border-bottom: 1px solid var(--lr-rule);
}

/* Collapse bootstrap gutters into a single hairline grid */
.landing-refresh .home-categories .row {
    margin: 0;
    border-top: 1px solid var(--lr-rule);
    border-left: 1px solid var(--lr-rule);
}

.landing-refresh .home-categories .row > .col,
.landing-refresh .home-categories .row > [class*="col-"] {
    padding: 0;
    border-right: 1px solid var(--lr-rule);
    border-bottom: 1px solid var(--lr-rule);
}

.landing-refresh .home-categories .card,
.landing-refresh .category-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100%;
}

.landing-refresh .home-categories .card {
    transition: background-color 0.26s var(--lr-ease);
}

.landing-refresh .home-categories a:hover .card {
    background: var(--lr-paper-sunk) !important;
}

.landing-refresh .category-card {
    padding: 38px 26px 34px !important;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

/* Category icon: square plate, tinted, flips to ink on hover */
.landing-refresh .category-card .img-bg {
    width: 62px;
    height: 62px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--lr-primary-soft);
    border: 1px solid var(--lr-primary-line);
    border-radius: var(--lr-r-1) !important;
    margin-bottom: 22px;
    transition: background-color 0.26s var(--lr-ease), border-color 0.26s var(--lr-ease);
}

.landing-refresh .home-categories a:hover .img-bg {
    background: var(--lr-primary);
    border-color: var(--lr-primary);
}

.landing-refresh .category-card .img-bg img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: filter 0.26s var(--lr-ease);
}

.landing-refresh .home-categories a:hover .img-bg img {
    filter: brightness(0) invert(1);
}

.landing-refresh .category-card .categories-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lr-ink);
    margin: 0 0 8px !important;
}

.landing-refresh .category-card .categories-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--lr-ink-3);
    margin: 0;
}

/* Corner arrow that appears on hover */
.landing-refresh .category-card::after {
    content: '↗';
    position: absolute;
    top: 26px;
    right: 24px;
    font-size: 17px;
    color: var(--lr-primary-ink);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 0.24s var(--lr-ease), transform 0.24s var(--lr-ease);
}

.landing-refresh .home-categories a:hover .category-card::after {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================================================
   8. SERVICE CARDS — squared, ruled, price-forward
   ========================================================================== */
.landing-refresh .our-service {
    background: var(--lr-paper-sunk) !important;
    border-bottom: 1px solid var(--lr-rule);
}

.landing-refresh .service-box-card {
    background: var(--lr-paper-raised) !important;
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1) !important;
    padding: 14px 14px 20px;
    margin-bottom: 12px !important;
    height: 100%;
    transition: border-color 0.26s var(--lr-ease), transform 0.26s var(--lr-ease),
        box-shadow 0.26s var(--lr-ease);
}

.landing-refresh .service-box-card:hover {
    border-color: var(--lr-rule-ink);
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 0 var(--lr-primary-soft);
}

.landing-refresh .service-box-card .iq-image {
    overflow: hidden;
    border-radius: var(--lr-r-1);
    background: var(--lr-paper-sunk);
}

.landing-refresh .service-box-card .service-img {
    border-radius: var(--lr-r-1) !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s var(--lr-ease);
}

.landing-refresh .service-box-card:hover .service-img {
    transform: scale(1.045);
}

.landing-refresh .service-box-card .service-heading {
    margin-top: 18px !important;
    padding: 0 4px !important;
}

.landing-refresh .service-box-card .service-title {
    font-size: 16.5px !important;
    font-weight: 700;
    letter-spacing: -0.024em;
    color: var(--lr-ink);
    line-height: 1.35;
    transition: color 0.2s ease;
}

.landing-refresh .service-box-card:hover .service-title {
    color: var(--lr-primary-ink);
}

.landing-refresh .service-box-card .price-content {
    padding: 0 4px !important;
    margin-top: 10px !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.landing-refresh .service-box-card .price-content li {
    font-size: 17px !important;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--lr-ink) !important;
    font-variant-numeric: tabular-nums;
}

.landing-refresh .service-box-card .price-content li.service-price {
    font-size: 13px !important;
    font-weight: 500;
    color: var(--lr-ink-4) !important;
}

/* Provider row divided by a hairline */
.landing-refresh .service-box-card .service-user-name {
    font-size: 13.5px !important;
    font-weight: 600;
    color: var(--lr-ink-2);
}

.landing-refresh .service-box-card > .mt-3 {
    margin-top: 16px !important;
    padding: 14px 4px 0;
    border-top: 1px solid var(--lr-rule);
}

.landing-refresh .service-box-card .avatar-24 {
    border-radius: var(--lr-r-1) !important;
    border: 1px solid var(--lr-rule);
}

/* Wishlist — square chip pinned to the image corner */
.landing-refresh .serv-whishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lr-paper-raised);
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1);
    color: var(--lr-ink-3) !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 3;
}

.landing-refresh .serv-whishlist:hover {
    background: var(--lr-ink);
    border-color: var(--lr-ink);
    color: #fff !important;
}

.landing-refresh .online-service {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lr-green);
    box-shadow: 0 0 0 3px rgba(31, 138, 95, 0.22);
    z-index: 3;
}

/* ==========================================================================
   9. EMPTY & LOADING STATES — designed, not bare text
   ========================================================================== */
.landing-refresh .lr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 62px 28px;
    border: 1px dashed var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
    background: var(--lr-paper);
}

.landing-refresh .lr-empty .lr-empty-mark {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
    color: var(--lr-ink-4);
    margin-bottom: 18px;
}

.landing-refresh .lr-empty .lr-empty-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lr-ink-2);
    margin: 0 0 6px;
}

.landing-refresh .lr-empty .lr-empty-text {
    font-size: 13.5px;
    color: var(--lr-ink-4);
    margin: 0;
    max-width: 42ch;
}

/* Vue replaces the custom-element tags on mount, so these must target the
   rendered result: a bare <span class="mt-2 text-center"> inside the
   component's <section>, or a lone <span> in the categories .row. */
.landing-refresh section > span.text-center,
.landing-refresh .home-categories .row > span,
.landing-refresh .our-service section > span,
.landing-refresh .landing-refresh-empty {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    grid-column: 1 / -1;
    min-height: 190px;
    margin: 0 !important;
    padding: 54px 28px;
    border: 1px dashed var(--lr-rule-strong);
    border-radius: var(--lr-r-2);
    background: var(--lr-paper);
    color: var(--lr-ink-4);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

/* A quiet mark above the message, drawn in CSS so no markup change is needed */
.landing-refresh section > span.text-center::before,
.landing-refresh .home-categories .row > span::before,
.landing-refresh .our-service section > span::before {
    content: '';
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
    background:
        linear-gradient(currentColor, currentColor) center/13px 1.5px no-repeat;
    opacity: 0.55;
}

/* The categories empty row must not inherit the hairline tile grid */
.landing-refresh .home-categories .row:has(> span) {
    border: 0 !important;
    margin-top: 0 !important;
}

/* Shimmer placeholders adopt the squared language */
.landing-refresh .shimmer,
.landing-refresh [class*="shimmer"] {
    border-radius: var(--lr-r-1) !important;
}

/* ==========================================================================
   10. PROVIDER CTA — inked full-bleed panel with a rule grid
   ========================================================================== */
.landing-refresh .home-provider {
    background: var(--lr-ink) !important;
    position: relative;
    padding: clamp(72px, 8vw, 120px) 0;
    border-radius: 0;
    overflow: hidden;
}

[data-bs-theme="dark"] .landing-refresh .home-provider,
body.dark .landing-refresh .home-provider {
    background: #08070c !important;
    border-top: 1px solid var(--lr-rule);
    border-bottom: 1px solid var(--lr-rule);
}

.landing-refresh .home-provider::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: calc(100% / 8) 92px;
    pointer-events: none;
}

.landing-refresh .home-provider .container {
    position: relative;
    z-index: 2;
}

.landing-refresh .home-provider h2 {
    color: #fff !important;
    font-size: clamp(32px, 3.9vw, 56px);
    letter-spacing: -0.042em;
    line-height: 1.04;
}

.landing-refresh .home-provider .iq-title-desc,
.landing-refresh .home-provider p {
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 16.5px;
    max-width: 58ch;
    margin-inline: auto;
}

.landing-refresh .home-provider .lr-eyebrow {
    color: rgba(255, 255, 255, 0.5);
    justify-content: center;
}

.landing-refresh .home-provider .lr-eyebrow::before {
    color: #a3a4ee;
}

.landing-refresh .home-provider .lr-eyebrow::after {
    background: rgba(255, 255, 255, 0.24);
}

/* Contact actions — one solid, one ghost */
.landing-refresh .home-provider .btn-contact-primary,
.landing-refresh .home-provider .contact-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 26px;
    border-radius: var(--lr-r-1);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background-color 0.22s ease, color 0.22s ease,
        border-color 0.22s ease, transform 0.24s var(--lr-ease);
}

/* The chip is white in BOTH themes (it sits on the always-inked provider
   panel), so its label must use a literal dark value, not --lr-ink. */
.landing-refresh .home-provider .btn-contact-primary {
    background: #fff;
    color: #14131c;
    border: 1px solid #fff;
}

.landing-refresh .home-provider .btn-contact-primary span,
.landing-refresh .home-provider .btn-contact-primary svg {
    color: #14131c;
}

.landing-refresh .home-provider .btn-contact-primary:hover {
    background: var(--lr-primary);
    border-color: var(--lr-primary);
    transform: translateY(-2px);
}

.landing-refresh .home-provider .btn-contact-primary:hover span,
.landing-refresh .home-provider .btn-contact-primary:hover svg {
    color: #fff;
}

.landing-refresh .home-provider .contact-phone-link {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.landing-refresh .home-provider .contact-phone-link span,
.landing-refresh .home-provider .contact-phone-link svg {
    color: #fff;
}

.landing-refresh .home-provider .contact-phone-link:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .landing-refresh .home-provider .provider {
        display: none !important;
    }
}

/* ==========================================================================
   11. TESTIMONIALS / TRUST
   ========================================================================== */
.landing-refresh .home-testimonials {
    background: var(--lr-paper) !important;
    border-bottom: 1px solid var(--lr-rule);
}

.landing-refresh .rating-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: var(--lr-paper-raised);
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
}

.landing-refresh .rating-summary-pill .rating-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--lr-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.landing-refresh .rating-summary-pill .rating-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--lr-ink-4);
    padding-left: 14px;
    border-left: 1px solid var(--lr-rule);
}

.landing-refresh .testimonial-card,
.landing-refresh .iq-testimonial-card {
    background: var(--lr-paper-raised);
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-2) !important;
    padding: 30px;
}

/* ==========================================================================
   12. APP DOWNLOAD — inked panel
   ========================================================================== */
.landing-refresh .home-app-download {
    background: var(--lr-primary) !important;
    border-radius: var(--lr-r-3) !important;
    position: relative;
}

.landing-refresh .home-app-download h2 {
    color: #fff !important;
    letter-spacing: -0.042em;
}

.landing-refresh .home-app-download p {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 16.5px;
    max-width: 48ch;
}

.landing-refresh .home-app-download .app-link {
    display: inline-block;
    margin-top: 30px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--lr-r-1);
    padding: 2px;
    transition: transform 0.24s var(--lr-ease), border-color 0.24s var(--lr-ease);
}

.landing-refresh .home-app-download .app-link:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.6);
}

.landing-refresh .home-app-download .app-link img {
    border-radius: var(--lr-r-1);
    display: block;
}

/* ==========================================================================
   13. FEATURES / WORKFLOW — numbered ruled steps
   ========================================================================== */
.landing-refresh .home-features {
    background: var(--lr-paper);
}

.landing-refresh .home-video-wrapper img {
    border-radius: var(--lr-r-2) !important;
    border: 1px solid var(--lr-rule);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Keep only the circular play button visible. */
.landing-refresh .iq-video-icon .iq-video {
    width: 64px;
    height: 64px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    border: 0;
    transition: transform 0.24s var(--lr-ease);
}

.landing-refresh .iq-video-icon .iq-video:hover {
    background: transparent;
    transform: scale(1.06);
}

.landing-refresh .iq-video-icon .iq-video a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
}

.landing-refresh .iq-video-icon .iq-video .icon {
    color: #fff;
    line-height: 0;
}

/* Remove legacy pulse rings / white discs from the old theme */
.landing-refresh .iq-video-icon::before,
.landing-refresh .iq-video-icon::after,
.landing-refresh .iq-video::before,
.landing-refresh .iq-video::after,
.landing-refresh .iq-popup-video::before,
.landing-refresh .iq-popup-video::after {
    display: none !important;
    content: none !important;
}

.landing-refresh .home-features .border-bottom {
    border-color: var(--lr-rule) !important;
}

.landing-refresh .iq-icon-box.with-numbers {
    gap: 24px !important;
    align-items: flex-start;
}

.landing-refresh .iq-icon-box .number {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1) !important;
    color: var(--lr-ink);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}

.landing-refresh .mb-4.pb-4:hover .iq-icon-box .number {
    background: var(--lr-ink) !important;
    border-color: var(--lr-ink);
    color: var(--lr-paper);
}

.landing-refresh .iq-icon-box .content h5 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.024em;
    color: var(--lr-ink);
}

.landing-refresh .iq-icon-box .content p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--lr-ink-3);
    margin-top: 7px !important;
}

/* ==========================================================================
   14. SWIPER controls
   ========================================================================== */
.landing-refresh .swiper-pagination-bullet {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--lr-rule-strong);
    opacity: 1;
    transition: background-color 0.24s ease, width 0.24s var(--lr-ease);
}

.landing-refresh .swiper-pagination-bullet-active {
    background: var(--lr-ink);
    width: 36px;
}

.landing-refresh .swiper-button-next,
.landing-refresh .swiper-button-prev {
    width: 42px;
    height: 42px;
    background: var(--lr-paper-raised);
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
    color: var(--lr-ink);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landing-refresh .swiper-button-next::after,
.landing-refresh .swiper-button-prev::after {
    font-size: 15px;
    font-weight: 700;
}

.landing-refresh .swiper-button-next:hover,
.landing-refresh .swiper-button-prev:hover {
    background: var(--lr-ink);
    border-color: var(--lr-ink);
    color: var(--lr-paper);
}

.landing-refresh .star-rating svg,
.landing-refresh .star-rating i {
    color: var(--lr-gold);
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .landing-refresh .home-hero::before {
        display: none;
    }
}

@media (max-width: 991px) {
    .landing-refresh {
        --lr-section-y: 60px;
    }

    .landing-refresh .category-card {
        padding: 30px 22px !important;
    }
}

@media (max-width: 575px) {
    .landing-refresh .container,
    .landing-refresh-footer .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .landing-refresh h1 {
        font-size: clamp(36px, 11vw, 46px);
    }

    .landing-refresh .service-box-card {
        padding: 12px 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-refresh *,
    .landing-refresh-footer *,
    .modern-landing-header * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   16. HEADER — a ruled masthead, flat and square
   ========================================================================== */
.modern-landing-header {
    font-family: var(--lr-font);
    position: relative;
    z-index: 1030;
    background: var(--lr-paper);
}

/* Top utility strip: inked band, tight and quiet */
.modern-landing-header .top-header {
    background: var(--lr-ink);
    padding: 9px 0;
    font-size: 13px;
}

.modern-landing-header .top-header .container {
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
}

.modern-landing-header .top-header a,
.modern-landing-header .top-header .text-white {
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.modern-landing-header .top-header a:hover,
.modern-landing-header .top-header .text-white:hover {
    color: #fff !important;
}

.modern-landing-header .top-header svg {
    opacity: 0.75;
}

.modern-landing-header .top-header .dropdown-menu {
    border-radius: var(--lr-r-1);
    border: 1px solid var(--lr-rule);
    background: var(--lr-paper-raised);
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.modern-landing-header .top-header .dropdown-item {
    border-radius: var(--lr-r-1);
    font-size: 14px;
    font-weight: 500;
    color: var(--lr-ink-2);
    padding: 8px 12px;
}

.modern-landing-header .top-header .dropdown-item:hover {
    background: var(--lr-paper-sunk);
    color: var(--lr-ink);
}

/* Main navbar */
.modern-landing-header .iq-navbar,
.modern-landing-header .modern-top-navbar {
    background: var(--lr-paper) !important;
    border-bottom: 1px solid var(--lr-rule);
    padding: 0 !important;
    box-shadow: none !important;
}

.modern-landing-header .navbar-inner {
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
}

.modern-landing-header .landing-header {
    min-height: 74px;
}

.modern-landing-header .navbar-brand img,
.modern-landing-header .header-logo img {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

/* Nav links — underline on the rule, never a pill */
.modern-landing-header #header-menu .nav-link,
.modern-landing-header .navbar-nav > li > .nav-link {
    position: relative;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--lr-ink-2) !important;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color 0.2s ease;
}

.modern-landing-header #header-menu .nav-link {
    padding: 26px 0 !important;
    margin: 0 18px;
}

.modern-landing-header #header-menu .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--lr-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s var(--lr-ease);
}

.modern-landing-header #header-menu .nav-link:hover,
.modern-landing-header #header-menu .nav-link.active,
.modern-landing-header #header-menu .active > .nav-link {
    color: var(--lr-ink) !important;
}

.modern-landing-header #header-menu .nav-link:hover::after,
.modern-landing-header #header-menu .nav-link.active::after,
.modern-landing-header #header-menu .active > .nav-link::after {
    transform: scaleX(1);
}

/* Right-side actions */
.modern-landing-header .right-panel .navbar-nav {
    gap: 8px;
}

.modern-landing-header .change-mode,
.modern-landing-header #wishlist {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1) !important;
    color: var(--lr-ink-2) !important;
    background: transparent !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modern-landing-header .change-mode::after,
.modern-landing-header #wishlist::after {
    display: none !important;
}

.modern-landing-header .change-mode:hover,
.modern-landing-header #wishlist:hover {
    background: var(--lr-ink) !important;
    border-color: var(--lr-ink);
    color: var(--lr-paper) !important;
}

/* Only one theme icon visible at a time */
.modern-landing-header .mode-icons.dark-mode { display: none; }
[data-bs-theme="dark"] .modern-landing-header .mode-icons.dark-mode,
body.dark .modern-landing-header .mode-icons.dark-mode { display: inline-block; }
[data-bs-theme="dark"] .modern-landing-header .mode-icons.light-mode,
body.dark .modern-landing-header .mode-icons.light-mode { display: none; }

/* Nearby button — ghost square */
.modern-landing-header #nav-nearby-btn {
    background: transparent !important;
    border: 1px solid var(--lr-rule) !important;
    border-radius: var(--lr-r-1) !important;
    color: var(--lr-ink-2) !important;
    font-size: 13.5px !important;
    font-weight: 600;
    padding: 10px 15px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modern-landing-header #nav-nearby-btn:hover {
    background: var(--lr-paper-sunk) !important;
    border-color: var(--lr-rule-strong) !important;
    color: var(--lr-ink) !important;
}

/* Login — the single solid action in the bar */
.modern-landing-header .btn-login,
.modern-landing-header a[href*="login"].btn {
    background: var(--lr-ink) !important;
    border: 1px solid var(--lr-ink) !important;
    border-radius: var(--lr-r-1) !important;
    color: var(--lr-paper) !important;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: -0.005em;
    padding: 11px 24px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.modern-landing-header .btn-login:hover,
.modern-landing-header a[href*="login"].btn:hover {
    background: var(--lr-primary) !important;
    border-color: var(--lr-primary) !important;
    color: #fff !important;
}

/* Avatar dropdown */
.modern-landing-header .navbar-nav .dropdown-menu {
    border-radius: var(--lr-r-1);
    border: 1px solid var(--lr-rule);
    background: var(--lr-paper-raised);
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.modern-landing-header .navbar-nav .dropdown-item {
    border-radius: var(--lr-r-1);
    font-size: 14px;
    color: var(--lr-ink-2);
    padding: 9px 12px;
}

.modern-landing-header .navbar-nav .dropdown-item:hover {
    background: var(--lr-paper-sunk);
    color: var(--lr-ink);
}

.modern-landing-header img.avatar-40,
.modern-landing-header .user-avatar img {
    border-radius: var(--lr-r-1) !important;
    border: 1px solid var(--lr-rule);
}

/* Mobile toggle: square, not a pill */
.modern-landing-header .modern-mobile-toggle {
    border-radius: var(--lr-r-1) !important;
    background: transparent !important;
    border: 1px solid var(--lr-rule) !important;
    color: var(--lr-ink) !important;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile offcanvas panel */
.modern-landing-header .sidebar-mini,
.modern-landing-header .navbar-collapse.show,
.modern-landing-header #navbar_main {
    background: var(--lr-paper);
}

@media (max-width: 1199px) {
    .modern-landing-header #header-menu .nav-link {
        padding: 13px 0 !important;
        margin: 0;
        border-bottom: 1px solid var(--lr-rule);
    }

    .modern-landing-header #header-menu .nav-link::after {
        display: none;
    }

    .modern-landing-header .landing-header {
        min-height: 64px;
    }
}

/* ==========================================================================
   17. FOOTER — inked, ruled, gridded
   ========================================================================== */
.landing-refresh-footer,
footer.footer.landing-refresh-footer {
    font-family: var(--lr-font);
    background: var(--lr-ink) !important;
    color: #fff;
    position: relative;
    border-top: 1px solid var(--lr-rule);
}

[data-bs-theme="dark"] .landing-refresh-footer,
body.dark .landing-refresh-footer {
    background: #08070c !important;
}

.landing-refresh-footer .footer-container {
    padding-top: clamp(56px, 6vw, 84px);
    padding-bottom: 40px;
}

/* Contact strip: three ruled cells, no card chrome */
.landing-refresh-footer .footer-top-strip {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 62px;
}

.landing-refresh-footer .footer-top-strip .row {
    margin: 0;
}

.landing-refresh-footer .footer-top-strip .row > [class*="col-"] {
    padding: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.landing-refresh-footer .footer-top-strip .row > [class*="col-"]:last-child {
    border-right: 0;
}

.landing-refresh-footer .footer-highlight-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 26px 28px;
    height: 100%;
    align-items: flex-start;
    gap: 16px;
    transition: background-color 0.24s var(--lr-ease);
}

.landing-refresh-footer .footer-highlight-card:hover {
    background: rgba(255, 255, 255, 0.035);
    transform: none;
    box-shadow: none;
    border: 0;
}

.landing-refresh-footer .highlight-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--lr-r-1);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.landing-refresh-footer .highlight-icon.trust-icon {
    background: transparent;
    color: var(--lr-green);
    border-color: rgba(53, 201, 141, 0.4);
}

.landing-refresh-footer .footer-highlight-card:hover .highlight-icon {
    background: #fff;
    border-color: #fff;
    color: var(--lr-ink);
    box-shadow: none;
}

.landing-refresh-footer .highlight-label {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 5px;
}

.landing-refresh-footer .highlight-val {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.landing-refresh-footer .highlight-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 5px;
}

/* Brand column */
.landing-refresh-footer .footer-logo img {
    max-height: 42px;
    filter: none;
}

.landing-refresh-footer .footer-desc {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 14.5px;
    line-height: 1.72;
    max-width: 38ch;
}

.landing-refresh-footer .readmore-btn {
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 3px;
    margin-top: 12px;
}

.landing-refresh-footer .readmore-btn:hover {
    color: #fff !important;
    border-color: #fff;
    text-decoration: none !important;
    transform: none;
}

.landing-refresh-footer .social-heading {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 12px;
}

.landing-refresh-footer .footer-social-list {
    gap: 10px !important;
    padding: 0;
}

.landing-refresh-footer .footer-social-list > li {
    display: flex;
    padding: 0;
    margin: 0;
}

.landing-refresh-footer .footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: #e8e6f2 !important;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landing-refresh-footer .footer-social-btn:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #201e35 !important;
    transform: none;
    box-shadow: none;
}

.landing-refresh-footer .footer-social-btn:focus-visible {
    outline: 2px solid #b8b2ff;
    outline-offset: 4px;
}

.landing-refresh-footer .footer-social-btn img {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-width: none;
    height: 24px;
    object-fit: contain;
    filter: none !important;
    opacity: 1;
}

/* Give the circular Facebook mark equal visual weight. */
.landing-refresh-footer .footer-social-btn img[src$="/facebook.webp"] {
    height: 28px;
}

/* Match the visible 24px logo height, excluding YouTube's transparent padding. */
.landing-refresh-footer .footer-social-btn img[src$="/youtube.webp"] {
    width: auto;
    height: 44.56px;
}

/* Nav columns */
.landing-refresh-footer .footer-col-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 20px;
}

.landing-refresh-footer .footer-col-title::after {
    display: none;
}

.landing-refresh-footer .footer-nav-list {
    gap: 0;
}

.landing-refresh-footer .footer-nav-link {
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 14.5px;
    font-weight: 500;
    padding: 7px 0;
    transition: color 0.2s ease, padding-left 0.24s var(--lr-ease);
}

.landing-refresh-footer .footer-link-arrow {
    display: none;
}

.landing-refresh-footer .footer-nav-link:hover {
    color: #fff !important;
    transform: none;
    padding-left: 8px;
}

.landing-refresh-footer .footer-view-all-link {
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-refresh-footer .footer-view-all-link:hover {
    transform: none;
    text-decoration: underline;
}

/* Support box */
.landing-refresh-footer .footer-support-box {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--lr-r-1);
}

.landing-refresh-footer .live-status-dot {
    background: var(--lr-green);
    box-shadow: 0 0 0 3px rgba(53, 201, 141, 0.2);
}

.landing-refresh-footer .support-box-title {
    color: #fff;
    font-size: 13px;
}

.landing-refresh-footer .support-box-text {
    color: rgba(255, 255, 255, 0.5);
}

/* Service chips */
.landing-refresh-footer .footer-service-chip {
    border-radius: var(--lr-r-1);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.landing-refresh-footer .footer-service-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.28);
    transform: none;
    box-shadow: none;
}

.landing-refresh-footer .footer-service-thumb,
.landing-refresh-footer .footer-service-icon-placeholder {
    border-radius: var(--lr-r-1);
}

.landing-refresh-footer .footer-service-name {
    color: rgba(255, 255, 255, 0.78);
}

/* Bottom bar */
.landing-refresh-footer .footer-bottom-bar {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 22px 0;
}

.landing-refresh-footer .footer-copyright,
.landing-refresh-footer .footer-trust-badge,
.landing-refresh-footer .footer-back-link {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 13px;
}

.landing-refresh-footer .footer-copyright-link {
    color: #fff;
}

.landing-refresh-footer .footer-copyright-link:hover {
    color: #fff;
}

.landing-refresh-footer .footer-back-link:hover {
    color: #fff !important;
    transform: none;
}

.landing-refresh-footer .footer-bar-divider {
    color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {
    .landing-refresh-footer .footer-top-strip .row > [class*="col-"] {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .landing-refresh-footer .footer-top-strip .row > [class*="col-"]:last-child {
        border-bottom: 0;
    }
}

/* Back-to-top: square plate */
#back-to-top .top {
    border-radius: 12px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #14131c !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    transition: background-color 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
    bottom: 26px !important;
    right: 26px !important;
}

#back-to-top .top svg {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    overflow: visible;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px;
    opacity: 1;
}

#back-to-top .top svg path {
    stroke: #fff !important;
    fill: none !important;
    stroke-width: 2.5;
}

#back-to-top .top:hover {
    background: var(--bs-primary, #5f60b9) !important;
    transform: translateY(-3px) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   18. Section-header variants & on-color inversions
   ========================================================================== */

/* Split variant: title left, lede right on its own column, baseline-aligned */
.landing-refresh .lr-sec-head--split {
    align-items: end;
    gap: 40px;
}

.landing-refresh .lr-sec-head--split .lr-sec-lede {
    margin-top: 0;
    padding-bottom: 4px;
    max-width: 46ch;
}

@media (max-width: 767px) {
    .landing-refresh .lr-sec-head--split .lr-sec-lede {
        padding-bottom: 0;
    }
}

/* Eyebrow on the inked provider panel and the primary app panel */
.landing-refresh .home-app-download .lr-eyebrow {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.landing-refresh .home-app-download .lr-eyebrow::before {
    color: #fff;
}

.landing-refresh .home-app-download .lr-eyebrow::after {
    background: rgba(255, 255, 255, 0.3);
}

/* The provider CTA eyebrow is centered with its title box */
.landing-refresh .home-provider .iq-title-box .lr-eyebrow {
    justify-content: center;
    margin-bottom: 18px;
}

/* Testimonial lede sits under the rating measure */
.landing-refresh .home-testimonials .lr-sec-lede {
    max-width: 58ch;
}

/* The centered testimonial head has no trailing rule — the rating block follows */
.landing-refresh .home-testimonials .lr-sec-head.is-centered {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 26px;
}

/* Recently-viewed slider sits directly under its rule */
.landing-refresh .home-features .lr-sec-head {
    margin-bottom: 0;
}

/* ==========================================================================
   19. Line-clamp corrections for the larger editorial type scale
   The legacy .line-count-* clamps were tuned to the old, smaller headings and
   now truncate mid-phrase. Headlines get room to breathe; body copy keeps a
   clamp so long CMS strings still cannot break the layout.
   ========================================================================== */
.landing-refresh .hero-title.line-count-3,
.landing-refresh .lr-sec-head h2.line-count-1,
.landing-refresh .lr-sec-head h2.line-count-2,
.landing-refresh .lr-sec-head h3.line-count-1,
.landing-refresh .lr-sec-head h3.line-count-2,
.landing-refresh .home-provider h2.line-count-2,
.landing-refresh .home-app-download h2.line-count-2 {
    display: block;
    -webkit-line-clamp: none;
    -webkit-box-orient: horizontal;
    overflow: visible;
    text-overflow: clip;
}

/* Body copy keeps a clamp, just a roomier one */
.landing-refresh .home-hero .iq-title-desc.line-count-3 {
    -webkit-line-clamp: 4;
}

.landing-refresh .lr-sec-lede.line-count-3 {
    -webkit-line-clamp: 3;
}

/* ==========================================================================
   20. Category grid — keep the hairline frame only when tiles exist
   The shimmer/loading row is not a real grid of tiles, so the shared rules
   would otherwise draw across empty space.
   ========================================================================== */
.landing-refresh .home-categories .row:not(:has(.category-card)) {
    border: 0;
}

.landing-refresh .home-categories .row:not(:has(.category-card)) > .col,
.landing-refresh .home-categories .row:not(:has(.category-card)) > [class*="col-"] {
    border: 0;
    padding: 0 12px;
}

/* Shimmer blocks read as quiet placeholders, not as content */
.landing-refresh .home-categories .row:not(:has(.category-card)) {
    gap: 0;
    row-gap: 28px;
}

/* ==========================================================================
   21. Chrome that must NOT invert with the theme
   The top utility strip is an inked band by design in both themes, so it
   cannot use --lr-ink (which flips to near-white in dark).
   ========================================================================== */
.modern-landing-header .top-header {
    background: #14131c;
}

[data-bs-theme="dark"] .modern-landing-header .top-header,
body.dark .modern-landing-header .top-header {
    background: #08070c;
    border-bottom: 1px solid #2a2833;
}

/* Login button and back-to-top are inked in light, inverted in dark */
[data-bs-theme="dark"] .modern-landing-header .btn-login,
[data-bs-theme="dark"] .modern-landing-header a[href*="login"].btn,
body.dark .modern-landing-header .btn-login,
body.dark .modern-landing-header a[href*="login"].btn {
    background: #f4f3f7 !important;
    border-color: #f4f3f7 !important;
    color: #14131c !important;
}

[data-bs-theme="dark"] .modern-landing-header .btn-login:hover,
[data-bs-theme="dark"] .modern-landing-header a[href*="login"].btn:hover,
body.dark .modern-landing-header .btn-login:hover,
body.dark .modern-landing-header a[href*="login"].btn:hover {
    background: var(--lr-primary) !important;
    border-color: var(--lr-primary) !important;
    color: #fff !important;
}

/* Global announcement notice — themed, no hardcoded inline colors */
.global-notice {
    padding: 10px 16px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    background: #fdf6e3;
    color: #7a5d12;
    border-bottom: 1px solid #f0e3c0;
}

[data-bs-theme="dark"] .global-notice,
body.dark .global-notice {
    background: #221d10;
    color: #e8c877;
    border-bottom-color: #3a3120;
}

/* The dark-mode service shimmer should sit on the sunken surface, not light grey */
[data-bs-theme="dark"] .landing-refresh .placeholder,
body.dark .landing-refresh .placeholder {
    background-color: #2a2833;
    opacity: 1;
}

/* Cookie banner follows the page surfaces */
[data-bs-theme="dark"] .cookie-notice,
[data-bs-theme="dark"] #cookie-notice,
body.dark .cookie-notice,
body.dark #cookie-notice {
    background: #16151d;
    color: #c3c0cf;
    border-top: 1px solid #2a2833;
}

/* ==========================================================================
   22. UI corrections — round two
   ========================================================================== */

/* --------------------------------------------------------------------------
   22a. Hero: close the empty gap on the right column
   The offset accent frame was drawn with a negative-inset pseudo element that
   reserved dead space above the image. Anchor the visual to the text block
   instead, and let the accent sit behind the image rather than beside it.
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .row {
    align-items: center;
}

.landing-refresh .hero-visual {
    aspect-ratio: 4 / 3;
    width: 100%;
    margin: 0;
    background: var(--lr-paper-sunk);
    border: 1px solid var(--lr-rule);
    overflow: hidden;
}

/* Accent frame tucked behind the image, no reserved gap */
.landing-refresh .hero-visual::after {
    inset: auto -14px -14px auto;
    width: 62%;
    height: 62%;
    border: 1px solid var(--lr-primary-line);
    border-radius: var(--lr-r-2);
    z-index: -1;
}

@media (min-width: 1200px) {
    .landing-refresh .home-hero .col-xl-6:last-child {
        padding-left: 8px;
    }
}

/* --------------------------------------------------------------------------
   22b. Hide the stray duplicated title under the search console
   LocationSearch.vue prints the section title as an <h6> label ahead of the
   popular-category chips. The chips are the useful part; the echoed title is
   not, and it reads as a duplicate of the H1 directly above it.
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .categories-list > li:first-child > h6 {
    display: none;
}

/* Popular-category chips: light, tappable, clearly secondary to the search */
.landing-refresh .home-hero .categories-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px !important;
}

.landing-refresh .home-hero .categories-list > li {
    padding: 0 !important;
}

.landing-refresh .home-hero .categories-list a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1);
    font-size: 13px;
    font-weight: 600;
    color: var(--lr-ink-2);
    background: var(--lr-paper-raised);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.landing-refresh .home-hero .categories-list a:hover {
    border-color: var(--lr-rule-ink);
    background: var(--lr-paper-sunk);
    color: var(--lr-ink);
}

/* --------------------------------------------------------------------------
   22c. Empty states — style the Vue-rendered bare strings
   These components emit a lone text node / <span> with no wrapper class, so
   the selectors have to target the section elements directly.
   -------------------------------------------------------------------------- */
/* The categories empty row must not inherit the hairline tile grid */
.landing-refresh .home-categories .row:has(> span) {
    border: 0 !important;
    margin-top: 0 !important;
}

.landing-refresh .home-categories .row:has(> span) > span {
    border: 1px dashed var(--lr-rule-strong);
}

/* --------------------------------------------------------------------------
   22d. Provider portraits — one consistent shape and scale
   The stock markup mixes circles and rectangles at differing sizes.
   -------------------------------------------------------------------------- */
.landing-refresh .home-provider .provider {
    width: 104px !important;
    height: 128px !important;
    object-fit: cover;
    border-radius: var(--lr-r-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    filter: grayscale(0.3);
    opacity: 0.9;
}

@media (max-width: 1399px) {
    .landing-refresh .home-provider .provider {
        width: 84px !important;
        height: 104px !important;
    }
}

/* --------------------------------------------------------------------------
   22e. Footer contact icons — give the glyphs real size and alignment
   -------------------------------------------------------------------------- */
.landing-refresh-footer .highlight-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 16px;
    line-height: 1;
}

.landing-refresh-footer .highlight-icon i,
.landing-refresh-footer .footer-social-btn i {
    font-size: inherit;
    line-height: 1;
    display: inline-block;
}

.landing-refresh-footer .footer-social-btn {
    font-size: 15px;
    line-height: 1;
}

/* Bottom-bar inline icons should not collapse to slivers */
.landing-refresh-footer .footer-trust-badge i,
.landing-refresh-footer .footer-back-link i,
.landing-refresh-footer .highlight-sub i {
    font-size: 12px;
    line-height: 1;
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   22f. Soften the remaining hard edges to match the new radius scale
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .search-box-wrapper {
    border-radius: var(--lr-r-2);
}

.landing-refresh .home-app-download {
    border-radius: var(--lr-r-3) !important;
}

.landing-refresh .home-video-wrapper img {
    border-radius: var(--lr-r-2) !important;
}

.landing-refresh .service-box-card .iq-image,
.landing-refresh .service-box-card .service-img {
    border-radius: var(--lr-r-1) !important;
}

.landing-refresh .lr-empty {
    border-radius: var(--lr-r-2);
}

/* --------------------------------------------------------------------------
   22g. Hero popular-category chips (rendered by LocationSearch.vue)
   The component prints the section title as an <h6> label ahead of the chips;
   it duplicates the H1 directly above, so it is hidden. The chips stay.
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .categories-list > li:first-child > h6 {
    display: none;
}

.landing-refresh .home-hero .categories-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px !important;
}

.landing-refresh .home-hero .categories-list > li {
    padding: 0 !important;
}

.landing-refresh .home-hero .categories-list a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1);
    font-size: 13px;
    font-weight: 600;
    color: var(--lr-ink-2);
    background: var(--lr-paper-raised);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.landing-refresh .home-hero .categories-list a:hover {
    border-color: var(--lr-rule-ink);
    background: var(--lr-paper-sunk);
    color: var(--lr-ink);
}

/* The chip row sits under the search console with a little air */
.landing-refresh .home-hero .categories-list a::before {
    content: none;
}

/* ==========================================================================
   23. UI corrections — round three
   ========================================================================== */

/* --------------------------------------------------------------------------
   23a. Play button must center on the IMAGE, not on the padded column
   The wrapper carries pe-xl-5, so `top-50 start-50` of the column lands left
   of the image's true centre. Make the image its own positioning context.
   -------------------------------------------------------------------------- */
.landing-refresh .home-video-wrapper {
    display: block;
}

/* The image and its overlay now share a .home-video-frame positioning
   context (see index.blade.php), so the control centres on the artwork
   regardless of the column's padding at any breakpoint. */
.landing-refresh .home-video-frame {
    position: relative;
    line-height: 0;
}

.landing-refresh .home-video-frame > img {
    display: block;
    width: 100%;
}

.landing-refresh .home-video-wrapper .iq-popup-video {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.landing-refresh .home-video-frame .iq-video-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

.landing-refresh .home-hero .categories-list > li {
    padding: 0 !important;
}

.landing-refresh .home-hero .categories-list a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1);
    font-size: 13px;
    font-weight: 600;
    color: var(--lr-ink-2);
    background: var(--lr-paper-raised);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.landing-refresh .home-hero .categories-list a:hover {
    border-color: var(--lr-rule-ink);
    background: var(--lr-paper-sunk);
    color: var(--lr-ink);
}

/* --------------------------------------------------------------------------
   22c. Empty states — style the Vue-rendered bare strings
   These components emit a lone text node / <span> with no wrapper class, so
   the selectors have to target the section elements directly.
   -------------------------------------------------------------------------- */
/* The categories empty row must not inherit the hairline tile grid */
.landing-refresh .home-categories .row:has(> span) {
    border: 0 !important;
    margin-top: 0 !important;
}

.landing-refresh .home-categories .row:has(> span) > span {
    border: 1px dashed var(--lr-rule-strong);
}

/* --------------------------------------------------------------------------
   22d. Provider portraits — one consistent shape and scale
   The stock markup mixes circles and rectangles at differing sizes.
   -------------------------------------------------------------------------- */
.landing-refresh .home-provider .provider {
    width: 104px !important;
    height: 128px !important;
    object-fit: cover;
    border-radius: var(--lr-r-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    filter: grayscale(0.3);
    opacity: 0.9;
}

@media (max-width: 1399px) {
    .landing-refresh .home-provider .provider {
        width: 84px !important;
        height: 104px !important;
    }
}

/* --------------------------------------------------------------------------
   22e. Footer contact icons — give the glyphs real size and alignment
   -------------------------------------------------------------------------- */
.landing-refresh-footer .highlight-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 16px;
    line-height: 1;
}

.landing-refresh-footer .highlight-icon i,
.landing-refresh-footer .footer-social-btn i {
    font-size: inherit;
    line-height: 1;
    display: inline-block;
}

.landing-refresh-footer .footer-social-btn {
    font-size: 15px;
    line-height: 1;
}

/* Bottom-bar inline icons should not collapse to slivers */
.landing-refresh-footer .footer-trust-badge i,
.landing-refresh-footer .footer-back-link i,
.landing-refresh-footer .highlight-sub i {
    font-size: 12px;
    line-height: 1;
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   22f. Soften the remaining hard edges to match the new radius scale
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .search-box-wrapper {
    position: relative;
    border-radius: var(--lr-r-2);
}

.landing-refresh .home-app-download {
    border-radius: var(--lr-r-3) !important;
}

.landing-refresh .home-video-wrapper img {
    border-radius: var(--lr-r-2) !important;
}

.landing-refresh .service-box-card .iq-image,
.landing-refresh .service-box-card .service-img {
    border-radius: var(--lr-r-1) !important;
}

.landing-refresh .lr-empty {
    border-radius: var(--lr-r-2);
}

/* --------------------------------------------------------------------------
   22g. Hero popular-category chips (rendered by LocationSearch.vue)
   The component prints the section title as an <h6> label ahead of the chips;
   it duplicates the H1 directly above, so it is hidden. The chips stay.
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .categories-list > li:first-child > h6 {
    display: none;
}

.landing-refresh .home-hero .categories-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px !important;
}

.landing-refresh .home-hero .categories-list > li {
    padding: 0 !important;
}

.landing-refresh .home-hero .categories-list a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--lr-rule);
    border-radius: var(--lr-r-1);
    font-size: 13px;
    font-weight: 600;
    color: var(--lr-ink-2);
    background: var(--lr-paper-raised);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.landing-refresh .home-hero .categories-list a:hover {
    border-color: var(--lr-rule-ink);
    background: var(--lr-paper-sunk);
    color: var(--lr-ink);
}

/* The chip row sits under the search console with a little air */
.landing-refresh .home-hero .categories-list a::before {
    content: none;
}

/* ==========================================================================
   23. UI corrections — round three
   ========================================================================== */

/* --------------------------------------------------------------------------
   23a. Play button must center on the IMAGE, not on the padded column
   The wrapper carries pe-xl-5, so `top-50 start-50` of the column lands left
   of the image's true centre. Make the image its own positioning context.
   -------------------------------------------------------------------------- */
.landing-refresh .home-video-wrapper {
    display: block;
}

/* The image and its overlay now share a .home-video-frame positioning
   context (see index.blade.php), so the control centres on the artwork
   regardless of the column's padding at any breakpoint. */
.landing-refresh .home-video-frame {
    position: relative;
    line-height: 0;
}

.landing-refresh .home-video-frame > img {
    display: block;
    width: 100%;
}

.landing-refresh .home-video-wrapper .iq-popup-video {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.landing-refresh .home-video-frame .iq-video-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   23b. Footer contact strip — precise baseline & column alignment across all 3 items
   -------------------------------------------------------------------------- */
.landing-refresh-footer .footer-top-strip .row {
    margin: 0 !important;
    align-items: stretch !important;
}

.landing-refresh-footer .footer-top-strip .row > [class*="col-"] {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-refresh-footer .footer-top-strip .row > [class*="col-"]:last-child {
    border-right: 0 !important;
}

.landing-refresh-footer .footer-highlight-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 22px 26px !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.landing-refresh-footer .footer-highlight-card:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}

.landing-refresh-footer .highlight-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--lr-r-1) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landing-refresh-footer .highlight-icon.trust-icon {
    border-color: rgba(31, 138, 95, 0.45) !important;
    color: var(--lr-green) !important;
}

.landing-refresh-footer .footer-highlight-card:hover .highlight-icon {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--lr-ink) !important;
}

.landing-refresh-footer .highlight-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.landing-refresh-footer .highlight-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-bottom: 5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.landing-refresh-footer .highlight-val {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.landing-refresh-footer .highlight-sub {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.48) !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.landing-refresh-footer .highlight-sub i {
    font-size: 11px !important;
    line-height: 1 !important;
    margin-right: 2px !important;
    opacity: 0.8;
}

@media (max-width: 1199px) {
    .landing-refresh-footer .footer-highlight-card {
        padding: 18px 16px !important;
        gap: 12px !important;
    }

    .landing-refresh-footer .highlight-val {
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   23c. Hero search console — it is a live-search with NO submit button.
   Remove the phantom button styling and give the two fields a balanced,
   finished layout with a clear affordance on the right.
   -------------------------------------------------------------------------- */
.landing-refresh .home-hero .search-box-wrapper > div {
    width: 100%;
}

.landing-refresh .home-hero .location-search-block {
    width: 100%;
    align-items: center;
}

/* Location field: clean, compact share of the console */
.landing-refresh .home-hero .modal-location {
    flex: 0 0 auto;
    min-width: 175px;
    padding: 12px 16px !important;
    cursor: pointer;
    border-radius: var(--lr-r-1) 0 0 var(--lr-r-1);
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.landing-refresh .home-hero .modal-location:hover {
    background: var(--lr-paper-sunk);
}

/* Search field takes the remaining space */
.landing-refresh .home-hero .location-search {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
}

.landing-refresh .home-hero .location-search .form-group {
    position: static;
    margin: 0 !important;
    padding-left: 14px !important;
    border-left: 1px solid var(--lr-rule) !important;
    align-items: center;
    width: 100%;
}

.landing-refresh .home-hero .location-search .input-group-text {
    color: var(--lr-ink-4);
    padding: 0 8px 0 0 !important;
    display: flex;
    align-items: center;
}

.landing-refresh .home-hero .location-search input {
    padding: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    font-size: 14px;
}

/* Anchor live results below the console, outside the input's flex layout. */
.landing-refresh .home-hero .location-search .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    transform: none;
    z-index: 1000;
    background: var(--lr-paper-raised);
    border: 1px solid var(--lr-rule-strong);
    border-radius: var(--lr-r-1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.landing-refresh .home-hero .location-search-dropdown {
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
}

.landing-refresh .home-hero .location-search-dropdown .post-blog {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The magnifier reads as the action, so give it real presence */
.landing-refresh .home-hero .location-search .input-group-text svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--lr-ink-3);
    display: block;
}

.landing-refresh .home-hero .modal-location svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.landing-refresh .home-hero .modal-location svg path {
    stroke: var(--lr-ink-4);
}

.landing-refresh .home-hero .modal-location span {
    color: var(--lr-ink-2) !important;
    font-weight: 600;
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .landing-refresh .home-hero .search-box-wrapper .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
    }

    .landing-refresh .home-hero .location-search-block {
        flex-direction: column;
    }

    .landing-refresh .home-hero .modal-location {
        min-width: 0;
        border-radius: var(--lr-r-1) var(--lr-r-1) 0 0;
        border-bottom: 1px solid var(--lr-rule);
    }

    .landing-refresh .home-hero .location-search .form-group {
        padding-left: 0 !important;
        border-left: 0 !important;
    }
}

/* ==========================================================================
   24. Play control — exact optical centring
   The .iq-video-icon wrapper was sized by inline-block layout, so it carried
   line-box leading and inline whitespace around the 64px plate. Its box was
   therefore taller/wider than the plate, and centring the WRAPPER left the
   plate itself off-centre. Collapse the wrapper onto the plate exactly.
   ========================================================================== */
.landing-refresh .home-video-frame .iq-video-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* size the wrapper to the plate so its centre IS the plate's centre */
    width: 64px;
    height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0;          /* kill inline whitespace */
    line-height: 0;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto;
}

.landing-refresh .home-video-frame .iq-popup-video {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 2;
}

.landing-refresh .home-video-frame .iq-video {
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    flex: 0 0 64px;
}

.landing-refresh .home-video-frame .iq-video > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.landing-refresh .home-video-frame .iq-video .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    /* the glyph's own bearing sits ~2px right of the plate centre */
    margin-left: -1px;
}

.landing-refresh .home-video-frame .iq-video svg {
    display: block;
}