/********************/
/********************/
/** Rows & Modules **/
/** Animation      **/
/********************/
/********************/

/* start :: animation fix for stuttering fade-up opacity */
body:not(.fl-builder-edit) .fl-animation.fl-fade-up {
    opacity: 0;
}
body:not(.fl-builder-edit) .fl-animation.fl-fade-up.fl-animated {
    opacity: 1;
}
/* end :: animation fix for stuttering fade-up opacity */

/* border-radius :: version 2 */
body:not(.fl-builder-edit) .border-top-radius,
body:not(.fl-builder-edit) .border-top-radius--margin {
    position: relative;
    --border-radius: url('/wp-content/uploads/rounded-corner.svg');
    --border-radius-size: 30px;
}

body:not(.fl-builder-edit) .border-top-radius:before,
body:not(.fl-builder-edit) .border-top-radius:after {
    content: "";
    height: var(--border-radius-size);
    position: absolute;
    top:0;
    width: var(--border-radius-size);
    z-index: 1;

    background-color: currentColor;
        -webkit-mask: var(--border-radius) no-repeat center center;
    mask: var(--border-radius) no-repeat center center;
        -webkit-mask-size: contain;
    mask-size: contain;
}

body:not(.fl-builder-edit) .border-top-radius.left:before {
    left: 0;
}
body:not(.fl-builder-edit) .border-top-radius.right:after {
    right: 0;
    transform: rotate(90deg);
}
/* border-radius: alternate version with margin-top overlap */
body:not(.fl-builder-edit) .border-top-radius--margin {
    margin-top: calc(-1 * var(--border-radius-size));
    overflow: hidden;

    &.left{
        border-top-left-radius: var(--border-radius-size);
    }
    &.right{
        border-top-right-radius: var(--border-radius-size);  
    }

    &:before,
    &:after{
        display: none;
    }
}

/*clip path testing*/
:root {
    --clip-path-margin: 110px;
}
.clip-path--ellipse.youtube_pause > .fl-row-content-wrap {
    background-color: var(--ocean); /* fallback, before video / image loads */
}
body:not(.fl-builder-edit) .clip-path--ellipse {
    -webkit-clip-path: ellipse(110% 100% at 50% 0%);
    clip-path: ellipse(110% 100% at 50% 0%);

    width: 100%;
    overflow: hidden;

    margin-bottom: calc(-1 * var(--clip-path-margin));
    position: relative;
    z-index: 1;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* BugHerd 346 / 347 / 33 - will-change kept these huge hero rows
       permanently promoted to their own GPU layers, which is the likely
       source of the intermittent unpainted rectangles and pause-button edge
       glitch. The clip path never animates, so the hint bought nothing.
       translateZ and backface-visibility above stay: they were the original
       anti-stutter fix. */
    isolation: isolate;
}
/* rows directly following .clip-path--ellipse row */
body:not(.fl-builder-edit) .clip-path--ellipse + .fl-row > .fl-row-content-wrap {
    padding-top: calc(var(--clip-path-margin) + var(--content-padding-block));
}

/* BugHerd 430
   The ellipse hero pulls the next row up by --clip-path-margin, and the rule
   above adds that margin back on, so the space a visitor actually sees between
   the hero and the first section is exactly --content-padding-block. That token
   steps down to 44px at 992px and 36px at 768px. Mobile body type is 20px/32px,
   so 36px is roughly 1.1 line-heights, less than the gap between two lines of a
   paragraph, and the boundary stops reading as a section break.

   Below 992px this holds the visible gap at --Sizing-Units-L, the same 66px the
   token already gives on desktop, so the spacing is consistent across every
   breakpoint rather than shrinking where it is needed most. The value is taken
   from the existing scale, not a new number, and the row settings in Beaver
   Builder cannot do this because the rule above wins on specificity. */
@media only screen and (max-width: 992px) {
    body:not(.fl-builder-edit) .clip-path--ellipse + .fl-row > .fl-row-content-wrap {
        padding-top: calc(var(--clip-path-margin) + var(--Sizing-Units-L));
    }
}

