/* ============================================================
   BRAND LANDING — scoped styles (.brand-landing)

   Uses the theme's own design tokens and, wherever an equivalent
   component already exists (FAQ, why-choose cards, reviews), the
   theme's own classes — so landing pages are visually identical
   to the rest of the site and cannot drift from it.

   Every custom rule is scoped under .brand-landing.
   Colour vars carry literal fallbacks because this file is
   render-blocking while style.css (which defines :root) is deferred.
   ============================================================ */

.brand-landing {
    --bl-black: var(--color-black, #050505);
    --bl-dark: var(--color-dark, #0A0A0A);
    --bl-card: var(--color-card, #111111);
    --bl-darker: var(--color-darker, #080808);
    --bl-white: var(--color-white, #FFFFFF);
    --bl-g300: var(--color-gray-300, #D1D5DB);
    --bl-g400: var(--color-gray-400, #9CA3AF);
    --bl-g500: var(--color-gray-500, #6B7280);
    --bl-g800: var(--color-gray-800, #1F2937);
    --bl-line: rgba(255, 255, 255, 0.05);
    --bl-line-2: rgba(255, 255, 255, 0.08);
    --bl-line-3: rgba(255, 255, 255, 0.2);
    --bl-fill: rgba(255, 255, 255, 0.03);
    --bl-fill-h: rgba(255, 255, 255, 0.05);
    --bl-head: 'Syne', 'Syne Fallback', sans-serif;
    --bl-header-h: 6rem;   /* theme fixed .site-nav */
    --bl-anchor-h: 3.25rem;

    background: var(--bl-black);
    color: var(--bl-g400);
    padding-top: var(--bl-header-h);
}

/* ── Neutralize theme element defaults inside the wrapper ──
   :where() keeps specificity at zero so component classes always win. */
.brand-landing :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.brand-landing :where(h1, h2, h3, p, figure) { margin: 0; }
.brand-landing :where(a) { color: inherit; text-decoration: none; }
.brand-landing :where(img) { max-width: 100%; height: auto; display: block; }
.brand-landing :where(button) { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
.brand-landing :focus-visible { outline: 2px solid var(--bl-white); outline-offset: 2px; }

.bl-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── Shared layout primitives (theme rhythm) ── */
.bl-wrap {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.bl-section {
    padding: 5rem 0;
    border-bottom: 1px solid var(--bl-line);
}
.bl-section-black  { background: var(--bl-black); }
.bl-section-darker { background: var(--bl-darker); }
.bl-section-dark   { background: var(--bl-dark); }

.brand-landing [id] {
    scroll-margin-top: calc(var(--bl-header-h) + var(--bl-anchor-h) + 1rem);
}

/* ── Shared typography (mirrors .svc-* section headings) ── */
.bl-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bl-g500);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}
.bl-h2 {
    font-family: var(--bl-head);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bl-white);
    line-height: 1.15;
    margin-bottom: 3rem;
}
.bl-eyebrow.is-center,
.bl-h2.is-center { text-align: center; }
.bl-h2.is-center { margin-left: auto; margin-right: auto; }

/* ── Buttons (theme hero buttons, square, monochrome) ── */
.bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.25rem 2.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.bl-btn-primary { background: var(--bl-white); color: var(--color-black, #050505); }
.bl-btn-primary:hover { background: #e5e7eb; color: var(--color-black, #050505); }
.bl-btn-primary:active { transform: scale(0.97); }
.bl-btn-ghost { border: 1px solid var(--bl-line-3); color: var(--bl-white); }
.bl-btn-ghost:hover { background: var(--bl-white); color: var(--color-black, #050505); }
.bl-btn-ghost:active { transform: scale(0.97); }
.bl-btn svg { flex: none; }

/* ── Breadcrumbs ── */
.bl-breadcrumbs {
    background: var(--bl-darker);
    border-bottom: 1px solid var(--bl-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bl-breadcrumbs::-webkit-scrollbar { display: none; }
.bl-breadcrumbs ol {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.bl-breadcrumbs li { display: flex; align-items: center; gap: 0.75rem; }
.bl-breadcrumbs a { color: var(--bl-g500); transition: color 0.3s; }
.bl-breadcrumbs a:hover { color: var(--bl-white); }
.bl-breadcrumbs span { color: var(--bl-g500); }
.bl-breadcrumbs [aria-current="page"] { color: var(--bl-white); }
.bl-crumb-sep { color: var(--bl-g800) !important; }

/* ── Hero (mirrors .svc-hero treatment) ── */
.bl-hero {
    position: relative;
    background: var(--bl-black);
    overflow: hidden;
}
.bl-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.bl-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.85) 45%, rgba(5, 5, 5, 0.6) 100%);
    pointer-events: none;
}
.bl-hero-shade::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 8rem;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0), var(--bl-black));
}
.bl-hero-inner {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
}
.bl-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--bl-g400);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
}
.bl-hero-eyebrow::before {
    content: '';
    flex: none;
    width: 2.5rem;
    height: 1px;
    background: var(--bl-line-3);
}
.bl-h1 {
    font-family: var(--bl-head);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--bl-white);
    max-width: 22ch;
}
.bl-hero-sub {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--bl-g400);
    max-width: 36rem;
    margin-top: 1.5rem;
    border-left: 1px solid var(--bl-line-3);
    padding-left: 1.5rem;
}
.bl-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}
.bl-trustbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem 1.25rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--bl-line);
}
.bl-trustbar li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--bl-g300);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.bl-trustbar svg { flex: none; }

/* Hero booking form card (theme booking-status treatment) */
.bl-hero-form {
    background: var(--bl-dark);
    border: 1px solid var(--bl-line);
    padding: 2rem 1.5rem;
}
/* Beats the generic `.brand-landing [id]` anchor offset: the sticky anchor nav
   sits below the hero and never covers this form. */
.brand-landing [id].bl-hero-form { scroll-margin-top: calc(var(--bl-header-h) + 1rem); }
.bl-hero-form-title {
    font-family: var(--bl-head);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bl-white);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bl-line);
}

