/* ============================================================
   Homepage — bespoke styles only.
   Everything else comes from css/bcm.css.
   ============================================================ */

/* ---------- hero ---------- */
.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: max(640px, 88vh);
    padding: calc(var(--nav-h) + 48px) 0 72px;
    background: var(--ink-950);
    color: var(--text-on-dark-muted);
    overflow: hidden;
}
.home-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 14, 26, 0.62) 0%, rgba(8, 14, 26, 0.25) 65%),
        linear-gradient(180deg, rgba(8, 14, 26, 0.55) 0%, rgba(8, 14, 26, 0.35) 45%, rgba(8, 14, 26, 0.92) 100%);
}
.home-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(77, 195, 247, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 195, 247, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 100%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 90% at 30% 100%, #000 20%, transparent 100%);
    pointer-events: none;
}
.home-hero .wrap { position: relative; z-index: 1; }
.home-hero .ornament { z-index: 0; }

.home-hero__content { max-width: 720px; }
.home-hero h1 {
    color: #fff;
    margin: 0 0 22px;
}
.home-hero h1 span { color: var(--azure-400); }
.home-hero .lead {
    color: var(--text-on-dark-muted);
    max-width: 46ch;
}
.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}
.home-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(40px, 6vh, 64px);
}
.chip-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.chip-stat .num {
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.01em;
}
.chip-stat span:last-child {
    font-size: 0.8125rem;
    color: var(--text-on-dark-muted);
}

/* ---------- ticker strip ---------- */
.ticker-strip__label {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 26px;
}

/* ---------- service splits ---------- */
.svc { display: grid; gap: clamp(56px, 7vw, 96px); }
.svc .split__media { aspect-ratio: 4 / 3; }
.svc .split__media img { height: 100%; }

.btn--soft-amber { background: var(--amber-050); color: var(--amber-600); }
.btn--soft-amber:hover { background: #FBE8CC; transform: translateY(-1px); }
.btn--soft-gold { background: var(--gold-050); color: var(--gold-600); }
.btn--soft-gold:hover { background: #F6EBC4; transform: translateY(-1px); }

/* ---------- about ---------- */
.about-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: clamp(32px, 4vw, 48px);
    border-radius: var(--r-xl);
    background: var(--paper);
    border: 1px solid var(--border);
}
.about-quote__mark {
    color: var(--azure-500);
    margin-bottom: 18px;
}
.about-quote__text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--text-strong);
    max-width: 24ch;
}
.about-quote__attr {
    margin-top: 26px;
    font-size: 0.9375rem;
    color: var(--text-muted);
}
.about-quote__attr strong {
    display: block;
    color: var(--text-strong);
}
.about-story p + p { margin-top: 16px; }
.about-story h3 { margin-bottom: 16px; }

/* ---------- milestones ---------- */
.milestones__foot {
    margin-top: 40px;
    font-size: 0.9375rem;
    color: var(--text-on-dark-faint);
}

/* ---------- testimonials header row ---------- */
.quotes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.quotes-head .section-head { margin-bottom: 0; }
.quotes-head + .quotes__track { margin-top: 36px; }

/* ---------- pricing teaser ---------- */
.plan--compact { padding: 30px 28px; }
.plan--compact .plan__amount { font-size: 2.3rem; }
.teaser-grid {
    max-width: 880px;
    margin-inline: auto;
}
.teaser-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-faint);
}

/* ---------- contact ---------- */
.contact-note {
    margin-top: 14px;
    font-size: 0.8125rem;
    color: var(--text-faint);
}
.interests-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-strong);
}

/* ============================================================
   LIGHT HOMEPAGE  (designfrontendpagehero.png)
   Solid white nav bar, dark type, and the skyline running
   full-bleed but fading out to white on the left so the copy
   sits on clean paper instead of a dark scrim.

   Scoped to .page-home (set on <body> in index.html) so the
   interior pages keep the dark transparent-nav-over-hero build.
   ============================================================ */

