/* =========================================================
   EM3RGE PROJECT PAGE
   SHOFT CIC
   COMPLETE PAGE STYLESHEET
   ========================================================= */


/* =========================================================
   01. EM3RGE DESIGN TOKENS
   ========================================================= */

:root {

    --em3rge-blue:
        #293981;

    --em3rge-blue-dark:
        #1f2d70;

    --em3rge-blue-deep:
        #172252;

    --em3rge-gold:
        #f4b45d;

    --em3rge-gold-dark:
        #d9973e;

    --em3rge-white:
        #ffffff;

    --em3rge-off-white:
        #f7f8fb;

    --em3rge-soft:
        #eef1f7;

    --em3rge-ink:
        #172039;

    --em3rge-muted:
        #667085;

    --em3rge-line:
        rgba(23, 32, 57, 0.10);

    --em3rge-white-line:
        rgba(255, 255, 255, 0.16);

    --em3rge-radius-sm:
        14px;

    --em3rge-radius-md:
        22px;

    --em3rge-radius-lg:
        30px;

    --em3rge-radius-xl:
        38px;

    --em3rge-shadow-soft:
        0 16px 45px rgba(19, 31, 78, 0.08);

    --em3rge-shadow:
        0 24px 65px rgba(19, 31, 78, 0.13);

    --em3rge-container:
        1280px;

    --em3rge-transition:
        260ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   02. PAGE-WIDE EM3RGE RESET
   ========================================================= */

.em3rge-hero,
.em3rge-introduction,
.em3rge-impact,
.em3rge-challenge,
.em3rge-approach,
.em3rge-themes,
.em3rge-vision,
.em3rge-mission,
.em3rge-activities,
.em3rge-video,
.em3rge-gallery,
.em3rge-impact-statement,
.em3rge-cta {

    width: 100%;
    box-sizing: border-box;

}


.em3rge-hero *,
.em3rge-introduction *,
.em3rge-impact *,
.em3rge-challenge *,
.em3rge-approach *,
.em3rge-themes *,
.em3rge-vision *,
.em3rge-mission *,
.em3rge-activities *,
.em3rge-video *,
.em3rge-gallery *,
.em3rge-impact-statement *,
.em3rge-cta * {

    box-sizing: border-box;

}


.em3rge-hero img,
.em3rge-introduction img,
.em3rge-challenge img,
.em3rge-vision img,
.em3rge-gallery img {

    display: block;

    max-width: 100%;

}


.em3rge-hero a,
.em3rge-introduction a,
.em3rge-impact a,
.em3rge-challenge a,
.em3rge-approach a,
.em3rge-themes a,
.em3rge-vision a,
.em3rge-mission a,
.em3rge-activities a,
.em3rge-video a,
.em3rge-gallery a,
.em3rge-impact-statement a,
.em3rge-cta a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

.em3rge-hero h1,
.em3rge-introduction h2,
.em3rge-impact h2,
.em3rge-challenge h2,
.em3rge-approach h2,
.em3rge-themes h2,
.em3rge-vision h2,
.em3rge-mission h2,
.em3rge-activities h2,
.em3rge-video h2,
.em3rge-gallery h2,
.em3rge-impact-statement h2,
.em3rge-cta h2,
.em3rge-approach-card h3,
.em3rge-impact-card h3,
.em3rge-activities h3,
.em3rge-video h3,
.em3rge-challenge__statement strong {

    font-family:
        "Manrope",
        sans-serif;

}


.em3rge-hero p,
.em3rge-introduction p,
.em3rge-impact p,
.em3rge-challenge p,
.em3rge-approach p,
.em3rge-themes p,
.em3rge-vision p,
.em3rge-mission p,
.em3rge-activities p,
.em3rge-video p,
.em3rge-gallery p,
.em3rge-impact-statement p,
.em3rge-cta p {

    font-family:
        "Inter",
        sans-serif;

}


/* =========================================================
   04. EYEBROWS
   ========================================================= */

.em3rge-hero .section-eyebrow,
.em3rge-introduction .section-eyebrow,
.em3rge-challenge .section-eyebrow,
.em3rge-themes .section-eyebrow,
.em3rge-vision .section-eyebrow,
.em3rge-impact-statement .section-eyebrow,
.em3rge-cta .section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 20px;

    color:
        var(--em3rge-gold);

    font-size:
        0.70rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.em3rge-hero .section-eyebrow::before,
.em3rge-introduction .section-eyebrow::before,
.em3rge-challenge .section-eyebrow::before,
.em3rge-themes .section-eyebrow::before,
.em3rge-vision .section-eyebrow::before,
.em3rge-impact-statement .section-eyebrow::before,
.em3rge-cta .section-eyebrow::before {

    content: "";

    display: inline-block;

    width: 28px;

    height: 2px;

    background:
        currentColor;

    border-radius:
        999px;

}


/* =========================================================
   05. SECTION LABELS
   ========================================================= */

.em3rge-hero .section-label,
.em3rge-introduction .section-label,
.em3rge-impact .section-label,
.em3rge-challenge .section-label,
.em3rge-approach .section-label,
.em3rge-themes .section-label,
.em3rge-vision .section-label,
.em3rge-mission .section-label,
.em3rge-activities .section-label,
.em3rge-video .section-label,
.em3rge-gallery .section-label {

    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--em3rge-gold);

    font-size:
        0.70rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


/* =========================================================
   06. SHARED SECTION HEADERS
   ========================================================= */

.em3rge-approach .section-header,
.em3rge-impact .section-header,
.em3rge-mission .section-header,
.em3rge-video .section-header,
.em3rge-gallery .section-header {

    max-width:
        760px;

    margin:
        0 auto 65px;

}


.em3rge-approach .section-header.center,
.em3rge-impact .section-header.center,
.em3rge-mission .section-header.center,
.em3rge-video .section-header.center,
.em3rge-gallery .section-header.center {

    text-align:
        center;

}


.em3rge-approach .section-header h2,
.em3rge-impact .section-header h2,
.em3rge-mission .section-header h2,
.em3rge-video .section-header h2,
.em3rge-gallery .section-header h2 {

    margin:
        0;

    color:
        var(--em3rge-ink);

    font-size:
        clamp(2.5rem, 4.5vw, 4.25rem);

    line-height:
        1.03;

    font-weight:
        800;

    letter-spacing:
        -0.045em;

}


.em3rge-approach .section-header h2 span,
.em3rge-impact .section-header h2 span,
.em3rge-mission .section-header h2 span,
.em3rge-video .section-header h2 span,
.em3rge-gallery .section-header h2 span {

    color:
        var(--em3rge-blue);

}


.em3rge-approach .section-header p,
.em3rge-impact .section-header p,
.em3rge-video .section-header p {

    max-width:
        650px;

    margin:
        24px auto 0;

    color:
        var(--em3rge-muted);

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   07. HERO
   ========================================================= */

.em3rge-hero {

    position:
        relative;

    min-height:
        720px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            var(--em3rge-blue-deep) 0%,
            var(--em3rge-blue) 55%,
            #32468f 100%
        );

    isolation:
        isolate;

}


.em3rge-hero__background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 72% 30%,
            rgba(244, 180, 93, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(255, 255, 255, 0.07),
            transparent 25%
        );

}


