/* A client's own front page (includes/brand_front.php), on a separate branded install only.
   Every colour comes from the company's scheme: --mt-brand-primary and --mt-brand-accent,
   printed by brand_css_vars() in the page head; the family navy is the fallback. */
.bf { --bf-p: var(--mt-brand-primary, #0c2340); --bf-a: var(--mt-brand-accent, #1a1a1a); color: var(--ms-navy-900, #0c2340); }
.bf-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* Hero */
.bf-hero {
    background:
        radial-gradient(900px 420px at 85% 10%, color-mix(in srgb, var(--bf-p) 18%, transparent), transparent 70%),
        linear-gradient(180deg, #f5f8fc 0%, #fff 100%);
    padding: 56px 0 64px;
}
.bf-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.bf-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
    padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
    color: var(--bf-p); background: color-mix(in srgb, var(--bf-p) 10%, #fff);
}
.bf h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; color: var(--bf-a); }
.bf-lead { font-size: 18px; line-height: 1.6; color: #4a5a6e; margin: 0 0 26px; max-width: 560px; }
.bf-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.bf .btn.bf-btn-main {
    background: var(--bf-p); background-image: none; border-color: var(--bf-p); color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--bf-p) 32%, transparent);
}
.bf .btn.bf-btn-main:hover { filter: brightness(1.06); }
.bf .btn.bf-btn-alt { color: var(--bf-a); border-color: color-mix(in srgb, var(--bf-a) 30%, #fff); background: #fff; }
.bf-small { font-size: 14px; color: #6b7a8c; margin: 0; }
.bf-small a { color: var(--bf-p); font-weight: 700; }

/* The live card: a picture of what a client sees on the day */
.bf-hero-card {
    background: #fff; border-radius: 22px; padding: 22px;
    box-shadow: 0 30px 60px rgba(12, 35, 64, .14), 0 2px 6px rgba(12, 35, 64, .06);
    border: 1px solid #e8eef5;
}
.bf-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1b6a24; }
.bf-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e9e3a; box-shadow: 0 0 0 4px rgba(46, 158, 58, .18); }
.bf-eta { font-size: 26px; font-weight: 800; margin: 10px 0 16px; color: var(--bf-a); }
.bf-eta b { color: var(--bf-p); }
.bf-route { list-style: none; margin: 0 0 16px; padding: 0 0 0 22px; position: relative; }
.bf-route::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; border-left: 2px dashed #c7d3e0; }
.bf-route li { position: relative; padding: 4px 0 10px; display: flex; flex-direction: column; }
.bf-route li::before { content: ""; position: absolute; left: -22px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--bf-p); background: #fff; }
.bf-route li.is-done::before { background: var(--bf-p); }
.bf-route b { font-size: 15px; }
.bf-route span { font-size: 13px; color: #6b7a8c; }
.bf-driver { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #edf1f6; }
.bf-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bf-p) 12%, #fff); color: var(--bf-p); }
.bf-driver > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.bf-driver small { color: #6b7a8c; font-size: 13px; }
.bf-plate { border: 2px solid var(--bf-a); border-radius: 8px; padding: 4px 10px; font-weight: 800; letter-spacing: .06em; font-size: 14px; }

/* Sections */
.bf-section { padding: 64px 0; }
.bf-section h2 { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.01em; margin: 0 0 28px; color: var(--bf-a); }
.bf-soft { background: #f5f8fc; }
.bf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bf-card { background: #fff; border: 1px solid #e8eef5; border-radius: 16px; padding: 22px; }
.bf-card h3 { font-size: 18px; margin: 14px 0 8px; }
.bf-card p { margin: 0; color: #5b6b7e; font-size: 15px; line-height: 1.55; }
.bf-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--bf-p) 12%, #fff); color: var(--bf-p); }
.bf-ic .ic { width: 24px; height: 24px; }

.bf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.bf-steps li { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid #e8eef5; }
.bf-step-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bf-p); color: #fff; font-weight: 800; }
.bf-steps h3 { font-size: 18px; margin: 14px 0 8px; }
.bf-steps p { margin: 0; color: #5b6b7e; line-height: 1.55; }

.bf-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bf-why > div { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid #e8eef5; }
.bf-why .ic { width: 26px; height: 26px; color: var(--bf-p); margin-bottom: 6px; }
.bf-why span { color: #5b6b7e; font-size: 15px; line-height: 1.5; }

.bf-contact { background: var(--bf-a); color: #fff; }
.bf-contact h2 { color: #fff; }
.bf-contact .bf-lead { color: rgba(255, 255, 255, .78); }
.bf-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bf-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bf-contact-list li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.bf-contact-list .ic { width: 22px; height: 22px; color: color-mix(in srgb, var(--bf-p) 60%, #fff); flex: 0 0 auto; }
.bf-contact-list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }

/* Phones and tablets */
@media (max-width: 980px) {
    .bf-hero-grid, .bf-contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .bf-cards, .bf-why { grid-template-columns: repeat(2, 1fr); }
    .bf-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .bf-hero { padding: 32px 0 40px; }
    .bf-cards, .bf-why { grid-template-columns: 1fr; }
    .bf-cta .btn { flex: 1 1 100%; justify-content: center; }
    .bf-section { padding: 44px 0; }
    .bf-lead { font-size: 16px; }
}

/* The public header's Sign in button wears the company's colour on its own front page. */
.bf-page .pub-nav .nav-cta { background: var(--mt-brand-primary, #0c2340); border-color: var(--mt-brand-primary, #0c2340); color: #fff; }

/* The browser's "Install our App" button in the header wears the company's colour too. */
.bf-page #pwa-install-btn { background: #fff; color: var(--mt-brand-primary, #0c2340); border: 2px solid var(--mt-brand-primary, #0c2340); background-image: none; }

/* The hero card's little road: the vehicle drives to the home pin while the minutes count down. */
.bf-track { position: relative; height: 26px; margin: -4px 0 16px; }
.bf-track-line { position: absolute; left: 10px; right: 14px; top: 50%; border-top: 3px dashed color-mix(in srgb, var(--bf-p) 35%, #fff); }
.bf-track-home {
    position: absolute; right: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
    background: #fff; border: 4px solid var(--bf-p);
}
.bf-car {
    position: absolute; left: 0; top: 50%; width: 24px; height: 16px; margin-top: -8px; border-radius: 6px;
    background: var(--bf-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-p) 22%, transparent);
}
.bf-hero-card.is-live .bf-car { animation: bf-drive 7s linear infinite; }

/* Cards lift a little under the pointer. */
.bf-card, .bf-why > div, .bf-steps li { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
    .bf-card:hover, .bf-why > div:hover, .bf-steps li:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(12, 35, 64, .10); }
}

/* =============================================================== MOTION (as our home page)
   front.js adds .bf-anim only when motion is welcome, so with the script off or reduced
   motion everything is simply there. */
.bf-anim .bf-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--bf-d, 0s); }
.bf-anim .bf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .bf-hero-copy > * { animation: bf-rise .8s cubic-bezier(.2,.7,.2,1) both; }
    .bf-hero-copy > :nth-child(2) { animation-delay: .08s; }
    .bf-hero-copy > :nth-child(3) { animation-delay: .16s; }
    .bf-hero-copy > :nth-child(4) { animation-delay: .24s; }
    .bf-hero-copy > :nth-child(5) { animation-delay: .32s; }
    .bf-hero-card { animation: bf-rise .9s cubic-bezier(.2,.7,.2,1) .2s both, bf-float 8s ease-in-out 1.2s infinite; }
    .bf-live-dot { position: relative; }
    .bf-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #2e9e3a; animation: bf-halo 2.2s ease-out infinite; }
    /* a dot runs along the three booking steps (wide screens, where they sit in a row) */
    @media (min-width: 981px) {
        .bf-steps { position: relative; padding-top: 22px; }
        .bf-steps::before { content: ""; position: absolute; top: 6px; left: 18px; right: 18px; border-top: 2px dashed color-mix(in srgb, var(--bf-p) 30%, #fff); }
        .bf-steps::after {
            content: ""; position: absolute; top: 0; left: 18px; width: 14px; height: 14px; border-radius: 50%;
            background: #fff; border: 3px solid var(--bf-p); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-p) 20%, transparent);
            animation: bf-steps-run 7s cubic-bezier(.45,.05,.55,.95) infinite;
        }
    }
    @keyframes bf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @keyframes bf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes bf-halo { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
    @keyframes bf-drive {
        0% { left: 0; opacity: 0; } 6% { opacity: 1; }
        86% { left: calc(100% - 46px); opacity: 1; }
        100% { left: calc(100% - 46px); opacity: 1; }
    }
    @keyframes bf-steps-run {
        0%, 8% { left: 18px; opacity: 0; } 12% { opacity: 1; }
        46%, 54% { left: calc(50% - 7px); }
        88% { opacity: 1; }
        92%, 100% { left: calc(100% - 32px); opacity: 0; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .bf-anim .bf-reveal { opacity: 1; transform: none; transition: none; }
    .bf-card, .bf-why > div, .bf-steps li { transition: none; }
}