/******************************/
/*  START :: Images & Videos  */
/******************************/
/*****************************/
/*  START :: General Images  */
/*****************************/
.fl-post .fullheight img {
    max-height: 760px;
    height: 77vw;
    object-fit: cover;
}

.fl-post .largeheight img {
    max-height: 590px;
    height: 50vw;
    object-fit: cover;
}

.fl-post .mediumheight img {
    height: 40vw;
    max-height: 460px;
    object-fit: cover;
}

.fl-post .contain img {
    object-fit: contain;
}

.fl-post .fullheight img,
.fl-post .largeheight img,
.fl-post .mediumheight img,
.border-radius-img,
.border-radius-img img {
    border-radius: var(--border-radius-img);
}

.fl-post .bglefttop img {
    object-position: left top
}

.fl-post .bgleftcenter img {
    object-position: left center;
}

.fl-post .bgleftbottom img {
    object-position: left bottom;
}

.fl-post .bgcentertop img {
    object-position: center top;
}

.fl-post .bgcentercenter img {
    object-position: center center;
}

.fl-post .bgcenterbottom img {
    object-position: center bottom;
}

.fl-post .bgrighttop img {
    object-position: right top;
}

.fl-post .bgrightcenter img {
    object-position: right center;
}

.fl-post .bgrightbottom img {
    object-position: right bottom;
}


/* DESKTOP LARGE, and down */
@media screen and (max-width: 1366px) {
    .fl-post .mediumheight img {
        height: 50vw;
    }
}

/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .fl-post .fullheight img {
        height: 70vw;
        max-height: 500px;
    }

    .fl-post .largeheight img {
        height: 70vw;
        max-height: 460px;
    }

    .fl-post .mediumheight img {
        height: 70vw;
        max-height: 360px;
    }
}

/* MOBILE, and down */
@media only screen and (max-width: 768px) {
    :root {
        --border-radius-img: var(--border-radius-img-mobile);
    }

    .fl-post .fullheight img {
        height: 80vw;
        max-height: 280px;
    }

    .fl-post .largeheight img {
        height: 80vw;
        max-height: 280px;
    }

    .fl-post .mediumheight img {
        height: 80vw;
        max-height: 280px;
    }
}

/*****************************/
/*  END   :: General Images  */
/*****************************/

/**********************/
/***hero play button***/
/**********************/
body:not(.fl-builder-edit) .row--hero-full {
    overflow: hidden;
}

.fl-row-bg-video .fl-bg-video iframe,
.fl-row-bg-embed .fl-bg-embed-code iframe {
    /* increase height of full-screen videos enough that youtube player's chrome is hidden */
    min-height: 160vh;
    min-width: 250vh;
}

button.yt-play-button::before {
    transform: translate(0px, 7px);
    content: "";
    width: 27px;
    height: 27px;
    background: url(/wp-content/uploads/button-play.svg) center center / contain no-repeat;
    margin-right: 8px;
    display: inline-block;
}

button.yt-pause-button::before {
    transform: translate(0px, 7px);
    content: "";
    width: 27px;
    height: 27px;
    background: url(/wp-content/uploads/button-pause.svg) center center / contain no-repeat;
    margin-right: 8px;
    display: inline-block;
}

button.yt-play-button,
button.yt-pause-button {
    background: transparent;
    border: 0;
    color: white;
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, .2));
    font-family: var(--font-content);
    font-size: 19px;
    font-size: 1.19rem;
    font-weight: 900;
    letter-spacing: 0.57px;
    line-height: normal;
    cursor: pointer;
    visibility: hidden;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.20);
    transform: scale(0);
    transition: all .2s ease;
    padding: 0px;
    position: absolute;
    width: auto;
    bottom: 6px;
    /* left: 0; */
}


/* TABLET, and down */
@media only screen and (max-width: 992px) {

    .youtube_controls_wrapper--left button.yt-play-button,
    .youtube_controls_wrapper--left button.yt-pause-button {
        left: var(--content-padding);

    }
}

/* Mobile */
@media only screen and (max-width: 768px) {

    button.yt-play-button,
    button.yt-pause-button {
        bottom: 0;
    }
}

button.yt-play-button.active,
button.yt-pause-button.active {
    visibility: visible;
    transform: scale(1);
}

.youtube_controls_wrapper--center .youtube_controls {
    width: 100%;
    left: unset;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    /* bottom: 16px; */
    position: relative;
}

.youtube_controls {
    bottom: 0;
    left: 0;
    padding: 0 72px;
    position: absolute;
    width: 100%;
}

/*************************/
/*  END   :: Hero Video  */
/*************************/

/**************************************/
/*  START :: Floating Collage Images  */
/**************************************/
.border-radius-img {
    border-radius: var(--border-radius-img);
}

body:not(.fl-builder-edit) .fl-module-box.border-radius-img {
    border-radius: var(--border-radius-img);
    overflow: hidden;
}

body:not(.fl-builder-edit) .fl-module-photo.border-radius-img:not(.border-gradient) img {
    border-radius: var(--border-radius-img);
    overflow: hidden;
}