.em3rge-hero__inner {

    position:
        relative;

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    min-height:
        720px;

    margin:
        0 auto;

    padding:
        80px 0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 0.88fr);

    gap:
        70px;

    align-items:
        center;

}


.em3rge-hero__content {

    position:
        relative;

    z-index:
        2;

    max-width:
        590px;

}


.em3rge-hero__content .section-eyebrow {

    margin-bottom:
        24px;

}


.em3rge-hero__content h1 {

    margin:
        0;

    color:
        var(--em3rge-white);

    font-size:
        clamp(4rem, 6.1vw, 6.25rem);

    line-height:
        0.94;

    font-weight:
        800;

    letter-spacing:
        -0.055em;

}


.em3rge-hero__content h1 span {

    display:
        block;

    color:
        var(--em3rge-gold);

}


.em3rge-hero__lead {

    max-width:
        555px;

    margin:
        30px 0 0;

    color:
        rgba(255, 255, 255, 0.84);

    font-size:
        1.02rem;

    line-height:
        1.8;

}


.em3rge-hero__tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        27px;

}


.em3rge-hero__tags span {

    min-height:
        38px;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.23);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.07);

    color:
        var(--em3rge-white);

    font-size:
        0.68rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.em3rge-hero__actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        32px;

}


.em3rge-hero__actions .btn {

    min-height:
        56px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        0 25px;

    border-radius:
        999px;

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

    transition:
        transform var(--em3rge-transition),
        box-shadow var(--em3rge-transition),
        background var(--em3rge-transition);

}


.em3rge-hero__actions .btn:hover {

    transform:
        translateY(-3px);

}


.em3rge-hero__actions .btn-primary {

    background:
        var(--em3rge-gold);

    color:
        var(--em3rge-blue-deep);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15);

}


.em3rge-hero__actions .btn-primary:hover {

    background:
        #ffd08a;

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.20);

}


.em3rge-hero__actions .btn-light {

    border:
        1px solid rgba(255, 255, 255, 0.30);

    background:
        rgba(255, 255, 255, 0.07);

    color:
        var(--em3rge-white);

    backdrop-filter:
        blur(8px);

}


.em3rge-hero__actions .btn-light:hover {

    background:
        rgba(255, 255, 255, 0.13);

}


.em3rge-hero__media {

    position:
        relative;

    width:
        100%;

    margin:
        0;

    overflow:
        hidden;

    border:
        5px solid var(--em3rge-white);

    border-radius:
        30px;

    background:
        #dfe4ef;

    box-shadow:
        0 30px 75px rgba(5, 13, 55, 0.30);

    transform:
        translateZ(0);

}


.em3rge-hero__media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(15, 24, 67, 0.02),
            rgba(15, 24, 67, 0.14)
        );

}


.em3rge-hero__media img {

    width:
        100%;

    height:
        100%;

    aspect-ratio:
        1.08 / 1;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);

}


.em3rge-hero__media:hover img {

    transform:
        scale(1.025);

}


/* =========================================================
   08. INTRODUCTION
   ========================================================= */

.em3rge-introduction {

    padding:
        125px 0 135px;

    background:
        var(--em3rge-white);

}


.em3rge-introduction .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-introduction__grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1fr);

    gap:
        100px;

    align-items:
        center;

}


.em3rge-introduction__content {

    max-width:
        600px;

}


.em3rge-introduction__content h2 {

    margin:
        0;

    color:
        var(--em3rge-ink);

    font-size:
        clamp(2.6rem, 4.3vw, 4.35rem);

    line-height:
        1.02;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

}


.em3rge-introduction__content h2 span {

    display:
        block;

    color:
        var(--em3rge-blue);

}


.em3rge-introduction__content p {

    margin:
        22px 0 0;

    color:
        var(--em3rge-muted);

    font-size:
        0.98rem;

    line-height:
        1.85;

}


.em3rge-introduction__content
.em3rge-introduction__lead {

    margin-top:
        28px;

    color:
        var(--em3rge-ink);

    font-size:
        1.08rem;

    line-height:
        1.75;

    font-weight:
        500;

}


.em3rge-introduction__visual {

    position:
        relative;

    min-width:
        0;

}


.em3rge-introduction__image {

    position:
        relative;

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-xl);

    box-shadow:
        var(--em3rge-shadow);

}


.em3rge-introduction__image img {

    width:
        100%;

    height:
        520px;

    object-fit:
        cover;

    object-position:
        center;

}


.em3rge-introduction__quote {

    position:
        relative;

    width:
        min(88%, 440px);

    margin:
        -70px 0 0 auto;

    padding:
        32px 35px 34px;

    border-radius:
        var(--em3rge-radius-md);

    background:
        var(--em3rge-blue);

    box-shadow:
        var(--em3rge-shadow);

    color:
        var(--em3rge-white);

}


.em3rge-introduction__quote-mark {

    display:
        block;

    height:
        25px;

    color:
        var(--em3rge-gold);

    font-family:
        Georgia,
        serif;

    font-size:
        4rem;

    line-height:
        0.7;

}


.em3rge-introduction__quote p {

    margin:
        15px 0 0;

    color:
        var(--em3rge-white);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.15rem;

    line-height:
        1.5;

    font-weight:
        700;

}


/* =========================================================
   09. IMPACT
   ========================================================= */

.em3rge-impact {

    padding:
        125px 0 130px;

    background:
        var(--em3rge-off-white);

}


.em3rge-impact .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-impact__grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

}


.em3rge-impact-card {

    min-height:
        310px;

    padding:
        35px 30px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid var(--em3rge-line);

    border-radius:
        var(--em3rge-radius-md);

    background:
        var(--em3rge-white);

    box-shadow:
        0 8px 30px rgba(18, 28, 65, 0.045);

    transition:
        transform var(--em3rge-transition),
        box-shadow var(--em3rge-transition),
        border-color var(--em3rge-transition);

}