/* Booking form — critical subset.
   The full CF7 styling lives in style.css, which the theme defers. This form is
   above the fold on landing pages, so without these rules every step of the
   multi-step form would paint at once, unstyled, and then collapse. Mirrors
   style.css; keep the two in sync if the form markup changes. */
.brand-landing .cf7-form-wrap .form-step { display: none; }
.brand-landing .cf7-form-wrap .form-step.active { display: block; }
.brand-landing .cf7-form-wrap .step-title {
    font-family: var(--bl-head);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bl-white);
    margin-bottom: 0.75rem;
}
.brand-landing .cf7-form-wrap .form-step .form-group { display: flex; flex-direction: column; }
.brand-landing .cf7-form-wrap .form-step .form-label,
.brand-landing .cf7-form-wrap .form-step .form-label-static {
    font-size: 0.75rem;
    color: var(--bl-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.brand-landing .cf7-form-wrap .form-step .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--bl-g800);
    padding: 0.75rem 0;
    color: var(--bl-white);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
}
.brand-landing .cf7-form-wrap .step-nav { margin-top: 2.5rem; display: flex; justify-content: flex-end; }
.brand-landing .cf7-form-wrap .step-nav-split { justify-content: space-between; align-items: center; gap: 1.5rem; }
.brand-landing .cf7-form-wrap .step-next-btn,
.brand-landing .cf7-form-wrap .step-back-btn,
.brand-landing .cf7-form-wrap .wpcf7-submit {
    background: var(--bl-white);
    color: var(--color-black, #050505);
    border: none;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    cursor: pointer;
}

/* ── Intro ── */
.bl-intro-text {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--bl-g400);
    max-width: 60rem;
    border-left: 1px solid var(--bl-line-3);
    padding-left: 1.5rem;
}
.bl-intro-text p + p { margin-top: 1rem; }
.bl-intro-text strong, .bl-intro-text b { color: var(--bl-white); font-weight: 600; }
.bl-intro-text a {
    color: var(--bl-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}
.bl-intro-text a:hover { color: var(--bl-g300); }

/* ── Sticky anchor nav ── */
.bl-anchornav {
    position: sticky;
    top: var(--bl-header-h);
    z-index: 900;
    background: var(--bl-darker);
    border-bottom: 1px solid var(--bl-line);
}
.bl-anchornav-row { display: flex; align-items: center; justify-content: space-between; }
.bl-anchornav-links {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bl-anchornav-links::-webkit-scrollbar { display: none; }
.bl-anchornav-links a {
    padding: 1.125rem 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--bl-g500);
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color 0.3s, border-color 0.3s;
}
.bl-anchornav-links a:first-child { padding-left: 0; }
.bl-anchornav-links a:hover { color: var(--bl-white); }
.bl-anchornav-links a.is-active { color: var(--bl-white); border-bottom-color: var(--bl-white); }

/* ── Problem cards: theme .svc-why-card shell + icon ── */
.brand-landing .bl-card-icon {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.25rem;
    display: block;
}
.brand-landing .bl-card-icon svg { width: 1.75rem; height: 1.75rem; }

/* ── Service links grid ── */
.bl-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.bl-services-grid li { display: flex; }
.bl-service-card { flex: 1; }
.bl-service-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bl-dark);
    padding: 1.75rem 1.5rem;
    transition: background 0.3s;
    height: 100%;
}
.bl-service-card:hover { background: var(--bl-card); }
.bl-service-label {
    font-family: var(--bl-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bl-white);
}
.bl-service-label small {
    display: block;
    margin-top: 0.375rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bl-g500);
    transition: color 0.3s;
}
.bl-service-card:hover .bl-service-label small { color: var(--bl-g400); }
.bl-service-arrow {
    flex: none;
    display: inline-flex;
    color: var(--bl-white);
    opacity: 0.35;
    transition: opacity 0.3s, transform 0.3s;
}
.bl-service-card:hover .bl-service-arrow { opacity: 1; transform: translateX(3px); }

