/*
 * BinFresh homepage section styles — one scoped block per section.
 * Loaded on the front page (see functions.php).
 */

/* Each .bf-section band supplies its own background; the GeneratePress content
   wrapper defaults to white, which showed as a white box on the dark bands and
   flattened the intended alternating light/dark sections. Force it transparent. */
.bf-section .inside-article,
.bf-section .grid-container.inside-article {
    background: transparent;
}

/* ==========================================================================
   HERO — the single conversion moment: check a postcode OR pick an area.
   The old separate "Do we cover your area?" band was folded up into this card,
   so the page opens on one powerful entry point instead of two competing ones.
   (Legacy .custom-select / .area-selector-container / #neighborhood-select CSS
   in style.css is now dead — it styled the removed dropdown and matches nothing.)
   ========================================================================== */

/* Hero height + growth behaviour is set in style.css (.custom-hero), which loads AFTER this
   file — so height/min-height overrides here would be ignored. Only non-conflicting props
   (padding/margin) take effect from here. */
.custom-hero {
    margin-bottom: 0;
    padding: 56px 20px 72px;
}
.custom-hero .hero-content { max-width: 680px; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hero-eyebrow .fa-star { color: var(--brand-accent, #f59e0b); font-size: 0.8rem; }

.hero-content .hero-sub {
    color: #e2e8f0;
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 28px;
}

/* The conversion card (white, over the image) */
.bf-hero-card {
    background: var(--brand-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.45);
    padding: 26px 26px 24px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.bf-hero-card-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-primary);
    margin-bottom: 14px;
}
.bf-hero-card-label i { color: var(--brand-secondary); }

/* Postcode checker on the LIGHT card (light-context mirror of the dark
   .bf-postcode .bf-cov-* rules, which stay scoped to the removed band). */
.bf-hero-card .bf-cov-form { display: flex; gap: 10px; }
.bf-hero-card .bf-cov-input {
    flex: 1 1 auto;
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--text-primary, #1e293b);
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bf-hero-card .bf-cov-input::placeholder { color: #94a3b8; }
.bf-hero-card .bf-cov-input:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 4px rgba(36, 179, 53, 0.14);
}
.bf-hero-card .bf-cov-btn { flex: 0 0 auto; }
.bf-hero-card .bf-cov-result { margin-top: 14px; font-size: 0.98rem; color: var(--text-secondary); }
.bf-hero-card .bf-cov-result:empty { margin-top: 0; }
.bf-hero-card .bf-cov-result.err { color: #dc2626; }
.bf-hero-card .bf-cov-result strong { display: block; font-size: 1.05rem; color: var(--brand-primary); }
.bf-hero-card .bf-cov-result.ok strong { color: #059669; }
.bf-hero-card .bf-cov-result span { display: block; color: var(--text-secondary); font-size: 0.92rem; margin-top: 4px; }
.bf-hero-card .bf-cov-book { margin-top: 12px; display: inline-block; }
/* "Your bins are usually collected on …" line under the coverage confirmation. */
.bf-cov-day { margin-top: 6px; font-size: 0.92rem; }
.bf-cov-day[hidden] { display: none; }

/* Modern loading state — the label followed by three brand-green dots that
   bounce in sequence. Clean and friendly; sits centred under the input. */
.bf-hero-card .bf-cov-loader {
    display: flex;
    flex-direction: column;      /* label on top, the horizontal row of dots centred beneath it */
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 6px;
}
.bf-hero-card .bf-cov-loading-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}
/* Extra class (.bf-cov-loader) lifts specificity above `.bf-hero-card .bf-cov-result span`
   (0,2,1), which sets display:block for the result sub-text and would otherwise force the
   dots to stack vertically; margin:0 cancels that span rule's margin-top too. */
.bf-hero-card .bf-cov-loader .bf-cov-dots {
    display: inline-flex;
    gap: 6px;
    margin: 0;
}
.bf-hero-card .bf-cov-dots i {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: var(--brand-secondary, #24b335);
    animation: bf-cov-bounce 1s ease-in-out infinite;
}
.bf-hero-card .bf-cov-dots i:nth-child(2) { animation-delay: 0.16s; }
.bf-hero-card .bf-cov-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes bf-cov-bounce {
    0%, 80%, 100% { transform: translateY(0) scale(0.7); opacity: 0.35; }
    40%           { transform: translateY(-6px) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .bf-hero-card .bf-cov-dots i { animation: none; transform: none; opacity: 0.75; }
}

/* Lead capture (revealed only when a postcode is not covered) */
.bf-hero-card .bf-cov-lead { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.bf-hero-card .bf-cov-lead[hidden] { display: none; }
.bf-hero-card .bf-cov-lead .bf-cov-input { flex: 1 1 160px; }
.bf-hero-card .bf-cov-lead-msg { flex: 1 1 100%; color: var(--text-secondary); font-size: 0.88rem; }
.bf-hero-card .bf-cov-lead-done { width: 100%; text-align: center; color: #059669; font-weight: 600; }

/* "or choose your area" divider */
.bf-hero-card .bf-cov-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 16px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bf-hero-card .bf-cov-or span { flex: 0 0 auto; }
.bf-hero-card .bf-cov-or::before,
.bf-hero-card .bf-cov-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Area chips inside the card */
.bf-hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bf-hero-card .bf-postcode-pill {
    background: var(--brand-background);
    color: var(--brand-primary);
    border: 1px solid var(--border-color);
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.bf-hero-card .bf-postcode-pill i { color: var(--brand-secondary); transition: color 0.18s ease; }
.bf-hero-card .bf-postcode-pill:hover,
.bf-hero-card .bf-postcode-pill:focus-visible {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
    transform: translateY(-2px);
}
.bf-hero-card .bf-postcode-pill:hover i,
.bf-hero-card .bf-postcode-pill:focus-visible i { color: #fff; }

/* Trust line under the card */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 24px auto 0;
    color: #e2e8f0;
    font-size: 0.92rem;
    font-weight: 500;
}
/* Each tick travels with its own words. Without this the icons and the text are separate
   flex items and wrap independently, which put both ticks on one line and their labels on
   the next two. */
.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.hero-trust i { color: var(--brand-secondary); }

@media (max-width: 600px) {
    /* Stacked, but sharing a left edge so the two ticks line up under each other. Centring
       each row instead would leave the ticks at different x positions, which is the thing
       that looked wrong in the first place. */
    .hero-trust {
        flex-direction: column;
        align-items: flex-start;
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
        gap: 10px;
    }
    .custom-hero { padding: 36px 16px 52px; min-height: 0; }
    .hero-content .hero-sub { font-size: 1.02rem; }
    .bf-hero-card { padding: 20px 18px; }
    .bf-hero-card .bf-cov-form { flex-direction: column; }
    .bf-hero-card .bf-cov-btn { width: 100%; }
    .bf-hero-card .bf-cov-lead .bf-cov-btn { width: 100%; }
}

/* ==========================================================================
   Section — Why Choose BinFresh? (scoped under .bf-about)
   Trust panel (left) + differentiator list (right), matched to the modern
   testimonials / how-it-works styling (green eyebrow, icon chips, soft cards).
   ========================================================================== */

/* Full-bleed bands butt against each other (no inter-section seam strip); the
   colour change + internal padding carry the transition. */
.bf-section { margin-bottom: 0; }

.bf-about .bf-about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
}

/* ---- LEFT: credential / trust panel ---- */
.bf-about .bf-about-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
    background: linear-gradient(165deg, #f0fdf7 0%, #ffffff 62%);
    border: 1px solid rgba(36, 179, 53, 0.18);
    border-radius: var(--radius-xl);
    padding: 40px 38px 34px;
    box-shadow: var(--shadow-lg);
}
.bf-about .bf-about-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    background: rgba(36, 179, 53, 0.10);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
}
.bf-about .bf-about-tag i { font-size: 0.85rem; }
.bf-about .bf-about-logo {
    max-width: 80%;
    height: auto;
    display: block;
}
.bf-about .bf-about-div {
    width: 64px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: rgba(36, 179, 53, 0.25);
}
.bf-about .bf-about-badge {
    max-width: 210px;
    height: auto;
    display: block;
}
.bf-about .bf-about-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}
.bf-about .bf-about-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--brand-surface);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
}
.bf-about .bf-about-chip i { color: var(--brand-secondary); font-size: 0.85rem; }

/* ---- RIGHT: heading + differentiators ---- */
.bf-about .bf-about-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 12px;
}
.bf-about .bf-about-content h2 {
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.1;
    color: var(--brand-primary);
    margin: 0 0 14px;
}
.bf-about .bf-about-lede {
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 0 0 30px;
}
.bf-about .bf-about-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}
.bf-about .bf-about-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 0;
}
.bf-about .bf-about-feico {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(36, 179, 53, 0.12);
    color: var(--brand-secondary);
    font-size: 1.25rem;
}
.bf-about .bf-about-feature h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin: 4px 0 5px;
    line-height: 1.25;
}
.bf-about .bf-about-feature p {
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 860px) {
    .bf-about .bf-about-grid { grid-template-columns: 1fr; gap: 34px; }
    .bf-about .bf-about-content { text-align: left; }
}
@media (max-width: 768px) {
    .bf-about .bf-about-panel { padding: 34px 26px 30px; gap: 22px; }
    .bf-about .bf-about-logo  { max-width: 230px; }
    .bf-about .bf-about-badge { max-width: 190px; }
}