.em3rge-impact-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(41, 57, 129, 0.18);

    box-shadow:
        0 24px 50px rgba(18, 28, 65, 0.10);

}


.em3rge-impact-card__number {

    display:
        block;

    color:
        var(--em3rge-blue);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(3.4rem, 5vw, 5.1rem);

    line-height:
        0.95;

    font-weight:
        800;

    letter-spacing:
        -0.06em;

}


.em3rge-impact-card h3 {

    margin:
        28px 0 0;

    color:
        var(--em3rge-ink);

    font-size:
        1.1rem;

    line-height:
        1.25;

    font-weight:
        800;

}


.em3rge-impact-card p {

    margin:
        12px 0 0;

    color:
        var(--em3rge-muted);

    font-size:
        0.88rem;

    line-height:
        1.7;

}


/* =========================================================
   10. THE CHALLENGE
   ========================================================= */

.em3rge-challenge {

    padding:
        130px 0;

    background:
        var(--em3rge-white);

}


.em3rge-challenge .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-challenge__grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.96fr)
        minmax(0, 1fr);

    gap:
        100px;

    align-items:
        center;

}


.em3rge-challenge__visual {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-xl);

    background:
        var(--em3rge-soft);

    box-shadow:
        var(--em3rge-shadow);

}



.em3rge-challenge__visual img {

    width:
        100%;

    height:
        570px;

    object-fit:
        cover;

    object-position:
        center;

}


.em3rge-challenge__content {

    max-width:
        600px;

}


.em3rge-challenge__content h2 {

    margin:
        0;

    color:
        var(--em3rge-ink);

    font-size:
        clamp(2.6rem, 4.2vw, 4.15rem);

    line-height:
        1.03;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

}


.em3rge-challenge__content h2 span {

    display:
        block;

    color:
        var(--em3rge-blue);

}


.em3rge-challenge__content p {

    margin:
        23px 0 0;

    color:
        var(--em3rge-muted);

    font-size:
        0.98rem;

    line-height:
        1.82;

}


.em3rge-challenge__statement {

    margin-top:
        32px;

    padding:
        25px 26px;

    border-left:
        4px solid var(--em3rge-gold);

    border-radius:
        0 var(--em3rge-radius-sm)
        var(--em3rge-radius-sm)
        0;

    background:
        var(--em3rge-off-white);

}


.em3rge-challenge__statement strong {

    display:
        block;

    color:
        var(--em3rge-blue);

    font-size:
        1.08rem;

    line-height:
        1.4;

}


.em3rge-challenge__statement span {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--em3rge-muted);

    font-size:
        0.85rem;

    line-height:
        1.6;

}


/* =========================================================
   11. APPROACH
   ========================================================= */

.em3rge-approach {

    padding:
        130px 0;

    background:
        var(--em3rge-off-white);

}


.em3rge-approach .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-approach__grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

}


.em3rge-approach-card {

    position:
        relative;

    min-height:
        340px;

    padding:
        34px 30px;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-md);

    background:
        var(--em3rge-blue);

    color:
        var(--em3rge-white);

    transition:
        transform var(--em3rge-transition),
        box-shadow var(--em3rge-transition);

}


.em3rge-approach-card::after {

    content:
        "";

    position:
        absolute;

    width:
        160px;

    height:
        160px;

    right:
        -65px;

    bottom:
        -70px;

    border-radius:
        50%;

    background:
        rgba(244, 180, 93, 0.13);

}


.em3rge-approach-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 50px rgba(19, 31, 78, 0.16);

}


.em3rge-approach-card__number {

    display:
        block;

    color:
        var(--em3rge-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.78rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.em3rge-approach-card h3 {

    margin:
        55px 0 0;

    color:
        var(--em3rge-white);

    font-size:
        1.25rem;

    line-height:
        1.25;

    font-weight:
        800;

}


.em3rge-approach-card p {

    margin:
        15px 0 0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        0.88rem;

    line-height:
        1.72;

}


/* =========================================================
   12. THEMES
   ========================================================= */

.em3rge-themes {

    padding:
        115px 0;

    background:
        var(--em3rge-blue);

}


.em3rge-themes .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-themes__grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

    gap:
        100px;

    align-items:
        center;

}


.em3rge-themes__intro {

    max-width:
        500px;

}


.em3rge-themes__intro h2 {

    margin:
        0;

    color:
        var(--em3rge-white);

    font-size:
        clamp(2.6rem, 4.2vw, 4.2rem);

    line-height:
        1.03;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

}


.em3rge-themes__intro h2 span {

    color:
        var(--em3rge-gold);

}


.em3rge-themes__intro p {

    margin:
        25px 0 0;

    color:
        rgba(255, 255, 255, 0.75);

    font-size:
        0.97rem;

    line-height:
        1.82;

}


.em3rge-themes__list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.em3rge-themes__list span {

    min-height:
        58px;

    padding:
        0 24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.17);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.055);

    color:
        var(--em3rge-white);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.82rem;

    line-height:
        1;

    font-weight:
        700;

    transition:
        transform var(--em3rge-transition),
        background var(--em3rge-transition),
        border-color var(--em3rge-transition);

}


.em3rge-themes__list span:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(244, 180, 93, 0.50);

    background:
        rgba(244, 180, 93, 0.12);

}


/* =========================================================
   13. VISION
   ========================================================= */

.em3rge-vision {

    padding:
        130px 0;

    background:
        var(--em3rge-white);

}


.em3rge-vision .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-vision__inner {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        90px;

    align-items:
        center;

}


.em3rge-vision__content {

    max-width:
        560px;

}


.em3rge-vision__content h2 {

    margin:
        0;

    color:
        var(--em3rge-ink);

    font-size:
        clamp(2.7rem, 4.3vw, 4.3rem);

    line-height:
        1.02;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

}


.em3rge-vision__content h2 span {

    display:
        block;

    color:
        var(--em3rge-blue);

}


.em3rge-vision__content p {

    margin:
        24px 0 0;

    color:
        var(--em3rge-muted);

    font-size:
        1rem;

    line-height:
        1.82;

}


.em3rge-vision__image {

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-xl);

    box-shadow:
        var(--em3rge-shadow);

}


.em3rge-vision__image img {

    width:
        100%;

    height:
        560px;

    object-fit:
        cover;

    object-position:
        center;

}


/* =========================================================
   14. MISSION
   ========================================================= */

