/* =====================================================================
   fsm-custom.css  —  FSM overrides layered on top of the Invena theme.
   Linked in _head.asp AFTER style.css so these rules win.
   Keep all bespoke tweaks here so a theme update never clobbers them.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Header logo
   The same SVG renders in the sidebar and footer, so the file is fine —
   the header container just gives it no height. Force one.
   Adjust the 42px to taste; width stays proportional.
--------------------------------------------------------------------- */
.header-main-one-wrapper .thumbnail img {
    height: 74px;   /* 175% of the original 42px */
    width: auto;
}

/* ---------------------------------------------------------------------
   2) Services > "Mortgage & Debt Reduction" third-level flyout
   The theme styles only one dropdown level, so the nested <ul> rendered
   open and overlapped the sibling items. Hide it by default and fly it
   out to the right when its parent row is hovered.
   (!important guarantees it beats the theme's generic .submenu reveal,
   whatever that rule's specificity happens to be.)
--------------------------------------------------------------------- */
.main-nav .submenu li.has-dropdown { position: relative; }

/* let the 2nd-level dropdown show the flyout instead of clipping it */
.main-nav .submenu { overflow: visible; }

.main-nav .submenu li.has-dropdown > .submenu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 230px;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 5;
}
.main-nav .submenu li.has-dropdown:hover > .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0);
}

/* ---------------------------------------------------------------------
   3) Footer contact links (phone/email)
   Theme's hover colour matched the dark footer background, so the number
   disappeared on hover. Inherit the surrounding text colour, and use the
   brand orange on hover so it stays visible.
--------------------------------------------------------------------- */
.contact-information-footer a { color: inherit; text-decoration: none; }
.contact-information-footer a:hover { color: #F05A24; }

/* ---------------------------------------------------------------------
   4) Counter section height (2026-07-11)
   The theme fixes .counter-bg to height:762px on desktop (>991px) and
   only relaxes it to auto at <=991px. On a full-width desktop that makes
   the dark counter band a huge 762px box with the numbers floating —
   and it "fixes itself" the moment DevTools narrows the viewport under
   992px (which is why it looked fine while inspecting). Let the section
   size to its content; the rts-section-gap padding gives the spacing.
--------------------------------------------------------------------- */
.counter-bg { height: auto; }

/* ---------------------------------------------------------------------
   5) Team cards (2026-07-11)
   Portrait staff photos, rounded corners per the styleguide. Social
   overlays removed in the markup, so the image is the whole card face.
--------------------------------------------------------------------- */
.rts-team-area .team-image-area {
    border-radius: 12px;
    overflow: hidden;
}
.rts-team-area .team-image-area img {
    border-radius: 12px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
   6) Testimonial client photos (2026-07-11)
   Real client photos are landscape (800x600); the card thumbnail slot is
   taller, so cover-crop them for now (final crops to come later).
--------------------------------------------------------------------- */
.testimonials-main-wrapper-two .left-thumbnail img {
    object-fit: cover;
    border-radius: 12px;
}

/* ---------------------------------------------------------------------
   7) Footer brand: tighten spacing under the logo (2026-07-11)
   The white logo SVG carries whitespace and the tagline had a large top
   margin, leaving too big a gap. Pull the tagline up and tighten its
   line-height.
--------------------------------------------------------------------- */
.footer-one-single-wized .footer-logo { display: inline-block; margin-bottom: 6px; }
/* The white logo SVG has no intrinsic size (like the header one), so force a
   height and let width follow — width:auto alone collapses it to zero. */
.footer-one-single-wized .footer-logo img { height: 128px; width: auto; }
.footer-one-single-wized .disc.mt--20 { margin-top: 10px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   8) Homepage hero slides (2026-07-11)
   Swap the theme's demo banner backgrounds for FSM photos. A left-weighted
   dark overlay keeps the white hero copy legible over lighter photos.
   Loaded after style.css, so these win over the theme defaults.
   NOTE: source images are 3840x2160 (~1MB each) — worth resizing/WebP later.
--------------------------------------------------------------------- */
.rts-banner-area-two {
    background-image: linear-gradient(90deg, rgba(28,37,57,0.62), rgba(28,37,57,0.22)), url("/images/FSM-MainImages-3945x1080-H1.jpg");
    /* Wide 3945x1080 panoramic source: because it is WIDER than the hero band,
       cover crops the sides (not the bottom), so the full image height — and
       the subjects head-to-toe — stays visible at full width. Centre both axes
       so the crop is balanced. */
    background-size: cover;
    background-position: center center;
}
.rts-banner-area-two.two {
    background-image: linear-gradient(90deg, rgba(28,37,57,0.62), rgba(28,37,57,0.22)), url("/images/FSM-MainImages-3945x1080-H2.jpg");
}
.rts-banner-area-two.three {
    background-image: linear-gradient(90deg, rgba(28,37,57,0.62), rgba(28,37,57,0.22)), url("/images/FSM-MainImages-3840x2160-H3.jpg");
}
/* Slide 3 plays a background video (FSM-Flowerwalk.mp4). The video sits behind
   a gradient overlay so the white headline stays legible; the H3 photo is the
   poster/fallback while it loads or if video can't play. */
.rts-banner-area-two.three .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.rts-banner-area-two.three::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28,37,57,0.62), rgba(28,37,57,0.22));
    z-index: 1;
    pointer-events: none;
}
.rts-banner-area-two.three .container,
.rts-banner-area-two.three .shape-area-start {
    position: relative;
    z-index: 2;
}

/* The client-story slide (Darren & Marie). Named .story, not by position -
   it is the FIRST slide as of 08-Sep and a positional name would lie.
   ⚠ NO PHOTOGRAPHIC BACKGROUND, on purpose. Their only asset is an 800x600
   video still; the hero band is 3945x1080, so stretching it would look far
   worse than no photo. A brand gradient instead keeps the focus on their
   faces in the card and on the number, and needs no new image commissioned. */
