/* =============================================================================
   Equity.us Redesign — shared design-system layer (2026 Figma redesign)
   Loaded AFTER site.css and bootstrap so it can refine the existing look without
   rewriting the legacy stylesheet. Additive + reversible: remove the <link> in
   _Layout to fall back to the old design.
   Brand: Manrope (display) / Heebo (body), Equity blue #0054a0.
   ============================================================================= */

:root {
    /* ---- EXACT Figma tokens (from published figma.site JSON, 2026-06-17) ---- */
    --fx-blue: #0054a0;       /* primary blue (×91 in design) */
    --fx-tint: #ebf1f7;       /* light blue section bg */
    --fx-tint-2: #f4f7fa;
    --fx-pale: #c6e4f6;       /* pale blue accent */
    --fx-ink: #1a1a1a;        /* body ink */
    --fx-black: #000000;
    --fx-navy: #001733;       /* dark navy */
    --fx-navy-2: #00274a;
    --fx-white: #ffffff;
    /* Figma fonts: Manrope (display headings), Heebo (body/labels), Inter (footer/CTA), Mulish, Poppins */
    --fx-display: "Manrope", sans-serif;
    --fx-body: "Heebo", sans-serif;
    --fx-ui: "Inter", sans-serif;

    /* ---- Brand palette (matches existing --equity-blue) ---- */
    --eq-blue: #0054a0;
    --eq-blue-600: #0a4a8a;
    --eq-blue-700: #073a6e;
    --eq-blue-accent: #2f7fe0;   /* brighter blue for cards / numbered marks */
    --eq-cyan: #00d1ff;
    --eq-green: #228741;
    --eq-orange: #e86c2c;

    /* ---- Neutrals ---- */
    --eq-ink: #1e1e1e;
    --eq-ink-soft: rgba(30, 30, 30, 0.72);
    --eq-line: #e6e9ef;
    --eq-surface: #ffffff;
    --eq-surface-tint: #f5f8fc;   /* very light blue section bg */
    --eq-pill-bg: #e8f0fb;        /* eyebrow pill background */

    /* ---- Radii ---- */
    --eq-radius-sm: 10px;
    --eq-radius: 16px;
    --eq-radius-lg: 24px;
    --eq-radius-pill: 999px;

    /* ---- Spacing scale ---- */
    --eq-space-xs: 0.5rem;
    --eq-space-sm: 1rem;
    --eq-space-md: 1.75rem;
    --eq-space-lg: 3rem;
    --eq-space-xl: 5rem;
    --eq-space-2xl: 7.5rem;

    /* ---- Shadows ---- */
    --eq-shadow-sm: 0 2px 8px rgba(7, 58, 110, 0.06);
    --eq-shadow: 0 12px 32px rgba(7, 58, 110, 0.10);

    /* ---- Type scale ---- */
    --eq-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
    --eq-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --eq-h3: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    --eq-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
}

/* ---- Base typographic refinements ---- */
.eq-redesign {
    color: var(--eq-ink-soft);
    background-color: var(--eq-surface);
}

.eq-redesign h1, .eq-redesign h2, .eq-redesign h3,
.eq-redesign .eq-h1, .eq-redesign .eq-h2, .eq-redesign .eq-h3 {
    font-family: "Manrope", sans-serif;
    color: var(--eq-ink);
    letter-spacing: -0.015em;
    word-spacing: normal;
    line-height: 1.12;
}

.eq-h1 { font-size: var(--eq-h1); font-weight: 800; }
.eq-h2 { font-size: var(--eq-h2); font-weight: 800; }
.eq-h3 { font-size: var(--eq-h3); font-weight: 700; }
.eq-lead { font-size: var(--eq-lead); line-height: 1.6; color: var(--eq-ink-soft); }