body:not(.fl-builder-edit) .clip-path--ellipse--sibling {
    position: relative;
    z-index: 0;
}
/* body:not(.fl-builder-edit) .row--glow-background > .fl-row-content-wrap {
    background: 
        border-box var(--body) no-repeat fixed center -100px / cover, 
        var(--ocean) !important;
} */
body:not(.fl-builder-edit) .clip-path--ellipse--sibling.row--glow-background > .fl-row-content-wrap {
    background: 
        linear-gradient(179deg, #1A3242 0%, rgba(0, 0, 0, 0) 10% );
}

/* START :: glow row */
/* when page has a glow row, set background on body */
body:not(.fl-builder-edit):has(.row--glow-background) {
    background: 
        border-box var(--body) no-repeat fixed center -100px / cover, 
        var(--ocean) !important;
        /* background-color: transparent !important; */
}
/* when page has a glow row, set page-content as transparent so body is visible */
body:not(.fl-builder-edit):has(.row--glow-background) .fl-page-content {
    background-color: transparent;
}
/* when page has a glow row, set glow row as transparent so body is visible */
body:not(.fl-builder-edit) .row--glow-background > .fl-row-content-wrap {
    background: transparent !important;
}
/* END :: glow row */

/* as divider only */
body:not(.fl-builder-edit) .clip-path--ellipse.divider {
    clip-path: ellipse(52% 100% at 50% 0%);
    margin-bottom: calc(-1 * var(--clip-path-margin));
    position: relative;
    z-index: 1;
}
body:not(.fl-builder-edit) .clip-path--ellipse.divider.reversed {
    clip-path: ellipse(52% 100% at 50% 100%);
    margin-bottom: 0 !important;
    margin-top: calc(-1 * var(--clip-path-margin));
}
/* rows directly following .clip-path--ellipse.divider row */
body:not(.fl-builder-edit) .clip-path--ellipse.divider + .fl-row > .fl-row-content-wrap {
    padding-top: calc(var(--clip-path-margin));
}

/* background image w glow */
.background-image--glow .fl-row-content-wrap {
    background: 
        linear-gradient(180deg, #1A3242 0%, rgba(0, 0, 0, 0) 30% ),
        border-box var(--body) no-repeat fixed center -200px / cover, 
        var(--ocean) !important;
}
/* background glow that follows cursor */
.row--cursor-glow  {
    position: relative;
}
.row--cursor-glow .glow-mask {
    background: radial-gradient(circle, #C3F800 40%, #4ABFBF 40%, transparent 80%)!important;
    content: '';
    height: var(--mask-size);
    padding: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
    width: var(--mask-size);

    border-radius: 100%;
    /* background-image: none; */
    /* border: solid 2000px rgba(26, 50, 66, .5); */
    opacity: 0.45;
    filter: blur(75px);
    box-sizing: content-box;
    transition: height ease 0.3s, width ease 0.3s;
    /* position: absolute; */

    /* mask-image: clip-path: circle(50% at 50% 50%); */
    /* mask-image: radial-gradient(circle at center, black 50%, transparent 60%);
    mask-size: var(--mask-size, 380px);
    mask-repeat: no-repeat; */
    left: var(--mask-x, 0);
    top: var(--mask-y, 0);
    z-index:0;
}
body:not(.fl-builder-edit) .row--cursor-glow .above-glow {
    position: relative;
    z-index: 3;
}
/* background overlay for paralax row */
.background--gradient-overlay > .fl-row-content-wrap {
    & .fl-row-content {
        position: relative;
        z-index: 1;
    }
    &:before {
        background: 
            linear-gradient(
                180deg, rgba(26, 50, 66, 0.00) 0%,
                rgba(26, 50, 66, 0.59) 100%
            );   
        content: '';
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 0;
    }
}
/* body { */
main.fl-main-content {
    /* background: var(--body) no-repeat transparent center top !important; */
    background-image: url(/wp-content/uploads/body-placeholder.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    background-size: cover;
    background-attachment: fixed;
}

/* gradient text*/
div.energy-gradient > div {
    background: var(--linear-gradient) !important;
}

.fl-col-content:has(.fl-module-heading.energy-gradient),
.fl-col-content:has(.fl-module-rich-text.energy-gradient){
    display: block; /* removes flex, enables gradient text to be inline-block */
}
.fl-module-heading.energy-gradient,
.fl-module-rich-text.energy-gradient {
    background: var(--text-gradient) !important;
    background-clip: text !important;
        -webkit-background-clip: text !important; */
        -webkit-text-fill-color: transparent;
    color: transparent !important;
    display: inline-block;
    width: auto;

    span { color: var(--white) !important;}
    p { color: transparent !important;}

    &.white {
        --text-gradient: var(--linear-gradient);
    }
}

/*************************************/
/*  START :: Button Shine / Shimmer  */
/*************************************/

@keyframes slide {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}
/* just glow */
.glow a {
    --glow-color: var(--btn-color);
    box-shadow: 0 0 0 0 hsl(from var(--glow-color) h s l /.5);
    position: relative;
    transition: box-shadow 800ms ease-in-out, transform .25s ease-in-out !important;
}
.glow a:hover {
    box-shadow: 0 0 34px 0 hsl(from var(--glow-color) h s l /.75);
    transition: box-shadow 300ms ease-in-out, transform .25s ease-in-out !important;
}

/* shine */
.shine a {
    /* --btn-color: #4ABFBF; */
    --glow-color: var(--btn-color);

    overflow: hidden;
    box-shadow: 0 0 0 0 hsl(from var(--glow-color) h s l /.5);
    position: relative;
    transition: box-shadow 800ms ease-in-out, transform .25s ease-in-out !important;

    /* Add a white glow near the top of the button,
    to make the button feel a bit more 3D and gel-like: */
    /* &::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 16px;
        right: 16px;
        height: 10px;
        border-radius: 100px 100px 0 0;
        border-top: 4px solid white;
        filter: blur(4px);
        opacity: 0.625;
    } */
}
.shine a:hover {
    box-shadow: 0 0 44px 0 hsl(from var(--glow-color) h s l /.75);
    transition: box-shadow 300ms ease-in-out, transform .25s ease-in-out !important;
}
    
.shimmer {
    animation: slide both ease-in-out;
    background: linear-gradient(
      to right,
      transparent,
      hsl(from var(--btn-color) h 100% 90% / .9),
      transparent
    );
    height: 100%;
    inset: 0;
    opacity: .25;
    pointer-events: none;
    position: absolute;
    width: 100%;
    box-shadow: 0 0 44px 0 var(--btn-color);

}
 


/*************************************/
/*  END   :: Button Shine / Shimmer  */
/*************************************/


/************************************/
/*  START :: SVG Lines, foundation  */
/************************************/
.line--row {
    --animation-line-color: var(--sweet-water);
}
.line--row,
.line--column {
    position: relative !important;
}
.position-via-row.line--column {
    position: absolute !important;
}
.line--module {
    padding: 0 !important;
    pointer-events: none;
    position: absolute;
}
.line--svg {
    position: absolute;
}
.line--ghost {
    opacity: 0.15;
}
.line--path {
    /* --animation-line-color: var(--sweet-water); */
    fill: none;
    /* stroke: var(--animation-line-color); */
    /* stroke-dasharray: 6 6; */
    stroke-linecap: round;
    stroke-width: 3px;    
    visibility: hidden;
}
.line--max-extender {
    display: none;
}

@keyframes dash {
    to { stroke-dashoffset: -5; }
}
@keyframes dash-rev {
    to { stroke-dashoffset: 5; }
}
@keyframes draw-rev-stay {
    to { stroke-dashoffset: 0; }
}
@keyframes draw {
    to { stroke-dashoffset: -5; }
}
@keyframes draw-rev {
    to { stroke-dashoffset: 5; }
}
@keyframes draw--old {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0.5;
    }
}
@keyframes draw-on {
    0% { stroke-dashoffset: 1; }
    25% { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 2; }
}
/************************************/
/*  END   :: SVG Lines, foundation  */
/************************************/

/* START :: home page */

 /* START :: straight line pre donate form */
.line--module--start-straight {
    width: 3px;
    height: 262px;
    inset: calc(50% - (3px / 2));
    top: 100px;
}
/* DESKTOP LARGE, and down */
@media screen and (max-width: 1366px) {
    .line--module--start-straight {
        inset: calc(50% - (3px / 2) + 38px);
        top: 100px;
    }
}
/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .line--module--start-straight {
        inset: calc(50% - (3px / 2));
        top: 25px;
    }
}
/* MOBILE, and down */
@media only screen and (max-width: 768px) {
    .line--module--start-straight {
        top: -60px !important;
    }
}
/* END :: straight line pre donate form*/
/* START :: curved line post donate form */
.column--paralax-collage > .fl-col-content {
    margin-bottom: 320px;
}
.row--homepage.row--card-carousel .column--card-carousel.column--card-carousel-title {
    float: none;
    padding-left: 0;
}
.column--card-carousel-title > .fl-col-content {
    margin-top: 66px;
}
.line--module--start-curved {
    /* width: 608px;
    height: 600px; */
    right: calc(50% - 2px); /* minus width of svg (usually halved, but aligning w title)*/
    bottom: 0;
}
.row--homepage.clip-path--ellipse--sibling > .fl-row-content-wrap {
    padding-bottom: 0;
}
.row--homepage.new-carousel-black > .fl-row-content-wrap {
    padding-bottom: 43px;
    padding-top: 52px;
}
/* DESKTOP LARGE, and down */
@media screen and (max-width: 1366px) {
    .row--homepage.row--card-carousel .column--card-carousel.column--card-carousel-title {
        padding-inline: var(--content-padding);
    }
    .column--paralax-collage > .fl-col-content {
        margin-bottom: 450px;
    }
    .line--module--start-curved {
        right: calc(50% - 66px);
    }
}
/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .row--homepage.new-carousel-black > .fl-row-content-wrap {
        padding-top: 38px;
    }
    .line--module--start-curved {
        right: calc(50% + 38px);
    }
    .column--card-carousel-title > .fl-col-content {
        margin-top: 36px;
    }
}
/* MOBILE, and down */
@media only screen and (max-width: 768px) {
    .row--homepage.new-carousel-black > .fl-row-content-wrap {
        padding-bottom: 36px;
        padding-top: 21px;
    }
    .line--module--start-curved {
        right: calc(40px);
    }
    .column--card-carousel-title > .fl-col-content {
        margin-top: 18px !important;
    }
}
/* END :: curved line post donate form */

/* START :: parallax stats */
.row--parallax-stats.row--svg-extender .fl-col-group {
    position: relative;
}
.row--parallax-stats.row--svg-extender .fl-col-group:before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    /* BugHerd 461 - the fade-to-transparent tail ended exactly where the
       curved segment takes over, reading as a break in the line. Solid to
       the end; the curve now starts drawing earlier too (animation.js). */
    background: linear-gradient(180deg, 
        #FF8962 100%
    );
}
.row--parallax-stats .fl-number .fl-number-text .fl-number-string,
.row--parallax-stats .fl-number .fl-number-text .fl-number-string span,
.row--parallax-stats .fl-number-after-text,
.row--parallax-stats .fl-number-before-text  {
    font-size: 116px;
    font-size: 7.25rem;
    font-weight: 700;
    line-height: 126px;
    line-height: 7.88rem;
}