.em3rge-mission {

    padding:
        130px 0;

    background:
        var(--em3rge-off-white);

}


.em3rge-mission .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-mission__grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        18px;

}


.em3rge-mission__grid article {

    min-height:
        250px;

    padding:
        30px;

    border:
        1px solid var(--em3rge-line);

    border-radius:
        var(--em3rge-radius-md);

    background:
        var(--em3rge-white);

    transition:
        transform var(--em3rge-transition),
        box-shadow var(--em3rge-transition);

}


.em3rge-mission__grid article:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px rgba(19, 31, 78, 0.08);

}


.em3rge-mission__grid article span {

    display:
        block;

    color:
        var(--em3rge-gold-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.em3rge-mission__grid article p {

    margin:
        38px 0 0;

    color:
        var(--em3rge-ink);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.65;

    font-weight:
        650;

}


/* =========================================================
   15. ACTIVITIES
   ========================================================= */

.em3rge-activities {

    padding:
        130px 0;

    background:
        var(--em3rge-white);

}


.em3rge-activities .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-activities__grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        22px;

}


.em3rge-activities__grid article {

    position:
        relative;

    min-height:
        350px;

    padding:
        35px;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-lg);

    background:
        var(--em3rge-blue);

    color:
        var(--em3rge-white);

    transition:
        transform var(--em3rge-transition),
        box-shadow var(--em3rge-transition);

}


.em3rge-activities__grid article::before {

    content:
        "";

    position:
        absolute;

    right:
        -70px;

    top:
        -70px;

    width:
        180px;

    height:
        180px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        50%;

}


.em3rge-activities__grid article:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 25px 55px rgba(19, 31, 78, 0.17);

}


.em3rge-activities__number {

    color:
        var(--em3rge-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.em3rge-activities__grid h3 {

    margin:
        70px 0 0;

    color:
        var(--em3rge-white);

    font-size:
        1.35rem;

    line-height:
        1.25;

    font-weight:
        800;

}


.em3rge-activities__grid p {

    margin:
        15px 0 0;

    color:
        rgba(255, 255, 255, 0.75);

    font-size:
        0.88rem;

    line-height:
        1.75;

}


/* =========================================================
   16. VIDEO SECTION
   ========================================================= */

.em3rge-video {

    padding:
        130px 0;

    background:
        var(--em3rge-off-white);

}


.em3rge-video .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


/* =========================================================
   17. VIDEO THUMBNAIL
   ========================================================= */

.em3rge-video__thumbnail {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-lg);

    background:
        #111827;

    text-decoration:
        none;

    box-shadow:
        var(--em3rge-shadow);

    isolation:
        isolate;

}


.em3rge-video__thumbnail::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            180deg,
            rgba(10, 18, 48, 0.03) 0%,
            rgba(10, 18, 48, 0.18) 100%
        );

    pointer-events:
        none;

    transition:
        background var(--em3rge-transition);

}


.em3rge-video__thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   18. VIDEO PLAY BUTTON
   ========================================================= */

.em3rge-video__play {

    position:
        absolute;

    z-index:
        3;

    top:
        50%;

    left:
        50%;

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.45);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    transform:
        translate(-50%, -50%);

    transition:
        transform var(--em3rge-transition),
        background var(--em3rge-transition),
        box-shadow var(--em3rge-transition);

}


.em3rge-video__play span {

    width:
        0;

    height:
        0;

    margin-left:
        5px;

    border-top:
        10px solid transparent;

    border-bottom:
        10px solid transparent;

    border-left:
        15px solid var(--em3rge-blue);

}


/* =========================================================
   19. VIDEO HOVER
   ========================================================= */

.em3rge-video__thumbnail:hover img {

    transform:
        scale(1.045);

}


.em3rge-video__thumbnail:hover::after {

    background:
        linear-gradient(
            180deg,
            rgba(10, 18, 48, 0.08),
            rgba(10, 18, 48, 0.25)
        );

}


.em3rge-video__thumbnail:hover
.em3rge-video__play {

    transform:
        translate(-50%, -50%)
        scale(1.09);

    background:
        var(--em3rge-gold);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28);

}


/* =========================================================
   20. MAIN VIDEO LAYOUT
   ========================================================= */

.em3rge-video__main {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, 0.65fr);

    gap:
        35px;

    align-items:
        stretch;

}


.em3rge-video__main
.em3rge-video__thumbnail {

    aspect-ratio:
        16 / 9;

}


/* =========================================================
   21. MAIN VIDEO DESCRIPTION
   ========================================================= */

.em3rge-video__content {

    padding:
        38px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border-radius:
        var(--em3rge-radius-lg);

    background:
        var(--em3rge-blue);

}


.em3rge-video__content > span {

    color:
        var(--em3rge-gold);

    font-size:
        0.70rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.em3rge-video__content h3 {

    margin:
        24px 0 0;

    color:
        var(--em3rge-white);

    font-size:
        1.75rem;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -0.03em;

}


.em3rge-video__content p {

    margin:
        18px 0 0;

    color:
        rgba(255, 255, 255, 0.74);

    font-size:
        0.88rem;

    line-height:
        1.75;

}


/* =========================================================
   22. WATCH ON YOUTUBE LINK
   ========================================================= */

.em3rge-video__watch-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    margin-top:
        24px;

    color:
        var(--em3rge-gold);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    text-decoration:
        none;

    transition:
        gap var(--em3rge-transition),
        color var(--em3rge-transition);

}


.em3rge-video__watch-link:hover {

    gap:
        12px;

    color:
        #ffd08a;

}


/* =========================================================
   23. SECONDARY VIDEO
   ========================================================= */

.em3rge-video__secondary {

    display:
        grid;

    grid-template-columns:
        minmax(300px, 0.85fr)
        minmax(0, 1fr);

    gap:
        45px;

    margin-top:
        70px;

    align-items:
        center;

}


.em3rge-video__secondary
.em3rge-video__thumbnail {

    aspect-ratio:
        16 / 9;

    border-radius:
        var(--em3rge-radius-md);

    box-shadow:
        var(--em3rge-shadow-soft);

}


.em3rge-video__thumbnail--secondary
.em3rge-video__play {

    width:
        68px;

    height:
        68px;

}


.em3rge-video__thumbnail--secondary
.em3rge-video__play span {

    border-top-width:
        8px;

    border-bottom-width:
        8px;

    border-left-width:
        12px;

}


.em3rge-video__secondary-content {

    max-width:
        550px;

}