/* ===== postcode ===== */
.bf-postcode h2 { color: #fff !important; }
.bf-postcode p { color: rgba(255,255,255,0.85) !important; }
.bf-postcode .bf-postcode-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.bf-postcode .bf-postcode-pill {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.35);
    padding: 12px 26px;
    border-radius: 9999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.bf-postcode .bf-postcode-pill i { color: var(--brand-secondary); transition: color 0.2s ease; }
.bf-postcode .bf-postcode-pill:hover {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
    transform: translateY(-2px);
}
.bf-postcode .bf-postcode-pill:hover i { color: #fff; }
@media (max-width: 768px) {
    .bf-postcode .bf-postcode-pills { flex-direction: column; align-items: stretch; }
    .bf-postcode .bf-postcode-pill { justify-content: center; }
}
/* ===== Postcode / Service Area Checker (scoped: .bf-postcode) ===== */

/* Header — white text on the dark navy band (overrides global navy h2) */
.bf-postcode .bf-postcode-header h2 {
    color: var(--text-inverse, #ffffff);
    margin-bottom: 12px;
}
.bf-postcode .bf-postcode-header {
    text-align: center;
    margin-bottom: 40px;
}
.bf-postcode .bf-postcode-header h2 {
    font-size: clamp(2rem, 4vw, 2.6rem);
}
.bf-postcode .bf-postcode-header p {
    color: #cbd5e1; /* muted light slate for premium contrast */
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Postcode checker (path 1) — on the dark navy band --- */
.bf-postcode .bf-cov-check {
    max-width: 560px;
    margin: 0 auto 30px;
}
.bf-postcode .bf-cov-form {
    display: flex;
    gap: 12px;
}
.bf-postcode .bf-cov-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 15px 18px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
}
.bf-postcode .bf-cov-input::placeholder { color: #94a3b8; }
.bf-postcode .bf-cov-input:focus {
    outline: none;
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(36, 179, 53, 0.25);
}
.bf-postcode .bf-cov-btn { flex: 0 0 auto; }

/* Result line + book button */
.bf-postcode .bf-cov-result {
    margin-top: 16px;
    text-align: center;
    color: var(--text-inverse, #fff);
    line-height: 1.5;
}
.bf-postcode .bf-cov-result:empty { margin-top: 0; }
.bf-postcode .bf-cov-result.loading,
.bf-postcode .bf-cov-result.info { color: #cbd5e1; }
.bf-postcode .bf-cov-result.err { color: #fca5a5; }
.bf-postcode .bf-cov-result strong { display: block; font-size: 1.1rem; }
.bf-postcode .bf-cov-result.ok strong { color: #6ee7b7; }
.bf-postcode .bf-cov-result span { display: block; color: #cbd5e1; font-size: 0.95rem; margin-top: 4px; }
.bf-postcode .bf-cov-book { margin-top: 14px; display: inline-block; }

/* Lead form (revealed when a postcode is NOT covered) */
.bf-postcode .bf-cov-lead {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
/* Respect the [hidden] attribute — a bare `display:flex` would override it and
   show the lead form before a postcode is even checked. */
.bf-postcode .bf-cov-lead[hidden] { display: none; }
.bf-postcode .bf-cov-lead .bf-cov-input { flex: 1 1 180px; }
.bf-postcode .bf-cov-lead .bf-cov-btn { flex: 0 0 auto; }
.bf-postcode .bf-cov-lead-msg { flex: 1 1 100%; text-align: center; color: #cbd5e1; font-size: 0.9rem; }
.bf-postcode .bf-cov-lead-done { width: 100%; text-align: center; color: #6ee7b7; }

/* "or choose your area" divider */
.bf-postcode .bf-cov-or {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto 28px;
    color: #cbd5e1;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.bf-postcode .bf-cov-or::before,
.bf-postcode .bf-cov-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 600px) {
    .bf-postcode .bf-cov-form { flex-direction: column; }
    .bf-postcode .bf-cov-btn { width: 100%; }
}

/* Pill row — centered, wraps on smaller screens */
.bf-postcode .bf-postcode-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* Outline pill on dark — inherits shape/padding from global .btn */
.bf-postcode .bf-postcode-pill {
    gap: 10px;
    background: transparent;
    color: var(--text-inverse, #ffffff);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
}
.bf-postcode .bf-postcode-pill i {
    color: var(--brand-secondary);
    font-size: 1rem;
    transition: color 0.2s ease-in-out;
}

/* Fill green on hover / focus */
.bf-postcode .bf-postcode-pill:hover,
.bf-postcode .bf-postcode-pill:focus-visible {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--text-inverse, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(36, 179, 53, 0.35);
    outline: none;
}
.bf-postcode .bf-postcode-pill:hover i,
.bf-postcode .bf-postcode-pill:focus-visible i {
    color: var(--text-inverse, #ffffff);
}

/* Responsive — stack toward single column, full-width pills on mobile */
@media (max-width: 768px) {
    .bf-postcode .bf-postcode-header h2 {
        font-size: 2rem !important;
    }
    .bf-postcode .bf-postcode-pills {
        flex-direction: column;
        gap: 12px;
    }
    .bf-postcode .bf-postcode-pill {
        width: 100%;
        max-width: 320px;
    }
}

/* (Removed dead .bf-why* CSS — the orphaned template-parts/home/why-choose.php was
   never included by front-page.php; about.php carries the homepage value props.) */

/* ===== how-it-works ===== */
/* ==========================================================================
   Section 4 — How Does It Work? (scoped under .bf-hiw)
   ========================================================================== */

.bf-hiw { background: var(--brand-background); }

/* Section header */
.bf-hiw .bf-hiw-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 48px;
}
.bf-hiw .bf-hiw-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 12px;
}
.bf-hiw .bf-hiw-head h2 {
    color: var(--brand-primary);
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 12px;
}
.bf-hiw .bf-hiw-head p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

/* Steps — icon-led cards; auto-fit collapses 4 → 2 → 1 as width shrinks */
.bf-hiw .bf-hiw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.bf-hiw .bf-hiw-step {
    text-align: center;
    background: var(--brand-surface);
    padding: 36px 24px 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bf-hiw .bf-hiw-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--brand-secondary);
}

.bf-hiw .bf-hiw-icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(36, 179, 53, 0.12);
    color: var(--brand-secondary);
    font-size: 1.9rem;
}
.bf-hiw .bf-hiw-num {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    border: 3px solid var(--brand-surface);
}

.bf-hiw .bf-hiw-step h3 {
    color: var(--brand-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
}
.bf-hiw .bf-hiw-step p {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive — tighten on mobile (grid already collapses to 1 column) */
@media (max-width: 600px) {
    .bf-hiw .bf-hiw-grid { max-width: 400px; margin: 0 auto; }
    .bf-hiw .bf-hiw-head { margin-bottom: 36px; }
    .bf-hiw .bf-hiw-step { padding: 30px 22px 26px; }
}

/* ===== how-it-works: bottom CTA (merged in from the old "How Do I Book" section) ===== */
.bf-hiw .bf-hiw-cta {
    text-align: center;
    margin-top: 44px;
}

.bf-hiw .bf-hiw-cta h3 {
    color: var(--brand-primary);
    font-size: clamp(1.4rem, 3vw, 1.7rem);
    margin: 0 0 20px;
}

/* ==========================================================================
   Dark theme for "How It Works" — rendered on the footer navy (--brand-primary)
   to break up the run of white/light sections in the middle of the homepage.
   Placed after the base rules so it wins at equal specificity.
   ========================================================================== */
.bf-hiw { background: var(--brand-primary); }
.bf-hiw .bf-hiw-head h2,
.bf-hiw .bf-hiw-step h3,
.bf-hiw .bf-hiw-cta h3 { color: #ffffff; }
.bf-hiw .bf-hiw-head p,
.bf-hiw .bf-hiw-step p { color: #cbd5e1; }
.bf-hiw .bf-hiw-step {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
.bf-hiw .bf-hiw-step:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-secondary);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
}
.bf-hiw .bf-hiw-icon { background: rgba(36, 179, 53, 0.16); }
.bf-hiw .bf-hiw-num { background: var(--brand-secondary); border-color: var(--brand-primary); }

/* ===== testimonials ===== */
/* ============================================================
   TESTIMONIALS SECTION  (all selectors scoped to .bf-testimonials)
   ============================================================ */

.bf-testimonials .bf-tst-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Section header + Google rating badge */
.bf-testimonials .bf-tst-header {
    text-align: center;
    margin-bottom: 44px;
}
.bf-testimonials .bf-tst-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 12px;
}
.bf-testimonials .bf-tst-header h2 {
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: var(--brand-primary);
    margin: 0 0 20px;
}
.bf-testimonials .bf-tst-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: var(--brand-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}
.bf-testimonials .bf-tst-badge-g { width: 20px; height: 20px; flex: 0 0 auto; }
.bf-testimonials .bf-tst-badge-stars { color: #f59e0b; font-size: 0.9rem; letter-spacing: 1px; display: inline-flex; gap: 1px; }
.bf-testimonials .bf-tst-badge b { color: var(--brand-primary); font-family: var(--font-heading); font-size: 1rem; }
/* Only the trailing "from 45 Google reviews" text is muted — scope to :last-child so
   it doesn't also override the gold star span's colour (same element type). */
.bf-testimonials .bf-tst-badge span:last-child { color: var(--text-secondary); font-size: 0.9rem; }

/* Responsive card grid: auto-fit, collapses to 1 column on mobile */
.bf-testimonials .bf-tst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Card — modern "verified review" */
.bf-testimonials .bf-tst-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--brand-surface);
    padding: 28px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -12px rgba(16, 24, 40, 0.12);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.bf-testimonials .bf-tst-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 24px 44px -16px rgba(16, 24, 40, 0.22);
    border-color: transparent;
}

/* Identity row: avatar + name/stars + Google logo */
.bf-testimonials .bf-tst-top { display: flex; align-items: center; gap: 14px; }
.bf-testimonials .bf-tst-avatar {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
    color: #fff; background: var(--a, #64748b);
}
.bf-testimonials .bf-tst-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bf-testimonials .bf-tst-name {
    font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
    color: var(--brand-primary); line-height: 1.2;
}
.bf-testimonials .bf-tst-stars { color: #f59e0b; font-size: 0.82rem; letter-spacing: 2px; }
.bf-testimonials .bf-tst-g { flex: 0 0 auto; width: 22px; height: 22px; align-self: flex-start; }

/* Quote with a subtle decorative opening mark */
.bf-testimonials .bf-tst-quote {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
    flex-grow: 1;
}
.bf-testimonials .bf-tst-quote::before {
    content: "\201C";
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--brand-secondary);
    opacity: 0.3;
    margin-bottom: 2px;
}

@media (max-width: 600px) {
    .bf-testimonials .bf-tst-card { padding: 24px; }
    .bf-testimonials .bf-tst-badge { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   Section — Services & prices (scoped under .bf-services)
   White band; light cards (inverse of how-it-works' grey band / white cards),
   same eyebrow + heading + icon-chip system as the rest of the page.
   ========================================================================== */
.bf-services .bf-svc-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.bf-services .bf-svc-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 12px;
}
.bf-services .bf-svc-head h2 {
    color: var(--brand-primary);
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 12px;
}
.bf-services .bf-svc-head p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}
.bf-services .bf-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.bf-services .bf-svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--brand-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 32px 24px 28px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bf-services .bf-svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--brand-secondary);
}
.bf-services .bf-svc-ico {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(36, 179, 53, 0.12);
    color: var(--brand-secondary);
    font-size: 1.7rem;
    margin-bottom: 18px;
}
.bf-services .bf-svc-card h3 {
    color: var(--brand-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.bf-services .bf-svc-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 18px;
}
.bf-services .bf-svc-price {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
    margin-top: auto;
}
.bf-services .bf-svc-price span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.bf-services .bf-svc-freq {
    display: block;
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin: 8px 0 20px;
}
.bf-services .bf-svc-btn { width: 100%; }

/* ===== book-with-us ===== */
/* =========================================
   CALL TO ACTION BAND (.bf-cta)
   Dark navy band; all text forced white.
   ========================================= */
.bf-cta {
    text-align: center;
    color: var(--text-inverse);
}
.bf-cta .bf-cta-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 12px;
}
.bf-cta .bf-cta-body h2 {
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 12px;
}
.bf-cta .bf-cta-sub {
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 28px;
}

/* Override the inline navy heading colour on the dark band */
.bf-cta h2 {
    color: var(--text-inverse) !important;
}

/* Subtitle + any generic paragraph legible on dark */
.bf-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.bf-cta .bf-cta-body {
    max-width: 720px;
    margin: 0 auto;
}

/* Free text-reminder chip */
.bf-cta .bf-cta-reminder {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 32px;
    padding: 14px 28px;
    background: rgba(36, 179, 53, 0.12);
    border: 1px solid rgba(36, 179, 53, 0.35);
    border-radius: var(--radius-pill);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff !important;
}
.bf-cta .bf-cta-reminder i {
    color: var(--brand-secondary);
    font-size: 1.5rem;
}

/* Centered button row */
.bf-cta .bf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.bf-cta .bf-cta-actions .btn {
    /* Re-assert the flex centring from the base .btn: the site-wide .btn-primary
       (style.css) sets display:inline-block, which — since this row stretches its
       items to equal height — left the primary button's label pinned to the top
       instead of centred like the secondary button. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

/* White-outline secondary that fills on hover (scoped to dark band) */
.bf-cta .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.7);
}
.bf-cta .btn-secondary:hover,
.bf-cta .btn-secondary:active,
.bf-cta .btn-secondary:focus-visible {
    background: #ffffff;
    color: var(--brand-primary);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive: stack buttons full-width at mobile */
@media (max-width: 768px) {
    .bf-cta .bf-cta-reminder {
        font-size: 1.05rem;
        padding: 12px 20px;
    }
    .bf-cta .bf-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .bf-cta .bf-cta-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   FAQ (.bf-faq) — domestic accordion, mirrors the commercial FAQ pattern
   ========================================================================== */
.bf-faq { background: var(--brand-background); }
.bf-faq-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 44px;
    align-items: start;
}
.bf-faq-head { position: sticky; top: 120px; }
.bf-faq-head h2 { font-size: 2.4rem; color: var(--brand-primary); margin: 8px 0 12px; }
.bf-faq-head p { color: var(--text-secondary); margin: 0 0 16px; }
.bf-faq-head a { color: var(--brand-secondary); font-weight: 700; text-decoration: none; }
.bf-faq-head a:hover { text-decoration: underline; }

.bf-faq-acc { display: flex; flex-direction: column; gap: 14px; }
.bf-faq-acc details {
    background: var(--brand-surface);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.bf-faq-acc details[open] { border-left: 4px solid var(--brand-secondary); }
.bf-faq-acc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-weight: 700;
    color: var(--brand-primary);
    font-size: 1.02rem;
}
.bf-faq-acc summary::-webkit-details-marker { display: none; }
.bf-faq-acc summary .ic {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(36, 179, 53, 0.12);
    color: var(--brand-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}
.bf-faq-acc details[open] summary .ic { transform: rotate(45deg); }
.bf-faq-acc .bf-faq-acc-body { padding: 0 22px 20px; color: var(--text-secondary); line-height: 1.6; }
.bf-faq-acc .bf-faq-acc-body a { color: var(--brand-secondary); font-weight: 600; }

.bf-faq-pricetable { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 0.95rem; }
.bf-faq-pricetable td { padding: 9px 12px; border-bottom: 1px solid var(--border-color, #e2e8f0); color: var(--text-primary); }
.bf-faq-pricetable td:last-child { text-align: right; font-weight: 700; color: var(--brand-primary); }
.bf-faq-pricetable tr:nth-child(even) td { background: var(--brand-background, #f8fafc); }

@media (max-width: 860px) {
    .bf-faq-grid { grid-template-columns: 1fr; gap: 24px; }
    .bf-faq-head { position: static; }
    .bf-faq-head h2 { font-size: 2rem; }
}