/* =============================================================================
   Homepage (front-page.php). Loaded on the front page only.

   Values are Elementor's own, from the compiled post-7.css of Mike's old
   homepage (06 Site Rebuild/elementor-captures/_uploads-elementor/css/). Where
   Elementor used a padded button under a circle mask, a fixed round box of
   the same visible size stands in. Breakpoint 767px is Elementor's mobile.
   ========================================================================== */

.fw-hero, .fw-faq, .fw-paths, .fw-meet, .fw-calc, .fw-marquee, .fw-awards, .fw-blog, .fw-reviews { box-sizing: border-box; }
.fw-hero *, .fw-faq *, .fw-paths *, .fw-meet *, .fw-calc *, .fw-marquee *, .fw-awards *, .fw-blog * { box-sizing: border-box; }

/* ---- Hero ---------------------------------------------------------------
   Section min-height 80vh, content pushed to the bottom; the circle is a
   698 x 670 navy container (radius 400px) 31px from the top, and the text and
   photo are pulled back up over it by 500px. Neighbourhood art bottom/cover. */
.fw-hero {
    position: relative;
    /* No vh floor. The content (circle + the photo hanging below it) needs
       about 923px, so 80vh only ever bites on a window taller than ~1154px --
       and because the column is justified to flex-end, every surplus pixel
       landed as white above the circle. Letting the section size to its
       content gives the same hero at every window height. The padding below
       is the one deliberate gap: without it the circle's crown sits right on
       the header's bottom border. */
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: var(--fw-hero-art) no-repeat bottom center / cover;
    overflow: hidden;
}
.fw-hero__circle {
    position: relative;
    z-index: 1;
    width: 698px;
    max-width: 100%;
    min-height: 670px;
    margin-top: 0;
    border-radius: 400px;
    background: var(--color-primary);
}
.fw-hero__content {
    position: relative;
    z-index: 3;
    width: 571px;
    max-width: 100%;
    margin-top: -449px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.fw-hero__hi,
.fw-hero__role {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1;
}
.fw-hero__hi { margin-top: -10px; font-size: 50px; color: var(--color-accent); }
.fw-hero__role { font-size: 34px; color: #fff; }
.fw-hero__tagline {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
}
.fw-hero__photo { width: 466px; max-width: 100%; height: auto; display: block; margin: 0; }

/* ---- Get Started + FAQ band ------------------------------------------- */
/* 20px under the last question put it almost on top of the next section. */
.fw-faq { position: relative; z-index: 5; background: var(--color-primary); padding-bottom: 64px; }
.fw-faq__cta-row { display: flex; justify-content: center; padding-bottom: 20px; }
.fw-hero__cta { width: 225px; height: 225px; margin-top: -110px; font-size: 25px; position: relative; z-index: 6; }

.fw-faq__grid {
    /* Was 1400 wide with rigid 820 + 315 columns: 1185 of content in a 1360
       box, so 175px of dead space collected on the right and the band sat off
       its own centre while every other section ran 1232. Now the same 1280/24
       as the rest, with the left column taking the slack. */
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 315px;
    gap: 50px;
    /* The accordion runs about 1030px and the consult card 477px, so `start`
       left 550px of empty navy under the card — the biggest hole on the page.
       Centring splits it either side, which reads as a card set in the band
       rather than a column that ran out. It cannot be pinned instead: nothing
       on this site is stuck to the viewport. */
    align-items: center;
}
.fw-faq__main { min-width: 0; }
.fw-faq__title { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.fw-faq__title .fw-green { display: block; font-size: 50px; }
.fw-faq__title-2 { display: block; font-size: 45px; color: #fff; }

.fw-faq__list { margin-top: 32px; display: flex; flex-direction: column; gap: 15px; }
.fw-faq__item { background: #35445A; border-radius: 20px 20px 0 0; }
.fw-faq__item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    /* Elementor's 50px made each closed question a 120px slab; at 28/32 the
       row is still comfortable to hit and the six of them stop dominating
       the section. */
    padding: 28px 32px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    text-transform: capitalize;
    color: #fff;
}
.fw-faq__item summary::-webkit-details-marker { display: none; }
.fw-faq__item summary i {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}
.fw-faq__item summary i::before,
.fw-faq__item summary i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 4px;
    background: #fff;
}
.fw-faq__item summary i::after { transform: rotate(90deg); transition: transform .2s; }
.fw-faq__item[open] summary i::after { transform: rotate(0deg); }
.fw-faq__item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.fw-faq__a { padding: 0 32px 30px; border-radius: 0 0 20px 20px; }
.fw-faq__a p { margin: 0; font-family: "Roboto", var(--font-body); font-size: 18px; line-height: 1.6; color: #fff; }

/* Consult card: 25% wide, #35445A, radius 20, min-height 477; Mike's photo and
   the faint house logo are background layers, placed as Elementor placed them. */
.fw-consult {
    margin-top: 10px;
    min-height: 477px;
    border-radius: 20px;
    overflow: hidden;
    background:
        var(--fw-consult-photo) -74px 165px / contain no-repeat,
        var(--fw-consult-logo) 50px 165px / contain no-repeat,
        #35445A;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.fw-consult__q {
    margin: 0;
    padding: 30px 0 0 30px;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1;
    color: #fff;
}
.fw-consult__btn {
    margin-left: 30px;
    display: inline-block;
    padding: 10px 28px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-family: "Roboto", var(--font-body);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color .3s, color .3s, border-color .3s;
}
.fw-consult__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; text-decoration: none; }
.fw-consult__name {
    align-self: flex-end;
    margin: 0;
    padding: 50px 35px 0 0;
    text-align: left;
    font-family: var(--font-heading);
    letter-spacing: -1.2px;
    line-height: 1;
    color: #fff;
}
.fw-consult__name strong { display: block; font-size: 20px; font-weight: 700; }
.fw-consult__name span { display: block; font-size: 18px; font-weight: 400; }

/* ---- Two paths -----------------------------------------------------------
   Two 500px circles, nearly the same navy as the band behind them, holding
   nothing but a word each and 668px of height. The "Learn More" inside them
   was transparent until hover, so on a touch screen it never appeared at all.
   Now they are two cards on the site's own content width, with the icon the
   markup has always carried (--fw-path-icon was set on both links and no rule
   ever used it) and a label that is visible before you touch anything. */
.fw-paths {
    background: var(--color-primary);
    padding: 64px 24px;
}
/* The FAQ band is navy and so is this one, so their two paddings stacked into
   one 128px void that read as a hole rather than a break. The FAQ's own 64px
   is the gap; this adds nothing on top of it. */
.fw-faq + .fw-paths {
    padding-top: 0;
}
.fw-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 604px));
    justify-content: center;
    gap: 24px;
}
.fw-path {
    position: relative;
    border-radius: 20px;
    /* Green on the button, not on 600px of card. A flat green slab this size
       shouts over everything around it; on the button it is the one thing in
       the band you are meant to click, and it matches Apply Now and Get
       Started elsewhere on the site. */
    background: #35445A;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 36px;
    text-align: left;
    text-decoration: none;
    transition: background-color .18s, transform .18s;
}
/* No icon: the two PNGs --fw-path-icon points at are the words "Home
   Refinance" and "Home Purchase" set as images, not symbols. At any size that
   fits a card they are unreadable, and they only repeat the title below. */