/* ── Brand grid (hub) ── */
.bl-brands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.bl-brand-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bl-fill);
    border: 1px solid var(--bl-line-2);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.3s, background 0.3s;
    height: 100%;
}
a.bl-brand-card:hover { border-color: var(--bl-line-3); background: var(--bl-fill-h); }
/* Dim the artwork, not the label — a group opacity drags the brand name below
   the 4.5:1 contrast minimum. */
.bl-brand-card.is-pending .bl-brand-logo { opacity: 0.45; }
.bl-brand-card.is-pending .bl-brand-name { color: var(--bl-g400); }
/* logos are colour artwork made for a light backdrop (same files as the
   homepage slider, whose track is white) — keep them on a white chip */
.bl-brand-logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: var(--bl-white);
    overflow: hidden;
}
.bl-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}
.bl-brand-initial {
    font-family: var(--bl-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-black, #050505);
}
.bl-brand-name {
    font-family: var(--bl-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bl-white);
}
.bl-brand-arrow {
    margin-left: auto;
    display: inline-flex;
    color: var(--bl-white);
    opacity: 0.35;
    transition: opacity 0.3s, transform 0.3s;
}
a.bl-brand-card:hover .bl-brand-arrow { opacity: 1; transform: translateX(3px); }

/* ── Mid-page CTA band (theme .big-cta) ── */
.bl-ctastrip {
    background: var(--bl-darker);
    border-bottom: 1px solid var(--bl-line);
    padding: 4rem 0;
}
.bl-ctastrip-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
}
.bl-ctastrip-title {
    font-family: var(--bl-head);
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--bl-white);
}
.bl-ctastrip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.bl-ctastrip-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--bl-head);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bl-white);
    white-space: nowrap;
}
.bl-ctastrip-phone:hover { color: var(--bl-g300); }

/* ── Chips (models / areas) ── */
.bl-strip { background: var(--bl-black); border-bottom: 1px solid var(--bl-line); }
.bl-strip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.bl-strip-label {
    flex: none;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--bl-g500);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.bl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bl-chips li {
    border: 1px solid var(--bl-line-2);
    border-radius: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bl-g300);
}

/* ── Why photo + reviewer credit (sits beside theme why cards) ── */
.bl-why-media { margin-top: 2.5rem; }
.bl-why-photo {
    overflow: hidden;
    border: 1px solid var(--bl-line);
    border-radius: 0.5rem;
}
.bl-why-photo img { width: 100%; height: 18rem; object-fit: cover; }
.bl-reviewed-by {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1rem;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--bl-g500);
}