/* -----------------------------------------------------------------------------
   INVISIBLE-HEADING GUARD. The rule above (.eq-redesign h1/h2/h3, specificity
   0,1,1) forces dark --eq-ink onto headings. Any heading meant to be WHITE on a
   dark/photo background that relies on a lower-specificity hook (.text-white
   0,1,0, or a bare .fx-*/.os-* white rule) LOSES the cascade and renders dark-
   on-dark = invisible. These higher-specificity rules restore white so every
   on-dark heading is visible. (Root-cause fix for the hero + page sweep.)
   -------------------------------------------------------------------------- */
.eq-redesign h1.text-white, .eq-redesign h2.text-white, .eq-redesign h3.text-white,
.eq-redesign h4.text-white, .eq-redesign h5.text-white, .eq-redesign h6.text-white,
.eq-redesign .text-white { color: #fff !important; }
/* White headings inside known dark fx-/os-/eq- bands and gradient cards */
.eq-redesign .fx-hero__title,
.eq-redesign .fx-band h1, .eq-redesign .fx-band h2, .eq-redesign .fx-band h3,
.eq-redesign .os-values__title, .eq-redesign .os-service h2,
.eq-redesign .fx-dark h1, .eq-redesign .fx-dark h2, .eq-redesign .fx-dark h3,
.eq-redesign .eq-hero h1, .eq-redesign .eq-hero h2, .eq-redesign .eq-hero h3,
.eq-redesign .eq-hero .eq-h1, .eq-redesign .eq-hero .eq-h2, .eq-redesign .eq-hero .eq-h3,
.eq-redesign .eq-card--blue .eq-card__title, .eq-redesign .eq-card--accent .eq-card__title,
/* page-scoped white dark-band titles (each loses to .eq-redesign h2 at 0,1,1) */
.eq-redesign .we-stats__title, .eq-redesign .ab-ecard__title, .eq-redesign .ab-card--feature .ab-card__title,
.eq-redesign .faq-card__title, .eq-redesign .l5-hero__title, .eq-redesign .l7-band__title,
.eq-redesign .loc-hero__title, .eq-redesign .sup-card__title { color: #fff !important; }

/* ---- Section rhythm ---- */
.eq-section { padding-block: var(--eq-space-xl); }
.eq-section--tint { background: var(--eq-surface-tint); }
.eq-container { width: min(1180px, 92%); margin-inline: auto; }

/* ---- Eyebrow pill (blue "JOIN EQUITY RE" label above headlines) ---- */
.eq-eyebrow {
    display: inline-block;
    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eq-blue);
    background: var(--eq-pill-bg);
    padding: 0.4rem 0.9rem;
    border-radius: var(--eq-radius-pill);
    margin-bottom: var(--eq-space-sm);
}
/* On-dark variant — eyebrow sitting on a blue/gradient section (canonical;
   replaces the per-view definitions + the one-off cyan inline label). */
.eq-eyebrow--ondark {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ---- Buttons (pill style from Figma) ---- */
.eq-redesign .btn.eq-btn,
.eq-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    border-radius: var(--eq-radius-pill);
    padding: 0.7rem 1.5rem;
    border: 1.5px solid transparent;
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.eq-btn--primary { background: var(--eq-blue); color: #fff; }
.eq-btn--primary:hover { background: var(--eq-blue-700); color: #fff; transform: translateY(-1px); box-shadow: var(--eq-shadow-sm); }
.eq-btn--ghost { background: transparent; color: var(--eq-blue); border-color: var(--eq-line); }
.eq-btn--ghost:hover { background: var(--eq-pill-bg); color: var(--eq-blue-700); }
.eq-btn--light { background: #fff; color: var(--eq-blue); }
.eq-btn--light:hover { background: var(--eq-surface-tint); color: var(--eq-blue-700); }

/* ---- Cards ---- */
.eq-card {
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: var(--eq-radius);
    padding: var(--eq-space-md);
    box-shadow: var(--eq-shadow-sm);
    height: 100%;
}
.eq-card--feature { display: flex; flex-direction: column; gap: 0.75rem; }
.eq-card--blue   { background: var(--eq-blue-700); color: #fff; border: none; }   /* solid navy per Figma */
.eq-card--accent { background: var(--eq-blue-accent); color: #fff; border: none; } /* brighter blue for contrast */
.eq-card--blue .eq-card__title, .eq-card--accent .eq-card__title { color: #fff; }
.eq-card__title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--eq-ink); }
.eq-card__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--eq-pill-bg);
    color: var(--eq-blue);
    font-size: 1.1rem;
}

/* ---- Numbered feature mark (01, 02 ...) ---- */
.eq-num {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--eq-blue-accent);
}

/* ---- Accent underline divider under labels ---- */
.eq-underline::after {
    content: "";
    display: block;
    width: 38px; height: 3px;
    background: var(--eq-blue);
    border-radius: 2px;
    margin-top: 0.5rem;
}

/* ---- Feature grid ---- */
.eq-feature-grid { display: grid; gap: var(--eq-space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* =============================================================================
   Figma-faithful components (rebuild, 2026-06-17) — used by the rebuilt pages.
   ============================================================================= */

/* ---- Dark photographic hero (home "Real Estate. Built Around You.") ---- */
.eq-hero {
    position: relative;
    color: #fff;
    background: var(--eq-blue-700);
    background-size: cover;
    background-position: center;
    padding-block: clamp(4rem, 3rem + 8vw, 8rem);
    isolation: isolate;
}
.eq-hero::before {                       /* dark gradient scrim over the photo for legibility */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(7,30,55,0.55) 0%, rgba(7,30,55,0.78) 100%);
}
.eq-hero .eq-eyebrow { background: rgba(255,255,255,0.16); color: #fff; }
.eq-hero h1, .eq-hero .eq-h1 { color: #fff; }
.eq-hero .eq-lead { color: rgba(255,255,255,0.88); }

/* ---- Stats bar (overlaps/sits under the hero) ---- */
.eq-statbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--eq-space-md);
    background: var(--eq-surface);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow);
    padding: var(--eq-space-md);
}
.eq-stat { text-align: center; }
.eq-stat__num { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--eq-blue); line-height: 1; }
.eq-stat__label { color: var(--eq-ink-soft); font-size: 0.95rem; margin-top: 0.35rem; }

/* ---- Agent profile card (photo / name / blue role + underline) ---- */
.eq-agent-card { text-align: left; }
.eq-agent-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--eq-radius); background: var(--eq-surface-tint); }
.eq-agent-card__name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--eq-ink); margin: 0.75rem 0 0.15rem; }
.eq-agent-card__role { color: var(--eq-blue); font-weight: 600; font-size: 0.9rem; display: inline-block; }
.eq-agent-card__role::after { content: ""; display: block; width: 28px; height: 2px; background: var(--eq-blue); border-radius: 2px; margin-top: 0.4rem; }