.rts-banner-area-two.story {
    background-image:
        radial-gradient(1200px 520px at 78% 38%, rgba(240,90,36,0.22), rgba(240,90,36,0) 70%),
        linear-gradient(90deg, #0E1526 0%, #1B2438 55%, #223050 100%);
}
/* ⚠ The theme sets .banner-inner-two-content { text-align:center; max-width:80% }
   and p.disc { max-width:65% }, sized for a full-width col-lg-12 slide. In this
   split layout that left the 80px headline at 604px inside a 770px column and
   wrapped it to four lines. Measured 08-Sep. Override both, and left-align -
   a two-column split reads left, not centred. */
.rts-banner-area-two.story .banner-inner-two-content { text-align:left; max-width:100%; margin:0; }
.rts-banner-area-two.story .banner-inner-two-content p.disc { max-width:100%; margin:0 0 26px; }
.rts-banner-area-two.story .banner-inner-two-content h1.title { font-size:clamp(38px,4.2vw,70px); line-height:1.07; }
/* One uniform size across the whole badge (Adam, 08-Sep) - a small unit next
   to two large figures read as a mistake rather than a hierarchy. */
.fsm-story-stat { display:inline-flex; align-items:baseline; gap:9px; background:#F05A24; color:#fff; border-radius:10px; padding:11px 22px; margin-bottom:20px; }
.fsm-story-stat b,
.fsm-story-stat span { font-size:34px; font-weight:800; line-height:1; letter-spacing:-0.5px; }
.fsm-story-cta { margin-top:22px; }
.fsm-story-note { color:rgba(255,255,255,.55); font-size:12.5px; line-height:1.55; margin-top:18px; max-width:540px; }
/* the card reuses .fsm-video-trigger / .fsm-play-btn / .fsm-video-modal,
   already on the homepage via _testimonials.asp - no new player code. */
.fsm-story-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:hidden; max-width:430px; }
.fsm-story-card .fsm-video-trigger { display:block; position:relative; }
.fsm-story-card .fsm-video-trigger img { width:100%; height:235px; object-fit:cover; display:block; transition:transform .45s ease; }
.fsm-story-card:hover .fsm-video-trigger img { transform:scale(1.05); }
.fsm-story-card__body { padding:18px 22px 20px; }
.fsm-story-card__quote { color:#fff; font-size:15.5px; line-height:1.6; font-style:italic; margin:0 0 12px; }
.fsm-story-card__who { color:#fff; font-weight:700; font-size:14.5px; }
.fsm-story-card__who span { display:block; color:rgba(255,255,255,.55); font-weight:400; font-size:12.5px; margin-top:2px; }
@media (max-width:991px){
    .fsm-story-card { max-width:none; margin-top:34px; }
    .rts-banner-area-two.story .banner-inner-two-content { text-align:center; }
    .rts-banner-area-two.story .fsm-story-note { margin-left:auto; margin-right:auto; }
    .fsm-story-cta { margin-left:auto; margin-right:auto; }
    /* MOBILE / TABLET FIT (09-Sep). The theme gives .rts-banner-area-two a FIXED
       height - 850px, and 580px under 576px - sized for a headline, one paragraph
       and a button. This slide carries roughly three times that, and .swiper clips
       at overflow:hidden, so 554px of it was sheared off top AND bottom at 375px
       (276px at 768px). Measured 09-Sep. Two levers, both scoped to <=991px: drop
       the copy the slide already says twice, and let the band grow.
       p.disc goes because /compare/ opens with the same argument; the card quote
       goes because the h1 makes its claim in stronger words. Adam ruled 09-Sep.
       ⚠ THE DISCLAIMER STAYS VISIBLE - it is not a lever. */
    .rts-banner-area-two.story .banner-inner-two-content p.disc { display:none; }
    .fsm-story-card__quote { display:none; }
    .fsm-story-card__body { padding:16px 20px 18px; }
    .fsm-story-card .fsm-video-trigger img { height:170px; }
    .fsm-story-card { margin-top:24px; }
}
/* ⚠ UNSCOPED ON PURPOSE - THIS MUST HIT ALL FOUR SLIDES, NOT JUST .story.
   The carousel runs effect:"fade", so every slide is absolutely positioned inside
   one container and the container takes the TALLEST slide's height. Growing only
   the story band was measured 09-Sep: the container went to 1267px while the other
   three stayed 580px, leaving 687px of empty page under each of them.
   min-height, not height, so a future longer slide GROWS instead of being sheared -
   the failure mode becomes a visible gap rather than lost content. */
@media (max-width:575px){
    .rts-banner-area-two { height:auto; min-height:840px; padding:40px 0; }
}

/* Homepage CTA band background — swap the theme's cta/02.webp for an FSM
   photo. A dark overlay keeps the centred white CTA text legible. */
.rts-call-to-action-area-two {
    background-image: linear-gradient(rgba(18,26,43,0.72), rgba(18,26,43,0.72)), url("/images/FSM-MainImages-1680x944-CTA.jpg");
    background-size: cover;
    /* Band is a fixed 280px-tall strip. The faces sit in the upper third of
       the photo, so anchor the crop high (36% down) — otherwise on very wide
       screens `cover` zooms in and shows only the table/laptops. */
    background-position: center 36%;
}

/* ---------------------------------------------------------------------
   Rounded corners on content imagery (2026-07-24)
   The old theme webp images had rounding baked into the file. Our JPEG
   replacements are square, so the radius is restored here in CSS instead —
   now independent of the image file. Heroes and the CTA band are excluded
   (full-bleed backgrounds, meant to be square-edged).
--------------------------------------------------------------------- */
/* Large feature / advisory photos */
.left-thumbnail-about-area-two > img,          /* Who We Are — large */
.thumbnail-business-area-right-two .large-thumbnail img,  /* Why Talk To Us — large */
.large-image-bottm-breadcrumb img,             /* About Us — wide image under breadcrumb */
.appoinment-thumbnail img {                     /* Book an appointment */
    border-radius: 20px;
}
/* Small overlapping inset photos — white photo-frame + soft shadow (this was
   baked into the old theme webp files; our JPEGs need it applied in CSS). */
.left-thumbnail-about-area-two .small-image img,          /* Who We Are — inset */
.thumbnail-business-area-right-two .small-thumbnail img { /* Why Talk To Us — inset */
    border-radius: 16px;
    border: 8px solid #fff;
    box-shadow: 0 18px 40px rgba(18, 26, 43, 0.14);
}
/* Investment-type slider cards (clip the anchor so it holds on any state) */
.project-style-one .thumbnail {
    display: block;
    overflow: hidden;
    border-radius: 16px;
}

/* Stop the floating "jump" animation on the Who We Are / About Us inset photo
   (theme sets animation: jump-2 5s infinite). The constant motion is distracting. */
.left-thumbnail-about-area-two .small-image { animation: none; }

/* Partners strip: stack the "Our Partners" title ABOVE the logos (as on the
   homepage), instead of the theme's title-left / logos-right row. */
.brand-list-area-wrapper { flex-direction: column; align-items: center; gap: 26px; }
.brand-list-area-wrapper .left-paragraph { text-align: center; }
.brand-list-area-wrapper .right-brand-area-wrapper { width: 100%; justify-content: center; gap: 40px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   9) Why-Talk-To-Us image pair (2026-07-11)
   Bigger photo behind; smaller front image justified right so it sits as a
   small accent over the bottom-right and overlaps only a little.
   Desktop only — mobile stacks differently.
--------------------------------------------------------------------- */
.thumbnail-business-area-right-two .large-thumbnail {
    max-width: 572px;   /* ~30% larger than the theme's 440px */
}
@media (min-width: 768px) {
    .thumbnail-business-area-right-two .small-thumbnail {
        max-width: 188px;   /* 25% bigger than the previous 150px */
        top: auto;
        left: auto;
        right: 90px;        /* moved left so it overlaps the family photo */
        bottom: -40px;
        transform: none;
    }
}

/* ---------------------------------------------------------------------
   10) Projects section vs counter band (2026-07-11)
   The theme pulls the Projects (.gallery-bg) section up by -23% so its
   cards sit over the dark counter backdrop. With our counter set to
   height:auto that backdrop no longer lines up — the counter's dark bg
   peeked out on the right and its stats hid behind the project cards.
   Decouple them: the dark counter band shows its four stats in full, and
   the Projects section sits cleanly below.
--------------------------------------------------------------------- */
.gallery-bg { margin-top: 0; }

/* ---------------------------------------------------------------------
   11) Mobile fixes (2026-07-11)
--------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    /* Testimonial photo: the theme pins the thumbnail to min-width:545px,
       which overflows narrow screens and crops the sides. Let it fit the
       stacked card and show the whole image. */
    .testimonials-main-wrapper-two .left-thumbnail {
        min-width: 100%;
        max-width: 100%;
    }
    .testimonials-main-wrapper-two .left-thumbnail img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    /* "Our Client Reviews": arrows overlapping the title on mobile.
       (2026-07-13) The slider controls (prev / fraction / next) are
       position:absolute, pinned to the top-right of .title-area-between-wrapper.
       On a wide desktop they sit far right of the left-aligned title; on narrow
       screens the title wraps to full width and the absolutely-positioned
       controls land on top of it. Stacking the flex parent alone does NOTHING
       here because absolute children are out of flow — so we also drop the
       controls back INTO flow as a normal row beneath the title. */
    .rts-client-review-area .title-area-between-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .rts-client-review-area .pagination-wrapper {
        position: relative;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        gap: 22px;
    }
    .rts-client-review-area .pagination-wrapper .swiper-button-prev,
    .rts-client-review-area .pagination-wrapper .swiper-pagination-fraction,
    .rts-client-review-area .pagination-wrapper .swiper-button-next {
        position: static;
        inset: auto;
        transform: none;
        margin: 0;
    }
    /* DOM order is fraction, next, prev — re-order to prev, fraction, next. */
    .rts-client-review-area .pagination-wrapper .swiper-button-prev { order: 1; }
    .rts-client-review-area .pagination-wrapper .swiper-pagination-fraction { order: 2; width: auto; }
    .rts-client-review-area .pagination-wrapper .swiper-button-next { order: 3; }
}
@media only screen and (max-width: 767px) {
    /* Footer: when the columns stack, give the Sitemap/Downloads headings
       room below the brand text. */
    .rts-footer-area .row .col-xl-4 + .col-xl-4 {
        margin-top: 40px;
    }
}

/* ---------------------------------------------------------------------
   12) Thank-you contact cards (2026-07-13)
   The signle-footer-contact-8 component is styled for the dark footer, so
   on the light thank-you page the bare icon + text looked unfinished. Give
   each one a card surface and a brand-orange icon disc so the Call / Email
   / Visit row reads as a deliberate set of cards.
--------------------------------------------------------------------- */
.fsm-contact-cards .signle-footer-contact-8 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 26px 24px;
    border: 1px solid #e7e9ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(28, 37, 57, 0.06);
}
.fsm-contact-cards .signle-footer-contact-8 .icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F05A24;
    color: #fff;
    font-size: 18px;
}
.fsm-contact-cards .signle-footer-contact-8 .inner-content {
    min-width: 0;
    width: 100%;
}
.fsm-contact-cards .signle-footer-contact-8 .inner-content .title {
    margin: 0 0 4px;
    font-size: 16px;
}
.fsm-contact-cards .signle-footer-contact-8 .inner-content a {
    color: inherit;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.fsm-contact-cards .signle-footer-contact-8 .inner-content a:hover { color: #F05A24; }

/* ---------------------------------------------------------------------
   13) Testimonial video modal (2026-07-13)
   Each client photo in the review slider is a click-to-play trigger that
   opens their property Vimeo video in a lightweight modal (markup + JS in
   _testimonials.asp). Play-button overlay on the photo; centred 16:9 modal.
--------------------------------------------------------------------- */
.testimonials-main-wrapper-two .left-thumbnail .fsm-video-trigger {
    display: block;
    position: relative;
    cursor: pointer;
}
.fsm-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(240, 90, 36, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding-left: 4px;   /* optically centre the play glyph */
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
    transition: transform .2s ease, background .2s ease;
    pointer-events: none;   /* clicks fall through to the <a> trigger */
}
.fsm-video-trigger:hover .fsm-play-btn {
    transform: translate(-50%, -50%) scale(1.08);
    background: #F05A24;
}

.fsm-video-modal { position: fixed; inset: 0; z-index: 99999; display: none; }
.fsm-video-modal.is-open { display: block; }
.fsm-video-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 15, 25, 0.85); }
.fsm-video-modal__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 960px);
}
.fsm-video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fsm-video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fsm-video-modal__close {
    position: absolute;
    top: -46px;
    right: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
}
.fsm-video-modal__close:hover { color: #F05A24; }

/* ---------------------------------------------------------------------
   14) Service-detail banner overlay (2026-07-13)
   The detail banner uses a per-page photo behind white heading text; some
   photos are light and the title washed out. A left-weighted dark overlay
   keeps the heading legible over any image.
--------------------------------------------------------------------- */
.banner-inner-service-details-1 { position: relative; }
.banner-inner-service-details-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 26, 43, 0.80), rgba(18, 26, 43, 0.35));
    z-index: 0;
}
.banner-inner-service-details-1 > .container { position: relative; z-index: 1; }
/* Making the banner position:relative (above) lifts it into a stacking
   context, so it was painting OVER the content column whose inline image
   is pulled up (margin-top:-120px) to overlap the banner - hiding the
   overlap. Raise the content column back above the banner so the inline
   image sits on top, matching the template. */
.rts-service-details-area-main-bottom .service-details-left-area {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------------
   15) Services index card thumbnails (2026-07-13)
   The service photos have different aspect ratios, so the cards looked
   uneven. Force a consistent image height and cover-crop.
--------------------------------------------------------------------- */
.our-service-area-start .signle-service-style-10 .thumbnail img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Tighten the gap between the service-card icon and its title (theme sets a
   45px margin-bottom, which floats the icon too far above the heading). */
.rts-service-main-wrapper-10 .signle-service-style-10 .content-area-wrapper .icon {
    margin-bottom: 14px;
}

/* FAQ image sits flush to the left edge with only its right corners rounded
   (the old webp had that baked in as transparent corners). Replicate on the JPEG. */
.thumbnail-faq-left img { border-radius: 0 20px 20px 0; }

/* Contact Us image — the old webp had all corners rounded (baked in). */
.thumbnail-contact-form img { border-radius: 20px; }

/* ---------------------------------------------------------------------
   16) Download box title link colour (2026-07-14)
   The sidebar "Free Resources" box sits on a dark navy panel. The theme's
   default link-hover colour is dark, so hovering a resource title turned it
   the same colour as the background and it vanished. Keep titles white, and
   use the FSM orange on hover.
--------------------------------------------------------------------- */
.rts-single-wized.download .single-download-area .mid .title,
.rts-single-wized.download .single-download-area .mid .title a {
    color: #ffffff !important;
    transition: color .25s ease;
}
.rts-single-wized.download .single-download-area:hover .mid .title,
.rts-single-wized.download .single-download-area:hover .mid .title a,
.rts-single-wized.download .single-download-area .mid .title a:hover {
    color: #F05A24 !important;
}

/* ---------------------------------------------------------------------
   17) Resources mega-menu heading icons (2026-07-14)
   The "Resources" mega-menu reuses the services SVG icons in the column
   headings (in place of the theme's folder glyph). Size them to sit inline
   with the heading text.
--------------------------------------------------------------------- */
.rts-mega-menu.resource-mega-menu-style .hega-menu-head img {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   18) Services mega-menu image + CTA (2026-07-14)
   The "Book a discovery call" CTA sits BENEATH the image in the third column
   (columns keep their equal-thirds width). Rather than shrink the whole photo,
   we crop it from the bottom (object-position:top keeps the faces) to a height
   that makes image + gap + CTA equal the height of the menu cards (457px), so
   the CTA's bottom lines up with the bottom of the dropdown. The theme sets
   height:auto on this img at higher specificity, so the height needs
   !important to win.
--------------------------------------------------------------------- */
.service-mega-menu-style .menu-thumb {
    margin-bottom: 20px;
}
.service-mega-menu-style .menu-thumb img {
    width: 100%;
    height: 331px !important;   /* crops ~30% off the bottom of the photo */
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    display: block;
}
/* CTA stays inside a ul.mega-menu-item (so the theme's dark-box styling on
   `li a.free-consultation` still applies); zero the list's own spacing and
   match the image's 20px left inset so the box is the same width as the image. */