/* DESKTOP LARGE, and down */
@media screen and (max-width: 1366px) {
    .row--parallax-stats > .fl-row-content-wrap {
        background-size: 115%;
    }
    .row--parallax-stats .column--parallax-stats > .fl-col-content,
    .row--parallax-stats .box--parallax-stats {
        min-height: 625px;
    }
    .row--parallax-stats .box--parallax-stats {
        justify-content: center;
        padding-bottom: 0;
    }
    .row--parallax-stats .fl-number .fl-number-text .fl-number-string,
    .row--parallax-stats .fl-number .fl-number-text .fl-number-string span,
    .row--parallax-stats .fl-number-after-text,
    .row--parallax-stats .fl-number-before-text  {
        font-size: 96px;
        font-size: 6rem;
        font-weight: 700;
    }
}
/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .row--parallax-stats > .fl-row-content-wrap {
        background-size: 140%;
    }
    .row--parallax-stats .column--parallax-stats > .fl-col-content,
    .row--parallax-stats .box--parallax-stats {
        min-height: 484px;
    }
    .row--parallax-stats.row--svg-extender .fl-col-group:before {
        display: none;
    }
    .row--parallax-stats .fl-number .fl-number-text .fl-number-string,
    .row--parallax-stats .fl-number .fl-number-text .fl-number-string span,
    .row--parallax-stats .fl-number-after-text,
    .row--parallax-stats .fl-number-before-text  {
        font-size: 64px;
        font-size: 4rem;
    }
}
/* MOBILE, only */
@media only screen and (max-width: 768px) {
    .row--parallax-stats > .fl-row-content-wrap {
        background-size: 205%;
    }
    .row--parallax-stats .fl-number .fl-number-text .fl-number-string,
    .row--parallax-stats .fl-number .fl-number-text .fl-number-string span,
    .row--parallax-stats .fl-number-after-text,
    .row--parallax-stats .fl-number-before-text  {
        font-size: 50px;
        font-size: 3.13rem;
        font-weight: 500;
        line-height: 50px;
        line-height: 3.13rem;
    }
    .row--parallax-stats .box--parallax-stats {
        justify-content: flex-end;
        padding-bottom: 44px;
    }   
    .row--parallax-stats .svg--droplet {
        margin-bottom: 125px;
        margin-top: 100px;
    }
}
/* END :: parallax stats */
/* START :: animation scroll */
.row--animation-scroll {
    
}
.line--module--what-curved {
    /* width: 830px;
    height: 4306px; */
    left: 0;
    bottom: -6px;
}
/* BB "LARGE" DESKTOP, and down */
@media only screen and (max-width: 1366px) and (min-width: 993px){
    .row--parallax-stats,
    .row--animation-scroll {
        --content-padding: 50px;
    }
}

