/* =========================================================
   THE GEMINI SOLUTION — tidy header / hero / breadcrumb controls
   (Home hero is .banner-4; generic subpage heroes use .banner/.banner-2/.banner-3)
   ========================================================= */

/* --------------------------------
   0) CONFIG — change values here
   -------------------------------- */
:root {
    
    /* A. Mobile logo size (header) */
    --logo-min: 180px;
    --logo-vw: 50vw; /* wider = bigger logo on phones */
    --logo-max: 260px;
    
    /* B. Subpage hero heights (not home .banner-4) */
    --sub-hero-h: 65vh; /* desktop/tablet */
    --sub-hero-h-mobile: 39vh; /* phones */
    
    /* C. Curved right image (bubble) — MOBILE ONLY
        (Decoupled knobs: size, overhang, and pan) */
    --bubble-w-mobile: 44vw; /* bubble WIDTH on phones */
    
    /* Desktop overhang for the bubble wrapper */
    --hero-image-overhang-desktop: 6vw; /* how far to bleed off right on desktop */
    
    /* D. GAP after hero → first content section */
    --content-gap-mobile: 0.3rem; /* phones (negative pulls section up) */
    --content-gap-desktop: -5rem; /* desktop/tablet (negative pulls section up) */

    /* F. Breadcrumb + title spacing */
    --crumb-size: .70rem;
    --crumb-gap-top: .10rem;
    --crumb-gap-bottom: .35rem;
    --hero-title-gap-bottom: .20rem; /* H1/H2 bottom margin in hero */
    
    /* G. Generic subpage hero: text padding on phones */
    --hero-text-pad-top-mobile: .20rem;
    
    /* Taller hero on phones (more vertical room) */
    --sub-hero-h-mobile: 34vh; /* was 39vh */
    
    /* Bigger bubble that tucks slightly off-screen to the right */
    --bubble-w-mobile: 60vw; /* was 44vw — try 56–64vw */
    --bubble-overhang-mobile: -2vw; /* negative = bleed off the right edge */
    
    /* Keep the hero title safely clear of the bubble */
    --hero-text-shift-mobile: 6.90rem; /* nudge title down if needed */
    --hero-text-shift-home-mobile: 4.50rem; /* nudge title down if needed */
   

}

/* -----------------------------------------------
   1) MOBILE LOGO (initial + sticky) — ≤ 991.98px
   ----------------------------------------------- */
@media (max-width: 991.98px) {
    .header .navbar-brand img,
    #site-header.header-appear .navbar-brand img,
    .header.header-appear .navbar-brand img,
    .header.is-sticky .navbar-brand img,
    .header.sticky .navbar-brand img {
        width: clamp(var(--logo-min), var(--logo-vw), var(--logo-max)) !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
    }

    #site-header.header-appear .navbar-brand,
    .header.header-appear .navbar-brand,
    .header.is-sticky .navbar-brand,
    .header.sticky .navbar-brand {
        transform: none !important;
        padding-block: .25rem !important;
    }

    .header .navbar {
        min-height: 72px;
    }
}

/* -------------------------------
   2) BREADCRUMBS — size/proximity
   ------------------------------- */
.page-breadcrumb {
    font-size: var(--crumb-size) !important;
    line-height: 1.1 !important;
    margin-top: var(--crumb-gap-top) !important;
    margin-bottom: var(--crumb-gap-bottom) !important;
    color: #666 !important;
}

    .page-breadcrumb a {
        font-size: var(--crumb-size) !important;
        color: #666 !important;
        text-decoration: none !important;
    }

        .page-breadcrumb a:hover {
            color: #b4ff00 !important;
        }

/* -------------------------------------------------------
   3) GENERIC SUBPAGE HERO (all banners except .banner-4)
   ------------------------------------------------------- */
