/* ==========================================================================
   FMH brand + layout overrides — loaded after the theme stylesheet.
   The theme caps everything at 1440px and leaves its 1600px breakpoint empty,
   so large displays get no treatment at all. Everything below is additive:
   the original theme CSS is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Logos
   The "fmh / find my home" lockup is a two-line mark, so size the header and
   footer logos by height for a balanced header rather than by container width.
   -------------------------------------------------------------------------- */
.header .logo,
.footer .ft_logo {
    width: auto;
    max-width: 240px;
    -webkit-box: 0 0 auto;
    -moz-box: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.header .logo img {
    width: auto;
    height: 72px;
    max-width: 100%;
}

.footer .ft_1 .ft_logo img {
    width: auto;
    height: 58px;
    max-width: 100%;
}

/* Legal entity line in the footer — quieter than the copyright it sits under. */
.footer .ft_copyright .ft_entity {
    display: inline-block;
    margin-top: 4px;
    opacity: 0.7;
    font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   2. Content width
   Raise the 1440px cap so large monitors aren't mostly empty margin.
   Narrower wrappers (.testimonial_row etc.) have higher specificity in the
   theme and are deliberately left alone for readability.
   -------------------------------------------------------------------------- */
.wrapper {
    max-width: 1680px;
}

/* --------------------------------------------------------------------------
   3. Type scale on large displays
   The theme locks headings to a fixed 60px above 1024px and only ever scales
   down, which reads as small and static on a big screen.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1441px) {
    .wrapper { padding: 0 clamp(100px, 5vw, 130px); }


    h1, .h1 { font-size: clamp(60px, 3.3vw, 72px); }
    h2, .h2 { font-size: clamp(40px, 2.2vw, 47px); }
    h3, .h3 { font-size: clamp(33px, 1.75vw, 38px); }

    /* Body copy barely moves — growing it is what makes a page feel oversized. */
    .cms p,
    .cms ul,
    .cms ol { font-size: clamp(18px, 0.95vw, 19px); }

    /* Let the hero copy breathe at the wider measure */
    .top_banner .banner_content .cms { max-width: 900px; }
    .top_banner .banner_content p { max-width: 620px; font-size: clamp(24px, 1.25vw, 26px); }
}

/* --------------------------------------------------------------------------
   3b. Post-hero intro section — "overline + big lead"
   The theme lays this out as a two-column split with a fixed-width left
   column, which leaves a wide void down the middle and dead space beneath.
   Restructured (CSS only, markup untouched) into: a small uppercase overline,
   a large full-width lead paragraph, then bullets in two columns.
   Applies to .two_col_contents (home, Properties, Mortgages) and
   .two_col_contents_v2 (About us, How we work).
   -------------------------------------------------------------------------- */
.two_col_contents > .wrapper,
.two_col_contents_v2 .wrapper {
    display: block;
}

.two_col_contents .tc_left,
.two_col_contents .tc_right,
.two_col_contents_v2 .tc_left,
.two_col_contents_v2 .tc_right {
    width: 100%;
    max-width: 100%;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

/* Heading becomes a compact overline. The theme hard-wraps these with <br>, so
   those are suppressed to let it sit on one line. */
.two_col_contents .tc_left .cms h1,
.two_col_contents .tc_left .cms h2,
.two_col_contents_v2 .tc_left .cms h1,
.two_col_contents_v2 .tc_left .cms h2 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 0 6px;
    color: #7EC85C;
    text-align: center;
}

/* Trim the dead space the theme's spacers leave above the eyebrow, but keep a
   little breathing room between the hero and the intro block. */
.two_col_contents,
.two_col_contents_v2 { padding-top: 34px; }

/* The theme's spacer divs get an inline height from global.js, so !important is
   required to trim the one immediately preceding this section. */
.spacer:has(+ .two_col_contents),
.spacer:has(+ .two_col_contents_v2) { height: 24px !important; }

.two_col_contents .tc_left .cms br,
.two_col_contents_v2 .tc_left .cms br { display: none; }

.two_col_contents .tc_left .cms .green,
.two_col_contents_v2 .tc_left .cms .green {
    display: inline !important;
    color: inherit;
}

/* Thin rule under the overline. Constrained to the same measure as the copy
   below it so the whole centred block shares one set of edges. */
.two_col_contents .tc_left .cms,
.two_col_contents_v2 .tc_left .cms {
    border-bottom: 1px solid rgba(126, 200, 92, 0.35);
    padding-bottom: 14px;
    margin: 0 auto 30px;
    max-width: 980px;
}

/* Paragraphs centred in a readable measure, bullets in two columns beneath.
   text-wrap:balance evens the line lengths so the last line is never a single
   orphaned word. */
.two_col_contents .tc_right .cms > p,
.two_col_contents_v2 .tc_right .cms > p {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: balance;
}

/* First paragraph becomes the lead */
.two_col_contents .tc_right .cms > p:first-child,
.two_col_contents_v2 .tc_right .cms > p:first-child {
    font-size: clamp(21px, 1.45vw, 26px);
    line-height: 1.35;
    font-weight: 300;
    padding-top: 0;
}

/* Bullets below, two across, centred as a block but left-aligned to read */
.two_col_contents .tc_right .cms ul,
.two_col_contents_v2 .tc_right .cms ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 70px;
    max-width: 980px;
    margin: 26px auto 0;
    text-align: left;
}