/* ---------- navbar: solid white ---------- */
.page-home .navbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.page-home .navbar.is-scrolled,
.page-home .navbar.is-open {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--border);
    box-shadow: 0 1px 14px rgba(8, 14, 26, 0.07);
}
.page-home .navbar__wordmark { color: var(--text-strong); }
.page-home .navbar__wordmark b { color: var(--text-strong); }
.page-home .navbar__link { color: var(--text-strong); }
.page-home .navbar__link:hover { color: var(--azure-600); background: var(--azure-050); }
.page-home .navbar__caret { color: var(--text-muted); }
.page-home .navbar__toggle { color: var(--text-strong); }
.page-home .navbar__menu {
    background: #fff;
    border-color: var(--border);
    box-shadow: 0 18px 44px rgba(8, 14, 26, 0.14);
}
.page-home .navbar__menu-item { color: var(--text-strong); }
.page-home .navbar__menu-item:hover { background: var(--azure-050); }
.page-home .navbar__mobile { background: #fff; border-top: 1px solid var(--border); }
.page-home .navbar__mobile-link { color: var(--text-strong); }
.page-home .navbar__mobile-link:hover { background: var(--azure-050); }
.page-home .navbar__mobile-group { border-bottom-color: var(--border); }
.page-home .navbar__cta .btn--ghost-dark,
.page-home .navbar__cta .btn--ghost-gold {
    border-color: var(--border-strong);
    color: var(--text-strong);
    background: #fff;
}
.page-home .navbar__cta .btn--ghost-dark:hover,
.page-home .navbar__cta .btn--ghost-gold:hover {
    border-color: var(--azure-500);
    background: var(--azure-050);
}

/* ---------- hero: light ---------- */
.page-home .home-hero {
    background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--paper) 100%);
    color: var(--text-muted);
}
/* The scrim, grid and ornament all exist to hold white type over a dark
   photo. None of them belong on a light hero. */
.page-home .home-hero__scrim,
.page-home .home-hero__grid,
.page-home .home-hero .ornament { display: none; }

.page-home .home-hero__img {
    /* full-bleed, feathered out to white across the left third so the
       headline and buttons sit on clean paper */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 4%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.78) 36%, #000 52%);
            mask-image: linear-gradient(90deg,
        transparent 4%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.78) 36%, #000 52%);
}

.page-home .home-hero__content { max-width: 700px; }
.page-home .home-hero .eyebrow { color: var(--azure-600); }
.page-home .home-hero .lead { color: var(--text-muted); }
.page-home .home-hero h1 { color: var(--text-strong); }
.page-home .home-hero h1 span { color: var(--azure-500); }

.page-home .home-hero .btn--ghost-dark {
    border-color: var(--border-strong);
    color: var(--text-strong);
    background: #fff;
}
.page-home .home-hero .btn--ghost-dark:hover {
    border-color: var(--azure-500);
    background: var(--azure-050);
}

/* ---------- stat cards ---------- */
/* Frosted rather than solid: they overlap the photo, and the blur keeps
   them legible without hiding the skyline behind them. */
.page-home .home-hero__chips {
    gap: 14px;
    flex-wrap: nowrap;
}
.page-home .chip-stat {
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    flex: 1 1 0;
    min-width: 0;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--r-lg);
    box-shadow: 0 4px 20px rgba(8, 14, 26, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.page-home .chip-stat__icon { color: var(--azure-500); flex: none; }
.page-home .chip-stat__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.page-home .chip-stat .num { color: var(--text-strong); font-size: 1.15rem; }
.page-home .chip-stat span:last-child { color: var(--text-muted); font-size: 0.8125rem; }

@media (max-width: 1100px) {
    .page-home .chip-stat { padding: 12px 14px; gap: 10px; }
    .page-home .chip-stat span:last-child { font-size: 0.75rem; }
}
@media (max-width: 900px) {
    .page-home .home-hero__img {
        -webkit-mask-image: none;
                mask-image: none;
        opacity: 0.16;
    }
    .page-home .home-hero__content { max-width: none; }
}
@media (max-width: 720px) {
    .page-home .home-hero__chips { flex-wrap: wrap; }
}

/* ---------- full-screen hero ---------- */
/* The base hero is 88vh, which left the "Trusted by managing agents across
   South Africa" ticker strip peeking in below the fold. One full viewport
   means the hero is all you see on load. svh so a mobile browser's
   retracting URL bar does not push the strip back into view. */
.page-home .home-hero {
    min-height: 100vh;
    min-height: 100svh;
}