.em3rge-video__secondary-content h3 {

    margin:
        0;

    color:
        var(--em3rge-ink);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2rem, 3.4vw, 3.2rem);

    line-height:
        1.04;

    font-weight:
        800;

    letter-spacing:
        -0.045em;

}


.em3rge-video__secondary-content p {

    margin:
        20px 0 0;

    color:
        var(--em3rge-muted);

    font-size:
        0.94rem;

    line-height:
        1.8;

}

/* =========================================================
   24. GALLERY
   ========================================================= */

.em3rge-gallery {

    padding:
        130px 0;

    background:
        var(--em3rge-white);

}


.em3rge-gallery .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


/* ---------------------------------------------------------
   CAROUSEL
   --------------------------------------------------------- */

.em3rge-gallery__carousel {

    width:
        100%;

}


.em3rge-gallery__stage {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-lg);

    background:
        var(--em3rge-soft);

    box-shadow:
        var(--em3rge-shadow);

}


.em3rge-gallery__slides {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

}


.em3rge-gallery__slide {

    position:
        absolute;

    inset:
        0;

    margin:
        0;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(1.015);

    transition:
        opacity 400ms ease,
        transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 400ms ease;

}


.em3rge-gallery__slide.is-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);

}


.em3rge-gallery__slide img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


/* ---------------------------------------------------------
   ARROWS
   --------------------------------------------------------- */

.em3rge-gallery__arrow {

    position:
        absolute;

    top:
        50%;

    z-index:
        5;

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.30);

    border-radius:
        50%;

    background:
        rgba(23, 34, 82, 0.78);

    color:
        var(--em3rge-white);

    font-family:
        inherit;

    font-size:
        1.25rem;

    line-height:
        1;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(10px);

    transition:
        transform var(--em3rge-transition),
        background var(--em3rge-transition),
        box-shadow var(--em3rge-transition);

}


.em3rge-gallery__arrow:hover {

    background:
        var(--em3rge-blue);

    box-shadow:
        0 12px 30px rgba(19, 31, 78, 0.25);

}


.em3rge-gallery__arrow:active {

    transform:
        translateY(-50%)
        scale(0.94);

}


.em3rge-gallery__arrow:focus-visible {

    outline:
        3px solid var(--em3rge-gold);

    outline-offset:
        4px;

}


.em3rge-gallery__arrow--prev {

    left:
        22px;

}


.em3rge-gallery__arrow--next {

    right:
        22px;

}


/* ---------------------------------------------------------
   CONTROLS
   --------------------------------------------------------- */

.em3rge-gallery__controls {

    margin-top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.em3rge-gallery__thumbnails {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.em3rge-gallery__thumbnails::-webkit-scrollbar {

    display:
        none;

}


.em3rge-gallery__thumbnail {

    flex:
        0 0 88px;

    width:
        88px;

    height:
        64px;

    padding:
        0;

    overflow:
        hidden;

    border:
        2px solid transparent;

    border-radius:
        10px;

    background:
        var(--em3rge-soft);

    cursor:
        pointer;

    opacity:
        0.58;

    transition:
        opacity var(--em3rge-transition),
        border-color var(--em3rge-transition),
        transform var(--em3rge-transition);

}


.em3rge-gallery__thumbnail:hover {

    opacity:
        0.85;

    transform:
        translateY(-2px);

}


.em3rge-gallery__thumbnail.is-active {

    border-color:
        var(--em3rge-gold);

    opacity:
        1;

}


.em3rge-gallery__thumbnail:focus-visible {

    outline:
        3px solid var(--em3rge-blue);

    outline-offset:
        3px;

}


.em3rge-gallery__thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/* ---------------------------------------------------------
   COUNTER
   --------------------------------------------------------- */

.em3rge-gallery__counter {

    flex:
        0 0 auto;

    color:
        var(--em3rge-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    white-space:
        nowrap;

}


.em3rge-gallery__counter
[data-em3rge-current] {

    color:
        var(--em3rge-blue);

}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .em3rge-gallery {

        padding:
            95px 0;

    }


    .em3rge-gallery .container {

        width:
            min(
                calc(100% - 40px),
                var(--em3rge-container)
            );

    }


    .em3rge-gallery__slides {

        aspect-ratio:
            4 / 3;

    }


    .em3rge-gallery__arrow {

        width:
            46px;

        height:
            46px;

        font-size:
            1.05rem;

    }


    .em3rge-gallery__arrow--prev {

        left:
            12px;

    }


    .em3rge-gallery__arrow--next {

        right:
            12px;

    }


    .em3rge-gallery__controls {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;

    }


    .em3rge-gallery__thumbnails {

        width:
            100%;

    }


    .em3rge-gallery__counter {

        align-self:
            flex-end;

    }

}


@media (max-width: 480px) {

    .em3rge-gallery .container {

        width:
            calc(100% - 28px);

    }


    .em3rge-gallery__slides {

        aspect-ratio:
            1 / 1;

    }


    .em3rge-gallery__arrow {

        width:
            42px;

        height:
            42px;

    }


    .em3rge-gallery__thumbnail {

        flex-basis:
            72px;

        width:
            72px;

        height:
            54px;

    }

}


/* =========================================================
   25. IMPACT STATEMENT
   ========================================================= */

.em3rge-impact-statement {

    padding:
        135px 0;

    background:
        linear-gradient(
            135deg,
            var(--em3rge-blue-deep),
            var(--em3rge-blue)
        );

}


.em3rge-impact-statement .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-impact-statement__inner {

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;

}


.em3rge-impact-statement__inner
.section-eyebrow {

    justify-content:
        center;

}


.em3rge-impact-statement__inner h2 {

    margin:
        0;

    color:
        var(--em3rge-white);

    font-size:
        clamp(2.8rem, 5vw, 5.2rem);

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -0.055em;

}


.em3rge-impact-statement__inner h2 span {

    color:
        var(--em3rge-gold);

}


.em3rge-impact-statement__inner p {

    max-width:
        760px;

    margin:
        27px auto 0;

    color:
        rgba(255, 255, 255, 0.77);

    font-size:
        0.98rem;

    line-height:
        1.85;

}


.em3rge-impact-statement__inner p + p {

    margin-top:
        12px;

}


/* =========================================================
   26. CTA
   ========================================================= */

.em3rge-cta {

    padding:
        70px 0 110px;

    background:
        var(--em3rge-white);

}


.em3rge-cta .container {

    width:
        min(
            calc(100% - 80px),
            var(--em3rge-container)
        );

    margin:
        0 auto;

}


.em3rge-cta__inner {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        50px;

    align-items:
        center;

    padding:
        65px 70px;

    overflow:
        hidden;

    border-radius:
        var(--em3rge-radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--em3rge-blue-deep),
            var(--em3rge-blue)
        );

    box-shadow:
        0 30px 70px rgba(19, 31, 78, 0.17);

}


.em3rge-cta__inner::before {

    content:
        "";

    position:
        absolute;

    right:
        -100px;

    top:
        -130px;

    width:
        360px;

    height:
        360px;

    border:
        1px solid rgba(244, 180, 93, 0.17);

    border-radius:
        50%;

}


.em3rge-cta__inner > div {

    position:
        relative;

    z-index:
        1;

}


.em3rge-cta__inner h2 {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--em3rge-white);

    font-size:
        clamp(2.5rem, 4vw, 4.2rem);

    line-height:
        1.02;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

}