body:not(.fl-builder-edit) .border-gradient.border-radius-img {
    background: transparent;
    background: linear-gradient(90deg, #FF855B 11.54%, #FFE35B 92.79%) border-box;
    border: 3px solid transparent;

    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0), linear-gradient(#fff 0 0) content-box;
    mask-composite: exclude;

    border-radius: calc(var(--border-radius-img) + 14px);
    box-sizing: content-box;
    padding: 10px;
}

body:not(.fl-builder-edit) .border-gradient.border-radius-img .fl-photo-content {
    border-radius: var(--border-radius-img);
    overflow: hidden;
}

/* card w ellipsis path */
.border-radius-img.clip-path--ellipsis {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    clip-path: ellipse(120% 100% at 50% 100%);
    transition: all 500ms ease-in-out;
}

.card:hover .border-radius-img.clip-path--ellipsis {
    clip-path: ellipse(100% 100% at 50% 100%);
}

.column--image-collage {
    position: relative;
    z-index: 3;
}

/* BugHerd #128 - the image column centres its content on Approach but starts at the top on
   home, so the same photo sat a few px lower on one page than the other and no single icon
   offset could be exact on both. Aligning them to the top matches home, matches the sibling
   rule on .collage-text below, and is the same top alignment Lauren asked for on 128 / 174. */
.column--image-collage > .fl-col-content {
    justify-content: flex-start !important;
}

.column--image-collage .module--main-image {
    height: 502px;
    object-fit: cover;
    width: 604px;
}

/* BugHerd 88
   The rule above sets object-fit on the module, which is a div, so it never took
   effect: object-fit only applies to replaced elements such as an image. The module
   was held at its set height while the image inside kept its own aspect ratio, so
   any photo that was not the same shape as the box left empty space underneath it.
   On Approach the second collage image rendered 374px tall inside a 502px box,
   leaving 128px blank.

   That blank strip is why the small paired image looked detached. It is positioned
   against the bottom of the column, so it was sitting 41px clear of the photo above
   it rather than overlapping its corner. The first and third collages happened to
   use photos close enough in shape to hide the problem.

   Passing the sizing down to the image itself is what the original rule intended.
   The photo then fills the box, the bottom of the box and the bottom of the photo
   are the same line again, and the paired image overlaps it the way the design
   shows. Heights are inherited rather than repeated so the four breakpoint
   variations of this module keep working untouched. */
.column--image-collage .module--main-image .fl-photo-content {
    display: block;
    height: 100%;
    width: 100%;
}
.column--image-collage .module--main-image .fl-photo-content img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* BugHerd #128 - Loop asked for the icon to sit in the centre of the image rather than
   off on its edge. The icon's containing block is the column, not the photo, and the photo
   is inset by the column content's padding-left, so a plain left:50% would centre it on the
   COLUMN and land it about 26px off. The photo's centre inside the column is a constant at
   each breakpoint: padding-left + half the main image width. Vertical 50% is already exact.
   If the main image dimensions change (see .column--image-collage .module--main-image just
   above, and its breakpoint overrides), update the matching left value here too. */
.column--image-collage .module--icon {
    height: 113px;
    position: absolute;
    width: 113px;
    /* Pre-Launch QA Aug 10 - BS reported the icons sitting in the middle of the image.
       Settled 16 Aug against the Figma: they belong on the LEFT edge. This has moved
       twice - #128 put them centre at Loop's request, a later ticket said edge and was
       first read as the right, and the Figma resolves it to the left.
       With the translate(-50%,-50%) below, left = the photo's LEFT edge puts the icon's
       centre on that edge so it straddles it, half on and half off. The value is simply
       the photo's inset within the column, measured at each breakpoint rather than
       derived: 65 / 50 / 0 / 26. The same change is repeated at 1366 / 992 / 768 - all
       four must agree, or the icon is on the edge on desktop and elsewhere on tablet.
       Not a Beaver Builder setting: the icon is absolutely positioned by this shared rule
       across every collage column on Home and The Approach, so doing it per module would
       mean unpicking the pattern on six-plus modules. */
    left: 65px;                     /* left edge of the 604 image, inset 65 in its column */
    top: calc(502px / 2);           /* 251px, half the main image, NOT 50% of the column:
                                       the column is not always the image's height (home
                                       collage-1 is 538 against a 502 image, which put the
                                       icon 18px low). */
    transform: translate(-50%, -50%);
}

.column--image-collage .module--icon img[data-active="true"] {
    animation:
        glow 2000ms ease-in-out infinite alternate,
        float-up 6500ms ease-in-out infinite alternate;
    /* border: 10px solid transparent; */
    border-radius: 40px;
    height: 113px;
    width: 113px;
}

.column--image-collage .module--floating-image {
    bottom: 0;
    position: absolute;
    /* right: 56px; */
    pointer-events: none;
    transform: translateY(50%) translateX(30%);
}

.column--image-collage .module--floating-image img {
    height: 175px;
    object-fit: cover;
    width: 250px;
}

.column--image-collage .module--floating-image.top {
    bottom: 100%;
    transform: translateY(50%) translateX(-10%);
}

.collage-animation-1,
.collage-animation-2,
.collage-animation-3 {
    position: relative;
    z-index: 3;
}

.collage-animation-1 .module--icon {
    --glow-color: #4ABFBF;
    /* BugHerd #128 - the 40% offset here kept this one icon off centre while the other two
       sat at the vertical midpoint. Removed so all three centre on their image. */
}

.collage-animation-2 .module--icon {
    --glow-color: #FECB00;
}

.collage-animation-3 .module--icon {
    --glow-color: #FF8054;
}

@keyframes glow {
    from {
        box-shadow: 0 0 0 0 var(--glow-color);
    }

    to {
        box-shadow: 0 0 44px 0 var(--glow-color);
    }
}

/* sloppy testing */

/* parent row */
.row--animation-scroll:not(.approach)>.fl-row-content-wrap {
    padding-top: 180px !important;
    padding-bottom: 63px !important;
}

/* 1st row */
.collage-animation-1 {
    margin-bottom: 100px !important;
}

.collage-animation-1>.fl-col-content {
    margin-top: 0 !important;
    margin-bottom: 210px !important;
}

/* 2nd row */
.collage-animation-2 {
    margin-bottom: 210px !important;
}

.collage-animation-2>.fl-col-content {
    margin-top: 112px !important;
    margin-top: 0 !important;
    margin-bottom: 240px !important;
}

/* 3rd row */
.collage-animation-3 {
    margin-bottom: 100px !important;
}

.collage-animation-3>.fl-col-content {
    margin-top: 112px !important;
    margin-top: 0 !important;
    margin-bottom: 240px !important;
    /* 3rd */
}

.collage-animation-1 .collage-text>.fl-col-content,
.collage-animation-2 .collage-text>.fl-col-content,
.collage-animation-3 .collage-text>.fl-col-content {
    padding-bottom: 20px !important;
    justify-content: flex-start !important;
}

/* BugHerd #128 (home) and #174 (approach) - Lauren asked for the text block and the
   image block to be top aligned on all three collage sections. Beaver Builder column
   alignment was never the lever: the groups already compute align-top and the column
   content already computes justify-content:flex-start, which is why changing the BB
   setting moved nothing. These three hard-coded offsets were the whole cause, and they
   applied only above 1367px - at 1366 and below the design already ships collage-2 and
   collage-3 at 0. Both pages measured identically before the change (320 / 130 / 80). */
.collage-animation-1 .column--image-collage {
    margin-top: 0;
}

.collage-animation-2 .column--image-collage {
    margin-top: 0;
}

.collage-animation-3 .column--image-collage {
    margin-top: 0;
}

/* hero above collage  */
.row--sub-hero .fl-module-box {
    padding-left: 65px !important;
}

/* 1st row text column */
/* .collage-text > .fl-col-content {
    padding-right: 90px !important;
    padding-left: 65px !important;
} */
.collage-animation-1 .fl-col>.fl-col-content {
    padding-right: 90px !important;
    padding-left: 65px !important;
}

/* 2nd row text column */
.collage-animation-2 .fl-col>.fl-col-content {
    padding-right: 90px !important;
    padding-left: 65px !important;
}

/* 3rd row text column */
.collage-animation-3 .fl-col>.fl-col-content {
    padding-right: 90px !important;
    padding-left: 65px !important;
}

/* BB XL DESKTOP, and up */
@media only screen and (min-width: 1367px) {
    .row--animation-scroll .collage-text {
        max-width: 540px !important;
        width: 40% !important;
    }
}

/* DESKTOP LARGE, and down */
@media screen and (max-width: 1366px) {
    .row--sub-hero .fl-module-box {
        margin-top: 190px;
    }

    .row--sub-hero .fl-module-button {
        margin-bottom: 140px !important;
    }

    .row--animation-scroll:not(.approach)>.fl-row-content-wrap {
        padding-top: 80px !important;
        padding-bottom: 63px !important;
    }

    .collage-animation-1>.fl-col-content,
    .collage-animation-2>.fl-col-content,
    .collage-animation-3>.fl-col-content {
        margin-bottom: 0 !important;
    }

    .collage-animation-1,
    .collage-animation-2,
    .collage-animation-3 {
        margin-bottom: 226px !important;
    }

    .collage-animation-1 .fl-col-group-equal-height,
    .collage-animation-2 .fl-col-group-equal-height,
    .collage-animation-3 .fl-col-group-equal-height {
        align-items: flex-start;
    }

    .collage-animation-1 .fl-col>.fl-col-content,
    .collage-animation-2 .fl-col>.fl-col-content,
    .collage-animation-3 .fl-col>.fl-col-content {
        padding-right: 0px !important;
        padding-left: 50px !important;
    }

    .collage-animation-1 .column--image-collage,
    .collage-animation-2 .column--image-collage,
    .collage-animation-3 .column--image-collage {
        margin-top: 0px;
    }

    /* BugHerd #128 / #174 - collage-1 was the only section still offset below 1367px.
       All three image columns hold the identical three modules (main-image 400x333,
       icon 64x64, floating-image 197x143), so there is no structural reason for this
       one to sit lower. Zeroed so the top alignment Lauren asked for holds at every
       width rather than only on desktop. */
    .collage-animation-1 .column--image-collage {
        margin-top: 0;
    }

    .column--image-collage .module--main-image {
        height: 333px;
        width: 400px;
    }

    .column--image-collage .module--icon {
        height: 64px;
        width: 64px;
        /* Pre-Launch QA Aug 10 - right edge, see the base rule. Was calc(50px + 400px / 2). */
        left: 50px;               /* left edge of the 400 image, inset 50 in its column */
        top: calc(333px / 2);           /* 166.5px, half the main image */
    }

    .column--image-collage .module--icon img[data-active="true"] {
        border-radius: calc(var(--border-radius-img));
        height: 64px;
        width: 64px;
    }

    .column--image-collage .module--floating-image img {
        height: 127px;
        width: 181px;
    }

    .column--image-collage .module--floating-image {
        transform: translateY(50%) translateX(0%);
    }

    body:not(.fl-builder-edit) .border-gradient.border-radius-img {
        padding: 5px;
    }
}

/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .row--sub-hero .fl-module-box {
        margin-top: 10px;
    }

    .row--animation-scroll:not(.approach)>.fl-row-content-wrap {
        padding-top: 94px !important;
        padding-bottom: 80px !important;
    }

    .collage-animation-1,
    .collage-animation-2,
    .collage-animation-3 {
        margin-bottom: 66px !important;
    }

    .collage-animation-1>.fl-col-content,
    .collage-animation-2>.fl-col-content,
    .collage-animation-3>.fl-col-content {
        margin-bottom: 0px !important;
    }

    .collage-animation-1 .fl-col-group-equal-height,
    .collage-animation-2 .fl-col-group-equal-height,
    .collage-animation-3 .fl-col-group-equal-height {
        align-self: center;
        flex-direction: column-reverse;
        max-width: 378px;
    }

    .row--animation-scroll .column--image-collage,
    .row--animation-scroll .collage-text {
        width: 100% !important;
    }

    .row--animation-scroll .column--image-collage {
        margin-top: 0;
        margin-bottom: 98px;
    }

    .row--animation-scroll .collage-animation-1 .column--image-collage {
        margin-top: 0;
        margin-bottom: 18px;
    }

    .column--image-collage .module--main-image {
        height: 313px;
        width: 378px;
    }

    .column--image-collage .module--icon {
        --border-radius-img: 16px;
        border-radius: var(--border-radius-img);
        height: 54px;
        width: 54px;
        /* Pre-Launch QA Aug 10 - right edge, see the base rule. Was calc(0px + 378px / 2). */
        left: 0px;                /* the 378 image is flush with its column at this width */
        top: calc(313px / 2);          /* 156.5px, half the main image */
    }

    .column--image-collage .module--icon img[data-active="true"] {
        border-radius: calc(var(--border-radius-img) + 2px);
        height: 54px;
        width: 54px;
    }

    .collage-animation-1 .column--image-collage .module--floating-image img {
        height: 102px;
        width: 146px;
    }

    .column--image-collage .module--floating-image img {
        height: 128px;
        width: 184px;
    }

    .collage-animation-1 .fl-col>.fl-col-content,
    .collage-animation-2 .fl-col>.fl-col-content,
    .collage-animation-3 .fl-col>.fl-col-content {
        padding-left: 0 !important;
    }

    .collage-animation-3 {
        margin-bottom: 0px !important;
    }

    .row--homepage.column--storytelling-feature>.fl-col-content {
        padding-top: 100px;
    }
}