.service-mega-menu-style .menu-thumb-cta {
    margin: 0;
    padding-top: 0;
    padding-left: 20px;
}

/* ---------------------------------------------------------------------
   19) Contact page info-panel icons (2026-07-14)
   The theme's .single-contact-info .icon is `flex: 0 1 auto`, i.e. allowed to
   SHRINK. FSM's email/address values are longer than the theme's placeholder
   text, so flexbox squeezed the icon's width while its height stayed fixed -
   turning the round badge into a tall pill. Stop it shrinking so it stays a
   circle regardless of the text length.
--------------------------------------------------------------------- */
.contact-info-area-wrapper-p .single-contact-info .icon {
    flex: 0 0 auto;
}
/* Trim the panel's left padding (theme default is 60px) so the longer FSM
   email/address don't run up against the right edge. */
.contact-info-area-wrapper-p {
    padding-left: 30px;
}

/* ---------------------------------------------------------------------
   20) Reviews page: filterable video-testimonial grid (2026-07-14)
   A grid of client photo tiles (each opens their Vimeo video in the shared
   modal), with category filter buttons (Property / Mortgage / Tax / SMSF /
   All). Mirrors the v1 /testimonials/all/ page; defaults to Property.
--------------------------------------------------------------------- */
.fsm-review-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 50px;
}
.fsm-review-filter button {
    width: auto;            /* theme sets button{width:100%}; keep these inline */
    flex: 0 0 auto;
    border: 1px solid rgba(18, 26, 43, 0.15);
    background: #fff;
    color: #121A2B;
    padding: 8px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
    transition: all .2s ease;
}
.fsm-review-filter button:hover { border-color: #F05A24; color: #F05A24; }
.fsm-review-filter button.active { background: #121A2B; border-color: #121A2B; color: #fff; }

.fsm-review-card { position: relative; margin-bottom: 30px; }
.fsm-review-card .fsm-video-trigger {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.fsm-review-card .fsm-video-trigger img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.fsm-review-card:hover .fsm-video-trigger img { transform: scale(1.05); }
.fsm-review-card__meta { padding: 18px 4px 0; }
.fsm-review-card__meta .title { margin: 0 0 2px; }
.fsm-review-card__meta p { margin: 0; opacity: .7; font-size: 14px; }
.fsm-review-item.is-hidden { display: none; }

/* ---------------------------------------------------------------------
   21) Mortgage Buster landing page (2026-07-14)
   Bespoke ad-campaign LP: hero video + guide form, cost panel, 10-tactic
   blueprint grid, benefit cards, objection band, star reviews.
--------------------------------------------------------------------- */
/* hero: responsive 16:9 video on the left */
.mb-hero-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(18, 26, 43, 0.18);
}
.mb-hero-video iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* the dark guide form card - fully self-contained (no theme overlap) so it
   sits cleanly beside the video and never covers the fullscreen control */
.mb-guide-form {
    background: #121A2B;
    border-radius: 16px;
    padding: 34px 30px;
    box-shadow: 0 30px 60px rgba(18,26,43,0.18);
    /* fill the column so it matches the video height (row is align-items-stretch),
       with the fields vertically centred */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Stack variant. height:100% above exists so the card matches the video beside
   it (that row is align-items-stretch). Where the card is instead the LAST item
   in a single column, under a heading and a paragraph, height:100% makes it as
   tall as the whole column while it starts partway down - so it overflows the
   section into the footer, and justify-content:center then floats the fields in
   a tall empty box. Measured 08-Sep on /dev/downloads/: 79px of overlap on a
   plain load, 210px once anything was added above the card. */
.mb-guide-form--stack {
    height: auto;
    justify-content: flex-start;
}
.mb-guide-form .title { color: #fff; }
.mb-guide-form .single-input { margin-bottom: 16px; }
.mb-guide-form input,
.mb-guide-form textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 8px;
    padding: 14px 18px;
}
.mb-guide-form input::placeholder,
.mb-guide-form textarea::placeholder { color: rgba(255,255,255,0.6); }
.mb-guide-form .rts-btn.btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    background: #F05A24;      /* orange so it stands out on the dark card */
    border-color: #F05A24;
    color: #fff;
}
/* On hover the theme wipes a light (#F2F2F2) circle across a primary button.
   On a DARK card/section that washes out white button text, so flip the text
   to brand orange - the theme's own intended "invert" look. Applies inside the
   guide-form card and any .mb-dark section, and is reusable via .btn-on-dark on
   any primary button placed over a dark background. */
.mb-guide-form .rts-btn.btn-primary:hover,
.mb-dark .rts-btn.btn-primary:hover,
.rts-btn.btn-primary.btn-on-dark:hover {
    color: #F05A24;
}
/* the reusable helper also gives the normal (un-hovered) orange fill + white text */
.rts-btn.btn-primary.btn-on-dark {
    background: #F05A24;
    border-color: #F05A24;
    color: #fff;
}
/* Reusable OUTLINE button for dark sections (the onepage-thirteen "Get Started"
   look, made dark-safe): transparent with a white hairline + white text, and on
   hover the theme's light circle wipes in so the text flips to brand orange and
   stays readable. Pair with .btn-on-dark (filled) as the primary/secondary set
   on any dark band. */
.rts-btn.btn-primary.btn-outline-on-dark {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
}
.rts-btn.btn-primary.btn-outline-on-dark:hover {
    color: #F05A24;
    border-color: #F2F2F2;
}
/* Outline button on LIGHT backgrounds (the onepage-thirteen "Get Started"
   look). The theme gives btn-primary WHITE text for its filled state; on the
   transparent btn-border that text is white-on-white until hover. Force a
   readable navy label + a visible hairline; orange on hover. */
.rts-btn.btn-primary.btn-border {
    color: #121A2B;
    border-color: rgba(18,26,43,0.22);
}
.rts-btn.btn-primary.btn-border:hover {
    color: #F05A24;
}
.mb-form-note { font-size: 13px; opacity: .65; margin-top: 14px; text-align: center; }

/* hero heading (cap the theme's oversized h1) */
.mb-hero-title {
    font-size: 44px;
    line-height: 1.14;
    font-weight: 800;
    margin: 14px 0 0;
}
@media (max-width: 991px){ .mb-hero-title { font-size: 34px; } }

/* compact "tease" tactic cards - title only, no reveal */
.mb-tease {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(18,26,43,0.10);
    border-radius: 12px;
    padding: 18px 20px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mb-tease:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18,26,43,0.10); border-color: rgba(240,90,36,.35); }
.mb-tease .mb-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #121A2B; color: #fff; font-weight: 800; font-size: 17px;
}
.mb-tease h5 { margin: 0; font-size: 17px; line-height: 1.35; }