html body .page-wrapper section[class*="banner"]:not(.banner-4) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: var(--sub-hero-h) !important;
    overflow: hidden !important;
    padding-block: clamp(.25rem, 1.5vh, 1rem) !important;
    margin-bottom: 0 !important;
}

    /* Right curved image wrapper (base) */
    html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important; /* adjusted per breakpoint below */
        height: 100% !important;
        width: auto !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important; /* behind text */
    }

        /* Image element inside the bubble */
        html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 img,
        html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 .banner-mask-img {
            display: block !important;
            height: 100% !important;
            width: auto !important;
            max-width: none !important; /* beat Bootstrap max-width:100% */
            object-fit: cover !important;
            object-position: right center !important; /* overridden on phones below */
        }

    /* Ensure hero content sits above image; kill extra padding */
    html body .page-wrapper section[class*="banner"]:not(.banner-4) .container {
        position: relative;
        z-index: 2;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

/* Desktop/tablet: bleed image off the right a touch */
@media (min-width: 992px) {
    html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 {
        right: calc(-1 * var(--hero-image-overhang-desktop)) !important;
    }
}

/* Phones: hero height + bubble sizing/offset + image panning */
@media (max-width: 991.98px) {
    html body .page-wrapper section[class*="banner"]:not(.banner-4) {
        min-height: var(--sub-hero-h-mobile) !important;
        padding-block: .75rem !important;
    }

        html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 {
            height: var(--sub-hero-h-mobile) !important;
            width: var(--bubble-w-mobile) !important; /* bubble SIZE */
            right: var(--bubble-overhang-mobile) !important; /* wrapper SHIFT */
            overflow: hidden !important; /* clip image */
        }

            html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 .banner-mask-img {
                object-position: var(--bubble-img-x-mobile) var(--bubble-img-y-mobile) !important; /* image PAN */
            }

        /* generic little top padding so text doesn't collide */
        html body .page-wrapper section[class*="banner"]:not(.banner-4) .container {
            padding-top: var(--hero-text-pad-top-mobile) !important;
        }
}

/* Title spacing inside the hero */
html body .page-wrapper section[class*="banner"]:not(.banner-4) h1,
html body .page-wrapper section[class*="banner"]:not(.banner-4) h2 {
    margin-bottom: var(--hero-title-gap-bottom) !important;
}

/* ----------------------------------------------
   4) GAP AFTER HERO → FIRST CONTENT SECTION
   ---------------------------------------------- */
/* Phones: single knob on wrapper */
@media (max-width: 991.98px) {
    .banner, .banner-2, .banner-3, .banner-4 {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

        .banner + .page-content,
        .banner-2 + .page-content,
        .banner-3 + .page-content,
        .banner-4 + .page-content {
            padding-top: 0 !important;
            margin-top: var(--content-gap-mobile) !important; /* KNOB (phones) */
        }

            .banner + .page-content > section:first-of-type,
            .banner-2 + .page-content > section:first-of-type,
            .banner-3 + .page-content > section:first-of-type,
            .banner-4 + .page-content > section:first-of-type {
                padding-top: 0 !important;
                margin-top: 0 !important;
            }

                .banner + .page-content > section:first-of-type > .container,
                .banner-2 + .page-content > section:first-of-type > .container,
                .banner-3 + .page-content > section:first-of-type > .container,
                .banner-4 + .page-content > section:first-of-type > .container {
                    padding-top: 0 !important;
                    margin-top: 0 !important;
                }
}

/* Desktop/tablet: single knob on wrapper */
@media (min-width: 992px) {
    .banner + .page-content,
    .banner-2 + .page-content,
    .banner-3 + .page-content,
    .banner-4 + .page-content {
        padding-top: 0 !important;
        margin-top: var(--content-gap-desktop) !important; /* KNOB (desktop) */
    }

        .banner + .page-content > section:first-of-type,
        .banner-2 + .page-content > section:first-of-type,
        .banner-3 + .page-content > section:first-of-type,
        .banner-4 + .page-content > section:first-of-type {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

            .banner + .page-content > section:first-of-type > .container,
            .banner-2 + .page-content > section:first-of-type > .container,
            .banner-3 + .page-content > section:first-of-type > .container,
            .banner-4 + .page-content > section:first-of-type > .container {
                padding-top: 0 !important;
                margin-top: 0 !important;
            }
}

/* --------------------------------------------------------
   6) CONTACT PAGE HERO (banner-2) — mobile refinements
   -------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* push header text down to avoid overlap with the curve */
    .page-wrapper section.banner.banner-2 .container,
    .page-wrapper section.banner.banner-2 .row.align-items-center,
    .page-wrapper section.banner.banner-2 .col-lg-5 {
        position: relative !important;
        z-index: 2 !important;
        padding-top: var(--hero-text-shift-mobile) !important; /* KNOB */
        margin-top: 0 !important;
    }

    /* keep the curve image flush right and behind text
     (uses the same mobile bubble knobs defined above) */
    .page-wrapper section.banner.banner-2 .banner-shape3 {
        position: absolute !important;
        top: 0 !important;
        right: var(--bubble-overhang-mobile) !important;
        height: var(--sub-hero-h-mobile) !important;
        width: var(--bubble-w-mobile) !important;
        z-index: 1 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

        .page-wrapper section.banner.banner-2 .banner-shape3 .banner-mask-img {
            width: auto !important;
            height: 100% !important;
            max-width: none !important;
            object-fit: cover !important;
            object-position: var(--bubble-img-x-mobile) var(--bubble-img-y-mobile) !important;
            display: block !important;
        }

    /* tighter title↔breadcrumb inside the hero */
    .page-wrapper section.banner.banner-2 h1 {
        margin-top: 0 !important;
        margin-bottom: .25rem !important;
        line-height: 1.05 !important;
    }

    .page-wrapper section.banner.banner-2 .page-breadcrumb {
        margin-top: .10rem !important;
        margin-bottom: 0 !important;
    }

    /* small, controllable gap after this hero (phones) */
    .page-wrapper section.banner.banner-2 + .page-content {
        padding-top: 0 !important;
        margin-top: var(--content-gap-mobile) !important;
    }
}


/* ===== MOBILE: make hero image bigger but keep it safe ===== */
@media (max-width: 991.98px) {

    /* Belt & braces: image behind text */
    .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 {
        z-index: 1 !important;
    }

    .page-wrapper section[class*="banner"]:not(.banner-4) .container {
        z-index: 2 !important;
    }
}

/* =========================================================
   SIMPLE SWITCH: make banner-4 behave like banner-2 on mobile
   ========================================================= */
@media (max-width: 991.98px) {
  /* Treat banner-4 as if it were banner-2 */
  .page-wrapper section.banner-4 {
    min-height: var(--sub-hero-h-mobile) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    padding-block: .75rem !important;
    position: relative !important;
  }

  /* Copy banner-2’s text spacing and layering */
  .page-wrapper section.banner-4 .container,
  .page-wrapper section.banner-4 .row.align-items-center,
  .page-wrapper section.banner-4 .col-lg-5 {
    position: relative !important;
    z-index: 2 !important;
    padding-top: var(--hero-text-shift-home-mobile) !important;
    margin-top: 0 !important;
  }

  /* Copy the bubble image sizing/placement */
  .page-wrapper section.banner-4 .banner-shape3 {
    position: absolute !important;
    top: 0 !important;
    right: var(--bubble-overhang-mobile) !important;
    height: var(--sub-hero-h-mobile) !important;
    width: var(--bubble-w-mobile) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-wrapper section.banner-4 .banner-shape3 .banner-mask-img {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: var(--bubble-img-x-mobile, right) var(--bubble-img-y-mobile, center) !important;
    display: block !important;
  }
}


/* =========================================================
   MOBILE — prettier curl around the logo (soft feathered notch)
   Applies to: .banner, .banner-2, .banner-3, .banner-4
   No layout shifts. No JS.
   ========================================================= */
@media (max-width: 991.98px) {
  :root{
    /* Position & size of the curl (tweak these) */
    --curl-x: 16px;       /* distance from banner's left */
    --curl-y: 18px;       /* distance from banner's top  */
    --curl-r: 96px;       /* curl radius (circle size)   */
    --curl-feather: 22px; /* edge softness (feather)     */

    /* Optional: push the image down a hair so the curl misses faces */
    --curl-img-nudge-y: 6px;
    --curl-img-nudge-x: 0px;
  }

  /* Ensure image sits behind text (you already have similar rules) */
  .page-wrapper section[class*="banner"] .container { position: relative; z-index: 2; }
  .page-wrapper section[class*="banner"] .banner-shape3 { position: absolute; z-index: 1; }

  /* 1) Feathered curl mask (layered radial-gradients) */
  .page-wrapper section[class*="banner"] .banner-shape3 {
    /* Soft hole: transparent center gradually blends to opaque image */
    -webkit-mask-image:
      radial-gradient(
        circle at calc(var(--curl-x)) calc(var(--curl-y)),
        transparent calc(var(--curl-r) - var(--curl-feather)),
        rgba(0,0,0,0.5) var(--curl-r),
        black calc(var(--curl-r) + var(--curl-feather))
      );
    mask-image:
      radial-gradient(
        circle at calc(var(--curl-x)) calc(var(--curl-y)),
        transparent calc(var(--curl-r) - var(--curl-feather)),
        rgba(0,0,0,0.5) var(--curl-r),
        black calc(var(--curl-r) + var(--curl-feather))
      );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* 2) Optional: subtle highlight to sell the “curl” illusion */
  .page-wrapper section[class*="banner"] .banner-shape3::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    /* soft white highlight near the curl edge */
    background:
      radial-gradient(
        circle at calc(var(--curl-x) + 6px) calc(var(--curl-y) + 6px),
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.18) 40%,
        rgba(255,255,255,0.0) 62%
      );
    mix-blend-mode: screen; /* keeps it subtle on photos */
  }

  /* 3) Gentle image pan to avoid cutting through key subject matter */
  .page-wrapper section[class*="banner"] .banner-shape3 .banner-mask-img,
  .page-wrapper section[class*="banner"] .banner-shape3 img{
    object-position:
      calc(100% + var(--curl-img-nudge-x))
      calc(50%  + var(--curl-img-nudge-y)) !important;
  }
}

/* Per-banner micro-tuning (optional) */
@media (max-width: 991.98px) {
  /* Home (banner-4) — curl a touch larger and a bit lower */
  .page-wrapper section.banner-4 {

    --curl-img-nudge-y: 0px;
    --curl-r: 70px;
    --curl-y: 65px;
    --curl-feather: 20px;
  }

  /* Contact (banner-2) — slightly smaller curl */
  .page-wrapper section.banner-2 {
    --curl-r: 70px;
    --curl-y: 65px;
    --curl-feather: 20px;
  }
}

/* =========================================================
   ONE landscape rule for ALL pages (home + subpages)
   Makes the hero image bigger and keeps it anchored right.
   Put this at the VERY END of the CSS.
   ========================================================= */
@media (orientation: landscape) and (max-width: 1199.98px) {

    .page-wrapper section.banner-4 {

    --curl-img-nudge-y: 0px;
    --curl-r: 00px;
    --curl-y: 0px;
    --curl-feather: 0px;
  }

  :root{
    /* --- knobs you can tune --- */
    --ls-hero-h: 100vh;      /* overall hero height */
    --ls-wrap-w: 65vw;      /* width of the right "bubble"/wrapper */
    --ls-wrap-right: -12vw; /* push wrapper off the right (negative = more offscreen) */
    --ls-img-scale: 1;   /* zoom the bitmap inside the wrapper */
    --ls-img-shift: 0%;     /* extra nudge of the bitmap to the right (neg %) */

  }

  /* Target ALL hero variants with extra specificity so this wins */
  html body .page-wrapper section[class*="banner"]{
    min-height: var(--ls-hero-h) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  html body .page-wrapper section[class*="banner"] .banner-shape3{
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: var(--ls-wrap-right) !important; /* anchor by right edge */
    left: auto !important;
    height: var(--ls-hero-h) !important;
    width: var(--ls-wrap-w) !important;
    overflow: hidden !important;
    z-index: 1 !important;              /* keep behind text */
    pointer-events: none !important;
  }

  html body .page-wrapper section[class*="banner"] .banner-shape3 .banner-mask-img,
  html body .page-wrapper section[class*="banner"] .banner-shape3 img{
    height: 100% !important;            /* tie to hero height */
    width: auto !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: right center !important; /* anchor the bitmap on the right */
    transform-origin: right center !important;
    transform: translateX(var(--ls-img-shift)) scale(var(--ls-img-scale)) !important;
    display: block !important;
  }

  /* ensure copy sits above the image on every page */
  html body .page-wrapper section[class*="banner"] .container{
    position: relative !important;
    z-index: 2 !important;
  }
}


/* =========================================================
   SUB-PAGES ONLY: landscape image sizing (keeps home unchanged)
   Place this at the VERY END of the CSS file
   ========================================================= */
@media (orientation: landscape) and (max-width: 1199.98px) {

      /* Contact (banner-2) — slightly smaller curl */
  .page-wrapper section.banner-2 {
    --curl-r: 0px;
    --curl-y: 0px;
    --curl-feather: 0px;
  }

  :root{
    /* Use the exact values you liked on the home page */
    --ls-hero-h:     100vh;  /* hero height */
    --ls-wrap-w:      65vw;  /* bubble/wrapper width */
    --ls-wrap-right: -14vw;  /* push wrapper off the right (more negative = further) */
    --ls-img-scale:     1;   /* image zoom inside wrapper */
    --ls-img-shift:     0%;  /* extra bitmap nudge; negative moves further right */
  }

  /* Apply to ALL banners EXCEPT the home hero (.banner-4) */
  html body .page-wrapper section[class*="banner"]:not(.banner-4){
    position: relative !important;
    min-height: var(--ls-hero-h) !important;
    overflow: hidden !important;
  }

  /* Wrapper/bubble on sub-pages (beats earlier theme rule by matching :not) */
  html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3{
    position: absolute !important;
    top: 0 !important;
    right: var(--ls-wrap-right) !important; /* anchor to right edge */
    left: auto !important;
    height: var(--ls-hero-h) !important;
    width: var(--ls-wrap-w) !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Bitmap inside the bubble (sub-pages) */
  html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 > img,
  html body .page-wrapper section[class*="banner"]:not(.banner-4) .banner-shape3 .banner-mask-img{
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: right center !important;
    transform-origin: right center !important;
    transform: translateX(var(--ls-img-shift)) scale(var(--ls-img-scale)) !important;
    display: block !important;
  }

  /* Keep text above image on sub-pages */
  html body .page-wrapper section[class*="banner"]:not(.banner-4) .container{
    position: relative !important;
    z-index: 2 !important;
  }

    .clients-logo img {
        filter: none !important;
        -webkit-filter: none !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
    }

    .clients-logo:hover img {
        filter: none !important;
        -webkit-filter: none !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
    }

    /* === Gemini: Client logo strip — force vertical centering === */
    .swiper.client-swiper { /* the <div class="swiper client-swiper"> */
        height: 120px !important; /* pick the strip height you want */
    }

        /* Swiper's wrapper is a flex row — center items vertically */
        .swiper.client-swiper .swiper-wrapper {
            align-items: center !important; /* this is the key */
        }

        /* Each slide should fill the strip and center its content */
        .swiper.client-swiper .swiper-slide {
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

            /* Your inner <div> (since you removed .clients-logo) should also center */
            .swiper.client-swiper .swiper-slide > div {
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* Image sizing and safety (no stretching, no greying) */
            .swiper.client-swiper .swiper-slide img {
                display: block !important;
                max-height: 80px !important; /* tweak to taste */
                width: auto !important;
                object-fit: contain !important;
                filter: none !important;
                opacity: 1 !important;
                mix-blend-mode: normal !important;
            }

        #clientList .card {
            background: #111827;
            color: #e5e7eb;
            border-radius: 16px;
        }

        #clientList .badge {
            border-radius: 12px;
        }
        /* Logo sizing next to titles */
        .client-logo {
            height: 28px;
            width: auto;
            object-fit: contain;
            filter: none;
            opacity: 1;
        }
        /* Improve spacing when logos vary in aspect */
        .card h4 {
            line-height: 1.2;
        }

    #industryFilter {
        background: #0f172a;
        color: #e5e7eb;
        border: 1px solid #38bdf8; /* soft blue border */
        border-radius: 12px;
        padding: 10px 16px;
        box-shadow: 0 0 12px rgba(56,189,248,0.4); /* glowing halo */
        transition: all 0.25s ease-in-out;
    }

        #industryFilter:focus {
            outline: none;
            box-shadow: 0 0 20px rgba(56,189,248,0.8);
            border-color: #38bdf8;
        }

}

/* =========================================================
   MOBILE ONLY — hide reCAPTCHA badge/image
   ========================================================= */
@media (max-width: 767.98px) {
    /* Hide the reCAPTCHA badge that appears bottom-right */
    .grecaptcha-badge {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* If using v2 error box (iframe container), hide it too */
    iframe[src*="recaptcha"],
    div[class*="recaptcha"],
    .g-recaptcha {
        display: none !important;
    }
}


/* =========================================================
   MOBILE FIX — prevent hero heading from clipping
   ========================================================= */
@media (max-width: 575.98px) {
    /* Keep the hero title strong but safe from clipping */
    .page-wrapper section[class*="banner"] h1,
    .page-wrapper section[class*="banner"] h2 {
        font-size: clamp(2.7rem, 6.4vw, 2.8rem) !important;
        line-height: 1.15 !important;
        word-break: normal !important;
        white-space: normal !important;
        letter-spacing: -0.01em !important; /* keeps balance on small screens */
    }
}


.faq-page .accordion,
.faq-page .accordion-wrapper,
.faq-page section .accordion {
    position: relative;
    z-index: 5 !important;
}

.faq-page .accordion-button {
    padding-right: 3.5rem !important;
}



/* Equal heights ONLY for the services section */
.services-eq > [class^="col-"],
.services-eq > [class*=" col-"] {
    display: flex; /* make each column a flex container */
}

.services-eq .service-item.style-1 {
    display: flex; /* make the card stretch inside the column */
    flex-direction: column;
    height: 85%;
    flex: 1 1 auto;
}

.services-eq .service-desc {
    flex-grow: 1; /* lets the text area fill remaining space */
}

.services-eq .arrow-btn {
    margin-top: auto; /* keeps the arrow pinned to the bottom */
    align-self: flex-start;
}


/* =====================================================
   FAQ PAGE ONLY — Keep curve behind content (safe scope)
   ===================================================== */

/* 1) Make the hero (banner) a low z-index layer so content sits above it */
html body.faq-page .page-wrapper section[class*="banner"] {
    position: relative;
    z-index: 0; /* creates a stacking context only for the FAQ hero */
}

    /* 2) The decorative curve image stays behind and never blocks clicks */
    html body.faq-page .page-wrapper section[class*="banner"] .banner-shape3 {
        position: absolute !important;
        z-index: 1 !important; /* behind text/content */
        pointer-events: none !important; /* never block interactions */
    }

    /* 3) Raise the FAQ page content above the curve */
    html body.faq-page .page-wrapper section[class*="banner"] ~ .page-content,
    html body.faq-page .page-wrapper section[class*="banner"] ~ .page-content > section,
    html body.faq-page .page-wrapper section[class*="banner"] ~ .page-content .container {
        position: relative !important;
        z-index: 2 !important; /* above the curve */
    }

/* 4) Modals and overlays should always sit on top if Bootstrap is used */
html body.faq-page .modal-backdrop {
    z-index: 3000 !important;
}

html body.faq-page .modal {
    z-index: 3050 !important;
}