.fw-path__title {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: #fff;
}
.fw-path__copy {
    font-family: "Roboto", var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}
.fw-path__more {
    margin-top: 4px;
    font-family: "Roboto", var(--font-body);
    font-size: 16px;
    font-weight: 500;
    padding: 11px 26px;
    border: 2px solid var(--color-accent);
    border-radius: 999px;
    /* #16240f on #80C33D is about 8.9:1. */
    background: var(--color-accent);
    color: #16240f;
    transition: background-color .18s, border-color .18s;
}
.fw-path:hover { background-color: #3d4e68; text-decoration: none; transform: translateY(-2px); }
.fw-path:hover .fw-path__more { background: #8fd44a; border-color: #8fd44a; }
.fw-path:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 860px) {
    .fw-paths { grid-template-columns: minmax(0, 1fr); padding: 44px 16px; }
    .fw-path { padding: 28px; }
    .fw-path__title { font-size: 28px; }
}

/* ---- Meet Mike ---------------------------------------------------------- */
/* Boxed to the same 1280/24px as .fw-mu-body and the blog row. The video ran
   the full window, so on a wide screen it was the largest thing on the page
   and sat wider than every other section. */
.fw-meet { max-width: 1280px; margin: 0 auto; padding: 100px 24px; text-align: center; }
.fw-meet__title,
.fw-meet__sub { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -1.2px; }
.fw-meet__title { font-size: 50px; line-height: 1; color: var(--color-accent); }
.fw-meet__sub { margin-top: 20px; font-size: 45px; line-height: 1; color: var(--color-primary); }
.fw-video { position: relative; margin-top: 20px; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fw-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.fw-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-video__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 58px;
    transform: translate(-50%, -50%);
    border-radius: 14px;
    background: rgba(23, 23, 23, .8);
    transition: background-color .2s;
}
.fw-video__icon::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 17px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}
.fw-video__play:hover .fw-video__icon,
.fw-video__play:focus-visible .fw-video__icon { background: #f00; }

/* ---- Calculator --------------------------------------------------------- */
.fw-calc { max-width: 1280px; margin: 0 auto; padding: 50px 24px 60px; text-align: center; }
/* The tool renders inside this section, so it must not inherit the centred
   text or stack its own vertical padding on top of the section's. */
.fw-calc .eq-wrap { text-align: left; padding: 24px 0 0; }
.fw-calc .eq-wrap .container { padding-left: 0; padding-right: 0; }
.fw-calc__title { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -1.2px; }
.fw-calc__title .fw-green { display: block; font-size: 50px; line-height: 1; }
.fw-calc__title-2 { display: block; margin-top: 20px; font-size: 45px; line-height: 1; color: var(--color-primary); }
.fw-calc__sub { margin: 20px 0 14px; line-height: 24px; font-family: var(--font-body); font-size: 16px; color: #000; }
.fw-calc__grid { padding: 0 10px; margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fw-calc__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #F4F5F6;
    text-decoration: none;
}
.fw-calc__card img { width: 100%; height: auto; }
.fw-calc__card span { font-family: var(--font-body); font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; color: #000; }
.fw-calc__card:hover { text-decoration: none; }
.fw-calc__card:hover span { color: var(--color-accent); }

/* ---- Marquee ------------------------------------------------------------ */
.fw-marquee {
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.fw-marquee__track {
    align-self: flex-start;
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: 120px;
    font-weight: 700;
    line-height: 1.5;
    color: #eeeff1;
    animation: fw-marquee 10s linear infinite;
    will-change: transform;
}
.fw-marquee__track::after { content: attr(data-text); }
@keyframes fw-marquee { to { transform: translateX(-50%); } }
.fw-marquee__btn { position: relative; z-index: 2; width: 205px; height: 205px; margin-top: -180px; font-size: 25px; }
@media (prefers-reduced-motion: reduce) { .fw-marquee__track { animation: none; } }

/* ---- Awards ------------------------------------------------------------- */
.fw-awards { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid #000; border-top: 1px solid #000; }
.fw-awards__cell {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #fff;
    transition: background-color .3s;
}
.fw-awards__cell:hover { background: #EEEFF1; }
.fw-awards__cell img { width: 50%; height: auto; }

/* ---- Ask MikeAI ----------------------------------------------------------
   Wrapper only. The chat's own look is the plugin's (assets/chat.css); the
   theme sizes and spaces the section and leaves .asj-* alone, so a plugin
   update does not land on top of overrides here. Same 1280/24 as every other
   section on this page. */
.fw-homechat { max-width: 1280px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.fw-homechat__title {
    margin: 0; font-family: var(--font-heading); font-weight: 700;
    letter-spacing: -1.2px; line-height: 1.1;
}
.fw-homechat__title .fw-green { display: block; font-size: 44px; }
.fw-homechat__title-2 { display: block; font-size: 34px; color: var(--color-primary); }
.fw-homechat__sub {
    max-width: 680px; margin: 14px auto 28px;
    font-family: "Roboto", var(--font-body); font-size: 17px; line-height: 1.6; color: #4a5565;
}
/* The chat card is left-aligned reading matter inside a centred section. */
.fw-homechat .asj-chat { text-align: left; margin: 0 auto; }
/* The one plugin internal this theme touches. chat.css gives the boxed log
   height: clamp(18rem, 46vh, 26rem) so the input cannot walk off the bottom of
   a phone as a conversation grows -- a good rule, kept: this is the same shape,
   just shorter, because on the homepage the chat is one section among ten and
   an empty 26rem box before anyone has typed reads as a hole in the page. On
   /ask/ and in the blog takeover the plugin's own height still applies. */
.fw-homechat .asj-chat:not(.asj-chat--full) .asj-chat-log { height: clamp(14rem, 34vh, 20rem); }
.fw-homechat__all { margin: 24px 0 0; line-height: 1; }
.fw-homechat__all a {
    font-family: var(--font-body); font-size: 17px; color: var(--color-primary);
    text-decoration: underline; text-underline-offset: 3px;
}
.fw-homechat__all a:hover { color: var(--color-accent-dk, #4A7324); }
@media (max-width: 767px) {
    .fw-homechat { padding: 40px 16px; }
    .fw-homechat__title .fw-green { font-size: 32px; }
    .fw-homechat__title-2 { font-size: 22px; }
    .fw-homechat__sub { font-size: 16px; }
}

/* ---- Blog --------------------------------------------------------------- */
/* Boxed to the same 1280/24px as .fw-mu-body, so the cards line up with the
   blog index, the archives and the hub instead of running the full window. */
.fw-blog { max-width: 1280px; margin: 50px auto 0; padding: 10px 24px 0; }
.fw-blog__title {
    margin: 0 0 20px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1;
    color: var(--color-primary);
}
.fw-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 30px; }
.fw-blog__card { background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15); display: flex; flex-direction: column; overflow: hidden; }
.fw-blog__thumb { display: block; aspect-ratio: 1 / 0.66; overflow: hidden; }
.fw-blog__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fw-blog__card:hover .fw-blog__thumb img { transform: scale(1.03); }
.fw-blog__body { padding: 40px 30px 20px; display: flex; flex-direction: column; flex: 1; }
.fw-blog__card-title { margin: 0; font-family: var(--font-body); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.fw-blog__card-title a { color: #54595F; text-decoration: none; }
.fw-blog__card-title a:hover { color: var(--color-primary); }
.fw-blog__more {
    margin-top: 31px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: #61CE70;
    text-decoration: none;
}
.fw-blog__more:hover { color: var(--color-accent-dk); text-decoration: none; }
.fw-blog__all { margin: 20px 0 0; text-align: center; line-height: 1; }
.fw-blog__all a { font-family: var(--font-body); font-size: 22px; line-height: 1; color: #000; text-decoration: underline; }

/* ---- Reviews -------------------------------------------------------------
   The TrustAnalytica script pins its card to the bottom-left of the viewport
   and leaves the div it hands us empty, so the only thing it ever rendered
   was a floating popup riding over the blog cards and the footer. Nothing on
   this site is stuck to the viewport, so front-page.php moves the card into
   the slot below and these rules undo the pinning. !important because the
   script rewrites its own inline styles on every rotation. The section stays
   hidden until the card actually arrives, so a blocked or failed script
   leaves no empty heading behind. */
.fw-reviews { display: none; padding: 60px 20px; text-align: center; }
.fw-reviews.is-live { display: block; }
.fw-reviews__title {
    margin: 0 0 24px; font-family: var(--font-heading); font-weight: 700;
    font-size: 34px; letter-spacing: -1px; line-height: 1.1; color: var(--color-primary);
}
.fw-reviews__slot { display: flex; justify-content: center; }
.fw-reviews__slot #ta-review-widget {
    position: static !important; display: block !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    margin: 0 !important;
}
.fw-reviews__all { margin: 22px 0 0; line-height: 1; }
.fw-reviews__all a { font-family: var(--font-body); font-size: 16px; color: #000; text-decoration: underline; }

/* ---- Mobile (Elementor's 767px breakpoint) ------------------------------
   Measured from the old page at 375px. Note what does NOT shrink there: the
   Get Started, marquee and Schedule circles and the 120px marquee text all
   kept their desktop size. The consult card was hidden. */
@media (max-width: 767px) {
    .fw-hero { padding: 18px 5px 5px; }
    .fw-hero__circle { width: 100%; min-height: 387px; }
    .fw-hero__content { margin-top: -307px; }
    .fw-hero__hi { font-size: 40px; }
    .fw-hero__role { font-size: 35px; }
    .fw-hero__tagline { font-size: 14px; padding: 0 20px; }
    .fw-hero__photo { width: 78%; margin-top: -18px; }

    .fw-faq { padding-bottom: 40px; }
    .fw-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 20px 0; }
    .fw-consult { display: none; }
    .fw-faq__title { text-align: center; }
    .fw-faq__title .fw-green { font-size: 40px; margin-bottom: 10px; }
    .fw-faq__title-2 { font-size: 20px; }
    .fw-faq__item { border-radius: 0; }
    .fw-faq__item summary { padding: 10px; font-size: 17px; }
    .fw-faq__a { padding: 0 10px 10px; border-radius: 0; }
    .fw-faq__a p { font-size: 16px; }

    .fw-paths { gap: 0; padding: 50px 5px; }
    .fw-path { width: 365px; margin: 2.5px 0; }
    .fw-path__title { font-size: 40px; line-height: 50px; }
    .fw-path__more { font-size: 16px; }

    .fw-meet { padding: 20px 16px; }
    .fw-meet__title { font-size: 40px; }
    .fw-meet__sub { font-size: 20px; }

    .fw-calc__title .fw-green { font-size: 40px; }
    .fw-calc__title-2 { font-size: 20px; }
    .fw-calc__grid { grid-template-columns: 1fr; }

    .fw-marquee { min-height: 300px; }

    .fw-awards { grid-template-columns: 1fr; }
    .fw-awards__cell { min-height: 238px; }
    .fw-awards__cell img, .fw-awards__cell:last-child img { width: 117px; }

    .fw-blog__title { font-size: 40px; }
    .fw-blog__grid { grid-template-columns: 1fr; }
    .fw-blog__thumb { aspect-ratio: 1 / 0.5; }
}

/* The homepage's latest-posts row uses the site's one card (see
   fairwayswaleh_card). Three across here rather than the four the index uses,
   because this row sits inside the homepage's narrower rhythm. */
.fw-blog .fw-mu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .fw-blog .fw-mu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fw-blog .fw-mu-grid { grid-template-columns: minmax(0, 1fr); } }