.em3rge-cta__inner h2 span {

    color:
        var(--em3rge-gold);

}


.em3rge-cta__inner p {

    max-width:
        680px;

    margin:
        20px 0 0;

    color:
        rgba(255, 255, 255, 0.73);

    font-size:
        0.94rem;

    line-height:
        1.75;

}


.em3rge-cta__actions {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

    min-width:
        190px;

}


.em3rge-cta__actions .btn {

    min-height:
        54px;

    padding:
        0 23px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        999px;

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    transition:
        transform var(--em3rge-transition),
        background var(--em3rge-transition);

}


.em3rge-cta__actions .btn:hover {

    transform:
        translateY(-3px);

}


.em3rge-cta__actions .btn-gold {

    background:
        var(--em3rge-gold);

    color:
        var(--em3rge-blue-deep);

}


.em3rge-cta__actions .btn-gold:hover {

    background:
        #ffd08a;

}


.em3rge-cta__actions .btn-outline-light {

    border:
        1px solid rgba(255, 255, 255, 0.28);

    background:
        rgba(255, 255, 255, 0.05);

    color:
        var(--em3rge-white);

}


.em3rge-cta__actions .btn-outline-light:hover {

    background:
        rgba(255, 255, 255, 0.11);

}


/* =========================================================
   27. LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {


    .em3rge-hero__inner,
    .em3rge-introduction .container,
    .em3rge-impact .container,
    .em3rge-challenge .container,
    .em3rge-approach .container,
    .em3rge-themes .container,
    .em3rge-vision .container,
    .em3rge-mission .container,
    .em3rge-activities .container,
    .em3rge-video .container,
    .em3rge-gallery .container,
    .em3rge-impact-statement .container,
    .em3rge-cta .container {

        width:
            min(
                calc(100% - 60px),
                var(--em3rge-container)
            );

    }


    /* Hero */

    .em3rge-hero__inner {

        min-height:
            680px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.85fr);

        gap:
            45px;

        padding:
            70px 0;

    }


    .em3rge-hero__content h1 {

        font-size:
            clamp(3.6rem, 6vw, 5rem);

    }


    /* Introduction */

    .em3rge-introduction__grid,
    .em3rge-challenge__grid {

        gap:
            60px;

    }


    /* Impact */

    .em3rge-impact__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    /* Approach */

    .em3rge-approach__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    /* Mission */

    .em3rge-mission__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    /* Themes */

    .em3rge-themes__grid {

        gap:
            55px;

    }


    /* Activities */

    .em3rge-activities__grid {

        gap:
            16px;

    }


    /* CTA */

    .em3rge-cta__inner {

        padding:
            55px;

    }

}


/* =========================================================
   28. TABLET / LARGE MOBILE
   ========================================================= */