/* END :: animation scroll */
/* start :: post wedge */
.row--post-wedge:not(.row--homepage) >.fl-row-content-wrap >.fl-row-content {
    /* prevent svg from extending beyond row height */
    overflow: hidden; 
}
.line--module--wedge-straight {
    width: 4px;
    height: 646px;
    right: 0;
    top: 0;
}
/* TABLET, and down */
@media only screen and (max-width: 992px) {
    .row--post-wedge.row--homepage >.fl-row-content-wrap {
        padding-bottom: 132px;
    }
    .line--module--wedge-straight {
        display: none;
    }
}
/* end :: post wedge */
/* footer */
footer .line--wrapper {
    gap: 0 0;
    display: grid;
    grid-template-areas:
        'left top'
        'left bottom';
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    position: relative;
    top: calc(-1 * (var(--footer-padding-top) + var(--footer-padding-extra))); /* not just the footer padding, svg is pushed up in design*/
    width: 100%;
}
@media only screen and (min-width: 1366px) {
    footer .line--wrapper {
        grid-template-columns: 1.18fr 1fr;
    }
}
/* BugHerd #259 - Kate asked for the Tour the Tech hotspot module to fade in like the other
   sections. Its host column is switched to an opacity-only fade at runtime (see
   givepower-hotspot-map.js) so the section can animate without the transform that made Safari
   hit-test stale dot positions. Beaver Builder only enqueues the animation CSS a layout
   declares, and this page declares fl-fade-up but NOT fl-fade-in, so without a keyframe here
   the section snapped from hidden straight to visible with no fade at all. Own keyframe name
   so it cannot collide with BB's copy on pages that do load it; longhand so BB's inline
   animation-duration still wins where a module sets one. */