@media only screen and (max-width: 767px) {
    .two_col_contents .tc_right .cms > p,
    .two_col_contents_v2 .tc_right .cms > p { text-align: left; }
    .two_col_contents .tc_right .cms ul,
    .two_col_contents_v2 .tc_right .cms ul {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --------------------------------------------------------------------------
   3c. Stage tabs (Properties page)
   The theme ships this as a vertical accordion with 40px headers and 95px of
   section padding — tall, and slow to click through. fmh.js rebuilds it as a
   horizontal tab strip; these are the styles for that.
   -------------------------------------------------------------------------- */
/* Tight bottom padding so the outcome band follows on closely */
.content_accordion { padding: 60px 0 22px; }

.stage_tabs {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px;
}

.stage_tab {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 190px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #d2ebc1;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    -webkit-transition: background 0.2s ease, transform 0.2s ease;
    transition: background 0.2s ease, transform 0.2s ease;
}

.stage_tab:hover { background: #c1e4ad; }

.stage_tab .stage_num {
    -webkit-flex: 0 0 34px;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #7EC85C;
    font-weight: 700;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
}

.stage_tab .stage_label {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 500;
    color: #4D4D4D;
}

.stage_tab.is-active { background: #7EC85C; }
.stage_tab.is-active .stage_label { color: #fff; }
.stage_tab:focus-visible { outline: 2px solid #4D4D4D; outline-offset: 2px; }

.stage_panels { background: #fff; }
.stage_panel { display: none; }

/* Keep the panel compact: the theme's 32% text column left the image huge */
.content_accordion .stage_panel .acc_padding { padding: 40px 45px 45px; }

.content_accordion .stage_panel .acc_left {
    width: 40%;
    max-width: 40%;
    -webkit-flex: 0 0 40%;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
}

.content_accordion .stage_panel .acc_right {
    width: 55%;
    max-width: 55%;
    -webkit-flex: 0 0 55%;
    -ms-flex: 0 0 55%;
    flex: 0 0 55%;
}

.content_accordion .stage_panel .acc_right img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    object-position: top right;
}

.content_accordion .stage_panel .gen_btn.mt-50 { margin-top: 28px; }

@media only screen and (max-width: 1024px) {
    /* Three even tabs per row rather than a ragged wrap */
    .stage_tab {
        min-width: 0;
        -webkit-flex: 0 0 calc(33.333% - 4px);
        flex: 0 0 calc(33.333% - 4px);
        max-width: calc(33.333% - 4px);
    }
    /* The theme's row only wraps below 767px, so force it here or the two
       full-width columns sit side by side and overflow the viewport. */
    .content_accordion .stage_panel .acc_padding {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .content_accordion .stage_panel .acc_left,
    .content_accordion .stage_panel .acc_right {
        width: 100%;
        max-width: 100%;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }
    .content_accordion .stage_panel .acc_right { margin-top: 24px; }
    .content_accordion .stage_panel .acc_right img { object-position: top left; }
}

@media only screen and (max-width: 767px) {
    .content_accordion { padding: 40px 0; }
    .stage_tab {
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 13px 15px;
    }
    .content_accordion .stage_panel .acc_padding { padding: 25px 20px 30px; }
}

/* --------------------------------------------------------------------------
   3d. "The outcome" closing band (Properties page)
   Was a bare centred heading + paragraph floating on white between the stage
   tabs and the green CTA. Restyled to reuse the same eyebrow + lead language
   as the intro sections, on a light green band that steps up into the CTA.
   Scoped to the page because .cta_contents is shared with Mortgages, where the
   heading is a full statement and must stay full size.
   -------------------------------------------------------------------------- */
.page-properties .cta_contents {
    background: #EEF7E3;
    padding: 32px 0 62px;
}

/* Drop the theme's 90px spacer so the band runs straight into the green CTA
   instead of leaving a white bar between them. */
.page-properties .spacer:has(+ .cta_banner) { display: none; }

/* Theme sets conflicting inline max-widths (885px wrapper / 990px inner);
   normalise to the same 980px measure used by the intro block. */
.page-properties .cta_contents .wrapper { max-width: 980px !important; }
.page-properties .cta_contents .cms > div { max-width: 100% !important; }

.page-properties .cta_contents .cms h2 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7EC85C;
    padding: 0 0 14px;
    margin: 0 0 26px;
    border-bottom: 1px solid rgba(126, 200, 92, 0.45);
}

.page-properties .cta_contents .cms p {
    font-size: clamp(21px, 1.45vw, 26px);
    line-height: 1.35;
    font-weight: 300;
    padding-top: 0;
}

/* Empty button holders shouldn't leave a gap (hidden only when truly empty) */
.cta_btns:not(:has(a)):not(:has(button)) { display: none; }

/* --------------------------------------------------------------------------
   3e. "The platform" section (Mortgages page only)
   Theme issues: the two column headings are wildly different sizes (62px vs
   42px) though they're peers; the columns are 50%/40.3% so the wider wrapper
   inflates the gutter to ~160px and squeezes the table; a hard 70px margin
   leaves a void above the button; and 100px of band padding leaves dead space
   under the content.
   -------------------------------------------------------------------------- */
/* (heading sizing now handled by the eyebrow rules in 3f below) */
.two_col_contents_v7 .tc_col_left .gen_btn { margin-top: 32px; }

@media only screen and (min-width: 1025px) {
    .two_col_contents_v7 .tc_col_left {
        max-width: 48%;
        width: 48%;
        -webkit-flex: 0 0 48%;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
    }
    .two_col_contents_v7 .tc_col_right {
        max-width: 46%;
        width: 46%;
        -webkit-flex: 0 0 46%;
        -ms-flex: 0 0 46%;
        flex: 0 0 46%;
    }
    .two_col_contents_v7 .tc_bg { padding: 80px 0 66px; }
}

/* --------------------------------------------------------------------------
   3f. Eyebrow language across the rest of the Mortgages page
   Same spec as the intro blocks and the Properties outcome band: a compact
   uppercase label over a hairline rule, with the copy beneath carrying the
   weight. The page's own inline style forces headings to #0796C5, so these
   inherit the blue automatically.
   -------------------------------------------------------------------------- */
.page-mortgages .two_col_contents_v7 .tc_col_left .cms .h1,
.page-mortgages .two_col_contents_v7 .tc_col_right .cms .h2,
.page-mortgages .cta_contents .cms h2,
.page-mortgages .three_col_v1 .thr_col_title h1 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 0 14px;
    margin: 0 0 24px;
    border-bottom: 1px solid rgba(7, 150, 197, 0.35);
}

/* Lead paragraph under each eyebrow */
.page-mortgages .two_col_contents_v7 .tc_col_left .cms > p:first-of-type,
.page-mortgages .cta_contents .cms p,
.page-mortgages .three_col_v1 .thr_col_intro p {
    font-size: clamp(21px, 1.45vw, 26px);
    line-height: 1.35;
    font-weight: 300;
    padding-top: 0;
}

/* Centred blocks share the 980px measure used elsewhere */
.page-mortgages .cta_contents .wrapper { max-width: 980px !important; }
.page-mortgages .cta_contents .cms > div { max-width: 100% !important; }

.page-mortgages .three_col_v1 .thr_col_title {
    max-width: 980px;
    margin: 0 auto;
    padding: 70px 20px 45px;
}
.page-mortgages .three_col_v1 .thr_col_title .thr_col_intro {
    max-width: 100%;
    padding-top: 0;
}

/* Mortgage report blocks (replaces the theme's 3-row table) */
.mr_blocks {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 12px;
}

.mr_block {
    background: #fff;
    padding: 20px 26px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 26px;
}

.mr_block .mr_stage {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0796C5;
}

.mr_block .mr_name {
    display: block;
    font-size: 18px;
    line-height: 1.3;
    color: #4D4D4D;
    margin-top: 3px;
}

.mr_block .mr_cost {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 24px;
    font-weight: 700;
    color: #0796C5;
    white-space: nowrap;
}

.mr_block .mr_cost small {
    font-size: 14px;
    font-weight: 500;
}

@media only screen and (max-width: 540px) {
    .mr_block {
        -webkit-align-items: flex-start;
        align-items: flex-start;
        -webkit-flex-direction: column;
        flex-direction: column;
        gap: 10px;
    }
}

/* Card headings sit below the lead in the hierarchy */
.page-mortgages .three_col_v1 .thr_col .cms .h2 {
    font-size: clamp(24px, 1.6vw, 30px);
    margin-bottom: 22px !important;
}

/* --------------------------------------------------------------------------
   3g. Homepage — eyebrow language from the products section down
   -------------------------------------------------------------------------- */
.page-home .three_col_v1 .thr_col_title .h1,
.page-home .platform_sources .ps_intro .h2,
.page-home .two_cols_v2 .pub_eyebrow {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7EC85C;
    padding: 0 0 14px;
    margin: 0 0 24px;
    border-bottom: 1px solid rgba(126, 200, 92, 0.35);
}

/* Centred section labels share the 980px measure used elsewhere */
.page-home .three_col_v1 .thr_col_title,
.page-home .platform_sources .ps_intro {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* Publication block: eyebrow is left-aligned beside the image */
.page-home .two_cols_v2 .pub_eyebrow { text-align: left; }
.page-home .two_cols_v2 .tc_txt .h1 { font-size: clamp(32px, 2.2vw, 44px); }

@media only screen and (min-width: 1025px) {
    /* Theme's 40.7%/50% split left a ~156px gutter in the wider wrapper */
    .page-home .two_cols_v2 .tc_img {
        max-width: 44%;
        width: 44%;
        -webkit-flex: 0 0 44%;
        -ms-flex: 0 0 44%;
        flex: 0 0 44%;
    }
    .page-home .two_cols_v2 .tc_txt {
        max-width: 50%;
        width: 50%;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
}

/* Event cards: date as a compact label above a real event title */
.page-home .thr_has_img .event_date {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7EC85C;
    padding: 20px 0 0;
    margin: 0 0 4px;
}

.page-home .thr_has_img .cms .h2 { font-size: clamp(22px, 1.5vw, 28px); }

/* --------------------------------------------------------------------------
   3h. How we work — eyebrow language + column fixes
   -------------------------------------------------------------------------- */
.page-working-with-us .how_to_work .htw_left .cms .h1,
.page-working-with-us .how_to_work .htw_right .cms .h2,
.page-working-with-us .two_cols_v1 .tc_intro .h1 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7EC85C;
    padding: 0 0 14px;
    margin: 0 0 24px !important;
    border-bottom: 1px solid rgba(126, 200, 92, 0.35);
}

/* Lead paragraph under each eyebrow */
.page-working-with-us .how_to_work .htw_left .cms > p:first-of-type,
.page-working-with-us .two_cols_v1 .tc_intro p:first-of-type {
    font-size: clamp(21px, 1.45vw, 26px);
    line-height: 1.35;
    font-weight: 300;
    padding-top: 0;
}

/* Centred intro shares the 980px measure */
.page-working-with-us .two_cols_v1 .tc_intro .cms {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* Card headings sit below the lead in the hierarchy */
.page-working-with-us .three_col_v1 .thr_col .thr_title .h2,
.page-working-with-us .two_cols_v1 .tc_col .h2 {
    font-size: clamp(22px, 1.5vw, 28px);
}

@media only screen and (min-width: 1025px) {
    /* Theme's 50%/37% split left a 217px void down the middle */
    .page-working-with-us .how_to_work .htw_left {
        max-width: 48%;
        width: 48%;
        -webkit-flex: 0 0 48%;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
    }
    .page-working-with-us .how_to_work .htw_right {
        max-width: 46%;
        width: 46%;
        -webkit-flex: 0 0 46%;
        -ms-flex: 0 0 46%;
        flex: 0 0 46%;
    }
}

/* --------------------------------------------------------------------------
   3i. About us — eyebrow language + staff grid
   -------------------------------------------------------------------------- */
.page-about-us .key_staff .staff_intro .h1 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7EC85C;
    padding: 0 0 14px;
    margin: 0 0 24px;
    border-bottom: 1px solid rgba(126, 200, 92, 0.35);
}

.page-about-us .key_staff .staff_intro {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* Name/role sits below the eyebrow in the hierarchy */
.page-about-us .staff_col .cms .h5 {
    font-size: clamp(20px, 1.3vw, 24px);
    line-height: 1.3;
}

/* Testimonial stays white: it sits between the light green staff band and the
   solid green CTA, so banding it too created a stray white strip between two
   near-identical greens. */
.page-about-us .testimonial_row { padding-bottom: 20px; }

/* --------------------------------------------------------------------------
   3j. "Login to portal" — promoted from plain top-bar text to a pill button
   -------------------------------------------------------------------------- */
.top_bar .bt_right {
    width: auto;
    max-width: none;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.top_bar .bt_right a.portal_btn {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    background: #7EC85C;
    color: #fff;
    font-weight: 600;
    font-size: 1.35em;
    line-height: 1;
    padding: 8px 18px;
    border-radius: 100px;
    text-decoration: none;
    -webkit-transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.top_bar .bt_right a.portal_btn:hover {
    background: #6cba49;
    color: #fff;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.top_bar .bt_right a.portal_btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.top_bar .bt_right a.portal_btn .l_icon {
    position: static;
    left: auto;
    top: auto;
    width: 19px;
    height: 18px;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
}

.top_bar .bt_right a.portal_btn .l_icon svg {
    width: 19px;
    height: 18px;
    max-width: 19px;
    max-height: 18px;
}

/* icon is green artwork; knock it to white on the green pill */
.top_bar .bt_right a.portal_btn .l_icon svg path { fill: #fff; }

/* the theme's hover-overlay duplicate isn't needed on the pill */
.top_bar .bt_right a.portal_btn .link_hover { display: none; }

/* --------------------------------------------------------------------------
   3k. Homepage graphics — dial the imagery back a little so it supports the
   copy rather than dominating it.
   -------------------------------------------------------------------------- */
/* Product logos in the "Two powerful tools" cards (theme sets 325px) */
.page-home .three_col_v1 .thr_col_logo {
    width: 250px;
    max-width: 100%;
}

/* Financial Remedies Journal image — cap it, left-aligned to the page grid */
.page-home .two_cols_v2 .tc_img img {
    max-width: 470px;
    margin: 0;
}

/* Event tiles — narrow the row so the three graphics scale down together
   (these are brand tiles, so shrinking the card is safer than cropping). */
@media only screen and (min-width: 1025px) {
    .page-home .thr_has_img > .wrapper {
        max-width: 1150px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --------------------------------------------------------------------------
   3l. Child relocation — purple accent theme (mirrors the Mortgages blue).
   Swaps the default green highlight to the relocation purple across headings,
   bullets, buttons, the stage tabs and the section band. The banner headline
   is excluded so it keeps its dark text + purple <em> treatment.
   -------------------------------------------------------------------------- */
.page-child-arrangements .cms h1,
.page-child-arrangements .cms h2,
.page-child-arrangements .cms h3,
.page-child-arrangements .cms h4,
.page-child-arrangements .cms h5,
.page-child-arrangements .cms h6,
.page-child-arrangements .cms .green,
.page-child-arrangements .green { color: #8A2D66 !important; }

/* keep the map-banner headline dark (the <em> stays purple via --mb-accent) */
.page-child-arrangements .top_banner_inner .mb-headline { color: #3F3B40 !important; }

/* "Children's care arrangements," is longer than the other product headlines,
   so give it a wider measure (there's empty map to the right) and drop the
   18ch cap, then force "mapped for court." onto its own line so the first
   phrase stays intact. On mobile the cap is already lifted, so it wraps freely. */
.page-child-arrangements .top_banner_inner.map-banner .banner_content .cms { max-width: 780px; }
.page-child-arrangements .top_banner_inner.map-banner .mb-headline { max-width: none; text-wrap: normal; }
.page-child-arrangements .top_banner_inner.map-banner .mb-headline em { display: block; }

/* bullet points */
.page-child-arrangements .cms ul li:before { background: #8A2D66; }

/* solid buttons */
.page-child-arrangements .gen_btn:not(.gen_btn_white) { background: #8A2D66; color: #fff; }
.page-child-arrangements .gen_btn:not(.gen_btn_white) strong { color: #fff; }
.page-child-arrangements .gen_btn:not(.gen_btn_white):hover { color: #8A2D66; }

/* the hairline under the intro eyebrow */
.page-child-arrangements .two_col_contents .tc_left .cms {
    border-bottom-color: rgba(138, 45, 102, 0.35);
}

/* stage tabs (the accordion is rebuilt into these) */
.page-child-arrangements .stage_tab { background: #EADFEE; }
.page-child-arrangements .stage_tab:hover { background: #DEC9E4; }
.page-child-arrangements .stage_tab.is-active { background: #8A2D66; }
.page-child-arrangements .stage_tab.is-active .stage_label { color: #fff; }
.page-child-arrangements .stage_num { color: #8A2D66; }

/* tint the light-green section band toward purple */
.page-child-arrangements .light_green_bg { background: #F2EAF4 !important; }

/* "The outcome" closing band — same treatment as the Properties page, in purple */
.page-child-arrangements .cta_contents {
    background: #F2EAF4;
    padding: 32px 0 62px;
}
.page-child-arrangements .spacer:has(+ .cta_banner) { display: none; }
.page-child-arrangements .cta_contents .wrapper { max-width: 980px !important; }
.page-child-arrangements .cta_contents .cms > div { max-width: 100% !important; }
.page-child-arrangements .cta_contents .cms h2 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 0 14px;
    margin: 0 0 26px;
    border-bottom: 1px solid rgba(138, 45, 102, 0.45);
}
.page-child-arrangements .cta_contents .cms p {
    font-size: clamp(21px, 1.45vw, 26px);
    line-height: 1.35;
    font-weight: 300;
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   3m. Homepage "see it in action" video section
   -------------------------------------------------------------------------- */
.page-home .home_video { padding: 64px 0 60px; background: #F1EEE7; }
.page-home .home_video .hv_head { text-align: center; max-width: 780px; margin: 0 auto; }
.page-home .home_video .hv_eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7EC85C;
    margin: 0 0 12px;
}
.page-home .home_video .hv_head h2 {
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.1;
    margin: 0 0 12px;
    padding: 0;
    color: #22271F;
}
.page-home .home_video .hv_sub {
    font-size: clamp(17px, 1.2vw, 20px);
    font-weight: 300;
    color: #5E655A;
    margin: 0 auto;
    max-width: 60ch;
    text-wrap: balance;
    padding: 0;
}
.page-home .home_video .hv_frame {
    max-width: 940px;
    margin: 34px auto 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0d100c;
    border: 1px solid #E4EADD;
    box-shadow: 0 24px 60px rgba(20, 30, 15, 0.18);
}
.page-home .home_video .hv_frame video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #0d100c;
}

/* Section banding: "Three tools" on white, "As trusted by" keeps the green. */
.page-home .three_col_v1 .thr_bg.light_green_bg { background: #fff !important; }
/* Mobile: the section title/intro sit outside .wrapper, so give them the same
   side gutter as the cards below (which get theirs from .wrapper padding). */
@media (max-width: 760px){
  .page-home .three_col_v1 .thr_col_title{padding-left:20px; padding-right:20px;}
}
/* A little more green breathing room above the "As trusted by" eyebrow. */
.page-home .platform_sources.flush_padding { padding-top: 72px !important; }

/* --------------------------------------------------------------------------
   4. Hero height
   The theme sizes the banner image width:100%/height:auto, so its height is
   purely a function of viewport width — at 2560px that's ~1308px tall, which
   pushes every bit of content below the fold. Cap it to a viewport-relative
   height instead (object-fit:cover is already set, so it crops, not squashes).
   The result is a consistent full-height hero with content peeking below.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1025px) {
    /* clamp(), not min(): a pure vh height collapses on short browser windows
       and crams the banner logo. The first value is a hard floor. */
    .top_banner img {
        height: clamp(460px, 82vh, 900px);
        min-height: 0;
        object-fit: cover;
    }
    .top_banner_inner img {
        height: clamp(380px, 46vh, 520px);
        min-height: 0;
        object-fit: cover;
    }
}

/* --------------------------------------------------------------------------
   5. Motion
   The theme's custom "fade-up-unstuck" declares a transition on opacity but
   never actually sets it, so elements only slide. Add a real fade and a
   longer travel, scoped to .js so content is never hidden without JavaScript.
   -------------------------------------------------------------------------- */
.js [data-aos="fade-up-unstuck"] {
    opacity: 0;
    -webkit-transform: translate3d(0, 22px, 0);
    transform: translate3d(0, 22px, 0);
}

.js [data-aos="fade-up-unstuck"].aos-animate {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Snappier reveal. The theme asks for a 1.2s transition and the markup carries
   staggered delays up to 1000ms, so the last item in a section could take ~1.6s
   to settle. Shorten the transition and compress the stagger. */
.js [data-aos][data-aos-duration] {
    -webkit-transition-duration: 380ms;
    transition-duration: 380ms;
    -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* aos.css qualifies its delay rules with .aos-animate, so these must match that
   specificity (0,4,0) to win — fmh.css loads last, so an equal score is enough. */
.js [data-aos][data-aos-delay="100"].aos-animate { -webkit-transition-delay: 0ms; transition-delay: 0ms; }
.js [data-aos][data-aos-delay="200"].aos-animate { -webkit-transition-delay: 40ms; transition-delay: 40ms; }
.js [data-aos][data-aos-delay="300"].aos-animate { -webkit-transition-delay: 80ms; transition-delay: 80ms; }
.js [data-aos][data-aos-delay="400"].aos-animate { -webkit-transition-delay: 120ms; transition-delay: 120ms; }
.js [data-aos][data-aos-delay="500"].aos-animate { -webkit-transition-delay: 160ms; transition-delay: 160ms; }
.js [data-aos][data-aos-delay="600"].aos-animate { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.js [data-aos][data-aos-delay="700"].aos-animate,
.js [data-aos][data-aos-delay="800"].aos-animate,
.js [data-aos][data-aos-delay="900"].aos-animate,
.js [data-aos][data-aos-delay="1000"].aos-animate { -webkit-transition-delay: 240ms; transition-delay: 240ms; }

/* Safety net (set by fmh.js only if AOS never initialised) — never leave the
   page hidden because a script failed. */
.aos-fallback [data-aos="fade-up-unstuck"] {
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
}

/* Cards lift on hover */
.thr_col_white {
    -webkit-transition: transform 0.4s cubic-bezier(.19,.81,.6,1), box-shadow 0.4s;
    transition: transform 0.4s cubic-bezier(.19,.81,.6,1), box-shadow 0.4s;
}

.thr_col_white:hover {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

/* Slow zoom on section imagery */
.thr_col_img,
.tc_img,
.staff_img {
    overflow: hidden;
}

.thr_col_img img,
.tc_img img,
.staff_img img {
    -webkit-transition: transform 0.7s cubic-bezier(.19,.81,.6,1);
    transition: transform 0.7s cubic-bezier(.19,.81,.6,1);
}

.thr_col:hover .thr_col_img img,
.tc_img:hover img,
.staff_col:hover .staff_img img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .js [data-aos] {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
        transition: none !important;
    }
    .thr_col_white:hover { transform: none; }
    .thr_col_img img,
    .tc_img img,
    .staff_img img { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Small screens
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .header .logo img { height: 58px; }
    .footer .ft_1 .ft_logo img { height: 50px; }
}


/* ===== Animated homepage hero (added 2026-08-12) ===== */
/* ==== FMH animated hero — scoped background layer (drop-in for .top_banner) ==== */
.fmh-anim{
  /* full-bleed map across the whole hero (extends behind the frosted header);
     the markers/routes are grouped into the right-hand zone via their anchors */
  position:absolute; inset:0; overflow:hidden; z-index:0;
  --loop:18s; --green:#8CC740; --green-deep:#4E7C1B; --blue:#3F6FC9;
  background:
    radial-gradient(115% 90% at 80% 12%, rgba(140,199,64,.14), transparent 58%),
    linear-gradient(165deg, #FBFCF9, #EDF0E7 78%);
}
/* shared drifting layer — map + pins/routes live inside, so they move together and stay aligned */
.fmh-anim .stage{position:absolute; inset:-6%; width:112%; height:112%; animation:fmhDrift 40s ease-in-out infinite;}
.fmh-anim .map{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.85;}
.fmh-anim .scene{position:absolute; inset:0; width:100%; height:100%;}
@keyframes fmhDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-2.2%,1.4%)}}

.fmh-anim .bloom{position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(58% 54% at 50% 42%, rgba(140,199,64,.20), rgba(63,111,201,.06) 46%, transparent 72%);
  animation:fmhBloom var(--loop) linear infinite;}
@keyframes fmhBloom{0%,4%{opacity:0}15%{opacity:1}54%{opacity:.9}64%{opacity:0}100%{opacity:0}}

.fmh-anim .pinImg{opacity:0; transform-box:fill-box; transform-origin:50% 100%; animation:fmhPin var(--loop) linear infinite;}
@keyframes fmhPin{
  0%,2%{opacity:0; transform:translateY(-64px) scale(.7)}
  9%{opacity:1; transform:translateY(0) scale(1.06)}
  12%{transform:translateY(0) scale(.95)}
  15%{transform:translateY(0) scale(1)}
  52%{opacity:1; transform:translateY(0) scale(1)}
  62%{opacity:0; transform:translateY(-6px) scale(.98)}
  100%{opacity:0}
}
.fmh-anim .poiImg{opacity:0; transform-box:fill-box; transform-origin:50% 100%; animation:fmhPoi var(--loop) linear infinite;}
@keyframes fmhPoi{
  0%,6%{opacity:0; transform:translateY(-10px) scale(.8)}
  14%{opacity:1; transform:translateY(0) scale(1)}
  52%{opacity:1} 62%{opacity:0} 100%{opacity:0}
}
.fmh-anim .route{fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; opacity:0; animation:fmhRoute var(--loop) linear infinite;}
@keyframes fmhRoute{
  0%,10%{stroke-dashoffset:100; opacity:0}
  13%{opacity:.9} 23%{stroke-dashoffset:0; opacity:.9}
  52%{stroke-dashoffset:0; opacity:.9} 62%{opacity:0} 100%{opacity:0; stroke-dashoffset:0}
}
.fmh-anim .chipAnim{opacity:0; transform-box:fill-box; transform-origin:50% 100%; animation:fmhChip var(--loop) cubic-bezier(.3,1.35,.5,1) infinite;}
@keyframes fmhChip{
  0%,23%{opacity:0; transform:scale(.15)}
  29%{opacity:1; transform:scale(1.1)}
  34%{transform:scale(1)}
  52%{opacity:1; transform:scale(1)} 62%{opacity:0} 100%{opacity:0}
}
.fmh-anim .chip rect{fill:#fff; stroke:var(--green); stroke-width:1.4;}
.fmh-anim .chip .notch{fill:#fff;}
.fmh-anim .chip .node{fill:var(--green-deep);}
.fmh-anim .chip text{fill:var(--green-deep); font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:19px; font-weight:600;}

/* centred within the right-hand half of the hero (padding-left pushes the grid
   area to the right column; place-items centres the report inside it) */
.fmh-anim .report{position:absolute; inset:0; display:grid; place-items:center; padding-left:48%; pointer-events:none;}
/* width in vw (stable on mobile — vh jumps with the address bar) */
.fmh-anim .report .stack{position:relative; width:clamp(190px,25vw,300px); aspect-ratio:595/842; opacity:0;
  animation:fmhCard var(--loop) cubic-bezier(.2,.7,.2,1) infinite;}
@keyframes fmhCard{
  0%,47%{opacity:0; transform:translateY(52px) scale(.94)}
  58%{opacity:1; transform:translateY(0) scale(1)}
  92%{opacity:1; transform:translateY(0) scale(1)}
  97%{opacity:0} 100%{opacity:0}
}
.fmh-anim .report img{position:absolute; inset:0; width:100%; height:100%; min-height:0 !important; object-fit:cover; object-position:top center; border-radius:7px; background:#fff; box-shadow:0 26px 60px rgba(30,40,20,.26), 0 2px 8px rgba(30,40,20,.12);}
/* fanned deck of report pages (last = front) */
.fmh-anim .report .pg1{transform:rotate(22deg)  translate(30%,1%);}
.fmh-anim .report .pg2{transform:rotate(-19deg) translate(-29%,0%);}
.fmh-anim .report .pg3{transform:rotate(12deg)  translate(16%,5%);}
.fmh-anim .report .pg4{transform:rotate(-9deg)  translate(-15%,6%);}
.fmh-anim .report .pg5{transform:rotate(2deg)   translate(1%,1%);}

/* "Generate report" button: appears after the journey times, is clicked, then the report resolves */
.fmh-anim .genwrap{position:absolute; inset:0; display:grid; place-items:center; padding-left:48%; pointer-events:none; z-index:3;}
.fmh-anim .gbtn{position:relative; display:inline-flex; align-items:center; white-space:nowrap;
  background:#7EC85C; color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:600;
  font-size:clamp(14px,1.5vw,18px); letter-spacing:.01em; padding:13px 24px; border-radius:999px;
  box-shadow:0 14px 30px rgba(46,92,20,.30), 0 2px 6px rgba(46,92,20,.22);
  opacity:0; transform:translateY(10px) scale(.92); animation:fmhGen var(--loop) ease-in-out infinite;}
.fmh-anim .gbtn::after{content:''; position:absolute; inset:-2px; border-radius:999px; border:2px solid #7EC85C;
  opacity:0; animation:fmhGenRing var(--loop) ease-out infinite;}
/* cursor lives inside the button so it always taps on it (tip = transform-origin) */
.fmh-anim .gcursor{position:absolute; left:52%; top:46%; width:27px; height:27px; fill:#1c2a12; stroke:#fff; stroke-width:1.3;
  transform-origin:4px 3px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); opacity:0; animation:fmhGenCursor var(--loop) ease-in-out infinite;}
@keyframes fmhGen{
  0%,33%{opacity:0; transform:translateY(10px) scale(.92);}
  37%{opacity:1; transform:translateY(0) scale(1.03);}
  40%,43.5%{opacity:1; transform:translateY(0) scale(1);}
  45%{opacity:1; transform:translateY(0) scale(.93);}
  46.5%{opacity:1; transform:translateY(0) scale(1);}
  49%{opacity:0; transform:translateY(-4px) scale(.98);}
  100%{opacity:0;}
}
@keyframes fmhGenRing{
  0%,44.5%{opacity:0; transform:scale(1);}
  46%{opacity:.7; transform:scale(1);}
  53%{opacity:0; transform:scale(1.5);}
  100%{opacity:0;}
}
@keyframes fmhGenCursor{
  0%,34%{opacity:0; transform:translate(34px,30px) scale(.9);}
  39%{opacity:1; transform:translate(10px,10px) scale(1);}   /* glide onto the button */
  43.5%{opacity:1; transform:translate(0,0) scale(1);}
  45%{opacity:1; transform:translate(1px,2px) scale(.8);}     /* tap (pivots on the tip) */
  46.5%{opacity:1; transform:translate(0,0) scale(1);}
  49%{opacity:0; transform:translate(8px,8px) scale(1);}
  100%{opacity:0;}
}

.fmh-anim .scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(247,248,243,.95) 0%, rgba(247,248,243,.72) 32%, rgba(247,248,243,.12) 52%, rgba(247,248,243,0) 64%);}

@media (prefers-reduced-motion: reduce){
  .fmh-anim .stage,.fmh-anim .bloom,.fmh-anim .pinImg,.fmh-anim .poiImg,.fmh-anim .chipAnim,.fmh-anim .report .stack{animation:none;}
  .fmh-anim .bloom{opacity:.7;}
  .fmh-anim .pinImg,.fmh-anim .poiImg,.fmh-anim .chipAnim{opacity:1; transform:none;}
  .fmh-anim .route{animation:none; stroke-dashoffset:0; opacity:.9;}
  .fmh-anim .report .stack{opacity:1; transform:none;}
  .fmh-anim .genwrap{display:none;}
}

/* ==== Homepage hero: swap dark-photo styling for the light animated hero ==== */
.top_banner.top_banner_no_overlay{position:relative; display:flex; align-items:center; min-height:clamp(560px,80vh,880px);
  background:radial-gradient(115% 90% at 80% 12%, rgba(140,199,64,.14), transparent 58%), linear-gradient(165deg,#FBFCF9,#EDF0E7 78%);}
.top_banner.top_banner_no_overlay > img{display:none !important;}   /* hide the old static banner */
.top_banner .banner_content{position:relative; z-index:2; width:100%;}
/* headline holds the left column, clear of the map card */
.top_banner.top_banner_no_overlay .banner_content .cms{max-width:clamp(320px,44vw,520px);}
.top_banner .cms_white, .top_banner .cms_white h1, .top_banner .cms_white p{color:#182013 !important;}
.top_banner .cms_white .h1{color:#182013 !important;}
/* lighter, more editorial headline (concept treatment) */
.top_banner .cms_white h1, .top_banner .cms_white .h1{font-weight:300 !important; letter-spacing:-.02em; line-height:1.06;}
.top_banner .cms_white p{color:#46503F !important;}
/* Hero button matches the navbar Request demo: same green, white text */
.top_banner .gen_btn_white{background:#7EC85C !important; color:#fff !important; border-color:#7EC85C !important;}
.top_banner .gen_btn_white:hover{background:#71bd4f !important; border-color:#71bd4f !important;}
/* use the white arrow (not the grey one) so it matches the navbar "Request a demo" */
.top_banner .gen_btn_white:after{background-image:url(../images/button_arrow.svg) !important;}

/* Header Request demo stays FMH green even where the page recolours .gen_btn (mortgages = blue) */
.header .req_demo .gen_btn{background:#7EC85C !important; color:#fff !important;}

/* ---- tablet & below: the home-hero report resolves centred-bottom so it can't
        collide with the headline (which widens as the column narrows) ---- */
/* ---- tablet & below: the home-hero report resolves centred-bottom so it can't
        collide with the headline (which widens as the column narrows) ---- */
@media (max-width: 1024px){
  .top_banner.top_banner_no_overlay .banner_content .cms{max-width:none;}
  .fmh-anim .report{align-items:end; justify-items:center; padding-left:0; padding-bottom:5%;}
  .fmh-anim .genwrap{align-items:end; padding-left:0; padding-bottom:8%;}
  .fmh-anim .report .stack{width:clamp(160px,34vw,260px);}
}
@media (max-width: 760px){
  /* Mobile hero: stack the animation (boxed) ABOVE the copy so nothing overlaps
     and the text sits on the plain light ground at full contrast. */
  .top_banner.top_banner_no_overlay{flex-direction:column; align-items:stretch; justify-content:flex-start; min-height:0;}
  /* Bound the animation into a ~20:10 rounded box at the top */
  .top_banner.top_banner_no_overlay .fmh-anim{
    position:relative; inset:auto; order:0;
    width:auto; margin:0 20px 14px; aspect-ratio:5/4; height:auto;
    border-radius:16px; overflow:hidden;
    border:1px solid rgba(30,40,20,.08); box-shadow:0 16px 38px rgba(30,40,20,.14);
  }
  .fmh-anim .scrim{display:none;}       /* no text behind the art any more */
  .fmh-anim .map{opacity:.9;}
  /* Scale the report deck / journey button to sit inside the short landscape box,
     lifted slightly so the fanned deck sits centred. */
  .fmh-anim .report{align-items:center; padding-bottom:0; transform:translateY(-13px);}
  .fmh-anim .genwrap{align-items:center; padding-bottom:0; transform:translateY(-13px);}
  .fmh-anim .report .stack{width:clamp(120px,33vw,144px);}
  /* Copy below the box: dark, left-aligned, fully legible on the light ground */
  .top_banner .banner_content{order:1;}
  .top_banner.top_banner_no_overlay .banner_content .cms{max-width:none;}
  .top_banner .cms_white h1, .top_banner .cms_white .h1{font-weight:400 !important;}
  .top_banner .cms_white p{color:#3A4233 !important;}
}

/* ---- Mobile/tablet header + banner fixes ---- */
@media (max-width: 1024px){
  /* The theme's hamburger is a 100px icon that overhangs the header — pin it to a
     sensible size, vertically centred, so it can't spill below the bar. */
  .header .burger_wrap{width:46px !important; height:46px !important; top:50% !important; bottom:auto !important; transform:translateY(-50%); right:12px !important;}
  .header .burger_menu{width:46px !important; height:46px !important;}
  .header .burger_menu svg{width:46px !important; min-width:46px !important; max-width:46px !important; height:46px !important;}
}
@media (max-width: 760px){
  /* Inner map banners: shorter, with the logo/headline near the top instead of
     centred in a tall, mostly-empty map. */
  .top_banner_inner.map-banner{align-items:flex-start !important; min-height:0 !important; padding-top:clamp(152px,42vw,176px) !important; padding-bottom:40px !important;}
  .top_banner_inner.map-banner .banner_logo.mb-logo{width:clamp(96px,24vw,124px) !important; margin-bottom:14px;}
  .top_banner_inner.map-banner .mb-headline{font-size:clamp(26px,7.4vw,34px);}
}

/* ===== Frosted "etched glass" header over the home hero map (home only via :has) ===== */
body:has(.top_banner_no_overlay) .header_space{display:none;}
body:has(.top_banner_no_overlay) .top_banner.top_banner_no_overlay{padding-top:clamp(92px,11vh,150px);}
body:has(.top_banner_no_overlay) .header{background:transparent;}
body:has(.top_banner_no_overlay) .header .header_row{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 1px 0 rgba(24,32,19,.08);
}
body:has(.top_banner_no_overlay) .header .top_bar{
  background:rgba(44,47,41,.42) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
}
/* Mobile: clear the fixed header so the animation box isn't tucked under it,
   and give the copy/button room to breathe before the next section. */
@media (max-width: 760px){
  body:has(.top_banner_no_overlay) .top_banner.top_banner_no_overlay{
    padding-top:clamp(140px,38vw,164px); padding-bottom:46px;
  }
}

/* ===== Pill buttons (site-wide) ===== */
.gen_btn{border-radius:999px !important;}

/* ===== Header: condense + solidify on scroll (all pages) ===== */
.header, .header .header_row, .header .logo img{transition:background .25s ease, padding .25s ease, height .25s ease, box-shadow .25s ease;}
.header.scrolled{background:#fff; box-shadow:0 3px 16px rgba(24,32,19,.10);}
.header.scrolled .top_bar{display:none;}
.header.scrolled .header_row{padding-top:12px !important; padding-bottom:12px !important; background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;}
.header.scrolled .logo img{height:52px;}
.header.scrolled #menu_texts a{color:#4D4D4D;}

/* ===== Inner pages keep the standard solid header (above their banner). =====
   The frosted-glass float is reserved for the home animated hero; over the
   dark inner banners it read muddy. Inner pages still get the site-wide
   upgrades: pill buttons, condense-on-scroll, and the green active/hover nav. */

/* Active/hover nav item was white (theme assumed a dark hero); make it FMH green
   so it reads on the light glass / solid header. Desktop only — the mobile
   slide-out overlay keeps its own white-on-panel styling. */
@media only screen and (min-width:1025px){
  .header .header_navi nav ul li.current-menu-item > a,
  .header .header_navi nav ul li a:hover{color:#4E7C1B !important;}
}

/* ===== PROTOTYPE (option 3): static map-motif banner + floating light header =====
   Applied only on the Properties page (fmh.js adds .map-banner) for comparison. */
body:has(.top_banner_inner.map-banner) .header_space{display:none;}
body:has(.top_banner_inner.map-banner) .header:not(.scrolled){background:transparent;}
body:has(.top_banner_inner.map-banner) .header:not(.scrolled) .header_row{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 1px 0 rgba(24,32,19,.08);
}
body:has(.top_banner_inner.map-banner) .header:not(.scrolled) .top_bar{
  background:rgba(44,47,41,.42) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
}
.top_banner_inner.map-banner{position:relative; overflow:hidden; min-height:clamp(420px,60vh,620px);
  display:flex; align-items:center; padding-top:clamp(92px,11vh,150px);
  background:linear-gradient(165deg,#FBFCF9,#EDF0E7 78%);}
.top_banner_inner.map-banner > img{display:none !important;}
.top_banner_inner.map-banner:after{display:none !important;}
.top_banner_inner.map-banner .mb-map{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.9;}
.top_banner_inner.map-banner .banner_content{position:relative; left:auto; right:auto; bottom:auto; z-index:3; width:100%;}
.top_banner_inner.map-banner .banner_content .wrapper{max-width:1680px; margin-left:auto; margin-right:auto;}
.top_banner_inner.map-banner .banner_content .cms{max-width:660px; text-align:left;}
.top_banner_inner.map-banner .banner_logo.mb-logo{width:clamp(116px,12vw,160px) !important; height:auto; display:block; margin:0 0 20px;}
.top_banner_inner.map-banner .mb-headline{font-weight:300 !important; font-size:clamp(30px,4.2vw,54px); line-height:1.05; letter-spacing:-.02em; color:#182013 !important; margin:0; max-width:18ch; text-wrap:balance;}
.top_banner_inner.map-banner .mb-headline em{font-style:normal; font-weight:600; color:var(--mb-accent,#4E7C1B) !important;}

/* Contact page: faded map behind the form instead of the flat green panel */
.contact_pg.map-bg{position:relative; background:linear-gradient(165deg,#FBFCF9,#EDF0E7 78%) !important;}
.contact_pg.map-bg > .mb-map{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.35; z-index:0; pointer-events:none;}
.contact_pg.map-bg > .wrapper{position:relative; z-index:1;}
.contact_pg.map-bg h1, .contact_pg.map-bg h2{font-weight:300 !important; letter-spacing:-.02em; line-height:1.08;}

/* ---- Ultra-small top bar: Request demo (pill) on the left, Login to portal on the right ---- */
@media (max-width: 767px){
  .header .top_bar .bt_left{display:none;}
  .header .top_bar .bt_left span{display:none;}   /* green email/phone separator — gone at this size */
  .header .top_bar .bt_right{width:100% !important; max-width:100% !important;
    -webkit-flex:1 1 100% !important; -ms-flex:1 1 100% !important; flex:1 1 100% !important;
    display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
    -webkit-justify-content:space-between; justify-content:space-between; text-align:left;}
  .header .top_bar .bt_right .login_btn_mob{-webkit-order:-1; order:-1; display:inline-block;}
  .header .top_bar .bt_right .portal_btn{-webkit-order:1; order:1;}
  .header .top_bar .bt_right .login_btn_mob a{
    background:#7EC85C; color:#fff !important; border-radius:999px;
    padding:7px 16px 6px; font-weight:600; display:inline-block; text-decoration:none;
    font-size:1.35em; line-height:1;}
}

/* ===== Legal pages: constrain the reading column for comfortable line length ===== */
.page-privacy-policy .cms_contents .cms,
.page-terms-conditions .cms_contents .cms{max-width:760px !important;}

/* Keep the "Request a demo" pills on one line */
.header .req_demo .gen_btn,
.header .top_bar .login_btn_mob a{white-space:nowrap;}