/* MOBILE, and down */
@media only screen and (max-width: 768px) {

    .row--sub-hero .fl-col>.fl-col-content,
    .row--sub-hero .fl-module-box {
        min-height: 556px;
    }

    .row--sub-hero .fl-module-box {
        justify-content: center;
        padding-left: 0px !important;
    }

    .row--sub-hero .fl-module-button {
        margin-bottom: 60px !important;
    }

    .row--animation-scroll:not(.approach)>.fl-row-content-wrap {
        padding-top: 0 !important;
        padding-bottom: 80px !important;
    }

    .row--animation-scroll .column--image-collage {
        padding-left: 26px;
    }

    .column--image-collage .module--main-image {
        height: 255px;
        width: 309px;
    }

    /* The 26px comes from the padding-left on .row--animation-scroll
       .column--image-collage just above, which insets the photo but not the absolutely
       positioned icon. Pre-Launch QA Aug 10 - right edge, see the base rule.
       Was calc(26px + 309px / 2) = 180.5px, the centre. */
    .column--image-collage .module--icon {
        left: 26px;               /* left edge of the 309 image, inset 26 in its column */
        top: calc(255px / 2);
    }

    .collage-animation-1 .column--image-collage .module--floating-image {
        transform: translateY(50%) translateX(65%);
    }

    .collage-animation-2 .column--image-collage .module--floating-image {
        transform: translateY(50%) translateX(30%);
    }

    .collage-animation-3 .column--image-collage .module--floating-image {
        transform: translateY(50%) translateX(70%);
    }

    .collage-animation-1 .column--image-collage .module--floating-image img {
        height: 79px;
        width: 113px;
    }

    .column--image-collage .module--floating-image img {
        --border-radius-img: 16px;
        height: 105px;
        width: 151px;
    }

    /* body:not(.fl-builder-edit) .fl-module-photo.border-radius-img:not(.border-gradient) img,  */
    body:not(.fl-builder-edit) .border-gradient.border-radius-img {
        --border-radius-img: var(--border-radius-img-mobile);
    }

    .row--homepage.column--storytelling-feature>.fl-col-content {
        padding-top: 50px;
    }

    .collage-animation-1 .fl-col-group-equal-height,
    .collage-animation-2 .fl-col-group-equal-height,
    .collage-animation-3 .fl-col-group-equal-height {
        display: flex !important;
        max-width: 100%;
    }
}