.fl-animated.fl-fade-in {
    animation-name: gp-fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

@keyframes gp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

footer .line--column {
    grid-area: left;
    width: 100%;
}
.line--module--footer-curved {
    right: .5px;
    top:0;
}

/* 2026 footer - Vector 12 (Figma 6025:19011). Placed here rather than in interface.css
   because this file is enqueued AFTER it, so at equal specificity these two selectors win on
   source order and the same rules written there did nothing (measured: the line did not move).

   Drawn in the 1366 x 870 frame:
       box  x 465 .. 737   y 0 .. 335    vertical at x737 from the frame's top edge to y235,
       then a 100-radius quarter turn to (637,335) and a tail left to x465.
   So the line starts at the very top of the footer and its tail crosses the Join The Charge
   heading, which the frame puts at y306..362.

   The `top` above was tuned against the OLD 461-tall line and lifts the drawn 335 clear of
   the frame. Derived rather than guessed at, after a first attempt overshot: `.line--wrapper`
   is the first child of `.footer_row_wrapper`, so its natural top is the wrapper's top plus
   `--footer-padding-top`. Measuring both ends gives wrapper 5298 and padding 206, so natural
   is 5504; the frame's top is 5273 - the heading measures 5579 against a drawn 306, and the
   columns 5876 against a drawn 599, which agree. 5273 - 5504 = -231.

   Desktop only: the 1366 / 992 / 768 variants ship their own SVGs at their own sizes and
   keep the existing offset. */
/* HISTORY - the footer line's scroll reveal, retired and then restored.
   The SVG in footer.php is Figma's exact path - `M272 0V235C272 290.228 227.228 335 172
   335H0` - measuring 272 x 335. It used to render as only the vertical and the head of the
   curve, because the reveal's scroll range was tied to the element's own height and the
   2026 footer shortened the artwork from 466 to 342, leaving too little range to reach the
   horizontal tail. The reveal was retired at that point: this rule pinned the stroke
   complete with !important, because animation.js writes stroke-dashoffset inline.

   RESTORED 16 Aug (Leshan): "the footer line, make it animate when we scroll through it."
   Safe to restore now because the underlying fault was fixed separately - the trigger's
   edges were re-anchored to the element's own top and bottom (`top bottom` / `bottom 85%`
   in animation.js), which does not shrink with the artwork and gives roughly 485px of
   range on a laptop, so the draw completes well before the page end. The pin was the last
   thing still holding the line at full length, and it had no media query, so it was
   defeating the mobile branch too - which had never stopped asking for the reveal.

   The two halves that had to move together: this rule is gone, and `drawSVG` in the
   desktop branch of animation.js goes back from "0 100%" to "0". Changing only one of them
   leaves the line either permanently drawn or permanently invisible. */

@media only screen and (min-width: 993px) {
    /* Was a hardcoded `-231px`, derived by measuring the OLD footer (the derivation is in the
       comment above: wrapper 5298 + padding 206 = natural 5504, frame top 5273, so -231). That
       constant stopped landing when the arch was rebuilt on 17 Aug 2026 as a painted background
       rather than a mask, which moved the apex to sit exactly on the footer's box top. Reported
       the same day: a yellow line poking up out of the arch into the cream band.

       Measured against production, the -231 put the line 25px ABOVE the footer's top edge on the
       1367+ variant and 37px BELOW it on the 993..1366 variant, so the two breakpoints were wrong
       in opposite directions and no single constant could fix both.

       `-1 * --footer-padding-top` lands the line exactly on the footer's top edge, which is where
       the Figma puts it - "Vector 12" starts at y0 of the frame whose top IS the arch apex.
       Expressed in the variable the footer already defines rather than a new magic number, so it
       tracks the padding instead of drifting from it the next time the footer moves.
       Verified 0.0px at 993, 1100, 1200, 1366, 1367, 1440, 1600, 1727 and 1920, both variants. */
    footer .line--wrapper {
        top: calc(-1 * var(--footer-padding-top));
    }
    /* NO horizontal shift. The footer line is the CONTINUATION of the decorative line that
       runs down through the page content above it - on the home page that is
       `.line--module--wedge-straight` at x730..734, visible centre ~732 - and the two have to
       meet at the footer's edge or the line visibly breaks in half.
       The Figma draws the footer's vertical at x737, and a literal 737 was tried: it moved
       the footer half 5px right of the page half and severed the join, which is what Leshan
       spotted. The original .5px puts the centre at ~732 and connects.
       The 5px belongs to the PAGE line, which sits at 732 where the design says 737 - and
       that line lives on pages outside the two builds in scope, so it is not ours to move.
       Raise it rather than "correcting" the footer to match a frame it has to join. */
}

    /* BB XL DESKTOP, and up */
    @media only screen and (min-width: 1368px){
    }
    /* BB "LARGE" DESKTOP, and down */
    @media only screen and (max-width: 1366px) {
    
    }
    /* TABLET, and down */
    @media only screen and (max-width: 992px) {
        footer .line--column {
            grid-area: top;
        }
        .line--module--footer-curved {
            left: 0;
            right: unset;
        }
    }
    /* MOBILE, only */
    @media only screen and (max-width: 768px) {
        /* BugHerd #504 - Brie: "Can we have this throughline come from the right and point to
           Join The Charge?" The grid above is 'left top' / 'left bottom', so 'left' is the
           left-hand column and 'top' is the right-hand one. Mobile was explicitly putting the
           line back in the left column, which is why it ran down the left of the footer while
           desktop runs down the right. Placing it in the right column and anchoring the module
           to that column's right edge reproduces the desktop relationship: the line descends on
           the right and its tail sweeps left into the Join The Charge heading. */
        footer .line--column {
            grid-area: top;
        }
        .line--module--footer-curved {
            left: unset;
            right: .5px;
        }
    }


/* video carousel */
/* start: z-index fix, line behind carousel */
.video-carousel-slider {
    z-index: 1;
    position: relative;
}
/* positioning relative to row, not column */
.row--video-carousel.line--row .line--column {
    position: absolute !important;
    top: 0;
    z-index: 0;
}
body:not(.fl-builder-edit) .row--video-carousel .video-carousel-slide > .fl-col-content::before {
    background: var(--ocean);
    content: '';
    inset: 0;
    position: absolute;
    /* z-index: 0; */
}   

/* original positioning */
.position-via-row {
    opacity: 0;
    /* transition: opacity 1000ms ease-in-out;
    transition-delay: 500ms; */
}
/* positioning after moved via js */
.fl-row > .position-via-row {
    opacity: 1;
}

/* BB XL DESKTOP, and up */
@media only screen and (min-width: 1367px){
    .row--video-carousel.line--row .line--column {
        left: 0;
    }
    .line--module--video-carousel {
        height: 433px;
        margin-left: auto;
        margin-right: auto;
        position: relative;  
        width: 1222px;
    }
    
}
/* BB "LARGE" DESKTOP, and down */
@media only screen and (max-width: 1366px) {
    .row--video-carousel.line--row .line--column {
        left: var(--content-padding);
    }
    /* width: 868px;
height: 422px; */
    
}
/* TABLET, and down */
@media only screen and (max-width: 992px) {

}
/* MOBILE, only */
@media only screen and (max-width: 768px) {
    /* BugHerd 501. Brie reported "an extra few pixels of dead wing on the right side" on
       Android. It is this decorative line: the mobile SVG carries a hard width="342" and
       nothing constrained it, while the module sits 24px from the left edge, so it ends at
       366px. That fits a 375px iPhone but not a 360px Android, the most common Android
       width, where it hangs 6px past the viewport (46px at 320px).

       It was invisible in testing because html,body carry `overflow-x: clip`, which hides
       the overflow instead of removing it. `clip` needs Chrome 90+ / Safari 16+; on older
       Android browsers it falls back to `visible` and the page scrolls, which is exactly
       what Brie saw and why it looked Android-only.

       Capping at viewport-minus-24px keeps the 24px left inset and lands the right edge
       flush with the viewport. It is a no-op at 375px and above (351px cap vs 342px
       drawn), so nothing changes on iPhone or on the sizes already signed off. The SVG has
       a viewBox, so height:auto scales it without distortion and the draw-me path
       animation is unaffected. Only .line--module--video-carousel is targeted: of the 45
       fixed-width inline SVGs on the site, these 5 are the only ones that overflow. */
    .line--module--video-carousel,
    .line--module--video-carousel svg {
        max-width: calc(var(--viewportWidth) - 24px);
        height: auto;
    }
}

/* hero left */
.line--column--hero-left {
    top: 0;
    right: 40px;
}
.line--column--hero-left .line--module {
    top: 0;
    right: 0;
}

/* BB "LARGE" DESKTOP, and down */
@media only screen and (max-width: 1366px) {
    .line--column--hero-left {
        top: 0;
        right: 30px;
    }
}

/* hero center */
.line--column--hero-center {
    top: 363px;
    right: 40px;
}
.line--column--hero-center .line--module {
    top: 0;
    right: 0;
}

/* hero donate */
.row--hero-donate .html--donate {
    z-index: 1;
}
.line--column--hero-donate {
    bottom: 0;
    left: 50%;
    z-index: 0;
}
.line--column--hero-donate .line--module {
    bottom: -6px;
    left: 74px;
}

@media only screen and (min-width: 1367px) {
    .row--hero-donate .html--donate {
       max-width: 490px;
    }
}
/* BB "LARGE" DESKTOP, and down */
@media only screen and (max-width: 1366px) {
    .row--hero-donate .html--donate {
        flex-basis: 400px;
        flex-grow: 0;
        flex-shrink: 0;
        max-width: 400px;
    }
    .line--column--hero-donate {
        left: unset;
        right: 0;
    }
    .line--column--hero-donate .line--module {
        left: unset;
        right: calc(400px + var(--content-padding));
    }
}

/***********************************************/
/*  START :: Donate hero curve, mobile         */
/***********************************************/
/* BugHerd 489, 505, 522

   The ellipse clip ties its vertical radius to the row's own height, so how
   steep the curve reads depends entirely on the row's aspect ratio. On the two
   donate heroes the Donately widget stacks below the copy on a phone instead of
   sitting beside it, which roughly triples the row height: 390 x 1526 against
   1440 x 1065. The same 110% radius then produces a 61 degree edge and a 167px
   sag, which is what three separate tickets describe as pointy, wonky and an
   aggressive dip.

   Fixing the radius to a viewport multiple decouples it from row height. At
   390px, 250vw resolves to 975px, giving a 17.7 degree edge against desktop's
   18.9 degree - so this restores the desktop proportion rather than inventing a
   new one. 250vw is the theme's own mobile flattening value, already used for
   the footer arc at css/interface.css:2041.

   Scoped to .row--hero-donate deliberately. .clip-path--ellipse alone is on 43
   published layouts and must never be changed globally; row--hero-donate is on
   five, of which the two live pages are exactly the ones ticketed. */
@media only screen and (max-width: 768px) {
    body:not(.fl-builder-edit) .row--hero-donate.clip-path--ellipse {
        -webkit-clip-path: ellipse(250vw 100% at 50% 0%);
        clip-path: ellipse(250vw 100% at 50% 0%);
    }
}
/***********************************************/
/*  END   :: Donate hero curve, mobile         */
/***********************************************/

/* BugHerd 577 - on wide screens the Shop page's curved intro line ran
   through the heading, copy and button (the straight segment already stops
   above them). Trim the top of the curve below the button; 305px keeps the
   visible start 16px under the button at 1440-2560w. Scoped to the Shop
   row, the Home page relies on the full-height line. */
@media only screen and (min-width: 1367px) {
    .fl-node-y1zpi7nwk894 .line--module--start-curved {
        clip-path: inset(305px 0 0 0);
    }
}