/* ---- eBook / resource card (navy, document mockup, download link) ---- */
.eq-ebook {
    background: linear-gradient(150deg, var(--eq-blue-accent) 0%, var(--eq-blue-700) 100%);
    color: #fff; border-radius: var(--eq-radius); border: none;
    padding: var(--eq-space-md); display: flex; gap: var(--eq-space-sm); align-items: center;
}
.eq-ebook__img { width: 96px; flex: 0 0 96px; border-radius: 8px; box-shadow: var(--eq-shadow-sm); }
.eq-ebook__link { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.eq-ebook__link::after { content: "\2192"; }   /* → */

/* ---- Arrow on pill buttons (Figma buttons have a trailing →) ---- */
.eq-btn--arrow::after { content: "\2192"; }

/* ---- Placeholder image block (marks a spot for final photography) ---- */
.eq-img-ph {
    display: grid; place-items: center;
    width: 100%; min-height: 220px;
    background: repeating-linear-gradient(45deg, var(--eq-surface-tint), var(--eq-surface-tint) 12px, #eef3fa 12px, #eef3fa 24px);
    color: var(--eq-ink-soft); border-radius: var(--eq-radius); font-size: 0.85rem; text-align: center; padding: 1rem;
}

/* =============================================================================
   FX — pixel-exact Figma rebuild components (from figma.site JSON, 2026-06-17)
   ============================================================================= */
.fx-container { width: min(1280px, 90%); margin-inline: auto; }
/* NOTE: prefixed with .eq-redesign so these beat the `.eq-redesign h1/h2/h3`
   base rule (specificity 0,1,1) that otherwise forces dark --eq-ink onto the
   white hero headline. Without this the 81px hero title renders dark-on-dark
   photo = invisible. Applies to all fx- headings. */
.eq-redesign .fx-h2,
.fx-h2 { font-family: var(--fx-display); font-weight: 700; color: var(--fx-black); letter-spacing: -0.02em; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.875rem); line-height: 1.08; } /* Figma 62px */

/* ---- HERO ---- */
.fx-hero {
    position: relative; isolation: isolate;
    min-height: 760px; display: flex; align-items: center;
    background-size: cover; background-position: center; color: #fff;
}
.fx-hero::before { content:""; position:absolute; inset:0; z-index:-1;
    background: linear-gradient(180deg, rgba(0,8,20,0.30) 0%, rgba(0,8,20,0.55) 100%); }
.fx-hero__inner { width: min(1280px, 90%); margin-inline: auto; padding-block: 3rem; }
.fx-eyebrow-line { font-family: var(--fx-body); font-weight: 500; font-size: 1rem; color: #fff;
    text-transform: none; letter-spacing: 0.02em; margin-bottom: 1rem; opacity: 0.95; }
.eq-redesign .fx-hero__title,
.fx-hero__title { font-family: var(--fx-display); font-weight: 800; color: #fff !important;
    font-size: clamp(2.75rem, 1.5rem + 5vw, 5.0625rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 1.25rem; } /* Figma 81px */
.fx-hero__sub { font-family: var(--fx-body); font-weight: 400; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.375rem);
    line-height: 1.5; color: #fff; max-width: 620px; margin: 0 0 2rem; } /* Figma 22px */
.fx-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---- Buttons (Figma pill CTAs) ---- */
.fx-btn { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--fx-body); font-weight:600;
    font-size: 1.0625rem; padding: .85rem 1.75rem; border-radius: 999px; border: 1.5px solid transparent;
    text-decoration:none; transition: all .15s ease; }
.fx-btn--solid { background: var(--fx-blue); color:#fff; }
.fx-btn--solid:hover { background:#073a6e; color:#fff; }
.fx-btn--ghost-light { background: transparent; color:#fff; border-color: rgba(255,255,255,.7); }
.fx-btn--ghost-light:hover { background:#fff; color: var(--fx-blue); }

/* ---- OUR RANKS ---- */
.fx-ranks { background:#fff; padding-block: 4.5rem; }
.fx-ranks__eyebrow { font-family: var(--fx-body); font-weight:600; font-size:1.5625rem; color: var(--fx-blue);
    text-align:center; margin-bottom: 2.5rem; } /* Figma 25px */
.fx-ranks__row { display:flex; justify-content:center; gap: clamp(2rem, 8vw, 7rem); flex-wrap:wrap; }
.fx-rank { text-align:center; }
.fx-rank__badge { width:179px; height:179px; object-fit:contain; }
.fx-rank__num { font-family: var(--fx-display); font-weight:800; font-size:2.625rem; color: var(--fx-blue); line-height:1; margin-top:.5rem; } /* Figma 42px */
.fx-rank__in { font-family: var(--fx-body); font-weight:600; font-size:1.125rem; color: var(--fx-blue); letter-spacing:.04em; } /* 18px */
.fx-rank__by { font-family: var(--fx-body); font-weight:400; font-size:1rem; color: var(--fx-black); } /* 16px */

/* ---- ONE PLACE / WAYS TO GROW ---- */
.fx-ways { background:#fff; padding-block: 4.5rem; }
.fx-ways .fx-h2 { text-align:center; max-width: 16ch; margin: 0 auto .75rem; }
.fx-ways__lead { font-family: var(--fx-body); font-size:1rem; color: var(--fx-black); text-align:center; max-width:640px; margin: 0 auto 3rem; }
.fx-ways__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .fx-ways__grid { grid-template-columns: 1fr; max-width:420px; margin-inline:auto; } }
.fx-waycard { background:#fff; border-radius:18px; overflow:hidden; box-shadow: 0 8px 28px rgba(7,58,110,.08); border:1px solid var(--fx-tint); }
.fx-waycard__img { width:100%; aspect-ratio: 190/421; object-fit:cover; display:block; max-height:300px; }
.fx-waycard__body { padding: 1.5rem; }
.fx-waycard__tag { font-family: var(--fx-body); font-weight:600; font-size:.875rem; color: var(--fx-blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; } /* 14px */
.fx-waycard__title { font-family: var(--fx-body); font-weight:700; font-size:1.5625rem; color: var(--fx-ink); line-height:1.15; margin-bottom:.6rem; } /* 25px */
.fx-waycard__copy { font-family: var(--fx-body); font-size:1rem; color: var(--fx-ink); line-height:1.5; margin-bottom:1rem; } /* 16px */
.fx-link-arrow { font-family: var(--fx-body); font-weight:600; color: var(--fx-blue); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.fx-link-arrow::after { content:"\2192"; }
.fx-link-arrow:hover { color:#073a6e; }

/* =============================================================================
   FX CHROME — Navigation + Footer + shared pre-footer CTA (Figma-exact).
   Owned by the Chrome agent. Composes --fx-* tokens above.
   ============================================================================= */

/* ---- NAVIGATION (solid white sticky bar, Heebo 18px #1a1a1a links) ---- */
.fx-nav { background:#fff; padding-block: .9rem; box-shadow: 0 1px 0 rgba(0,0,0,.06); z-index: 1030; }
.fx-nav__inner { width: min(1280px, 92%); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:nowrap; }
.fx-nav__brand { padding-block:0; margin:0; display:inline-flex; align-items:center; }
.fx-nav__brand img { height:51px; width:auto; }
.fx-nav__toggler:focus { box-shadow:none; }
.fx-nav__collapse { display:flex; align-items:center; justify-content:space-between; flex-grow:1; }
.fx-nav__links { flex-direction:row; align-items:center; gap:.25rem; margin: 0 auto; }
.fx-nav__link {
    font-family: var(--fx-body); font-weight:500; font-size:1.125rem; /* Figma 18px */
    color: var(--fx-ink); padding:.4rem 1rem !important; white-space:nowrap;
    border-radius:999px; transition: color .12s ease, background-color .12s ease;
}
.fx-nav__link:hover, .fx-nav__link:focus,
.fx-nav .nav-item.show > .fx-nav__link { color: var(--fx-blue); background: var(--fx-tint); }
.fx-nav__link.dropdown-toggle::after { margin-left:.4rem; vertical-align:.1em; border-top-color: currentColor; }
.fx-nav__menu { border:1px solid var(--eq-line); border-radius:10px; box-shadow: 0 12px 32px rgba(7,58,110,.10); padding:.4rem; margin-top:.4rem; min-width:230px; }
.fx-nav__item { font-family: var(--fx-body); font-weight:400; font-size:1rem; color: var(--fx-ink); border-radius:8px; padding:.5rem .75rem; }
.fx-nav__item:hover, .fx-nav__item:focus { color: var(--fx-blue); background: var(--fx-tint); }
.fx-nav__cta { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.fx-nav__contact { padding:.6rem 1.4rem; font-size:1rem; }
@media (max-width: 1199.98px) {
    .fx-nav__inner { flex-wrap:wrap; }
    .fx-nav__collapse { flex-direction:column; align-items:stretch; width:100%; }
    .fx-nav__links { flex-direction:column; align-items:stretch; gap:.1rem; margin:.75rem 0; }
    .fx-nav__link { padding:.7rem .9rem !important; }
    .fx-nav__menu { box-shadow:none; border:0; padding-left:1rem; margin-top:0; }
    .fx-nav__cta { flex-direction:column; align-items:stretch; gap:.75rem; padding-top:.5rem; border-top:1px solid var(--eq-line); }
    .fx-nav__contact { justify-content:center; text-align:center; }
}

/* ---- FOOTER (Inter font · 4 link columns + brand/contact) ---- */
/* No border-top + tighter top padding: the pre-footer CTA (.fx-cta, also white) now
   flows straight into the footer as one continuous block instead of a hard seam. */
.fx-foot { background:#fff; padding-block: 1.5rem 2rem; }
.fx-foot__grid { display:grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 2.5rem; align-items:start; }
.fx-foot__col { min-width:0; }
.fx-foot__head { font-family: var(--fx-ui); font-weight:600; font-size:.875rem; letter-spacing:.04em; text-transform:uppercase; color: var(--fx-black); margin-bottom:1rem; } /* Figma label 10px scaled up for legibility */
.fx-foot__list, .fx-foot__contact { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.fx-foot__link { font-family: var(--fx-ui); font-weight:400; font-size:.875rem; color: var(--fx-black); text-decoration:none; transition: color .12s ease; } /* Inter 14px */
.fx-foot__link:hover, .fx-foot__link:focus { color: var(--fx-blue); }
.fx-foot__brand { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.fx-foot__logo { height:60px; width:auto; }
.fx-foot__contact { gap:.4rem; }
.fx-foot__social > div { gap:.5rem; display:flex; }
.fx-foot__social a { display:grid; place-items:center; width:38px; height:38px; border-radius:999px; background:#fff; border:1px solid var(--eq-line); transition: transform .12s ease, border-color .12s ease; }
.fx-foot__social a:hover { transform: translateY(-1px); border-color: var(--fx-blue); }
.fx-foot__social img.social-icon { width:18px; height:18px; margin:0 !important; }
.fx-foot__rule { border:0; border-top:1px solid var(--eq-line); opacity:1; margin-block: 2.5rem 1.25rem; }
.fx-foot__copy { font-family: var(--fx-ui); font-size:.75rem; color: var(--fx-black); margin:0; } /* Inter 10px */
.fx-foot__copy a { color: var(--fx-blue); text-decoration:none; }
.fx-foot__copy a:hover { text-decoration:underline; }
@media (max-width: 991.98px) {
    .fx-foot__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .fx-foot__brand { grid-column: 1 / -1; order:-1; }
}
@media (max-width: 575.98px) {
    .fx-foot__grid { grid-template-columns: 1fr; }
}

/* ---- SHARED FAQ ACCORDION (native <details>, used by /faq + service pages) ---- */
.faq-item { border: 1px solid var(--fx-tint); border-radius: 14px; background: #fff; margin-bottom: .85rem; overflow: hidden;
    box-shadow: 0 4px 18px rgba(7,58,110,.05); transition: box-shadow .15s ease, border-color .15s ease; }
.faq-item[open] { border-color: var(--fx-pale); box-shadow: 0 8px 26px rgba(7,58,110,.09); }
.faq-item__q { font-family: var(--fx-body); font-weight: 600; font-size: 1.5625rem; color: var(--fx-ink); /* Heebo 25px #1a1a1a */
    line-height: 1.25; list-style: none; cursor: pointer; padding: 1.25rem 3.25rem 1.25rem 1.5rem; position: relative; outline: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: "+"; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
    font-family: var(--fx-display); font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--fx-blue); transition: transform .2s ease; }
.faq-item[open] .faq-item__q::after { content: "\2212"; } /* minus */
.faq-item__q:focus-visible { box-shadow: inset 0 0 0 2px var(--fx-blue); border-radius: 12px; }
.faq-item__a { padding: 0 1.5rem 1.4rem; }
.faq-item__a p { font-family: var(--fx-body); font-weight: 400; font-size: 1rem; color: var(--fx-black); /* Heebo 16px #000 */
    line-height: 1.65; margin: 0; max-width: 78ch; }

/* ---- SHARED PRE-FOOTER CTA ("Ready for What's Next?", Inter) ---- */
/* White (matches footer) + trimmed height so it reads as the top of the footer
   experience, not a standalone tinted band. */
.fx-cta { background:#fff; padding-block: 3rem 2.5rem; }
.fx-cta__inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
.fx-cta__copy { min-width:0; }
.fx-cta__eyebrow { font-family: var(--fx-ui); font-weight:600; font-size:1.75rem; color: var(--fx-blue); margin:0 0 1rem; line-height:1.15; } /* Inter 28px */
.fx-cta__lead { font-family: var(--fx-ui); font-weight:400; font-size:.875rem; color: var(--fx-blue); line-height:1.7; max-width: 46ch; margin:0 0 1.75rem; } /* Inter 14px */
.fx-cta__btn { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--fx-ui); font-weight:600; font-size:1.25rem; /* Inter 20px */
    background: var(--fx-blue); color:#fff; padding:.85rem 2rem; border-radius:999px; text-decoration:none; transition: background-color .15s ease, transform .15s ease; }
.fx-cta__btn:hover { background:#073a6e; color:#fff; transform: translateY(-1px); }
.fx-cta__btn::after { content:"\2192"; }
.fx-cta__media { display:flex; justify-content:center; }
.fx-cta__img { width:100%; max-width:440px; height:auto; border-radius:20px; display:block; }
@media (max-width: 900px) {
    .fx-cta__inner { grid-template-columns: 1fr; gap:2rem; }
    .fx-cta__media { order:-1; }
    .fx-cta__lead { max-width:none; }
}

/* ---- HOME "The Best Business Is Still Personal." (text + photo) ---- */
.fx-personal { background:#fff; padding-block: 4.5rem; }
.fx-personal__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items:center; }
.fx-personal__copy { min-width:0; }
.fx-personal__lead { font-family: var(--fx-body); font-weight:400; font-size:1rem; color: var(--fx-black); line-height:1.7; margin: 1.5rem 0 0; max-width: 52ch; } /* Heebo 16px */
.fx-personal__media { display:flex; justify-content:center; }
.fx-personal__img { width:100%; max-width:600px; height:auto; border-radius:20px; display:block; object-fit:cover; }
@media (max-width: 900px) {
    .fx-personal__grid { grid-template-columns: 1fr; gap:2rem; }
    .fx-personal__lead { max-width:none; }
}

/* ---- HOME FEATURED AGENT TESTIMONIALS ("Hear It From Our Agents.") ---- */
.fx-voices { background: var(--fx-tint); padding-block: 4.5rem; }
.fx-voices__eyebrow { font-family: var(--fx-ui); font-weight:600; font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fx-blue); text-align:center; margin:0 0 .75rem; }
.fx-voices__title { text-align:center; max-width: 22ch; margin: 0 auto .75rem; }
.fx-voices__lead { font-family: var(--fx-body); font-size:1rem; color: var(--fx-black); text-align:center; max-width:640px; margin:0 auto 3rem; }
.fx-voices__grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 992px) { .fx-voices__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .fx-voices__grid { grid-template-columns: 1fr; } }
.fx-voice { display:flex; flex-direction:column; gap:1.25rem; background:#fff; border:1px solid var(--eq-line); border-radius:16px; padding:1.75rem; margin:0; box-shadow: var(--eq-shadow-sm); }
.fx-voice__quote { font-family: var(--fx-body); font-size:1rem; line-height:1.6; color: var(--fx-black); margin:0; flex:1 1 auto; }
.fx-voice__quote p { margin:0; }
.fx-voice__quote::before { content:"\201C"; color: var(--fx-blue); font-family: var(--fx-display); font-weight:800; font-size:2rem; line-height:0; vertical-align:-0.35em; margin-right:.1em; }
.fx-voice__cap { display:flex; align-items:center; gap:.85rem; }
.fx-voice__avatar { width:48px; height:48px; border-radius:999px; object-fit:cover; border:1px solid var(--eq-line); flex:0 0 auto; }
.fx-voice__id { display:flex; flex-direction:column; min-width:0; }
.fx-voice__name { font-family: var(--fx-ui); font-weight:600; font-size:1rem; color: var(--fx-black); }
.fx-voice__role { font-family: var(--fx-ui); font-weight:400; font-size:.875rem; color: var(--fx-blue); }

/* ---- WHAT HAPPENS BEHIND THE SCENES (stats) ---- */
.fx-behind { background:#fff; padding-block: 4.5rem; }
.fx-behind__title { text-align:center; max-width: 20ch; margin: 0 auto .75rem; }
.fx-behind__lead { font-family: var(--fx-body); font-size:1rem; color: var(--fx-black); text-align:center; max-width:640px; margin:0 auto 3rem; }
.fx-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; }
@media (max-width:760px){ .fx-stats{ grid-template-columns: repeat(2,1fr); } }
.fx-stat { text-align:center; }
.fx-stat__num { font-family: var(--fx-display); font-weight:800; font-size:2.625rem; color: var(--fx-blue); line-height:1; } /* 42px */
.fx-stat__lbl { font-family: var(--fx-body); font-weight:600; font-size:1.125rem; color: var(--fx-black); letter-spacing:.04em; margin-top:.5rem; } /* 18px UPPER */

/* ---- WHEREVER YOU'RE HEADED (face grid) ---- */
.fx-headed { background:#fff; padding-block: 4.5rem 5.5rem; text-align:center; }
.fx-headed__title { max-width: 22ch; margin: 0 auto .75rem; }
.fx-headed__lead { font-family: var(--fx-body); font-size:1rem; color: var(--fx-black); max-width:640px; margin:0 auto 2.5rem; }
.fx-headed__faces { width:100%; max-width:1311px; height:auto; display:block; margin-inline:auto; }


/* ---- Agent face marquee (home "Wherever You're Headed") — two rows, opposite
   directions, pure-CSS seamless loop (faces listed 2x in markup → -50% loops). ---- */
.fx-faces { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.fx-faces__row { overflow: hidden; width: 100%; }
.fx-faces__track { display: flex; gap: 1rem; width: max-content; }
.fx-faces__face { width: 150px; height: 150px; object-fit: cover; border-radius: 14px; flex: none; }
@media (max-width: 760px) { .fx-faces__face { width: 110px; height: 110px; } }
@media (prefers-reduced-motion: no-preference) {
    .fx-faces__row--left  .fx-faces__track { animation: fxFacesLeft  45s linear infinite; }
    .fx-faces__row--right .fx-faces__track { animation: fxFacesRight 45s linear infinite; }
    .fx-faces:hover .fx-faces__track { animation-play-state: paused; }
}
/* faces are listed twice; -50% = exactly one full set, so it loops seamlessly */
@keyframes fxFacesLeft  { from { transform: translateX(0); }              to { transform: translateX(calc(-50% - 0.5rem)); } }
@keyframes fxFacesRight { from { transform: translateX(calc(-50% - 0.5rem)); } to { transform: translateX(0); } }