/* readable orange guide CTA banner */
.mb-guide-cta {
    background: #F05A24;
    border-radius: 16px;
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.mb-guide-cta h3 { color: #fff; margin: 0 0 6px; }
.mb-guide-cta p { color: #fff; opacity: .95; margin: 0; }
.mb-guide-cta .rts-btn {
    background: #fff; color: #121A2B; border-color: #fff; flex: 0 0 auto;
}
.mb-guide-cta .rts-btn:hover { background: #121A2B; color: #fff; border-color: #121A2B; }

/* ---- LP stripped header ---- */
.mb-lp-header {
    padding: 18px 0;
    border-bottom: 1px solid rgba(18,26,43,0.08);
    background: #fff;
}
.mb-lp-header .mb-lp-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.mb-lp-header .thumbnail img { height: 77px; width: auto; max-height: none; }
.mb-lp-right { display: flex; align-items: center; gap: 22px; }
.mb-lp-phone { font-weight: 700; color: #121A2B; white-space: nowrap; }
.mb-lp-phone i { color: #F05A24; margin-right: 8px; }
@media (max-width: 575px){ .mb-lp-phone span { display: none; } }

/* ---- LP slim footer ---- */
.mb-lp-footer { background: #121A2B; color: rgba(255,255,255,.75); padding: 30px 0; }
.mb-lp-footer .mb-lp-footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.mb-lp-footer img { max-height: 40px; }
.mb-lp-footer p { margin: 0; font-size: 14px; }
.mb-lp-footer ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.mb-lp-footer a { color: #fff; }
.mb-lp-footer a:hover { color: #F05A24; }

/* ---------------------------------------------------------------------
   22) Video + text testimonial sliders (2026-07-14)
   Shared styling for the reusable video-testimonial sliders
   (_testimonials-mortgage/_testimonials-property) and the comment-only
   Google-review slider (_testimonials-text).
--------------------------------------------------------------------- */
/* video slider reuses .fsm-review-card (section 20); make it fill the slide */
.fsm-vid-slider .swiper-slide { height: auto; }
.fsm-vid-slider .fsm-review-card { margin-bottom: 0; }
.fsm-vid-slider .swiper-slide .fsm-review-card__meta { padding-bottom: 6px; }

/* text (comment) review slider - dark cards */
.fsm-text-slider .swiper-slide { height: auto; }
.fsm-text-review {
    background: #121A2B;
    color: #fff;
    border-radius: 16px;
    padding: 38px 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fsm-text-review .qmark { color: #F05A24; font-size: 30px; margin-bottom: 16px; line-height: 1; }
.fsm-text-review .quote { color: #fff; font-size: 16px; line-height: 1.65; margin: 0 0 24px; flex: 1 1 auto; }
.fsm-text-review .stars { color: #F5A623; letter-spacing: 2px; margin-bottom: 8px; }
.fsm-text-review .who { color: #fff; font-weight: 700; margin: 0; }
.fsm-text-review .who span { color: rgba(255,255,255,.55); font-weight: 400; }

/* slider controls (shared) */
.fsm-slider-nav { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
.fsm-slider-nav .fsm-nav-btn {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(18,26,43,.18); background: #fff; color: #121A2B;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all .2s ease;
}
.fsm-slider-nav .fsm-nav-btn:hover { background: #F05A24; border-color: #F05A24; color: #fff; }

/* ---------------------------------------------------------------------
   23) Misc landing-page fixes (2026-07-14)
--------------------------------------------------------------------- */
/* checklist inline (the theme's .single-check computes to display:block in
   this context, stacking the tick above the text) + brand-orange ticks */
.fsm-check-inline .single-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.fsm-check-inline .single-check i { color: #F05A24; font-size: 18px; margin-top: 4px; flex: 0 0 auto; }
.fsm-check-inline .single-check p { margin: 0; }

/* the theme's scroll-to-top ring ignores `bottom` overrides, so instead lift
   the reCAPTCHA v3 badge above it (the badge only appears on form pages). */
.grecaptcha-badge { bottom: 84px !important; }

/* ---------------------------------------------------------------------
   24) Mortgage Buster blueprint - featured tactics + 4-curve payoff graph
       (.mb-feature cards, .mb-graph four-strategy SVG, .mb-graph__bars)
--------------------------------------------------------------------- */
.mb-feature {
    background: #fff;
    border: 1px solid rgba(18,26,43,0.10);
    border-radius: 16px;
    padding: 34px 34px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mb-feature .mb-feature__eyebrow {
    color: #F05A24; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; font-size: 13px;
}
.mb-feature h4 { margin: 10px 0 14px; }
.mb-feature p { opacity: .82; margin: 0 0 22px; flex: 1 1 auto; }
.mb-feature .mb-stat {
    background: #121A2B; color: #fff; border-radius: 12px;
    padding: 18px 22px; display: flex; align-items: baseline; gap: 12px;
}
.mb-feature .mb-stat .num { color: #F05A24; font-size: 28px; font-weight: 800; line-height: 1; white-space: nowrap; }
.mb-feature .mb-stat .lbl { font-size: 14px; opacity: .88; line-height: 1.4; }

.mb-locked {
    display: flex; align-items: center; gap: 14px;
    background: #f6f7f9; border: 1px solid rgba(18,26,43,0.08);
    border-radius: 10px; padding: 15px 18px; height: 100%;
}
.mb-locked .mb-num {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e4e7eb; color: #8b95a1; font-weight: 800; font-size: 15px;
}
.mb-locked h6 { margin: 0; font-size: 15px; color: #4a545f; flex: 1 1 auto; }
.mb-locked .lock { color: #aeb6bf; font-size: 14px; }

.mb-fineprint { font-size: 12px; opacity: .55; max-width: 820px; margin-left: auto; margin-right: auto; }
.mb-source { font-size: 12px; opacity: .6; margin: 12px 0 0; }
.mb-feature .mb-source { margin-top: 10px; }

/* new-build vs established comparison (2026 Budget card) - clean aligned rows,
   avoids the baseline-aligned .mb-stat look when the "figure" is a phrase */
.mb-compare { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.mb-compare__row { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.45; }
.mb-compare__tag {
    flex: 0 0 auto; min-width: 96px; text-align: center;
    font-weight: 700; font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
    padding: 7px 10px; border-radius: 8px; background: #F05A24; color: #fff;
}
.mb-compare__tag--muted { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
.mb-compare__row .txt { opacity: .9; }

/* ---------------------------------------------------------------------
   27) Mortgage Saver calculator (/calculator/mortgage/)
--------------------------------------------------------------------- */
.mb-calc__panel {
    background: #fff; border: 1px solid rgba(18,26,43,0.10); border-radius: 16px;
    padding: 30px; height: 100%;
}
.mb-calc__field { margin-bottom: 18px; }
.mb-calc__field > label { display: block; font-weight: 600; font-size: 14px; color: #121A2B; margin-bottom: 7px; }
.mb-calc__field .hint { display: block; font-size: 12px; opacity: .6; margin-top: 5px; }
.mb-calc__inputwrap {
    display: flex; align-items: stretch; border: 1px solid rgba(18,26,43,0.18);
    border-radius: 10px; overflow: hidden; background: #f7f8fa;
}
.mb-calc__inputwrap:focus-within { border-color: #F05A24; }
.mb-calc__inputwrap .adorn {
    display: flex; align-items: center; padding: 0 14px; background: rgba(18,26,43,0.05);
    color: #5b6470; font-weight: 700; font-size: 15px;
}
.mb-calc__inputwrap input, .mb-calc__inputwrap select {
    flex: 1 1 auto; width: 100%; border: 0; background: transparent; outline: none;
    padding: 12px 14px; font-size: 16px; color: #121A2B; min-width: 0;
}
.mb-calc__warn {
    background: rgba(240,90,36,0.10); color: #b5451c; border-radius: 8px;
    padding: 10px 14px; font-size: 13px; margin: 4px 0 0;
}
.mb-calc__results { height: 100%; display: flex; flex-direction: column; }
.mb-calc__headline { display: flex; gap: 16px; }
.mb-calc__stat {
    flex: 1; background: #F05A24; color: #fff; border-radius: 14px;
    padding: 22px 20px; text-align: center;
}
.mb-calc__stat .big { display: block; font-size: 34px; font-weight: 800; line-height: 1.05; }
.mb-calc__stat .lbl { font-size: 13px; opacity: .95; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 420px){ .mb-calc__headline { flex-direction: column; } .mb-calc__stat .big { font-size: 28px; } }
.mb-graph__legend b { color: #121A2B; }
.mb-calc__compare { display: flex; gap: 16px; }
.mb-calc__col { flex: 1; background: #f7f8fa; border: 1px solid rgba(18,26,43,0.08); border-radius: 12px; padding: 18px 20px; }
.mb-calc__col--win { background: #fff; border-color: rgba(240,90,36,0.35); }
.mb-calc__col h6 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #5b6470; }
.mb-calc__col--win h6 { color: #F05A24; }
.mb-calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; padding: 5px 0; }
.mb-calc__row span { opacity: .7; }
.mb-calc__row b { font-weight: 700; white-space: nowrap; }
@media (max-width: 575px){ .mb-calc__compare { flex-direction: column; } }

/* retirement calculator extras */
.mb-calc__assump { margin-top: 22px; padding-top: 20px; border-top: 1px dashed rgba(18,26,43,0.18); }
.mb-calc__assump-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #5b6470; }
.mt--5 { margin-top: 5px; }
.mb-calc__progress-wrap { margin-top: 20px; }
.mb-calc__progress-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #5b6470; margin-bottom: 7px; }
.mb-calc__progress-top b { color: #F05A24; }
.mb-calc__progress { height: 12px; background: #e9ecf1; border-radius: 20px; overflow: hidden; }
.mb-calc__progress-bar { height: 100%; background: #F05A24; border-radius: 20px; transition: width .3s ease; }
.mb-calc__note { font-size: 13px; opacity: .7; margin-top: 16px; padding: 12px 16px; background: #f7f8fa; border-radius: 10px; border: 1px solid rgba(18,26,43,0.08); }

/* payoff-curve graph band */
.mb-graph { background: #fff; border: 1px solid rgba(18,26,43,0.10); border-radius: 16px; padding: 30px 30px 26px; }
.mb-graph__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; margin-bottom: 16px; font-size: 13px; color: #5b6470; }
.mb-graph__legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.mb-graph svg { width: 100%; height: auto; display: block; }
.mb-graph__bars { display: flex; gap: 16px; margin-top: 20px; }
.mb-graph__bars .bar { flex: 1; background: #F05A24; color: #fff; border-radius: 10px; padding: 16px 14px; text-align: center; }
.mb-graph__bars .bar .big { font-size: 26px; font-weight: 800; display: block; line-height: 1.1; }
.mb-graph__bars .bar .lbl { font-size: 13px; opacity: .95; letter-spacing: .5px; text-transform: uppercase; }
@media (max-width: 575px){ .mb-graph__bars { flex-direction: column; } }

/* dark sections */
.mb-dark { background: #121A2B; color: #fff; }
.mb-dark .title, .mb-dark h2, .mb-dark h3, .mb-dark h4, .mb-dark h5 { color: #fff; }
.mb-dark .pre { color: #F05A24; }
.mb-cost-figure { font-size: 40px; font-weight: 800; color: #F05A24; line-height: 1.1; margin: 0 0 6px; }
.mb-list { list-style: none; padding: 0; margin: 0; }
.mb-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.mb-list li i { position: absolute; left: 0; top: 4px; color: #F05A24; }

/* 10-tactic blueprint grid */
.mb-tactic {
    background: #fff;
    border: 1px solid rgba(18,26,43,0.08);
    border-radius: 14px;
    padding: 30px 26px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.mb-tactic:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(18,26,43,0.10); }
.mb-tactic .mb-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: #121A2B; color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 18px;
}
.mb-tactic h5 { margin: 0 0 10px; }
.mb-tactic p { margin: 0; opacity: .78; }

/* benefit cards */
.mb-benefit { text-align: center; padding: 34px 24px; }
.mb-benefit .icon {
    width: 74px; height: 74px; border-radius: 50%; background: rgba(240,90,36,0.10);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.mb-benefit .icon i { font-size: 30px; color: #F05A24; }

/* star reviews */
.mb-review {
    background: #fff; border: 1px solid rgba(18,26,43,0.08); border-radius: 14px;
    padding: 30px; height: 100%;
}
.mb-review .stars { color: #F5A623; margin-bottom: 14px; letter-spacing: 2px; }
.mb-review .quote { margin: 0 0 18px; }
.mb-review .who { font-weight: 700; margin: 0; }
.mb-review .src { font-size: 13px; opacity: .6; }

/* ---- /dev/sm1/ "What Happens Next" page ---- */
/* The theme caps the two-column about paragraph at 333px on wide (>=1600px)
   screens, which reads as an oddly narrow column when the block is prose only
   (no side check-list to fill the row). Let the copy use the full column here. */
.sm1-strategy .about-inner-content-two .about-between-wrapper p.disc,
.sm-strategy  .about-inner-content-two .about-between-wrapper p.disc { max-width: 100%; }

/* Shorter breadcrumb for sm1 (below the theme's own small-h=326px), and the
   overview section is pulled up close beneath the heading via reduced pt on the
   page. */
.sm1-breadcrumb.rts-breadcrumb-area.small-h,
.sm-breadcrumb.rts-breadcrumb-area.small-h { height: 190px; }

/* Centre the big faded watermark on the title (theme sits it high at top:-65px,
   which makes the whole block read as top-heavy / "not centred"). Aligning the
   watermark's centre to the title's centre balances it. */
.sm1-breadcrumb .title-area-left .bg-title,
.sm-breadcrumb .title-area-left .bg-title { top: -42px; }

/* =====================================================================
   /dev/get-started/  —  property-investment funnel
   ===================================================================== */
/* hero (photo bg + overlay set inline on the element) */
.gs-hero { background-size: cover; background-position: center; color:#fff; padding: 120px 0 110px; }
@media (max-width: 991px){ .gs-hero { padding: 80px 0 66px; } }
.gs-hero__pre { color:#F05A24; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:14px; display:block; margin-bottom:14px; }
.gs-hero__title { color:#fff; font-size:48px; line-height:1.12; font-weight:800; margin:0 0 18px; }
@media (max-width: 991px){ .gs-hero__title { font-size:34px; } }
.gs-hero__disc { color:rgba(255,255,255,0.88); font-size:18px; max-width:620px; margin:0 0 22px; }
.gs-hero__list { list-style:none; padding:0; margin:0 0 30px; }
.gs-hero__list li { margin-bottom:10px; color:#fff; font-weight:500; }
.gs-hero__list li i { color:#F05A24; margin-right:10px; }
.gs-hero__cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.gs-hero__note { display:block; margin-top:16px; font-size:14px; color:rgba(255,255,255,0.7); }

/* process steps (Ready / Aim / Fire) */
.gs-step { background:#fff; border:1px solid rgba(18,26,43,0.08); border-radius:16px; padding:36px 30px; height:100%; text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.gs-step:hover { transform:translateY(-6px); box-shadow:0 20px 45px rgba(18,26,43,0.10); }
.gs-step__icon { width:74px; height:74px; border-radius:50%; background:rgba(240,90,36,0.10); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.gs-step__icon i { font-size:28px; color:#F05A24; }
.gs-step__tag { display:block; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:#121A2B; font-size:18px; margin-bottom:10px; }

/* qualifier wizard */
.gs-quiz { background:#fff; border:1px solid rgba(18,26,43,0.10); border-radius:20px; box-shadow:0 30px 70px rgba(18,26,43,0.08); padding:40px 44px; }
@media (max-width:575px){ .gs-quiz { padding:28px 22px; } }
.gs-quiz__progress-wrap { margin-bottom:30px; }
.gs-quiz__progress-top { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:#5b6470; margin-bottom:8px; }
.gs-quiz__progress-top b { color:#F05A24; }
.gs-quiz__progress { height:10px; background:#eef0f4; border-radius:20px; overflow:hidden; }
.gs-quiz__progress-bar { height:100%; background:#F05A24; border-radius:20px; transition:width .35s ease; }
.gs-quiz__step { display:none; }
.gs-quiz__step.is-active { display:block; animation: gsFade .35s ease; }
@keyframes gsFade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.gs-quiz__q { font-size:24px; margin:0 0 8px; color:#121A2B; }
.gs-quiz__hint { color:#5b6470; font-size:15px; margin:0 0 22px; }
.gs-quiz__opts { display:grid; gap:14px; }
.gs-quiz__opt { text-align:left; background:#f7f8fa; border:1.5px solid rgba(18,26,43,0.10); border-radius:12px; padding:18px 22px; font-size:17px; font-weight:600; color:#121A2B; cursor:pointer; transition:all .2s ease; }
.gs-quiz__opt:hover { border-color:#F05A24; background:#fff; transform:translateY(-2px); }
.gs-quiz__opt.is-sel { border-color:#F05A24; background:rgba(240,90,36,0.06); }
.gs-quiz__form .single-input { margin-bottom:14px; }
.gs-quiz__form input { width:100%; background:#f7f8fa; border:1.5px solid rgba(18,26,43,0.10); border-radius:10px; padding:15px 18px; }
.gs-quiz__submit { width:100%; justify-content:center; margin-top:6px; }
.gs-quiz__nav { display:flex; justify-content:space-between; align-items:center; margin-top:26px; padding-top:18px; border-top:1px solid rgba(18,26,43,0.08); }
.gs-quiz__back { background:none; border:none; color:#5b6470; font-weight:600; cursor:pointer; }
.gs-quiz__back:hover { color:#F05A24; }
.gs-quiz__secure { font-size:13px; color:#8a9098; }
.gs-quiz__secure i { color:#1f9d55; margin-right:5px; }
.gs-quiz__result-head { font-size:22px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.gs-quiz__result-head.is-pass { color:#1f9d55; }
.gs-quiz__result-head.is-soft { color:#c47a1e; }
.gs-quiz__result-body { color:#3a4250; font-size:16px; margin-bottom:18px; }
.gs-quiz__pills { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.gs-pill { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; padding:8px 14px; border-radius:30px; }
.gs-pill.is-good { background:rgba(31,157,85,0.10); color:#1f9d55; }
.gs-pill.is-soft { background:rgba(196,122,30,0.10); color:#c47a1e; }
.gs-quiz__reassure { color:#5b6470; font-size:15px; margin-bottom:22px; }
.gs-quiz__result-cta { display:flex; flex-wrap:wrap; gap:14px; }

/* guide CTA text wrapper */
.mb-guide-cta__text h3 { color:#fff; margin:0 0 6px; }
.mb-guide-cta__text p { color:#fff; opacity:.95; margin:0; }

/* =====================================================================
   /dev/resources/  —  resource hub cards
   ===================================================================== */
.res-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid rgba(18,26,43,0.08); border-radius: 16px;
    padding: 32px 30px; text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.res-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(18,26,43,0.10); border-color: rgba(240,90,36,0.35); }
.res-card__icon {
    width: 64px; height: 64px; border-radius: 14px; background: rgba(240,90,36,0.10);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.res-card__icon i { font-size: 26px; color: #F05A24; }
.res-card__title { color: #121A2B; font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.res-card__desc { color: #5b6470; font-size: 15px; line-height: 1.6; margin: 0 0 18px; flex: 1 1 auto; }
.res-card__more { color: #F05A24; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.res-card__more i { transition: transform .3s ease; }
.res-card:hover .res-card__more i { transform: translateX(4px); }

/* resources page: intro/CTA photos + button row */
.res-intro-thumb img,
.res-cta-thumb img { width: 100%; height: auto; border-radius: 16px; display: block; }
.res-cta-thumb img { box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.res-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* service sidebar: per-service "Related resources" navy box */
.svc-resources { background: #121A2B; border-radius: 15px; padding: 34px 30px; }
.svc-resources .wized-header .title { color: #fff; margin: 0 0 12px; }
.svc-res-list { list-style: none; padding: 0; margin: 0; }
.svc-res-list li { margin: 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
.svc-res-list li:last-child { border-bottom: none; }
.svc-res-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; color: #fff; text-decoration: none; font-weight: 600; transition: color .2s ease; }
.svc-res-list a:hover { color: #F05A24; }
.svc-res-list a i { color: #F05A24; font-size: 13px; transition: transform .2s ease; }
.svc-res-list a:hover i { transform: translateX(4px); }

/* investment-type pages: imagery + key facts */
.itype-hero img { width: 100%; height: auto; border-radius: 16px; display: block; }
.itype-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.itype-secondary img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; aspect-ratio: 4 / 3; }
@media (max-width: 575px) { .itype-secondary { grid-template-columns: 1fr; } }

/* key facts: a clean 2-column card grid, label ABOVE value */
.itype-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(18,26,43,0.10); border: 1px solid rgba(18,26,43,0.10); border-radius: 14px; overflow: hidden; }
.itype-facts .fact { background: #fff; padding: 20px 22px; }
.itype-facts .fact span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8a9098; margin: 0 0 6px; font-weight: 600; }
.itype-facts .fact b { display: block; font-size: 16px; color: #121A2B; font-weight: 700; line-height: 1.4; }
@media (max-width: 480px) { .itype-facts { grid-template-columns: 1fr; } }

/* investment-type sidebar: highlight the current type */
.single-categories li a.itype-cur { color: #F05A24; font-weight: 700; }
.itype-quote { border-left: 4px solid #F05A24; padding: 6px 0 6px 24px; margin: 30px 0; font-size: 20px; font-weight: 600; color: #121A2B; line-height: 1.5; }
.itype-note { font-size: 13px; opacity: .7; margin-top: 24px; padding: 12px 16px; background: #f7f8fa; border-radius: 10px; border: 1px solid rgba(18,26,43,0.08); }

/* breadcrumb: truly vertical-centre the title (h1's bottom margin was pushing
   it ~20px above centre inside the flex-centred breadcrumb band) */
.rts-breadcrumb-area .title-area-left .title { margin-bottom: 0; }

/* resources sidebar box heading: the .blog-list-style sidebar forces widget
   headings to the brand navy, which is invisible on the navy resources box.
   Keep this one white. */
.svc-resources .wized-header .title { color: #fff !important; }

/* Top-bar nav (About Us / Contact): underline-on-hover in FSM orange
   (the theme's underline is white). The bar slides in from left on hover. */
.header-top-area-wrapper .header-top-one-wrapper .right .top-nav li a::after { background: #F05A24; }
.header-top-area-wrapper .header-top-one-wrapper .right .top-nav li a:hover::after { width: 100%; }
.header-top-area-wrapper .header-top-one-wrapper .right .top-nav li a:hover { color: #F05A24; }

/* Tall breadcrumbs match the reviews page (title centred over the watermark).
   Reviews is 477px and its next section overlaps the bottom 130px via
   mt-dec-section-inner, so the title reads within ~477-130 = 347px of visible band.
   - Overlapped pages (reviews, our-services, contact, legal, privacy, calculators,
     guide/thank-you): keep the 477px band + padding-bottom 130 so the title lifts
     over the watermark; the next section covers the empty bottom.
   - Non-overlapped pages (resources, investment types, sm1/2, news, about-us):
     nothing covers the bottom, so shrink the band to the same 347px visible height
     and let the title centre naturally — identical title position to reviews, with
     no dead space below it.
   Short (.small-h) breadcrumbs are excluded from both. */
.rts-breadcrumb-area:has(+ .mt-dec-section-inner) { padding-bottom: 130px; }
/* Exclude ALL overlap patterns, not just mt-dec-section-inner: pages like
   About Us (.about-invena-large-image, margin-top:-120px) and the News list
   (.mt-dec-blog-list, margin-top:-177px) pull a large image UP into the band,
   so they must keep the full theme height or the image rides over the title. */
.rts-breadcrumb-area:not(.small-h):not(:has(+ [class*="mt-dec"])):not(:has(+ .about-invena-large-image)) { height: 347px; }
/* ...and pull the following section up tight against the band. Its own top padding
   (e.g. rts-section-gap = 120px) otherwise stacks on the band's below-title space and
   doubles the gap. Reviews' next section has no top padding and overlaps, so its
   title-to-content gap is ~130px; zeroing the top padding here matches that. */
.rts-breadcrumb-area:not(.small-h):not(:has(+ [class*="mt-dec"])):not(:has(+ .about-invena-large-image)) + * { padding-top: 0; }

/* Homepage services slider → CTA band: the theme's service-bg wrapper adds 50px of
   bottom padding (on top of the swiper's own 90px that holds the dots), leaving a big
   gap before the CTA. Zero the wrapper's bottom padding so the slider sits close. */
.rts-service-area .service-bg-style-one-wrapper { padding-bottom: 0; }

/* Our Services (and any .rts-service-main-wrapper-10 grid): reverse the
   image/text order of flagged cells on desktop, for an alternating layout. */
@media (min-width: 992px) {
    .rts-service-main-wrapper-10 .signle-service-style-10.svc-row-reverse { flex-direction: row-reverse; }
}

/* get-started quiz nav: keep the "answers stay private" label on one line and
   let the Back button take the remaining width instead of squeezing the label. */
.gs-quiz__nav .gs-quiz__secure { white-space: nowrap; flex-shrink: 0; }
.gs-quiz__nav #gsBack { width: auto; flex-grow: 1; text-align: left; }

/* Resources page: wide feature-image bands that break up the icon-card
   sections and add real photography for balance. */
.res-feature-band { border-radius: 20px; overflow: hidden; line-height: 0; }
.res-feature-band img { width: 100%; height: auto; display: block; }

/* Testimonials slider: heading is now centred (col-12 rule), so its prev/next
   controls move to a centred row BELOW the slider (mirrors the Services slider
   pattern). The theme styled these only inside .title-area-between-wrapper, so
   restyle them here as a static, centred group. */
.pagination-wrapper.pagination-below { display: flex; align-items: center; justify-content: center; gap: 15px; position: relative; }
.pagination-wrapper.pagination-below .swiper-button-prev,
.pagination-wrapper.pagination-below .swiper-button-next {
    position: static; margin: 0; top: auto; left: auto; right: auto;
    width: 44px; height: 40px; background: #F2F2F2; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; transition: all .25s ease;
}
.pagination-wrapper.pagination-below .swiper-button-prev:hover,
.pagination-wrapper.pagination-below .swiper-button-next:hover { background: #F05A24; }
.pagination-wrapper.pagination-below .swiper-button-prev:hover i,
.pagination-wrapper.pagination-below .swiper-button-next:hover i { color: #fff; }
.pagination-wrapper.pagination-below .swiper-button-prev i,
.pagination-wrapper.pagination-below .swiper-button-next i { color: #1C2539; }
.pagination-wrapper.pagination-below .swiper-button-prev::after,
.pagination-wrapper.pagination-below .swiper-button-next::after { display: none; }
.pagination-wrapper.pagination-below .swiper-pagination-fraction {
    position: static; width: auto; max-width: max-content; font-weight: 700; color: #5D666F; margin: 0 6px;
}

/* --------------------------------------------------------------------
   Footer link hover — orange, matching the top-header nav treatment.
   Covers the Quick Links / Resources columns and the arrow icon, plus
   the copyright-line Privacy / Legal links. Theme default hovered to a
   muted colour that read as "dead" on the dark footer.
   -------------------------------------------------------------------- */
.quick-link-inner .links li a,
.quick-link-inner .links li a i,
.rts-copyright-area a,
.copyright-8-wrapper ul li a { transition: color .25s ease; }
.quick-link-inner .links li a:hover,
.quick-link-inner .links li a:hover i,
.rts-copyright-area a:hover,
.copyright-8-wrapper ul li a:hover { color: #F05A24; }

/* --------------------------------------------------------------------
   Partner firms switcher (About page)  —  _partner-firms.asp
   Tabbed partner block: logo-pill tabs, per-firm head (logo + blurb +
   licence) and a Meet-the-Team-style people slider per tab. People cards
   reuse .rts-team-area styling (the section carries that class).
   -------------------------------------------------------------------- */
.fsm-partner-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
    margin-top: 6px;
}
.fsm-partner-tab {
    background: #fff; border: 2px solid #E2E5EA; border-radius: 14px;
    padding: 16px 26px; cursor: pointer; transition: all .25s ease;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 300px; max-width: 100%; min-height: 60px;
}
.fsm-tab-label { font-size: 15px; font-weight: 600; letter-spacing: .2px; color: #1C2539; transition: color .25s ease; text-align: center; }
.fsm-partner-tab:hover { border-color: #F05A24; }
.fsm-partner-tab:hover .fsm-tab-label { color: #F05A24; }
.fsm-partner-tab.is-active {
    border-color: #F05A24; box-shadow: 0 6px 18px rgba(240,90,36,.15);
}
.fsm-partner-tab.is-active .fsm-tab-label { color: #F05A24; }

/* panels: only the active one shows */
.fsm-partner-panel { display: none; }
.fsm-partner-panel.is-active { display: block; }

/* firm head — logo + blurb + licence, one card (finance) or two (combined) */
.fsm-partner-firmhead {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
    margin-top: 34px;
}
.fsm-partner-firmhead .fsm-firm {
    flex: 1 1 380px; max-width: 560px;
    background: #F7F8FA; border-radius: 16px; padding: 30px 32px;
    text-align: center;
}
.fsm-partner-firmhead:not(.two) .fsm-firm { max-width: 780px; }
.fsm-firm-logo { margin-bottom: 16px; }
.fsm-firm-logo img { height: 78px; width: auto; display: inline-block; }
.fsm-firm-name { font-size: 20px; color: #1C2539; margin: 0 0 8px; font-weight: 700; }
.fsm-firm-copy p { font-size: 14px; color: #5D666F; line-height: 1.65; margin: 0 0 14px; }
.fsm-firm-licence {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px;
    color: #1C2539; background: #fff; border: 1px solid #E5E7EB;
    border-radius: 20px; padding: 6px 15px;
}

/* people slider: hide default arrows (dots + drag are enough) */
.fsm-partner-slider .swiper-button-prev,
.fsm-partner-slider .swiper-button-next { display: none; }
.fsm-partner-firms .team-single-one-start { text-align: center; }

/* --------------------------------------------------------------------
   Header: hamburger is mobile-only; keep Book Appointment in the header
   on phones (2026-07-25)
   - Desktop (>=1200px) shows the full nav, so the hamburger is redundant
     — hide it there and only show it once the mobile menu takes over.
   - The theme hid the Book Appointment button below 576px; keep it visible
     so on mobile the header reads: logo | Book Appointment | hamburger
     (the button already precedes #menu-btn in .button-area).
   -------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .header-one #menu-btn { display: none; }
}
@media (max-width: 575px) {
    .header-main-one-wrapper .button-area .rts-btn.btn-primary { display: inline-flex !important; }
    /* tighten so the button + hamburger sit comfortably on small screens */
    .header-main-one-wrapper .button-area .rts-btn.btn-primary.header-one-btn { padding: 12px 16px; }
}

/* --------------------------------------------------------------------
   Homepage hero: reframe for small screens (2026-07-25)
   The wide 3945x1080 hero photos have their subjects on the right. On a
   tall, narrow phone/tablet viewport `cover` shows only a central slice,
   slicing the people. Shift the focal point right (68%) below 992px so the
   family / couple stay fully in frame. Desktop keeps centre (people already
   visible across the wider crop).
   -------------------------------------------------------------------- */
@media (max-width: 991px) {
    .rts-banner-area-two,
    .rts-banner-area-two.two { background-position: 68% center; }
}

/* =====================================================================
   /dev/rentvesting/  —  rentvesting campaign landing page
   Reuses gs-hero, mb-dark, mb-benefit, mb-calc__* (workings comparison),
   gs-quiz (Do I Qualify). These rv-* classes cover the page-specific bits:
   hero stat strip, per-row win tick, two-icon explainer, orange CTA band,
   break-even grid, and the CSS-only FAQ accordion.
   ===================================================================== */
.rv-hstats { display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 0; }
.rv-hstat { flex:1 1 150px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.16);
    border-radius:14px; padding:16px 20px; backdrop-filter:blur(4px); }
.rv-hstat .lbl { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,0.7); margin-bottom:4px; }
.rv-hstat .big { display:block; font-size:30px; font-weight:800; line-height:1; color:#fff; }
.rv-hstat .big span { font-size:16px; font-weight:600; opacity:.8; }
.rv-hband { display:inline-flex; align-items:center; gap:9px; margin-top:20px; background:#1f9d55; color:#fff;
    font-weight:700; font-size:15px; padding:11px 20px; border-radius:30px; }
.rv-hband i { font-size:15px; }

/* two-icon "what rentvesting is" explainer */
.rv-explain { text-align:center; padding:20px 24px; }
.rv-explain .rv-ico { width:78px; height:78px; border-radius:50%; background:rgba(240,90,36,0.10);
    display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.rv-explain .rv-ico i { font-size:32px; color:#F05A24; }
.rv-explain h4 { text-transform:uppercase; letter-spacing:.5px; font-size:18px; margin:0 0 10px; }

/* workings: per-row winning value tick + panel titles */
.mb-calc__row b .rv-win { color:#1f9d55; margin-right:5px; }
.mb-calc__row .rv-tot { opacity:1; font-weight:700; color:#121A2B; }
.rv-panel-title { font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#5b6470; margin:0 0 14px; }
.rv-panel-title .n { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#121A2B; color:#fff; font-size:13px; margin-right:9px; }

/* break-even mini grid */
.rv-begrid { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.rv-be { flex:1 1 130px; background:#f7f8fa; border:1px solid rgba(18,26,43,0.08); border-radius:12px; padding:14px 16px; text-align:center; }
.rv-be .r { font-size:14px; color:#5b6470; }
.rv-be .s { font-size:19px; font-weight:800; color:#1f9d55; display:block; margin-top:3px; }

/* orange CTA band */
.rv-cta { background:linear-gradient(90deg,#F05A24,#d94e1c); color:#fff; border-radius:18px; padding:34px 40px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.rv-cta h4 { color:#fff; margin:0; font-size:24px; }
.rv-cta .rts-btn { background:#fff; color:#121A2B; }
.rv-cta .rts-btn:hover { background:#121A2B; color:#fff; }

/* CSS-only FAQ accordion */
.rv-faq { max-width:820px; margin:0 auto; }
.rv-faq details { background:#fff; border:1px solid rgba(18,26,43,0.10); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.rv-faq summary { list-style:none; cursor:pointer; padding:20px 24px; font-size:18px; font-weight:700; color:#121A2B;
    display:flex; align-items:center; justify-content:space-between; gap:16px; }
.rv-faq summary::-webkit-details-marker { display:none; }
.rv-faq summary::after { content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#F05A24; font-size:14px; transition:transform .25s ease; }
.rv-faq details[open] summary::after { transform:rotate(180deg); }
.rv-faq details p { margin:0; padding:0 24px 22px; color:#3a4250; font-size:16px; line-height:1.6; }

/* ------------------------------------------------------------------
   Partner logo carousel (Adam, 17-Aug; sizing reworked 27-Aug and
   again 28-Aug).

   ⚠ THIS COMMENT HAS NOW BEEN WRONG TWICE, both times for the same
     reason: it asserted the source images' dimensions, and then the
     source images changed under it. On 17-Aug it claimed all thirteen
     were 170x130; by 27-Aug three lenders were 500px wide at three
     different aspect ratios. Neither statement is true today.

   WHAT IS TRUE ON 28-AUG: Adam re-cut all ten logos to a UNIFORM
   500x161 (aspect 3.106). That was verified by reading each JPEG's
   own header, not by trusting the filename -- which is the only
   reason this comment is worth anything.

   Because one aspect ratio now covers every source, the box is shaped
   to THAT ratio with aspect-ratio, and object-fit:contain has nothing
   left to letterbox: each logo fills its box exactly. That is also why
   they can be bigger (155px, up from 130px) without the row growing
   taller -- the old box was 130x64 and spent 22px of every tile on
   empty space.

   ⚠ IF A FUTURE LOGO ARRIVES AT A DIFFERENT ASPECT RATIO this stops
     being lossless -- contain will letterbox it and it will read as
     visually smaller than its neighbours. Re-cut it to 500x161 rather
     than changing the ratio here, or the whole row goes ragged again.
     object-fit:contain still never CROPS, so no mark is ever clipped.
   ------------------------------------------------------------------ */
.fsm-partner-swiper { margin-top:40px; }
.fsm-partner-swiper .swiper-slide { display:flex; align-items:center; justify-content:center; height:auto; }
.fsm-partner-swiper .swiper-slide a { display:block; line-height:0; }
.fsm-partner-swiper .swiper-slide img {
    width:155px;
    aspect-ratio:500 / 161;   /* every source is 500x161 -> nothing to letterbox */
    height:auto;
    max-width:100%;
    object-fit:contain;       /* kept: guards the day a stray ratio arrives */
    object-position:center;
}
@media (max-width: 575px) {
    .fsm-partner-swiper .swiper-slide img { width:125px; }
}

/* ---------------------------------------------------------------------
   28) Front-end batch, 27-Aug (Adam)
--------------------------------------------------------------------- */

/* --- Homepage slider: bigger pre-title, in brand orange --------------
   ⚠ THIS HAS TO OUT-SPECIFY A UNIVERSAL SELECTOR, and that is the whole
     reason it lives here rather than as a style attribute on the page.
     style.css:8001 sets

         .banner-inner-two-content * { color: #fff; }

     which paints EVERY descendant of the slide white -- HANDOVER §7's
     global-control / heading-colour trap, one more time. A rule written
     as `.pre-title { color:#F05A24 }` (0,1,0) loses the tie to that one
     (0,1,0, declared later). `.banner-inner-two-content .pre-title span`
     is 0,2,0 and wins on specificity, so no !important is needed --
     which matters, because the next person to need an exception here
     would have had nothing left to out-rank.
     The colour is verified from the rendered page, not from this file.
   The <span> carries the first phrase; the tail after it stays white so
   the two halves still read as one line.

   ⚠ 28-Aug, Adam: "the orange is bigger than the white". It was -- the
     27-Aug rules set the wrapper to 20px and the span to 24px, so ONE
     line of copy was rendering at TWO sizes and the baseline stepped
     mid-sentence. The font-size has been REMOVED from the span rather
     than matched to the wrapper: the span's only job here is colour,
     and the moment it also owns a size, the two can drift apart again
     the next time either is touched. One declaration, one size, and
     the span inherits it.

   04-Sep, Adam: "make pre-title all orange and bold, not just the
     first word(s)". The wrapper now carries the colour and weight for
     the WHOLE line; the span rule is kept (not removed) because the
     universal `.banner-inner-two-content *` rule would otherwise paint
     the span white again -- it targets the span directly, so the span
     cannot simply inherit from the wrapper. letter-spacing unified to
     the 1px style.css already gives the span.                          */
.banner-inner-two-content .pre-title {
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: 1px;
    color: #F05A24;
    font-weight: 700;
}
.banner-inner-two-content .pre-title span {
    color: #F05A24;   /* colour ONLY -- do not give this a font-size */
}
@media (max-width: 767px) {
    .banner-inner-two-content .pre-title { font-size: 19px; }
}

/* --- About Us "Why Freedom Strategy": pull the inset photo left ------
   Adam, 27-Aug: "the second image is off too far to the right".
   ⚠ SCOPED TO #why ON PURPOSE. Section 9 above sets right:90px for
     .thumbnail-business-area-right-two .small-thumbnail, and that class
     pair is SHARED with the homepage's Why-Talk-To-Us photo, which Adam
     did not ask to move. An unscoped change here would have silently
     moved a second page. #why exists only on /dev/about-us/.          */
@media (min-width: 768px) {
    #why .thumbnail-business-area-right-two .small-thumbnail { right: 180px; }
}


/* ---------------------------------------------------------------------
   29) Property Insights carousel: equal-height cards (Adam, 28-Aug)
   ---------------------------------------------------------------------
   The card runs title-then-image, and the headlines run to TWO or THREE
   lines depending on the article. Without this the divider rule and the
   image start at a different height in every card and the row reads as
   broken -- which is exactly what Adam reported.

   ⚠ FIXED WITH flex + margin-top:auto, NOT a min-height on the title,
     and the distinction matters. A min-height is a magic number that is
     right at one breakpoint and wrong at the next: style.css steps
     .single-blog-area-one .title from 30px to 24px (991) to 20px (767),
     so the number of lines a given headline occupies changes underneath
     any fixed value you pick. margin-top:auto pins the image block to
     the bottom of whatever the tallest card in the row actually is, at
     every width, for any headline length, including ones not written
     yet. Same technique as the SMSF stat tiles.

   Scoped to .mySwiper-blog-one so it cannot reach any other use of
   .single-blog-area-one.
   ------------------------------------------------------------------ */
.mySwiper-blog-one .swiper-slide { height:auto; }
.mySwiper-blog-one .single-blog-area-one { display:flex; flex-direction:column; height:100%; }
.mySwiper-blog-one .single-blog-area-one .bottom-details { margin-top:auto; }

/* ---------------------------------------------------------------------
   FSM ENTRY PANELS  -  /dev/default.asp, 09-Sep.
   Replaced the four-slide banner carousel. Six equal doors into the site.

   ⚠ NO FIXED HEIGHT ANYWHERE IN HERE, DELIBERATELY. The block this
   replaced was .rts-banner-area-two, which the theme pins at a FIXED
   850px (580px under 576px) - and because that carousel ran effect:"fade",
   every slide was absolutely positioned inside one container that took
   the tallest slide's height. Between them those two facts sheared 554px
   off the story slide on a phone and 276px on a tablet (session 36 §7.2).
   A grid of auto-height cards cannot do that: longer copy makes a taller
   card, which makes a taller row, and nothing is ever clipped.

   ⚠ NO FONT AWESOME. ~2,546 of the 4,571 FA classes in this build render
   as empty space and fail silently (handover §7). The arrow is two CSS
   borders rotated 45deg, so there is no glyph to audit.

   ⚠ THE HEADING-COLOUR TRAP: style.css sets h1..h6 { color } DIRECTLY,
   and a direct rule beats inheritance - so the h1 below states its own
   colour rather than inheriting white from the band.

   ⚠ The .rts-banner-area-two and .fsm-story-* rules earlier in this file
   are now dormant, NOT dead - they are what the carousel needs if Adam
   reverts (dev/_notes/2026-09-09-homepage-banner-slider/RESTORE.txt).
   Do not tidy them away.
   ------------------------------------------------------------------ */
.fsm-panels { background: #121A2B; padding: 84px 0 92px; }
.fsm-panels__head { max-width: 860px; margin: 0 auto 46px; text-align: center; }
.fsm-panels__head .pre { display: block; color: #F05A24; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.fsm-panels__head h1 { color: #fff; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1; margin: 0 0 18px; }
.fsm-panels__head p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; margin: 0; }

.fsm-panels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fsm-panel { display: flex; flex-direction: column; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 28px 28px 26px; text-decoration: none; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.fsm-panel:hover { background: rgba(255,255,255,.09); border-color: rgba(240,90,36,.55); transform: translateY(-4px); }
.fsm-panel--feature { border-color: rgba(240,90,36,.45); background: rgba(240,90,36,.09); }
.fsm-panel--feature:hover { background: rgba(240,90,36,.15); }
.fsm-panel__eyebrow { display: block; color: #F05A24; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 11.5px; margin-bottom: 13px; }
/* margin-bottom was 11px. With __disc removed from all six panels (v2.27)
   this is the ONLY gap between the heading and the CTA, and at 1440 every
   panel sat at the bare 11px - min and max both 11, so desktop was uniformly
   tight while 576-992 ran to 35-37px. Adam ruled 18px, 10-Sep.
   ⚠ CHANGED GLOBALLY, NOT BEHIND A DESKTOP MEDIA QUERY, AND THAT IS
     DELIBERATE. .fsm-panel__cta carries margin-top:auto inside a grid of
     equal-height cards, so at the narrower widths the 7px comes OUT of that
     auto slack and the card's total height does not move. The change raises
     the FLOOR everywhere and moves nothing that already had room. */
.fsm-panel__title { display: block; color: #fff; font-size: 21px; line-height: 1.28; font-weight: 700; margin-bottom: 18px; }
.fsm-panel__disc { display: block; color: rgba(255,255,255,.66); font-size: 14.5px; line-height: 1.65; margin-bottom: 22px; }
.fsm-panel__cta { display: block; margin-top: auto; color: #fff; font-size: 14.5px; font-weight: 700; }
.fsm-panel__cta::after { content: ""; display: inline-block; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 10px; position: relative; top: -1px; transition: margin-left .25s ease; }
.fsm-panel:hover .fsm-panel__cta { color: #F05A24; }
.fsm-panel:hover .fsm-panel__cta::after { margin-left: 16px; }

@media (max-width: 1199px) {
    .fsm-panel__title { font-size: 19px; }
    .fsm-panel { padding: 24px 22px 22px; }
}
@media (max-width: 991px) {
    .fsm-panels { padding: 62px 0 68px; }
    .fsm-panels__grid { grid-template-columns: repeat(2, 1fr); }
    .fsm-panels__head { margin-bottom: 36px; }
}
@media (max-width: 575px) {
    .fsm-panels { padding: 46px 0 52px; }
    .fsm-panels__grid { grid-template-columns: 1fr; gap: 16px; }
    .fsm-panels__head p { font-size: 15.5px; }
    .fsm-panel__disc { margin-bottom: 18px; }
}

/* ---------------------------------------------------------------------
   FSM ENTRY PANELS — photographic background (10-Sep, Adam).
   The flat navy band read as dull with nothing but text on it. A photo
   underneath, heavily veiled, gives it depth without competing with the
   panel copy.

   ⚠ THE OVERLAY DOES THE WORK, NOT THE PHOTO. H1 is the old slide-2
   panoramic (3945x1080) and is already cut for a wide band. The veil is
   deliberately heavy and UNEVEN — near-opaque behind the headline at the
   top, lifting through the middle where the cards sit, closing again at
   the foot. A flat 0.5 veil looked better in isolation and made the panel
   text unreadable, which is the only test that matters.

   ⚠ THE MIDDLE STOP IS 0.60 AT 40% — ADAM'S OWN VALUES, tried live in
   DevTools on 10-Sep and handed over as a screenshot. It was 0.80 at 50%.
   Two changes, not one: lighter AND higher up the band.
   WHY IT IS SAFE TO GO THIS LIGHT: nothing at 30-60% of the band height
   sits on the veil alone. The h1 and the intro line are at 0-22%, where
   the veil is still 0.95-0.88; the revert link is at the foot, at 0.95.
   Everything in the lightened zone is CARD text, and every card carries
   its own rgba(12,18,32,0.62) ground plus a blur. The photo shows through
   the 22px gutters between cards, which is the whole point.
   ⚠ If a future change puts bare text on the band between the head and
   the foot, this stop has to come back down.

   ⚠ THE CARDS HAD TO CHANGE WITH IT. They were rgba(255,255,255,.05) —
   translucent WHITE, which over a photograph goes muddy and grey. They
   are now dark glass with a blur, so the photo reads between and around
   them while every card keeps a solid dark ground under its text.

   ⚠ NO PHOTO BELOW 576px. The band is ~2029px tall and 375 wide there;
   a 3.65:1 panoramic crops to a meaningless sliver of pixels and costs a
   ~1MB download on the connection least able to afford it. Flat navy
   instead — which is what shipped on 09-Sep and looked fine.
   ------------------------------------------------------------------ */
.fsm-panels {
    background-color: #121A2B;
    background-image:
        linear-gradient(180deg,
            rgba(18,26,43,0.95) 0%,
            rgba(18,26,43,0.88) 22%,
            rgba(18,26,43,0.60) 40%,
            rgba(18,26,43,0.88) 78%,
            rgba(18,26,43,0.95) 100%),
        url("/images/FSM-MainImages-3945x1080-H1.jpg");
    background-size: cover;
    background-position: center center;
}
.fsm-panel {
    background: rgba(12,18,32,0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.fsm-panel:hover { background: rgba(12,18,32,0.78); }
/* the feature panel keeps its orange cast, layered OVER the dark glass so
   the card still has a solid ground - a single rgba() would replace it. */
.fsm-panel--feature {
    background: linear-gradient(rgba(240,90,36,0.20), rgba(240,90,36,0.20)), rgba(12,18,32,0.62);
}
.fsm-panel--feature:hover {
    background: linear-gradient(rgba(240,90,36,0.30), rgba(240,90,36,0.30)), rgba(12,18,32,0.72);
}
@media (max-width: 575px) {
    .fsm-panels { background-image: none; }
}

/* The subtle way back to the old carousel homepage. Bottom-left of the band,
   under the grid. ⚠ THIS IS A TEMPORARY A/B AID — it and /dev/home-slider/
   both come out before go-live. */
.fsm-panels__revert { margin-top: 30px; }
.fsm-panels__revert a {
    color: rgba(255,255,255,.38);
    font-size: 12.5px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.18);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}
.fsm-panels__revert a:hover { color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------------
   Services carousel — close the white gap under it (10-Sep, Adam).
   MEASURED, not guessed: 110px of white sat below the cards — 62px above
   the pagination dots and 28px below them. The theme gives
   .mySwiper-service-1 a 90px bottom padding to clear its absolutely
   positioned dots (which are only 20px tall and sit at bottom:8px), so
   ~62px of it was doing nothing. Scoped to THIS swiper: the same 90px
   pattern is used by mySwiperh1_team (80px) and mySwiper-blog-one (70px),
   and neither was reported as a problem.
   Paired with pb--20 -> pb--10 on .rts-service-area in /dev/default.asp.
   ------------------------------------------------------------------ */
/* ⚠ THE SELECTOR MUST MATCH THE THEME'S, NOT JUST THE ELEMENT. style.css
   sets this with `.service-style-swiper-wrapper-two .mySwiper-service-1`
   — specificity (0,2,0). A bare `.mySwiper-service-1` is (0,1,0) and LOST,
   even though fsm-custom.css loads afterwards; measured, the padding stayed
   at 90px and the gap never moved. Same selector, later file, no !important. */
.service-style-swiper-wrapper-two .mySwiper-service-1 { padding-bottom: 46px; }

/* ---------------------------------------------------------------------
   Back-to-top vs the HubSpot chat launcher (10-Sep, Adam).
   MEASURED: .progress-wrap is 46x46 at right:45 bottom:30. The HubSpot
   launcher is 100x96 at right:15 bottom:0. Overlap was 46x46 — the
   back-to-top was COMPLETELY covered on every v2 page.

   ⚠ DO NOT TRY TO WIN ON Z-INDEX. HubSpot ships z-index 2147483647, the
   maximum 32-bit signed integer. There is no number above it. The button
   moves instead.

   Lifted to sit ABOVE the launcher rather than beside it, so it behaves
   the same way on a phone, where there is no room alongside.
   ------------------------------------------------------------------ */
.progress-wrap { bottom: 120px !important; }
@media (max-width: 575px) {
    .progress-wrap { bottom: 104px !important; }
}

/* --- ...and then the reCAPTCHA badge turned up in the same corner ---
   Adam, 10-Sep, session 38. Same button, second collision, different
   widget. MEASURED on /dev/contact-us/book-appointment/ at 2560x1271,
   distances given from the bottom of the viewport:

       HubSpot launcher      0 -> 96     (100x96, right:15)
       reCAPTCHA badge      84 -> 144    (256x60 at right:-186, so only
                                          the ~70px logo tab shows until
                                          it slides out on hover)
       back-to-top         120 -> 166    (46x46, right:45)

   The badge overlapped the button by 40x24 and drew OVER it - confirmed
   in a screenshot, not just in numbers. On mobile it is worse, not
   better: the badge is a FIXED-SIZE widget and stays at bottom:84
   whatever the viewport, so the 104px mobile position above put the
   button almost entirely behind it.

   ⚠ 160px CLEARS THE BADGE'S TOP EDGE (144) BY 16px, AT EVERY WIDTH.
     No mobile variant is needed and none is written: because the badge
     does not move with the viewport, one value is correct everywhere,
     and the rule below out-specifies the 575px rule above so the 104px
     no longer applies on a page that has a badge.

   ⚠ SCOPED WITH :has() BECAUSE THE BADGE IS NOT ON EVERY PAGE.
     /dev/about-us/ and /dev/our-services/ do not load reCAPTCHA at all
     (measured: no recaptcha/api.js in either), and on those the button
     should stay at 120 rather than float pointlessly high. :has() is
     live - the badge is injected by Google's script after load, and the
     selector re-evaluates when it appears. The 200ms transition already
     on .progress-wrap makes that a glide rather than a jump.
     ⚠ Where :has() is unsupported the rule simply never matches and the
       button stays at 120/104 - i.e. it degrades to exactly today's
       behaviour, which is why this is safe without a fallback.

   ⚠ THE BADGE WAS NOT HIDDEN, AND THAT WAS A DELIBERATE CHOICE.
     Google allows hiding it ONLY if the reCAPTCHA branding is shown
     visibly in the user flow instead ("This site is protected by
     reCAPTCHA and the Google Privacy Policy and Terms of Service
     apply", with both links). That is a change to every lead form and a
     compliance decision, not a CSS tweak. Adam ruled 10-Sep: move the
     button, leave the badge alone.

   ⚠ STILL OPEN, AND NOT WHAT ADAM ASKED ABOUT: the badge also overlaps
     the HubSpot launcher by 70x12. Both are third-party widgets that
     place themselves; neither can be moved from here without their own
     API. Left as measured.                                            */
body:has(.grecaptcha-badge) .progress-wrap { bottom: 160px !important; }

/* ---------------------------------------------------------------------
   "Which of these sounds like you?" — the question pills above the entry
   panels (10-Sep, Adam). Clicking one lights the panels that answer it.

   ⚠⚠ THE GLOBAL CONTROL TRAP, HANDOVER §7. style.css (~L983) sets
   `input, button, select, textarea { background:transparent; width:100%;
   border:...; color:... }`. Consequences here, both of which WOULD have
   bitten: (a) every one of these <button>s stretches to full width and the
   row becomes five stacked bars unless the rule sets its OWN width;
   (b) custom styling must restate background, border AND color, because a
   partial override leaves the themed values showing through.
   All four are set below. Do not trim them as "redundant".
   ------------------------------------------------------------------ */
.fsm-asks { max-width: 1000px; margin: 0 auto 40px; text-align: center; }
.fsm-asks__lead { color: rgba(255,255,255,.50); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; margin: 0 0 16px; }
.fsm-asks__row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fsm-ask {
    width: auto;                       /* ⚠ overrides the global width:100% */
    background: rgba(255,255,255,.07); /* ⚠ overrides the global transparent */
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.88);
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.fsm-ask:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; }
.fsm-ask[aria-pressed="true"] { background: #F05A24; border-color: #F05A24; color: #fff; }

/* the lit / dimmed states. Only applied while a question is active, so the
   default view is untouched and nothing is hidden with JS off. */
.fsm-panels__grid .fsm-panel { transition: background .25s ease, border-color .25s ease, transform .25s ease, opacity .25s ease, box-shadow .25s ease; }
.fsm-panels__grid.is-filtered .fsm-panel { opacity: .38; }
.fsm-panels__grid.is-filtered .fsm-panel.is-lit {
    opacity: 1;
    border-color: rgba(240,90,36,.85);
    box-shadow: 0 0 0 1px rgba(240,90,36,.85), 0 18px 44px rgba(0,0,0,.38);
}
@media (max-width: 575px) {
    .fsm-asks { margin-bottom: 28px; }
    .fsm-asks__row { flex-direction: column; }
    .fsm-ask { width: 100%; font-size: 14px; padding: 12px 18px; }
}


/* ---------------------------------------------------------------------
   30) About Us "More About Us": heading to a full-width row, and the body
       copy un-capped (Adam, 10-Sep, session 38)
   ---------------------------------------------------------------------
   Two classes, both added on /dev/about-us/ only, both narrow on purpose.
   Everything here is measured on the live page at innerWidth 2560; the
   numbers are in that page's own changelog too.

   ⚠ 1. THE WATERMARK HAD TO BE RE-ANCHORED, NOT LEFT ALONE.
     .title-style-two .bg-content is the big faded outline word behind the
     heading: position:absolute, font-size:150px, left:-90px. That -90px is
     measured from whatever box the title sits in. While the heading lived
     in the RIGHT column it pulled the word left INTO the container and
     looked deliberate. Moved to a col-12, the same -90px lands OUTSIDE the
     container: the col-12 content edge is containerLeft + 15 + 7.5, so the
     watermark starts at containerLeft - 67.5. The container is centred, so
     that is only safe once the viewport is at least ~1470px wide. Between
     roughly 992 and 1470 it is clipped by the body's overflow-x:hidden -
     up to 67px, which eats most of the "A".
     left:0 puts the word's box on the heading's own left edge and it can
     never clip. THIS IS THE THEME'S OWN PATTERN: .title-style-two.center
     overrides left (and adds a transform) for exactly the same reason.
     ⚠ Do NOT "restore" -90px for consistency with the other title blocks.
       They are all inside half-width columns. This one is not.

   ⚠ 2. THE COPY WAS NEVER TOO LONG - IT WAS RUNNING AT HALF WIDTH.
     style.css:11031 caps .about-inner-content-two .about-between-wrapper
     p.disc at max-width:333px, and only lifts it BELOW 1600px:
         @media (min-width:1200px) and (max-width:1599px) { max-width:100% }
         @media (max-width:1199px)                        { max-width:100% }
     So the cap bites on wide screens ONLY - the copy is full width on a
     laptop and 333px on a desktop, which is the opposite of what anyone
     expects and is why it reads as "too long". Measured before: paragraphs
     333px inside a 645px column, text block 1141px tall against a 490px
     image. After: 625px and 604px.
     ⚠ THIRD PAGE, SAME THEME RULE. /dev/sm1/ and /dev/sm-strategy/ already
       override it above (search .sm1-strategy). Left as three scoped rules
       rather than one blanket .about-between-wrapper override because the
       theme's 333px is right for the layouts that DO put a check-list
       beside the copy. If a fourth page needs it, promote it then.

   ⚠ 3. THE 35px MARGIN IS AN ORPHAN AND HAD TO GO.
     .about-between-wrapper { margin-top: 35px } separated the copy from the
     heading that used to sit above it INSIDE this column. The heading has
     left. Worse, .about-inner-content-two has no padding-top and no border,
     so that margin COLLAPSES OUT of the column box and offsets the whole
     column inside an align-items-center row - it does not read as padding,
     it reads as the text sitting low. Measured against the image:
         with 35px    text overhangs -39px top / +75px bottom  (skewed)
         without      text overhangs -57px top / +57px bottom  (symmetric)

   ⚠ 4. A WIDER COLUMN SPLIT WAS MEASURED AND REJECTED - RECORDED SO IT IS
     NOT RE-PROPOSED. Widening the text column buys nothing here:
         6/6  paragraphs 625px  lines 3/3/5  block 604px
         5/7  paragraphs 735px  lines 3/3/5  block 604px   <- zero change
         4/8  paragraphs 845px  lines 3/3/4  block 578px   <- one line, and
              the image column drops to 440px, below the photo's own 490px
              max-width, so the picture starts shrinking.
     Adam ruled 6/6 on those numbers.

   Specificity: fsm-custom.css loads AFTER style.css (_head.asp:134 then
   :136), and each rule below also out-specifies its theme original by one
   class, so no !important is needed anywhere in this section.
   ------------------------------------------------------------------ */
.title-style-two.fsm-about-title--full .bg-content { left: 0; }
.about-inner-content-two.fsm-about--titlemoved .about-between-wrapper { margin-top: 0; }
.about-inner-content-two.fsm-about--titlemoved .about-between-wrapper p.disc { max-width: 100%; }