body:not(.fl-builder-edit) .column--paralax-collage {
    position: relative;
    z-index: 1;
}

body:not(.fl-builder-edit) .column--paralax-collage .column--zindex {
    padding: 0 2px;
    position: relative;
    z-index: 1;
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image img {
    object-fit: cover;
}

/* top left */
body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left {
    transform: translateX(-40%) translateY(1%);
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left img {
    height: 366px;
    width: 395px;
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left img[data-active="true"] {
    animation: float-down 6000ms ease-in-out infinite alternate;
}

/* top right */
body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.right {
    transform: translateX(40%) translateY(10%);
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.right img {
    height: 547px;
    width: 382px;
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.right img[data-active="true"] {
    animation: float-up 6500ms ease-in-out infinite alternate;
}

/* bottom left */
body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left {
    transform: translateX(-27%) translateY(48.5%);
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left img {
    height: 444px;
    width: 532px;
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left img[data-active="true"] {
    animation: float-down 6000ms ease-in-out infinite alternate;
}

/* bottom right */
body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right {
    transform: translateX(27%) translateY(69%);
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right img {
    height: 394px;
    width: 535px;
}

body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right img[data-active="true"] {
    animation: float-up 7000ms ease-in-out infinite alternate;
}

@keyframes float-down {
    from: {
        transform: translateY(-10%);
    }

    to {
        transform: translateY(10%);
    }
}

@keyframes float-up {
    from: {
        transform: translateY(10%);
    }

    to {
        transform: translateY(-10%);
    }
}

@keyframes float-over {
    to {
        transform: translateY(-10%);
    }
}

/* DESKTOP LARGE, and down */
@media screen and (max-width: 1366px) {
    .column--paralax-collage {
        padding-left: 77px;
    }

    .column--paralax-collage>.fl-col-content {
        margin-top: 247px;
        margin-bottom: calc(134px + 432px);
    }

    .column--paralax-collage .html--donate {
        margin-left: auto;
        margin-right: auto;
        max-width: 403px;
    }

    /* top left */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left {
        transform: translateX(-45%) translateY(1%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left img {
        height: 356px;
        width: 405px;
    }

    /* top right */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.right {
        transform: translateX(53%) translateY(10%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.right img {
        height: 385px;
        width: 384px;
    }

    /* bottom left */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left {
        transform: translateX(-22%) translateY(48.5%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left img {
        height: 387px;
        width: 464px;
    }

    /* bottom right */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right {
        transform: translateX(27%) translateY(81%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right img {
        height: 260px;
        width: 352px;
    }
}

/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .column--paralax-collage>.fl-col-content {
        margin-top: 297px;
    }

    .column--paralax-collage {
        padding-left: 0;
    }

    .column--paralax-collage .maxwidth500 {
        max-width: 660px;
    }

    .column--paralax-collage .html--donate {
        margin-left: auto;
        margin-right: auto;
    }

    /* top left */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left {
        transform: translateX(-27%) translateY(1%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left img {
        height: 212px;
        width: 290px;
    }

    /* top right */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.right {
        display: none;
    }

    /* bottom left */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left {
        transform: translateX(-22%) translateY(48.5%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left img {
        height: 286px;
        width: 343px;
    }

    /* bottom right */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right {
        transform: translateX(27%) translateY(80%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right img {
        height: 251px;
        width: 339px;
    }

}

/* MOBILE, and down */
@media only screen and (max-width: 768px) {
    .column--paralax-collage>.fl-col-content {
        padding-inline: var(--content-padding) !important;
        margin-bottom: 340px !important;
        margin-top: 340px !important;
    }

    /* top left */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.top.left {
        transform: translateX(5%) translateY(4%);
    }

    /* bottom left */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.left {
        display: none;
    }

    /* bottom right */
    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right {
        transform: translateX(-11%) translateY(85%);
    }

    body:not(.fl-builder-edit) .column--paralax-collage .module--floating-image.bottom.right img {
        height: 182px;
        width: 246px;
    }
}

/**************************************/
/*  END  :: Floating Collage Images  */
/**************************************/

/**********************************************/
/*  START :: Video Background Column w Popup  */
/**********************************************/
/* 
.row--text-video 
.row--text-left-video-right
.row--text-right-video-left
*/
.column--image .fl-photo-content,
.column--image .fl-photo-content img {
    width: 100%;
}

/* BugHerd #589 + #132 - the "In Action" story card on the home page. Lauren flagged the card
   design twice; Loop supplied the target (Figma 5183:15221): one full-bleed photo card with the
   headline, the paragraph and "Read The Story" sitting ON the photo. It was built instead as a
   photo module IN FLOW above the text, which is also why the card measured 941px tall against
   the left card's 695px, the second half of 132 ("should match height of left card").
   Node-scoped on purpose: the generic .border-radius-img rules here are used site-wide. */
body:not(.fl-builder-edit) .fl-node-ebm7sijho49d {
    position: relative;
    overflow: hidden;
    padding: 36px 26px;
}

body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}

body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-photo .fl-photo,
body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-photo .fl-photo-content,
body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The card's own gradient paints beneath the photo once the photo is positioned, so the scrim
   that keeps the copy legible has to be re-established above it. */
body:not(.fl-builder-edit) .fl-node-ebm7sijho49d::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(26, 50, 66, 0) 17.79%, rgba(26, 50, 66, 1) 100%);
}

body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-heading,
body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-rich-text,
body:not(.fl-builder-edit) .fl-node-ebm7sijho49d > .fl-module-button {
    position: relative;
    z-index: 2;
}

/* BugHerd #132 - match the left card's height where the two sit side by side. They share one
   flex container which centres its items, so stretching this one makes both cards the same
   height. Below 769px they stack full width and there is nothing to match. */
@media only screen and (min-width: 769px) {
    body:not(.fl-builder-edit) .fl-node-9xfijkblod83 > .fl-node-ebm7sijho49d {
        align-self: stretch;
    }
}

.column--over-image {
    position: relative;
}

/* BugHerd #538 - Kate: "This is difficult to read against the white background and dress.
   Could we try adding an overlay?" The heading sits in white over the photo, and where the
   photo is light there is nothing behind the type. A bottom-weighted scrim darkens only the
   lower part of the image, where the copy sits, and leaves the top of the photo untouched.
   The ::after needs its own stacking context note: the heading module follows the photo in
   DOM order, so the scrim lands under the text without a z-index on either. */
.column--over-image .fl-photo-content {
    position: relative;
}

.column--over-image .fl-photo-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg,
        rgba(11, 31, 45, 0) 40%,
        rgba(11, 31, 45, 0.35) 65%,
        rgba(11, 31, 45, 0.75) 100%);
}

/* Pre-Launch QA #31, BS: "Bottom of the video needs curved edges to match the top."
   17 Aug - and the earlier pass closed this as not-reproducible for a good reason: the photo
   really does carry border-radius 24 on all four corners, and nothing strips it. The image
   was never the problem. The SCRIM above is: it says `border-radius: inherit`, which was the
   right intent and has never done anything, because it inherits from `.fl-photo-content` and
   the radius is set on the IMG (line 29 - `.fullheight` / `.largeheight` / `.mediumheight` /
   `.border-radius-img`). `inherit` therefore resolved to 0, and the scrim - transparent at
   the top, 75% opaque at the bottom - was invisible over the top corners and painted its own
   square ones at the bottom. Round top, square bottom, exactly as reported.

   Giving the CONTAINER the radius is what makes `inherit` mean something. Conditioned on the
   same four classes that set it on the image rather than applied to every over-image column:
   `/who-we-are/mission/` has two, and the second one's photo is deliberately square - a
   blanket rule would clip a square photo into a rounded one. Using the same token also
   carries the mobile step (16px) for free.

   Fixes every over-image photo at once, so the page-scoped patch this needed on
   /join/partner-2026/ is now redundant and has been removed from custom.css. */
.fl-post .column--over-image .fullheight .fl-photo-content,
.fl-post .column--over-image .largeheight .fl-photo-content,
.fl-post .column--over-image .mediumheight .fl-photo-content,
.column--over-image .border-radius-img .fl-photo-content {
    border-radius: var(--border-radius-img);
    overflow: hidden;
}

.over-image--content {
    bottom: 0;
    position: absolute;
}

.fl-post .column--over-image .fullheight img {
    max-height: 700px;
}

.fl-module-modal-popup.button-branded a:not(.fl-builder-submenu-link) {
    border-radius: var(--border-radius-btn) !important;
    padding-block: 20px !important;
    padding-inline: 22px 33px !important;
}

.fl-module-modal-popup.button-gradient a:not(.fl-builder-submenu-link) {
    --glow-color: var(--sweet-water);
    background: var(--btn-gradient-blue) !important;
}

.fl-module-modal-popup.button-branded.alt span {
    font-weight: 800;
    font-size: 19px;
    font-size: 1.19rem;
    line-height: normal;
    letter-spacing: .57px;
    letter-spacing: 0.04rem;
}

.fl-module-modal-popup.button-branded.alt .ua-icon-controller-play {
    font-size: 2.2em;
    margin: 0;
    line-height: 0;
}

.fl-module-modal-popup.button-branded.alt .ua-icon-controller-play:before {
    font-size: 1em;
    line-height: 0;
}

/* MOBILE, and down */
@media only screen and (max-width: 768px) {
    .fl-module-modal-popup.button-branded a {
        border-radius: var(--border-radius-btn) !important;
        padding-block: 13px !important;
        padding-inline: 10px 29px !important;
    }
}

/**********************************************/
/*  END   :: Video Background Column w Popup  */
/**********************************************/

/************************************/
/*  START :: Large Container Image  */
/************************************/
.row--large-container-image .fl-photo-caption-below {
    padding: 0;
    margin-top: 26px;
}

/************************************/
/*  END   :: Large Container Image  */
/************************************/

/*****************************/
/*  START :: Video Carousel  */
/*****************************/
/* start: animate in after initialization */
body:not(.fl-builder-edit) .row--video-carousel .slick-slider {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
    transition-delay: 1s;
}

body:not(.fl-builder-edit) .row--video-carousel .slick-slider.slick-initialized {
    opacity: 1;
}

/* end: animate in after initialization */

/* limit width in BB mode for ease of editability */
body.fl-builder-edit .row--video-carousel .video-carousel-slider {
    margin-block: auto;
    max-width: 600px;
}

body.fl-builder-edit .row--video-carousel .video-carousel-slide {
    width: 100% !important;
}

/* start: controls */
.row--video-carousel .slider-header {
    align-items: center;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    padding: 0 !important;
}

/* extends glow effect */
.row--video-carousel .slick-arrow {
    --glow-color: var(--sweet-water);
}

/* indicator below controls on desktop */
.row--video-carousel .slider-header .slider-dot {
    order: 2;
    margin: 0;
}

.row--video-carousel .slider-header .slick-dots {
    padding-inline-start: 0;
    padding: 0;
}

/* end: controls */

body:not(.fl-builder-edit) .row--video-carousel>.fl-row-content-wrap>.fl-row-content>.fl-col-group:first-child {
    padding-right: var(--content-padding);
    padding-left: var(--content-padding);
    max-width: 1366px;
    box-sizing: border-box;
    margin: auto;
}

.video-carousel-slider .slick-track {
    align-items: center;
}

body:not(.fl-builder-edit) .fl-col.video-carousel-slide {
    overflow: visible;
    padding-bottom: 0;
    position: relative;
}

/* all slides */
body:not(.fl-builder-edit) .row--video-carousel .video-carousel-slide {
    align-items: center;
    display: flex !important;
    flex-direction: column;
    height: 512px;
    justify-content: center;
    transition: all 0.5s ease;
    width: 620px !important;
}

/* current slide only */
body:not(.fl-builder-edit) .row--video-carousel .slick-center .video-carousel-slide {
    opacity: 1;
}

.video-carousel-slide .fl-col-content {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    position: relative;
}

/* only when not in BB mode */
body:not(.fl-builder-edit) .video-carousel-slide .fl-col-content {
    border-radius: var(--border-radius-img);
    overflow: hidden;
}

/* all slides */
body:not(.fl-builder-edit) .video-carousel-img,
body:not(.fl-builder-edit) .video-carousel-img .fl-photo-content,
body:not(.fl-builder-edit) .video-carousel-img img {
    height: 286px;
    width: 450px;
    transition: all 600ms ease;
    transition-delay: 0;
    margin: auto;
    object-fit: cover;
    border-radius: var(--border-radius-img);
}

/* current slide only*/
body:not(.fl-builder-edit) .slick-center .video-carousel-img,
body:not(.fl-builder-edit) .slick-center .video-carousel-img .fl-photo-content,
body:not(.fl-builder-edit) .slick-center .video-carousel-img img {
    height: 512px;
    width: 758px;
}

body:not(.fl-builder-edit) .video-carousel-img {
    box-sizing: content-box;
    position: relative;
}

/* image overlay for text legibility */
body:not(.fl-builder-edit) .video-carousel-img::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 100%);
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

body:not(.fl-builder-edit) .video-carousel-img::after {
    background: var(--ocean);
    content: '';
    display: block;
    inset: 0;
    opacity: 0.6;
    position: absolute;
    transition: opacity 500ms ease;
    z-index: 1;
}

body:not(.fl-builder-edit) .slick-center .video-carousel-img::after {
    opacity: 0;
}

body:not(.fl-builder-edit) .video-carousel-box {
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1;
    transition:
        transform 0.5s ease,
        opacity 0.15s ease 0s;
}

body:not(.fl-builder-edit) .slick-center .video-carousel-box {
    opacity: 1;
    pointer-events: all;
    bottom: 0px;
    transition:
        transform 0.5s ease,
        opacity 0.5s ease .5s;
}

.row--video-carousel .video-carousel-slide .fl-heading {
    text-wrap: pretty;
    /* unsets text-wrap balance on headline */
}

.video-carousel-box .button_play {
    flex-shrink: 0;
    flex-grow: 0;
}

/* modal popup  */
body:not(.fl-builder-edit) .video-carousel-box .fl-module-modal-popup {
    flex-shrink: 0;
    width: auto;
}



/* TABLET, and down */
@media only screen and (max-width: 992px) {
    body:not(.fl-builder-edit) .row--video-carousel .video-carousel-slide {
        height: 420px !important;
    }

    body:not(.fl-builder-edit) .video-carousel-img,
    body:not(.fl-builder-edit) .video-carousel-img .fl-photo-content,
    body:not(.fl-builder-edit) .video-carousel-img img {
        width: 512px;
    }

    body:not(.fl-builder-edit) .slick-center .video-carousel-img,
    body:not(.fl-builder-edit) .slick-center .video-carousel-img .fl-photo-content,
    body:not(.fl-builder-edit) .slick-center .video-carousel-img img {
        height: 420px;
        width: 691px;
    }

}

/* MOBILE, and down */
@media only screen and (max-width: 768px) {
    /* BugHerd #498 - Brie asked for the titles to be larger than the play button; Loop
       replied "We can bump the size to 32px", which is also what these titles already use
       on desktop. Scoped to the video carousel on purpose: the .h4 scale these headings
       inherit is shared by every BB heading module site-wide. */
    .row--video-carousel .video-carousel-slide .fl-heading {
        font-size: 32px;
        line-height: 40px;
    }

    body:not(.fl-builder-edit) .row--video-carousel .video-carousel-slide {
        width: 100vw !important;
        height: 420px !important;
        padding: 0 var(--content-padding);
    }

    body:not(.fl-builder-edit) .video-carousel-slide,
    body:not(.fl-builder-edit) .video-carousel-slide .fl-col-content,
    body:not(.fl-builder-edit) .video-carousel-img,
    body:not(.fl-builder-edit) .video-carousel-img .fl-photo-content,
    body:not(.fl-builder-edit) .video-carousel-img img,
    body:not(.fl-builder-edit) .slick-center .video-carousel-img,
    body:not(.fl-builder-edit) .slick-center .video-carousel-img .fl-photo-content,
    body:not(.fl-builder-edit) .slick-center .video-carousel-img img {
        width: 100%;
        height: 420px;
    }

    body:not(.fl-builder-edit) .video-carousel-box {
        margin-left: 0;
        /* margin-right: 16px; */
        flex-direction: column-reverse;
        padding: 16px;
        gap: 26px;
        border-radius: 16px;
        width: calc(100vw - 36px);
        max-width: 500px;
    }

    body:not(.fl-builder-edit) .row--video-carousel .video-carousel-slide {
        justify-content: flex-start;
    }

    .row--video-carousel .slider-header,
    .row--video-carousel .slider-ctl {
        gap: 8px;
    }

    body:not(.fl-builder-edit) button img {
        width: 48px;
        height: 48px;
    }
}

/*****************************/
/*  END   :: Video Carousel  */
/*****************************/

/**************************************/
/*  START :: Collage centring, mobile */
/**************************************/
/* BugHerd 495
   On mobile only two of the four floating collage images are shown, and each
   carries a horizontal nudge from the desktop composition: +5% on the top left
   and -11% on the bottom right. With the other two hidden there is nothing left
   for them to sit against, so they read as accidentally off-centre beside the
   donation widget. Zeroing only the horizontal part puts both on the centre
   line; the vertical offsets are the intended float and are kept.

   Scoped by class instead of editing the rules above, because
   .column--paralax-collage is also on Shop with Purpose and four template and
   dev pages, and the top left nudge is live on Shop with Purpose too.

   Same weight as the rules it overrides, (0,5,1), so it depends on sitting
   later in this file. Keep it below them. */
@media only screen and (max-width: 768px) {
    body:not(.fl-builder-edit) .collage-center--mobile .module--floating-image.top.left {
        transform: translateX(0) translateY(4%);
    }
    body:not(.fl-builder-edit) .collage-center--mobile .module--floating-image.bottom.right {
        transform: translateX(0) translateY(85%);
    }
}
/**************************************/
/*  END   :: Collage centring, mobile */
/**************************************/

/******************************/
/*  END   :: Images & Videos  */
/******************************/

/* BugHerd 484 / 517 - the Approach intro's sub-hero box kept a 556px
   min-height on phones, leaving ~505px of dead space before Solar Water
   Solutions. Scoped to the Approach node; the shared .row--sub-hero rule
   above still governs the Home page. Must stay after that rule. */
@media only screen and (max-width: 768px) {
    .fl-node-g53fkb21metw .fl-col > .fl-col-content,
    .fl-node-g53fkb21metw .fl-module-box {
        min-height: 360px;
    }
}