@media (max-width: 800px) {


    .em3rge-introduction,
    .em3rge-impact,
    .em3rge-challenge,
    .em3rge-approach,
    .em3rge-vision,
    .em3rge-mission,
    .em3rge-activities,
    .em3rge-video,
    .em3rge-gallery {

        padding-top:
            95px;

        padding-bottom:
            100px;

    }


    /* =====================================================
       HERO
       ===================================================== */

    .em3rge-hero {

        min-height:
            auto;

    }


    .em3rge-hero__inner {

        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding-top:
            70px;

        padding-bottom:
            75px;

    }


    .em3rge-hero__content {

        max-width:
            680px;

    }


    .em3rge-hero__media {

        width:
            min(100%, 680px);

        margin:
            0 auto;

    }


    /* =====================================================
       INTRODUCTION
       ===================================================== */

    .em3rge-introduction__grid,
    .em3rge-challenge__grid,
    .em3rge-vision__inner {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    /*
       MOBILE STORY ORDER

       Challenge content appears before
       the supporting image.

       Desktop remains:

       IMAGE | CONTENT

       Mobile becomes:

       CONTENT
       IMAGE
    */

    .em3rge-challenge__content {

        order:
            1;

        max-width:
            700px;

    }


    .em3rge-challenge__visual {

        order:
            2;

    }


    .em3rge-introduction__content,
    .em3rge-vision__content {

        max-width:
            700px;

    }


    /* =====================================================
       THEMES
       ===================================================== */

    .em3rge-themes__grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    /* =====================================================
       ACTIVITIES
       ===================================================== */

    .em3rge-activities__grid {

        grid-template-columns:
            1fr;

    }


    .em3rge-activities__grid article {

        min-height:
            290px;

    }


    .em3rge-activities__grid h3 {

        margin-top:
            50px;

    }


    /* =====================================================
       VIDEO
       ===================================================== */

    .em3rge-video__main {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .em3rge-video__secondary {

        grid-template-columns:
            1fr;

        gap:
            30px;

        margin-top:
            45px;

    }


    .em3rge-video__secondary-content {

        max-width:
            700px;

    }


    /* =====================================================
       GALLERY
       ===================================================== */

    .em3rge-gallery__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows:
            240px;

    }


    .em3rge-gallery__grid
    figure:nth-child(1),
    .em3rge-gallery__grid
    figure:nth-child(2),
    .em3rge-gallery__grid
    figure:nth-child(3),
    .em3rge-gallery__grid
    figure:nth-child(4),
    .em3rge-gallery__grid
    figure:nth-child(5) {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .em3rge-gallery__grid figure:first-child {

        grid-column:
            span 2;

        grid-row:
            span 2;

    }


    /* =====================================================
       CTA
       ===================================================== */

    .em3rge-cta {

        padding-top:
            45px;

        padding-bottom:
            85px;

    }


    .em3rge-cta__inner {

        grid-template-columns:
            1fr;

        gap:
            32px;

        padding:
            48px;

    }


    .em3rge-cta__actions {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =========================================================
   29. MOBILE
   ========================================================= */

@media (max-width: 600px) {


    .em3rge-hero__inner,
    .em3rge-introduction .container,
    .em3rge-impact .container,
    .em3rge-challenge .container,
    .em3rge-approach .container,
    .em3rge-themes .container,
    .em3rge-vision .container,
    .em3rge-mission .container,
    .em3rge-activities .container,
    .em3rge-video .container,
    .em3rge-gallery .container,
    .em3rge-impact-statement .container,
    .em3rge-cta .container {

        width:
            calc(100% - 36px);

    }


    /* =====================================================
       HERO
       ===================================================== */

    .em3rge-hero__inner {

        gap:
            34px;

        padding-top:
            55px;

        padding-bottom:
            55px;

    }


    .em3rge-hero__content h1 {

        font-size:
            clamp(3rem, 14vw, 4.3rem);

        line-height:
            0.95;

    }


    .em3rge-hero__lead {

        margin-top:
            24px;

        font-size:
            0.91rem;

        line-height:
            1.72;

    }


    .em3rge-hero__tags {

        gap:
            7px;

        margin-top:
            22px;

    }


    .em3rge-hero__tags span {

        min-height:
            35px;

        padding:
            0 12px;

        font-size:
            0.61rem;

    }


    .em3rge-hero__actions {

        width:
            100%;

        flex-direction:
            column;

        gap:
            10px;

        margin-top:
            26px;

    }


    .em3rge-hero__actions .btn {

        width:
            100%;

        min-height:
            54px;

    }


    /*
       CONTROLLED MOBILE HERO IMAGE

       The image sits below the hero content
       and remains a deliberate visual frame.
    */

    .em3rge-hero__media {

        width:
            100%;

        aspect-ratio:
            1 / 0.96;

        border-width:
            4px;

        border-radius:
            23px;

    }


    .em3rge-hero__media img {

        width:
            100%;

        height:
            100%;

        aspect-ratio:
            auto;

        object-fit:
            cover;

        object-position:
            center;

    }


    /* =====================================================
       MOBILE EYEBROWS
       ===================================================== */

    .em3rge-hero .section-eyebrow,
    .em3rge-introduction .section-eyebrow,
    .em3rge-challenge .section-eyebrow,
    .em3rge-themes .section-eyebrow,
    .em3rge-vision .section-eyebrow,
    .em3rge-impact-statement .section-eyebrow,
    .em3rge-cta .section-eyebrow {

        margin-bottom:
            16px;

        font-size:
            0.63rem;

        letter-spacing:
            0.13em;

    }


    .em3rge-hero .section-eyebrow::before,
    .em3rge-introduction .section-eyebrow::before,
    .em3rge-challenge .section-eyebrow::before,
    .em3rge-themes .section-eyebrow::before,
    .em3rge-vision .section-eyebrow::before,
    .em3rge-impact-statement .section-eyebrow::before,
    .em3rge-cta .section-eyebrow::before {

        width:
            21px;

    }


    /* =====================================================
       SECTION SPACING
       ===================================================== */

    .em3rge-introduction,
    .em3rge-impact,
    .em3rge-challenge,
    .em3rge-approach,
    .em3rge-vision,
    .em3rge-mission,
    .em3rge-activities,
    .em3rge-video,
    .em3rge-gallery {

        padding-top:
            78px;

        padding-bottom:
            82px;

    }


    /* =====================================================
       INTRODUCTION
       ===================================================== */

    .em3rge-introduction__grid,
    .em3rge-challenge__grid,
    .em3rge-vision__inner {

        gap:
            38px;

    }


    .em3rge-introduction__content h2,
    .em3rge-challenge__content h2,
    .em3rge-vision__content h2 {

        font-size:
            clamp(2.4rem, 11vw, 3.5rem);

        line-height:
            1.01;

    }


    .em3rge-introduction__content p,
    .em3rge-challenge__content p,
    .em3rge-vision__content p {

        font-size:
            0.91rem;

        line-height:
            1.75;

    }


    .em3rge-introduction__content
    .em3rge-introduction__lead {

        font-size:
            1rem;

        line-height:
            1.7;

    }


    .em3rge-introduction__image {

        border-radius:
            24px;

    }


    .em3rge-introduction__image img {

        height:
            350px;

    }


    .em3rge-introduction__quote {

        width:
            calc(100% - 25px);

        margin-top:
            -45px;

        padding:
            25px 25px 27px;

        border-radius:
            19px;

    }


    .em3rge-introduction__quote p {

        font-size:
            1rem;

    }


    /* =====================================================
       IMPACT
       ===================================================== */

    .em3rge-impact__grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .em3rge-impact-card {

        min-height:
            auto;

        padding:
            28px 25px;

    }


    .em3rge-impact-card__number {

        font-size:
            3.6rem;

    }


    .em3rge-impact-card h3 {

        margin-top:
            20px;

    }


    /* =====================================================
       CHALLENGE
       ===================================================== */

    .em3rge-challenge__grid {

        gap:
            38px;

    }


    /*
       Explicit mobile order.

       CONTENT FIRST
       IMAGE SECOND
    */

    .em3rge-challenge__content {

        order:
            1;

    }


    .em3rge-challenge__visual {

        order:
            2;

        border-radius:
            24px;

    }


    .em3rge-challenge__visual img {

        height:
            360px;

    }


    .em3rge-challenge__visual::before {

        left:
            20px;

        bottom:
            20px;

        width:
            58px;

        height:
            58px;

    }


    .em3rge-challenge__statement {

        margin-top:
            25px;

        padding:
            21px;

    }


    /* =====================================================
       APPROACH
       ===================================================== */

    .em3rge-approach__grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .em3rge-approach-card {

        min-height:
            auto;

        padding:
            28px 25px;

    }


    .em3rge-approach-card h3 {

        margin-top:
            40px;

        font-size:
            1.1rem;

    }


    .em3rge-approach-card p {

        font-size:
            0.84rem;

    }


    /* =====================================================
       THEMES
       ===================================================== */

    .em3rge-themes {

        padding:
            80px 0;

    }


    .em3rge-themes__grid {

        gap:
            35px;

    }


    .em3rge-themes__intro h2 {

        font-size:
            clamp(2.4rem, 11vw, 3.5rem);

    }


    .em3rge-themes__intro p {

        font-size:
            0.90rem;

    }


    .em3rge-themes__list {

        gap:
            8px;

    }


    .em3rge-themes__list span {

        min-height:
            48px;

        padding:
            0 17px;

        font-size:
            0.70rem;

    }


    /* =====================================================
       VISION
       ===================================================== */

    .em3rge-vision__image {

        border-radius:
            24px;

    }


    .em3rge-vision__image img {

        height:
            370px;

    }


    /* =====================================================
       MISSION
       ===================================================== */

    .em3rge-mission__grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .em3rge-mission__grid article {

        min-height:
            auto;

        padding:
            26px 24px;

    }


    .em3rge-mission__grid article p {

        margin-top:
            28px;

        font-size:
            0.91rem;

    }


    /* =====================================================
       ACTIVITIES
       ===================================================== */

    .em3rge-activities__grid {

        gap:
            12px;

    }


    .em3rge-activities__grid article {

        min-height:
            auto;

        padding:
            28px 25px;

        border-radius:
            23px;

    }


    .em3rge-activities__grid h3 {

        margin-top:
            45px;

        font-size:
            1.15rem;

    }


    /* =====================================================
       VIDEO
       ===================================================== */

    .em3rge-video__main {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .em3rge-video__main
    .em3rge-video__thumbnail {

        width:
            100%;

        aspect-ratio:
            16 / 9;

    }


    .em3rge-video__content {

        padding:
            29px 25px;

        border-radius:
            21px;

    }


    .em3rge-video__content h3 {

        font-size:
            1.45rem;

    }


    .em3rge-video__content p {

        font-size:
            0.83rem;

    }


    .em3rge-video__secondary {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-top:
            45px;

    }


    .em3rge-video__secondary
    .em3rge-video__thumbnail {

        width:
            100%;

        aspect-ratio:
            16 / 9;

    }


    .em3rge-video__secondary-content h3 {

        font-size:
            2rem;

    }


    .em3rge-video__secondary-content p {

        font-size:
            0.87rem;

    }


    /* =====================================================
       VIDEO PLAY BUTTON
       ===================================================== */

    .em3rge-video__play {

        width:
            64px;

        height:
            64px;

    }


    .em3rge-video__play span {

        border-top-width:
            8px;

        border-bottom-width:
            8px;

        border-left-width:
            12px;

    }


    .em3rge-video__thumbnail {

        border-radius:
            20px;

    }


    .em3rge-video__watch-link {

        margin-top:
            20px;

        font-size:
            0.66rem;

    }


    /* =====================================================
       GALLERY
       ===================================================== */

    .em3rge-gallery__grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            270px;

        gap:
            10px;

    }


    .em3rge-gallery__grid
    figure:first-child {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .em3rge-gallery__grid figure {

        border-radius:
            19px;

    }


    /* =====================================================
       IMPACT STATEMENT
       ===================================================== */

    .em3rge-impact-statement {

        padding:
            85px 0;

    }


    .em3rge-impact-statement__inner h2 {

        font-size:
            clamp(2.5rem, 11vw, 3.8rem);

    }


    .em3rge-impact-statement__inner p {

        font-size:
            0.89rem;

        line-height:
            1.75;

    }


    /* =====================================================
       CTA
       ===================================================== */

    .em3rge-cta {

        padding-top:
            35px;

        padding-bottom:
            75px;

    }


    .em3rge-cta__inner {

        padding:
            38px 25px;

        border-radius:
            25px;

    }


    .em3rge-cta__inner h2 {

        font-size:
            clamp(2.35rem, 10vw, 3.3rem);

    }


    .em3rge-cta__inner p {

        font-size:
            0.86rem;

    }


    .em3rge-cta__actions {

        grid-template-columns:
            1fr;

        gap:
            9px;

    }


    .em3rge-cta__actions .btn {

        width:
            100%;

    }

}


/* =========================================================
   30. SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {


    .em3rge-hero__inner,
    .em3rge-introduction .container,
    .em3rge-impact .container,
    .em3rge-challenge .container,
    .em3rge-approach .container,
    .em3rge-themes .container,
    .em3rge-vision .container,
    .em3rge-mission .container,
    .em3rge-activities .container,
    .em3rge-video .container,
    .em3rge-gallery .container,
    .em3rge-impact-statement .container,
    .em3rge-cta .container {

        width:
            calc(100% - 30px);

    }


    .em3rge-hero__inner {

        padding-top:
            48px;

        padding-bottom:
            48px;

        gap:
            28px;

    }


    .em3rge-hero__content h1 {

        font-size:
            2.85rem;

    }


    .em3rge-hero__lead {

        font-size:
            0.87rem;

    }


    .em3rge-hero__tags span {

        min-height:
            33px;

        padding:
            0 10px;

        font-size:
            0.57rem;

    }


    .em3rge-hero__media {

        border-width:
            3px;

        border-radius:
            20px;

    }


    .em3rge-introduction__image img,
    .em3rge-challenge__visual img,
    .em3rge-vision__image img {

        height:
            310px;

    }


    .em3rge-introduction__quote {

        width:
            calc(100% - 16px);

        margin-top:
            -35px;

        padding:
            22px;

    }


    .em3rge-introduction__quote p {

        font-size:
            0.91rem;

    }


    .em3rge-themes__list span {

        min-height:
            44px;

        padding:
            0 14px;

        font-size:
            0.64rem;

    }


    .em3rge-gallery__grid {

        grid-auto-rows:
            230px;

    }

}


/* =========================================================
   31. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {


    .em3rge-hero__media img,
    .em3rge-impact-card,
    .em3rge-approach-card,
    .em3rge-mission__grid article,
    .em3rge-activities__grid article,
    .em3rge-themes__list span,
    .em3rge-gallery__grid img,
    .em3rge-cta__actions .btn,
    .em3rge-hero__actions .btn,
    .em3rge-video__thumbnail img,
    .em3rge-video__play,
    .em3rge-video__watch-link {

        transition:
            none;

    }


    .em3rge-hero__media:hover img,
    .em3rge-impact-card:hover,
    .em3rge-approach-card:hover,
    .em3rge-mission__grid article:hover,
    .em3rge-activities__grid article:hover,
    .em3rge-themes__list span:hover,
    .em3rge-gallery__grid figure:hover img,
    .em3rge-cta__actions .btn:hover,
    .em3rge-hero__actions .btn:hover,
    .em3rge-video__thumbnail:hover img,
    .em3rge-video__thumbnail:hover .em3rge-video__play {

        transform:
            none;

    }

}