/* ── Comparison table ── */
.bl-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bl-compare-table {
    width: 100%;
    min-width: 40rem;
    border: 1px solid var(--bl-line-2);
    border-collapse: separate;
    border-spacing: 0;
}
.bl-compare-table thead th {
    background: var(--bl-darker);
    padding: 1.125rem 1.5rem;
    font-family: var(--bl-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bl-g500);
    text-align: left;
    border-bottom: 1px solid var(--bl-line-2);
}
.bl-compare-table thead th.is-mmm {
    color: var(--bl-white);
    background: var(--bl-dark);
    border-top: 2px solid var(--bl-white);
}
.bl-compare-table tbody th,
.bl-compare-table tbody td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bl-line);
    text-align: left;
    vertical-align: top;
}
.bl-compare-table tbody tr:last-child th,
.bl-compare-table tbody tr:last-child td { border-bottom: 0; }
.bl-compare-table tbody th {
    font-family: var(--bl-head);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bl-white);
}
.bl-compare-sub {
    display: block;
    margin-top: 0.375rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bl-g500);
}
.bl-compare-table tbody td {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--bl-g500);
}
.bl-compare-table tbody td.is-mmm { background: var(--bl-fill); color: var(--bl-g300); }
.bl-compare-table td svg { flex: none; margin-right: 0.625rem; vertical-align: -0.125rem; display: inline-block; }

/* ── Our Work gallery ── */
.bl-work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.bl-work-link {
    display: block;
    overflow: hidden;
    border: 1px solid var(--bl-line);
    background: var(--bl-dark);
}
.bl-work-link img {
    width: 100%;
    aspect-ratio: 6 / 5;
    height: auto;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s, transform 0.5s;
}
.bl-work-link:hover img { filter: grayscale(0%); transform: scale(1.04); }
.bl-work-item figcaption {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--bl-g500);
}

/* Lightbox */
.bl-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 5, 0.96);
    padding: 1.5rem;
}
.bl-lb[hidden] { display: none; }
.bl-lb-img { max-width: min(92vw, 68rem); max-height: 80vh; width: auto; height: auto; }
.bl-lb-caption {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    max-width: 80vw;
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--bl-g400);
    text-align: center;
}
.bl-lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--bl-line-3);
    background: var(--bl-dark);
    color: var(--bl-white);
    font-size: 1.25rem;
    line-height: 1;
    transition: background 0.3s, border-color 0.3s;
}
.bl-lb-btn:hover { background: var(--bl-white); color: var(--color-black, #050505); }
.bl-lb-close { top: 1.25rem; right: 1.25rem; }
.bl-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.bl-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ── Areas + map facade ── */
.bl-areas-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.bl-map {
    position: relative;
    height: 16rem;
    overflow: hidden;
    border: 1px solid var(--bl-line-2);
    background:
        radial-gradient(circle at 32% 34%, rgba(255, 255, 255, 0.06), transparent 45%),
        linear-gradient(160deg, #131417 0%, #0d0e10 60%, #0a0a0b 100%);
}
.bl-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(100%) invert(92%) hue-rotate(180deg); }
.bl-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    color: var(--bl-white);
    pointer-events: none;
}
.bl-map-card {
    position: absolute;
    right: 0.875rem;
    bottom: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: rgba(5, 5, 5, 0.92);
    border: 1px solid var(--bl-line-2);
    padding: 0.75rem 1rem;
    pointer-events: none;
    max-width: calc(100% - 1.75rem);
}
.bl-map-card strong {
    display: block;
    font-family: var(--bl-head);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bl-white);
}
.bl-map-card span { display: block; font-size: 0.6875rem; font-weight: 300; color: var(--bl-g500); }
.bl-map-load {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 1.5rem);
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    background: var(--bl-white);
    color: var(--color-black, #050505);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.3s;
}
.bl-map-load:hover { background: #e5e7eb; }
.bl-map.is-loaded .bl-map-pin,
.bl-map.is-loaded .bl-map-card,
.bl-map.is-loaded .bl-map-load { display: none; }

/* ── Final CTA (theme .big-cta) ── */
.bl-finalcta {
    background: var(--bl-black);
    border-top: 1px solid var(--bl-line);
    padding: 5rem 0;
    text-align: center;
}
.bl-finalcta-title {
    font-family: var(--bl-head);
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--bl-white);
    max-width: 44rem;
    margin: 0 auto;
}
.bl-finalcta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2.5rem;
}
.bl-finalcta-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}
.bl-finalcta-meta li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 300;
    color: var(--bl-g500);
}
.bl-finalcta-meta svg { flex: none; color: var(--bl-white); opacity: 0.5; }

