/* Ported from public/caring4humanitarians-home.css by build/extract-stage-css.mjs.
   Only the composed sections (#tensions stage, #whirlwind, video cards): layered
   absolute positioning that Elementor has no control for. Do not edit by hand —
   re-run the script instead. */

/* Wellbeing — immersive emotional section */
.wellbeing-section {
    position: relative;
    width: 100%;
    overflow: visible;
    padding: 0;
    background: #050505;
}
.wellbeing-stage {
    position: relative;
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    background-image: var(--image-problem-bg);
    background-size: cover;
    background-position: var(--image-problem-position);
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1025px) {
.wellbeing-section { min-height: 0; }
.wellbeing-stage {
        /* Grow with composition — never clamp to viewport height. */
        min-height: calc(100dvh - var(--nav-height));
    }
.wellbeing-content {
        box-sizing: border-box;
        align-content: center;
        max-height: none;
        transform: none;
    }
}
.wellbeing-section .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 109%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    z-index: 0;
}
.wellbeing-section .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}
.wellbeing-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
.wellbeing-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.wellbeing-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
.wellbeing-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 6rem 2rem;
    display: grid;
    grid-template-columns: 1fr 320px 1fr;
    grid-template-rows: auto auto auto;
    gap: 3rem 2.5rem;
    align-items: center;
    justify-items: center;
    color: #fff;
}
.wellbeing-content > h1,
.wellbeing-content > h2,
.wellbeing-content > h3,
.wellbeing-content > h4,
.wellbeing-content > h5,
.wellbeing-content > h6,
.wellbeing-content > p {color: #fff;}
@media (min-width: 1025px) {
.wellbeing-content {
        gap: 0.45rem 1.75rem;
        /* Balanced inset — large top-only padding was clipping the bottom card. */
        padding: clamp(0.75rem, 1.8vh, 1.5rem) 1.75rem;
        grid-template-columns: 1fr minmax(200px, 260px) 1fr;
        /* Room for ~2× side cards when the viewport is wide enough. */
        max-width: min(100%, 1500px);
    }
.wellbeing-header h2 {
        margin-bottom: 0.5rem;
    }
.wellbeing-header h2 > h1,
.wellbeing-header h2 > h2,
.wellbeing-header h2 > h3,
.wellbeing-header h2 > h4,
.wellbeing-header h2 > h5,
.wellbeing-header h2 > h6,
.wellbeing-header h2 > p {}
.wellbeing-subtext {
        line-height: 1.4;
        margin-bottom: 0.85rem;
    }
.wellbeing-subtext > h1,
.wellbeing-subtext > h2,
.wellbeing-subtext > h3,
.wellbeing-subtext > h4,
.wellbeing-subtext > h5,
.wellbeing-subtext > h6,
.wellbeing-subtext > p {line-height: 1.4}
.wellbeing-feature-quote {
        padding: 0.85rem 0;
        margin-bottom: 0.85rem;
    }
.wellbeing-feature-quote .feature-quote-text {
        margin-bottom: 0.45rem;
    }
.wellbeing-feature-quote .feature-quote-text > h1,
.wellbeing-feature-quote .feature-quote-text > h2,
.wellbeing-feature-quote .feature-quote-text > h3,
.wellbeing-feature-quote .feature-quote-text > h4,
.wellbeing-feature-quote .feature-quote-text > h5,
.wellbeing-feature-quote .feature-quote-text > h6,
.wellbeing-feature-quote .feature-quote-text > p {}
.wellbeing-feature-quote .feature-quote-desc {
        line-height: 1.4;
    }
.wellbeing-feature-quote .feature-quote-desc > h1,
.wellbeing-feature-quote .feature-quote-desc > h2,
.wellbeing-feature-quote .feature-quote-desc > h3,
.wellbeing-feature-quote .feature-quote-desc > h4,
.wellbeing-feature-quote .feature-quote-desc > h5,
.wellbeing-feature-quote .feature-quote-desc > h6,
.wellbeing-feature-quote .feature-quote-desc > p {line-height: 1.4}
.wellbeing-card {
        padding: 0.85rem 1.1rem 1rem;
        max-width: 320px;
    }
.wellbeing-left,
.wellbeing-right {
        width: 100%;
        max-width: 640px;
    }
.wellbeing-bottom {
        max-width: 640px;
    }
.wellbeing-card h3 {
        margin-bottom: 0.5rem;
    }
.wellbeing-card h3 > h1,
.wellbeing-card h3 > h2,
.wellbeing-card h3 > h3,
.wellbeing-card h3 > h4,
.wellbeing-card h3 > h5,
.wellbeing-card h3 > h6,
.wellbeing-card h3 > p {}
.wellbeing-card p {
        line-height: 1.4;
    }
.wellbeing-card p > h1,
.wellbeing-card p > h2,
.wellbeing-card p > h3,
.wellbeing-card p > h4,
.wellbeing-card p > h5,
.wellbeing-card p > h6,
.wellbeing-card p > p {line-height: 1.4}
.presence-circle {
        width: 8rem;
        height: 8rem;
    }
.presence-circle span {
        letter-spacing: 0.18em;
    }
.presence-circle span > h1,
.presence-circle span > h2,
.presence-circle span > h3,
.presence-circle span > h4,
.presence-circle span > h5,
.presence-circle span > h6,
.presence-circle span > p {letter-spacing: 0.18em}
.wellbeing-bottom {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }
.wellbeing-content {
        --wellbeing-arm: 9rem;
    }
}
.wellbeing-header {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.wellbeing-header > h1,
.wellbeing-header > h2,
.wellbeing-header > h3,
.wellbeing-header > h4,
.wellbeing-header > h5,
.wellbeing-header > h6,
.wellbeing-header > p {text-align: center;}
.wellbeing-header h2 {
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-bottom: 0.8rem;
}
.wellbeing-header h2 > h1,
.wellbeing-header h2 > h2,
.wellbeing-header h2 > h3,
.wellbeing-header h2 > h4,
.wellbeing-header h2 > h5,
.wellbeing-header h2 > h6,
.wellbeing-header h2 > p {color: #fff;font-weight: 400;letter-spacing: 0.01em}
.wellbeing-subtext {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.45;
    margin: 0 auto 1.75rem;
    max-width: 860px;
}
.wellbeing-subtext > h1,
.wellbeing-subtext > h2,
.wellbeing-subtext > h3,
.wellbeing-subtext > h4,
.wellbeing-subtext > h5,
.wellbeing-subtext > h6,
.wellbeing-subtext > p {color: rgba(255, 255, 255, 0.76);line-height: 1.45}
.wellbeing-feature-quote {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 1.5rem 0;
    margin: 0 auto 1.75rem;
    max-width: 620px;
}
.wellbeing-feature-quote .feature-quote-text {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    line-height: 1.34;
    margin: 0 0 0.65rem;
    max-width: none;
}
.wellbeing-feature-quote .feature-quote-text > h1,
.wellbeing-feature-quote .feature-quote-text > h2,
.wellbeing-feature-quote .feature-quote-text > h3,
.wellbeing-feature-quote .feature-quote-text > h4,
.wellbeing-feature-quote .feature-quote-text > h5,
.wellbeing-feature-quote .feature-quote-text > h6,
.wellbeing-feature-quote .feature-quote-text > p {color: #fff;font-family: Georgia, "Times New Roman", serif;font-style: italic;line-height: 1.34}
.wellbeing-feature-quote .feature-quote-desc {
    color: rgba(255, 255, 255, 0.72);
    font-style: italic;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 620px;
}
.wellbeing-feature-quote .feature-quote-desc > h1,
.wellbeing-feature-quote .feature-quote-desc > h2,
.wellbeing-feature-quote .feature-quote-desc > h3,
.wellbeing-feature-quote .feature-quote-desc > h4,
.wellbeing-feature-quote .feature-quote-desc > h5,
.wellbeing-feature-quote .feature-quote-desc > h6,
.wellbeing-feature-quote .feature-quote-desc > p {color: rgba(255, 255, 255, 0.72);font-style: italic;line-height: 1.45}
.wellbeing-header .divider {
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
    margin: 0 auto;
}
.wellbeing-card {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1.65rem 1.9rem 1.9rem;
    max-width: 360px;
}
.wellbeing-card h3 {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.28;
    margin-bottom: 1rem;
}
.wellbeing-card h3 > h1,
.wellbeing-card h3 > h2,
.wellbeing-card h3 > h3,
.wellbeing-card h3 > h4,
.wellbeing-card h3 > h5,
.wellbeing-card h3 > h6,
.wellbeing-card h3 > p {color: #fff;font-family: Georgia, "Times New Roman", serif;font-weight: 500;line-height: 1.28}
.wellbeing-card p {
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
    margin: 0;
    line-height: 1.45;
    max-width: none;
}
.wellbeing-card p > h1,
.wellbeing-card p > h2,
.wellbeing-card p > h3,
.wellbeing-card p > h4,
.wellbeing-card p > h5,
.wellbeing-card p > h6,
.wellbeing-card p > p {color: rgba(255, 255, 255, 0.78);font-style: italic;line-height: 1.45}
.wellbeing-left {
    grid-column: 1;
    grid-row: 2;
    text-align: right;
    border-right: none;
    padding-right: 1.75rem;
    padding-left: 0;
}
.wellbeing-left > h1,
.wellbeing-left > h2,
.wellbeing-left > h3,
.wellbeing-left > h4,
.wellbeing-left > h5,
.wellbeing-left > h6,
.wellbeing-left > p {text-align: right;}
.wellbeing-right {
    grid-column: 3;
    grid-row: 2;
    text-align: left;
    border-left: none;
    padding-left: 1.75rem;
    padding-right: 0;
}
.wellbeing-right > h1,
.wellbeing-right > h2,
.wellbeing-right > h3,
.wellbeing-right > h4,
.wellbeing-right > h5,
.wellbeing-right > h6,
.wellbeing-right > p {text-align: left;}
.wellbeing-center {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.wellbeing-bottom {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    width: 100%;
    max-width: 720px;
    text-align: center;
    border-top: none;
    border-left: none;
    padding-top: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}
.wellbeing-bottom > h1,
.wellbeing-bottom > h2,
.wellbeing-bottom > h3,
.wellbeing-bottom > h4,
.wellbeing-bottom > h5,
.wellbeing-bottom > h6,
.wellbeing-bottom > p {text-align: center;}
.presence-circle {
    width: 12rem;
    height: 12rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: presencePulse 4s ease-in-out infinite;
}
.presence-circle span {
    font-size: 0.64rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.presence-circle span > h1,
.presence-circle span > h2,
.presence-circle span > h3,
.presence-circle span > h4,
.presence-circle span > h5,
.presence-circle span > h6,
.presence-circle span > p {font-size: 0.64rem;font-weight: 500;text-transform: uppercase;letter-spacing: 0.22em;color: rgba(255, 255, 255, 0.86);text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);}
@media (max-width: 1024px) {
.wellbeing-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 2.5rem;
        padding: 4rem 1.5rem;
    }
.wellbeing-header { grid-column: 1; grid-row: 1; }
.wellbeing-left {
        grid-column: 1; grid-row: 2;
        text-align: center;
        border-right: none;
        border-left: 2px solid rgba(255, 255, 255, 0.7);
        padding-right: 0;
        padding-left: 1.25rem;
    }
.wellbeing-left > h1,
.wellbeing-left > h2,
.wellbeing-left > h3,
.wellbeing-left > h4,
.wellbeing-left > h5,
.wellbeing-left > h6,
.wellbeing-left > p {text-align: center;}
.wellbeing-center { grid-column: 1; grid-row: 3; }
.presence-circle { width: 9rem; height: 9rem; }
.wellbeing-right {
        grid-column: 1; grid-row: 4;
        text-align: center;
        padding-left: 1.25rem;
    }
.wellbeing-right > h1,
.wellbeing-right > h2,
.wellbeing-right > h3,
.wellbeing-right > h4,
.wellbeing-right > h5,
.wellbeing-right > h6,
.wellbeing-right > p {text-align: center;}
.wellbeing-bottom {
        grid-column: 1; grid-row: 5;
        border-top: none;
        border-left: 2px solid rgba(255, 255, 255, 0.7);
        max-width: none;
        padding-top: 0;
        padding-left: 1.25rem;
        padding-bottom: 1.25rem;
    }
}
@media (max-width: 480px) {
.wellbeing-content { padding: 3rem 1.25rem; }
.wellbeing-card { padding: 1.15rem 1.25rem 1.45rem; }
.presence-circle { width: 8rem; height: 8rem; }
}
/* Whirlwind: Vimeo background + typewriter (desktop only) */
.whirlwind-section {
    display: none;
}
@media (min-width: 1025px) {
.whirlwind-section {
        position: relative;
        width: 100%;
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #000;
    }
.whirlwind-video {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
.whirlwind-video iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 177.78vh;
        min-width: 100%;
        height: 56.25vw;
        min-height: 100%;
        transform: translate(-50%, -50%);
        border: 0;
        pointer-events: none;
    }
.whirlwind-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1;
        pointer-events: none;
    }
.whirlwind-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 80px 32px;
        max-width: 1100px;
    }
.whirlwind-content > h1,
.whirlwind-content > h2,
.whirlwind-content > h3,
.whirlwind-content > h4,
.whirlwind-content > h5,
.whirlwind-content > h6,
.whirlwind-content > p {text-align: center;}
.whirlwind-headline {
        color: white;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 400;
        font-size: clamp(2.5rem, 6vw, 4.75rem);
        line-height: 1.12;
        letter-spacing: -0.005em;
        margin: 0;
    }
.whirlwind-headline > h1,
.whirlwind-headline > h2,
.whirlwind-headline > h3,
.whirlwind-headline > h4,
.whirlwind-headline > h5,
.whirlwind-headline > h6,
.whirlwind-headline > p {color: white;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: clamp(2.5rem, 6vw, 4.75rem);line-height: 1.12;letter-spacing: -0.005em;}
.whirlwind-headline .before-written {
        display: block;
    }
.whirlwind-headline .written-lines {
        font-style: italic;
        opacity: 0.92;
    }
.whirlwind-headline .written-lines > h1,
.whirlwind-headline .written-lines > h2,
.whirlwind-headline .written-lines > h3,
.whirlwind-headline .written-lines > h4,
.whirlwind-headline .written-lines > h5,
.whirlwind-headline .written-lines > h6,
.whirlwind-headline .written-lines > p {font-style: italic;}
.whirlwind-headline .typed-cursor {
        display: inline-block;
        margin-left: 2px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 300;
        animation: whirlwindCursorBlink 1s steps(2) infinite;
    }
.whirlwind-headline .typed-cursor > h1,
.whirlwind-headline .typed-cursor > h2,
.whirlwind-headline .typed-cursor > h3,
.whirlwind-headline .typed-cursor > h4,
.whirlwind-headline .typed-cursor > h5,
.whirlwind-headline .typed-cursor > h6,
.whirlwind-headline .typed-cursor > p {color: rgba(255, 255, 255, 0.85);font-weight: 300;}


    @keyframes whirlwindCursorBlink {
        50% { opacity: 0; }
    }}
so band-specific looks live in .video-band rules. */
.note-video {
    position: relative;
    width: min(100%, 820px);
    margin: 0 auto clamp(40px, 6vw, 64px);
    aspect-ratio: 16 / 9;
    background: #1a1614;
    overflow: hidden;
}
.video-band .note-video {
    margin: 0 auto;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.07);
    /* Dark drop shadow plus a soft accent glow beneath the frame;
       the glow breathes with the scroll focus */
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 40px 110px -24px rgba(var(--accent-rgb), calc(0.22 + 0.26 * var(--video-focus, 1)));
}
full brightness and size at the center */
.video-band .note-video {
    transition: opacity 0.6s ease-out; /* keep fade-up opacity, free transform/filter for scroll */
    transform: scale(calc(0.92 + 0.08 * var(--video-focus, 1)));
    filter: brightness(calc(0.68 + 0.32 * var(--video-focus, 1)));
}
.note-video video {
    display: block;
    width: 100%;
    height: 100%;
    /* Keep source framing as-is (incl. baked side bars); don't force-crop to 16:9 */
    object-fit: contain;
    object-position: center center;
    background: #1a1614;
}
.note-video video::cue {
    background: rgba(26, 22, 20, 0.72);
    color: #fff;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.35;
}
.note-video video::cue > h1,
.note-video video::cue > h2,
.note-video video::cue > h3,
.note-video video::cue > h4,
.note-video video::cue > h5,
.note-video video::cue > h6,
.note-video video::cue > p {color: #fff;font-family: Inter, ui-sans-serif, system-ui, sans-serif;font-size: 1rem;line-height: 1.35;}
/* Hide native big play overlay so only our centered button shows */
.note-video video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}
/* No download in the native overflow menu (Chromium) */
.note-video video::-webkit-media-controls-enclosure {
    overflow: hidden;
}
.note-video video::-internal-media-controls-download-button {
    display: none;
}
.helps-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 10px 28px rgba(31, 31, 31, 0.28);
    cursor: pointer;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.helps-video-play:hover,
.helps-video-play:focus-visible {
    background: var(--accent-hover);
    transform: translate(-50%, -50%) scale(1.06);
    outline: none;
}
.helps-video-play svg {
    width: 28px;
    height: 28px;
    margin-left: 3px; /* optical center for right-pointing triangle */
    fill: #fff;
    display: block;
}
.note-video.is-playing .helps-video-play {
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 640px) {
.note-video {
        width: 100%;
    }
}