/* ── Related links strip ── */
.bl-related { background: var(--bl-darker); border-top: 1px solid var(--bl-line); }
.bl-related-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.bl-related-links a {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bl-g400);
    border-bottom: 1px solid transparent;
    padding-bottom: 0.125rem;
    transition: color 0.3s, border-color 0.3s;
}
.bl-related-links a:hover { color: var(--bl-white); border-bottom-color: rgba(255, 255, 255, 0.3); }
.bl-related-links li { display: flex; align-items: center; gap: 1.25rem; }
.bl-related-links li + li::before { content: ''; width: 3px; height: 3px; background: var(--bl-g800); border-radius: 9999px; }

/* ── Sticky mobile bar ── */
.bl-stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    background: var(--bl-black);
    border-top: 1px solid var(--bl-line);
    padding-bottom: env(safe-area-inset-bottom);
}
.bl-stickybar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.bl-stickybar-call { color: var(--bl-white); border-right: 1px solid var(--bl-line); }
.bl-stickybar-book { background: var(--bl-white); color: var(--color-black, #050505); }
.bl-stickybar-book:hover { background: #e5e7eb; }

body.brand-landing-page .brand-landing { padding-bottom: 3.5rem; }
body.brand-landing-page .fab-phone,
body.brand-landing-page .fab-scroll-top { display: none !important; }

/* ── Theme component overrides that only apply inside the landing ── */
/* Reviews: theme .testimonials-section is reused as-is; only drop its top
   border doubling when it follows another bordered section. */
.brand-landing .testimonials-section { border-top: 1px solid var(--bl-line); }
/* FAQ: theme .faq-section reused as-is. The theme styles .faq-header h3, but
   the landing needs an <h2> there to keep a strict H1 > H2 > H3 hierarchy. */
.brand-landing .faq-header h2 {
    font-family: var(--bl-head);
    color: var(--bl-white);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}
.brand-landing .faq-item summary h3 {
    font-family: var(--bl-head);
    color: var(--bl-white);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-right: 1rem;
}
/* Why-choose: theme cards, plus an optional right-hand photo column */
.brand-landing .svc-why-choose .bl-why-media { max-width: 26rem; margin-left: auto; margin-right: auto; }

/* ═══════════ Responsive (theme breakpoints) ═══════════ */
@media (min-width: 640px) {
    .bl-work-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .bl-section { padding: 6rem 0; }
    .bl-h2 { font-size: 2.5rem; margin-bottom: 3.5rem; }
    .bl-hero-inner { padding: 7rem 1.5rem 5rem; }
    .bl-h1 { font-size: 3.75rem; }
    .bl-hero-sub { font-size: 1.125rem; }
    .bl-hero-cta { flex-direction: row; flex-wrap: wrap; }
    .bl-trustbar { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
    .bl-hero-form { padding: 2.5rem 2rem; }
    .bl-services-grid { grid-template-columns: repeat(3, 1fr); }
    .bl-brands-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .bl-ctastrip-row { flex-direction: row; align-items: center; justify-content: space-between; }
    .bl-ctastrip-title { font-size: 2.25rem; }
    .bl-areas-grid { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; }
    .bl-map { height: 20rem; }
    .bl-finalcta { padding: 6rem 0; }
    .bl-finalcta-title { font-size: 3rem; }
    .bl-finalcta-actions { flex-direction: row; justify-content: center; }
    .bl-finalcta-meta { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; }
    .bl-anchornav-links a { padding: 1.125rem 1.25rem; font-size: 0.6875rem; }
    .bl-why-photo img { height: 22rem; }
    .brand-landing .svc-why-choose .bl-why-media { max-width: none; }
    .bl-breadcrumbs ol { font-size: 0.6875rem; }
}

@media (min-width: 1024px) {
    .bl-wrap, .bl-breadcrumbs ol, .bl-hero-inner { padding-left: 2rem; padding-right: 2rem; }
    .bl-hero-inner.has-form {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 4rem;
        align-items: center;
    }
    .bl-hero-form { padding: 2.5rem; }
    .bl-work-grid { grid-template-columns: repeat(4, 1fr); }
}

/* The sticky Call/Book bar stands in for the header actions, so it stays
   visible for as long as the theme header is collapsed to the burger (<1024). */
@media (min-width: 1024px) {
    .bl-stickybar { display: none; }
    body.brand-landing-page .brand-landing { padding-bottom: 0; }
    body.brand-landing-page .fab-phone,
    body.brand-landing-page .fab-scroll-top { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-landing *, .brand-landing *::before, .brand-landing *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}