/* =========================================================
   IGNITING DREAMS
   SHOFT CIC
   INDIVIDUAL PROJECT PAGE
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --id-blue: #293981;
    --id-blue-dark: #18265f;
    --id-navy: #101936;

    --id-gold: #d9922e;
    --id-gold-light: #f4b45d;

    --id-soft: #f5f6fa;
    --id-text: #30384d;
    --id-muted: #697083;

    --id-line:
        rgba(41, 57, 129, .11);

    --id-white: #ffffff;

    --id-shadow:
        0 22px 55px
        rgba(20, 35, 90, .10);

}


/* =========================================================
   GENERAL
   ========================================================= */

.id-section {

    position: relative;

    padding:
        115px
        0
        125px;

    overflow: hidden;

    background: #fff;

}

.id-soft {

    background:
        var(--id-soft);

}

.id-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color:
        var(--id-gold);

    font-size: .70rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

}

.id-eyebrow::before {

    content: "";

    width: 25px;

    height: 2px;

    background:
        var(--id-gold);

}

.id-eyebrow--light {

    color:
        rgba(255,255,255,.82);

}

.id-content {

    max-width: 660px;

}

.id-content h2,
.id-heading h2,
.id-impact-heading h2,
.id-closing h2,
.id-cta h2 {

    margin: 0 0 27px;

    color:
        var(--id-blue);

    font:
        800
        clamp(2.8rem, 5vw, 4.7rem)
        /
        .98
        Manrope,
        sans-serif;

    letter-spacing:
        -.045em;

}

.id-content h2 span,
.id-heading h2 span,
.id-impact-heading h2 span,
.id-closing h2 span,
.id-cta h2 span {

    color:
        var(--id-gold);

}

.id-content p {

    margin:
        0
        0
        17px;

    color:
        var(--id-muted);

    font-size:
        .96rem;

    line-height:
        1.82;

}

.id-lead {

    color:
        var(--id-blue) !important;

    font:
        600
        1.05rem
        /
        1.75
        Manrope,
        sans-serif !important;

}

.id-light-text {

    color:
        rgba(255,255,255,.74) !important;

}


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

.id-hero {

    position: relative;

    overflow: hidden;

    color:
        #fff;

    background:

        radial-gradient(
            circle at 82% 20%,
            rgba(244,180,93,.18),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            var(--id-blue),
            var(--id-blue-dark)
        );

}

.id-hero__overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(16,25,54,.18),
            transparent 60%
        );

    pointer-events:
        none;

}

.id-hero__inner {

    position: relative;

    z-index: 2;

    min-height:
        720px;

    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(430px,1.05fr);

    align-items: center;

    gap:
        70px;

    padding:
        85px
        0;

}

.id-hero__content {

    max-width:
        650px;

}

.id-hero h1 {

    margin:
        20px
        0
        25px;

    color:
        #fff;

    font:
        800
        clamp(4.2rem,7vw,7rem)
        /
        .88
        Manrope,
        sans-serif;

    letter-spacing:
        -.055em;

}

.id-hero h1 span {

    display:
        block;

    color:
        var(--id-gold-light);

}

.id-hero__lead {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(255,255,255,.84);

    font-size:
        1.08rem;

    line-height:
        1.8;

}

.id-hero__tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        27px;

}

.id-hero__tags span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        37px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.88);

    font-size:
        .66rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}

.id-hero__actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-top:
        31px;

}

.id-hero__media {

    position:
        relative;

    margin:
        0;

    overflow:
        hidden;

    border:
        5px solid
        #fff;

    border-radius:
        27px;

    background:
        var(--id-navy);

    box-shadow:
        0 30px 70px
        rgba(7,16,53,.30);

}

.id-hero__media img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1.02 / 1;

    object-fit:
        cover;

}

.id-hero__media figcaption {

    position:
        absolute;

    z-index:
        5;

    left:
        22px;

    right:
        22px;

    bottom:
        22px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    padding:
        18px
        20px;

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

    border-radius:
        15px;

    background:
        rgba(20,31,78,.94);

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

    backdrop-filter:
        blur(10px);

}

.id-hero__media figcaption strong {

    color:
        var(--id-gold-light) !important;

    font:
        800
        .78rem
        /
        1.2
        Manrope,
        sans-serif;

    letter-spacing:
        .12em;

}

.id-hero__media figcaption span {

    color:
        rgba(255,255,255,.82) !important;

    font-size:
        .75rem;

}


/* =========================================================
   SPLIT SECTIONS
   ========================================================= */

.id-split {

    display:
        grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);

    align-items:
        center;

    gap:
        78px;

}

.id-split--reverse {

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

}


/* =========================================================
   PHOTOS
   ========================================================= */

.id-photo {

    position:
        relative;

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        23px;

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

}

.id-photo img {

    display:
        block;

    width:
        100%;

    height:
        560px;

    object-fit:
        cover;

}

.id-photo figcaption {

    position:
        absolute;

    z-index:
        5;

    left:
        22px;

    right:
        22px;

    bottom:
        22px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        17px
        19px;

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

    border-radius:
        15px;

    background:
        rgba(20,31,78,.94);

    color:
        #fff;

    backdrop-filter:
        blur(10px);

}

.id-photo figcaption strong {

    color:
        var(--id-gold-light);

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .12em;

}

.id-photo figcaption span {

    color:
        rgba(255,255,255,.82);

    font-size:
        .75rem;

}

.id-photo--border {

    border:
        4px solid
        #fff;

}

.id-photo-badge {

    background:
        rgba(20,31,78,.95) !important;

}

.id-photo-badge strong {

    color:
        var(--id-gold-light) !important;

}


/* =========================================================
   CONTEXT HIGHLIGHT
   ========================================================= */

.id-highlight {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        29px;

    padding:
        21px
        22px;

    border-left:
        3px solid
        var(--id-gold);

    background:
        var(--id-soft);

}

.id-highlight strong {

    color:
        var(--id-blue);

    font:
        700
        .97rem
        /
        1.5
        Manrope,
        sans-serif;

}

.id-highlight span {

    color:
        var(--id-muted);

    font-size:
        .79rem;

}


/* =========================================================
   DARK SECTIONS
   ========================================================= */

.id-dark {

    background:
        var(--id-blue);

}

.id-dark h2 {

    color:
        #fff;

}

.id-dark h2 span {

    color:
        var(--id-gold-light);

}

.id-dark-statement {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        30px;

    padding:
        22px;

    border-left:
        3px solid
        var(--id-gold);

    background:
        rgba(255,255,255,.055);

}

.id-dark-statement span {

    color:
        var(--id-gold-light);

    font-size:
        .66rem;

    font-weight:
        800;

    letter-spacing:
        .13em;

}

.id-dark-statement strong {

    color:
        #fff;

    font:
        700
        .98rem
        /
        1.55
        Manrope,
        sans-serif;

}


/* =========================================================
   HEADINGS
   ========================================================= */

.id-heading {

    max-width:
        780px;

    margin-bottom:
        56px;

}

.id-heading p {

    max-width:
        710px;

    margin:
        0;

    color:
        var(--id-muted);

    font-size:
        .97rem;

    line-height:
        1.8;

}

.id-heading--center {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

}

.id-heading--center .id-eyebrow {

    justify-content:
        center;

}


/* =========================================================
   RESPONSE CARDS
   ========================================================= */

.id-response-grid {

    display:
        grid;

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

    gap:
        17px;

}

.id-response-card {

    min-height:
        285px;

    padding:
        31px
        27px;

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

    border-radius:
        17px;

    background:
        #fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.id-response-card:hover {

    transform:
        translateY(-7px);

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

}

.id-response-card > span {

    display:
        flex;

    width:
        42px;

    height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        43px;

    border-radius:
        50%;

    background:
        var(--id-gold);

    color:
        var(--id-blue);

    font:
        800
        .70rem
        Manrope,
        sans-serif;

}

.id-response-card h3 {

    margin:
        0
        0
        12px;

    color:
        var(--id-blue);

    font:
        800
        1.2rem
        /
        1.25
        Manrope,
        sans-serif;

}

.id-response-card p {

    margin:
        0;

    color:
        var(--id-muted);

    font-size:
        .87rem;

    line-height:
        1.75;

}


/* =========================================================
   JOURNEY
   ========================================================= */

.id-journey {

    display:
        grid;

    grid-template-columns:
        repeat(5,1fr);

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

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        #fff;

}

.id-journey article {

    min-height:
        285px;

    padding:
        30px
        24px;

    border-right:
        1px solid
        var(--id-line);

}

.id-journey article:last-child {

    border-right:
        0;

}

.id-journey-number {

    margin-bottom:
        49px;

    color:
        var(--id-gold);

    font:
        800
        .76rem
        /
        1
        Manrope,
        sans-serif;

    letter-spacing:
        .14em;

}

.id-journey h3 {

    margin:
        0
        0
        12px;

    color:
        var(--id-blue);

    font:
        800
        1.18rem
        /
        1.25
        Manrope,
        sans-serif;

}

.id-journey p {

    margin:
        0;

    color:
        var(--id-muted);

    font-size:
        .85rem;

    line-height:
        1.72;

}


/* =========================================================
   PITCH
   ========================================================= */

.id-checks {

    display:
        grid;

    gap:
        10px;

    margin:
        27px
        0
        0;

    padding:
        0;

    list-style:
        none;

}

.id-checks li {

    position:
        relative;

    padding-left:
        28px;

    color:
        var(--id-muted);

    font-size:
        .88rem;

    line-height:
        1.65;

}

.id-checks li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--id-gold);

    font-weight:
        800;

}


/* =========================================================
   WHO IT IS FOR
   ========================================================= */

.id-who {

    background:
        #fff;

}

.id-who-grid {

    display:
        grid;

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

    gap:
        17px;

}

.id-who-grid article {

    padding:
        31px
        27px;

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

    border-radius:
        17px;

    background:
        var(--id-soft);

}

.id-who-grid article > span {

    display:
        block;

    margin-bottom:
        43px;

    color:
        var(--id-gold);

    font:
        800
        .75rem
        Manrope,
        sans-serif;

    letter-spacing:
        .14em;

}

.id-who-grid h3 {

    margin:
        0
        0
        12px;

    color:
        var(--id-blue);

    font:
        800
        1.15rem
        /
        1.3
        Manrope,
        sans-serif;

}

.id-who-grid p {

    margin:
        0;

    color:
        var(--id-muted);

    font-size:
        .86rem;

    line-height:
        1.75;

}


/* =========================================================
   PURPOSE
   ========================================================= */

.id-purpose-inner {

    display:
        grid;

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

    gap:
        80px;

    align-items:
        center;

}

.id-purpose-content {

    max-width:
        750px;

}

.id-purpose-visual {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        350px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        23px;

    background:
        rgba(255,255,255,.035);

}

.id-purpose-word {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}

.id-purpose-word span {

    color:
        var(--id-gold-light);

    font:
        800
        clamp(1.7rem,4vw,3rem)
        /
        1
        Manrope,
        sans-serif;

    letter-spacing:
        -.04em;

}

.id-purpose-word span:nth-child(2) {

    color:
        #fff;

}

.id-purpose-word span:nth-child(3) {

    color:
        rgba(255,255,255,.55);

}


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

.id-impact {

    padding:
        115px
        0
        125px;

    background:
        var(--id-soft);

}

.id-impact-heading {

    max-width:
        790px;

    margin-bottom:
        55px;

}

.id-impact-heading p {

    max-width:
        710px;

    margin:
        0;

    color:
        var(--id-muted);

    font-size:
        .97rem;

    line-height:
        1.8;

}

.id-impact-grid {

    display:
        grid;

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

    border-top:
        1px solid
        var(--id-line);

    border-bottom:
        1px solid
        var(--id-line);

}

.id-impact-grid article {

    min-height:
        220px;

    padding:
        35px
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        var(--id-line);

}

.id-impact-grid article:last-child {

    border-right:
        0;

}

.id-impact-grid strong {

    color:
        var(--id-blue);

    font:
        800
        clamp(2.8rem,5vw,4.8rem)
        /
        1
        Manrope,
        sans-serif;

    letter-spacing:
        -.055em;

}

.id-impact-grid span {

    max-width:
        190px;

    color:
        var(--id-muted);

    font:
        700
        .74rem
        /
        1.5
        Manrope,
        sans-serif;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

}

/* =========================================================
   GALLERY — CAROUSEL
   ========================================================= */

.id-gallery {

    background:
        #fff;

}


.id-gallery__carousel {

    width:
        100%;

}


.id-gallery__stage {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    border-radius:
        23px;

    background:
        var(--id-soft);

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

}


.id-gallery__slides {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

}


.id-gallery__slide {

    position:
        absolute;

    inset:
        0;

    margin:
        0;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(1.015);

    transition:
        opacity .4s ease,
        transform .55s cubic-bezier(.22,1,.36,1),
        visibility .4s ease;

}


.id-gallery__slide.is-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);

}


.id-gallery__slide img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


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

.id-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,.30);

    border-radius:
        50%;

    background:
        rgba(24,38,95,.82);

    color:
        #fff;

    font:
        inherit;

    font-size:
        1.25rem;

    line-height:
        1;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(10px);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.id-gallery__arrow:hover {

    background:
        var(--id-blue);

    box-shadow:
        0 12px 30px
        rgba(20,35,90,.25);

}


.id-gallery__arrow:active {

    transform:
        translateY(-50%) scale(.94);

}


.id-gallery__arrow:focus-visible {

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

    outline-offset:
        4px;

}


.id-gallery__arrow--prev {

    left:
        22px;

}


.id-gallery__arrow--next {

    right:
        22px;

}


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

.id-gallery__controls {

    margin-top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.id-gallery__thumbnails {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.id-gallery__thumbnails::-webkit-scrollbar {

    display:
        none;

}


.id-gallery__thumbnail {

    flex:
        0 0 88px;

    width:
        88px;

    height:
        64px;

    padding:
        0;

    overflow:
        hidden;

    border:
        2px solid transparent;

    border-radius:
        10px;

    background:
        var(--id-soft);

    cursor:
        pointer;

    opacity:
        .58;

    transition:
        opacity .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.id-gallery__thumbnail:hover {

    opacity:
        .85;

    transform:
        translateY(-2px);

}


.id-gallery__thumbnail.is-active {

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

    opacity:
        1;

}


.id-gallery__thumbnail:focus-visible {

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

    outline-offset:
        3px;

}


.id-gallery__thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


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

.id-gallery__counter {

    flex:
        0 0 auto;

    color:
        var(--id-muted);

    font:
        800 .76rem/1 Manrope,sans-serif;

    letter-spacing:
        .08em;

    white-space:
        nowrap;

}


.id-gallery__counter [data-gallery-current] {

    color:
        var(--id-blue);

}


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

@media (max-width: 700px) {

    .id-gallery__slides {

        aspect-ratio:
            4 / 3;

    }


    .id-gallery__arrow {

        width:
            46px;

        height:
            46px;

        font-size:
            1.05rem;

    }


    .id-gallery__arrow--prev {

        left:
            12px;

    }


    .id-gallery__arrow--next {

        right:
            12px;

    }


    .id-gallery__controls {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;

    }


    .id-gallery__thumbnails {

        width:
            100%;

    }


    .id-gallery__counter {

        align-self:
            flex-end;

    }

}


@media (max-width: 430px) {

    .id-gallery__slides {

        aspect-ratio:
            1 / 1;

    }


    .id-gallery__arrow {

        width:
            42px;

        height:
            42px;

    }


    .id-gallery__thumbnail {

        flex-basis:
            72px;

        width:
            72px;

        height:
            54px;

    }

}


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

.id-video {

    background:
        var(--id-soft);

}

.id-video-grid {

    display:
        grid;

    grid-template-columns:
        1.25fr
        .75fr;

    gap:
        20px;

}

.id-video-card {

    overflow:
        hidden;

    border-radius:
        19px;

    background:
        #fff;

    box-shadow:
        0 20px 50px
        rgba(20,35,90,.08);

}

.id-video-card > a {

    position:
        relative;

    display:
        block;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        var(--id-navy);

}

.id-video-card img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .45s ease;

}

.id-video-card:hover img {

    transform:
        scale(1.035);

}

.id-video-play {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

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

    display:
        flex;

    width:
        66px;

    height:
        66px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--id-gold);

    color:
        var(--id-blue);

    font-size:
        1.1rem;

}

.id-video-card > div {

    padding:
        27px
        30px
        30px;

}

.id-video-card small {

    color:
        var(--id-gold);

    font-weight:
        800;

    letter-spacing:
        .12em;

}

.id-video-card h3 {

    margin:
        9px
        0
        12px;

    color:
        var(--id-blue);

    font:
        800
        1.28rem
        /
        1.3
        Manrope,
        sans-serif;

}

.id-video-card p {

    margin:
        0;

    color:
        var(--id-muted);

    font-size:
        .89rem;

    line-height:
        1.72;

}

.id-video-link {

    display:
        inline-block;

    margin-top:
        17px;

    color:
        var(--id-blue);

    font:
        800
        .70rem
        Manrope,
        sans-serif;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* =========================================================
   CLOSING
   ========================================================= */

.id-closing {

    padding:
        125px
        0;

    background:
        var(--id-soft);

    text-align:
        center;

}

.id-closing .container {

    max-width:
        920px;

}

.id-closing .id-eyebrow {

    justify-content:
        center;

}

.id-closing h2 {

    font-size:
        clamp(3rem,6vw,5.5rem);

}

.id-closing p {

    max-width:
        720px;

    margin:
        0
        auto;

    color:
        var(--id-muted);

    font-size:
        1rem;

    line-height:
        1.85;

}


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

.id-cta {

    padding:
        85px
        0;

    background:
        #fff;

}

.id-cta-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,.65fr);

    gap:
        60px;

    align-items:
        center;

    padding:
        60px;

    border-radius:
        23px;

    background:
        linear-gradient(
            135deg,
            var(--id-blue),
            var(--id-blue-dark)
        );

    box-shadow:
        0 25px 65px
        rgba(20,35,90,.15);

}

.id-cta h2 {

    color:
        #fff;

}

.id-cta h2 span {

    color:
        var(--id-gold-light);

}

.id-cta p {

    max-width:
        680px;

    margin:
        0;

    color:
        rgba(255,255,255,.74);

    font-size:
        .94rem;

    line-height:
        1.8;

}

.id-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        11px;

}


/* =========================================================
   FOOTER SOCIAL
   IMPORTANT — KEEP THESE CLASSES
   ========================================================= */

.site-footer__social
.site-footer__instagram,
.site-footer__social
.site-footer__facebook {

    color:
        var(--id-gold-light) !important;

    font-weight:
        800 !important;

    text-decoration:
        none;

    transition:
        color .2s ease,
        transform .2s ease;

}

.site-footer__social .site-footer__instagram:hover,
.site-footer__social .site-footer__facebook:hover {

    color:
        #fff !important;

    transform:
        translateY(-1px);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .id-response-grid,
    .id-who-grid {

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

    }

    .id-journey {

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

    }

    .id-journey article:nth-child(3) {

        border-right:
            0;

    }

    .id-journey article:nth-child(-n+3) {

        border-bottom:
            1px solid
            var(--id-line);

    }

    .id-impact-grid {

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

    }

    .id-impact-grid article:nth-child(2) {

        border-right:
            0;

    }

    .id-impact-grid article:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--id-line);

    }

    .id-video-grid {

        grid-template-columns:
            1fr;

        max-width:
            850px;

    }

}


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

@media (max-width: 700px) {


    /* HERO */

    .id-hero__inner {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            35px;

        min-height:
            auto;

        padding:
            62px
            22px
            65px;

    }

    .id-hero__content {

        order:
            1;

    }

    .id-hero__media {

        order:
            2;

    }

    .id-hero h1 {

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

    }

    .id-hero__lead {

        font-size:
            .93rem;

    }

    .id-hero__actions {

        flex-direction:
            column;

    }

    .id-hero__actions .btn {

        width:
            100%;

    }


    /* SECTIONS */

    .id-section,
    .id-impact {

        padding:
            78px
            0
            82px;

    }


    .id-content h2,
    .id-heading h2,
    .id-impact-heading h2,
    .id-closing h2,
    .id-cta h2 {

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

        line-height:
            1;

    }


    /* MOBILE SPLIT
       TEXT FIRST, IMAGE SECOND */

    .id-split,
    .id-split--reverse {

        display:
            flex;

        flex-direction:
            column;

        gap:
            38px;

    }

    .id-split > div {

        order:
            1;

    }

    .id-split > figure {

        order:
            2;

        width:
            100%;

    }


    /* PHOTOS */

    .id-photo img {

        height:
            340px;

    }


    /* RESPONSE */

    .id-response-grid,
    .id-who-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }

    .id-response-card {

        min-height:
            0;

        padding:
            28px
            24px;

    }

    .id-response-card > span {

        margin-bottom:
            30px;

    }


    /* JOURNEY */

    .id-journey {

        grid-template-columns:
            1fr;

    }

    .id-journey article {

        min-height:
            0;

        border-right:
            0 !important;

        border-bottom:
            1px solid
            var(--id-line);

    }

    .id-journey article:last-child {

        border-bottom:
            0;

    }

    .id-journey-number {

        margin-bottom:
            30px;

    }


    /* PURPOSE */

    .id-purpose-inner {

        display:
            flex;

        flex-direction:
            column;

        gap:
            38px;

    }

    .id-purpose-visual {

        width:
            100%;

        min-height:
            260px;

    }


    /* IMPACT */

    .id-impact-grid {

        grid-template-columns:
            1fr;

    }

    .id-impact-grid article,
    .id-impact-grid article:nth-child(2) {

        min-height:
            175px;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--id-line);

    }

    .id-impact-grid article:last-child {

        border-bottom:
            0;

    }


    /* GALLERY */

    .id-gallery-grid {

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

        grid-auto-rows:
            175px;

        gap:
            9px;

    }

    .id-gallery-grid figure.gallery-feature {

        grid-column:
            span 2;

        grid-row:
            span 1;

        aspect-ratio:
            16 / 10;

    }


    /* VIDEO */

    .id-video-grid {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }

    .id-video-card > div {

        padding:
            23px
            21px
            25px;

    }

    .id-video-play {

        width:
            57px;

        height:
            57px;

    }


    /* CLOSING */

    .id-closing {

        padding:
            80px
            0;

    }


    /* CTA */

    .id-cta {

        padding:
            62px
            0;

    }

    .id-cta-inner {

        display:
            block;

        padding:
            38px
            24px;

        border-radius:
            17px;

    }

    .id-cta-actions {

        display:
            grid;

        grid-template-columns:
            1fr;

        margin-top:
            27px;

    }

    .id-cta-actions .btn {

        width:
            100%;

    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

    .id-hero__inner {

        padding:
            54px
            18px
            58px;

    }

    .id-hero h1 {

        font-size:
            clamp(3rem,15vw,4rem);

    }

    .id-photo img {

        height:
            285px;

    }

    .id-gallery-grid {

        grid-auto-rows:
            145px;

        gap:
            7px;

    }

    .id-gallery-grid figure {

        border-radius:
            11px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .id-response-card,
    .id-gallery-grid img,
    .id-video-card img,
    .site-footer__social a {

        transition:
            none;

    }

    .id-response-card:hover,
    .id-gallery-grid figure:hover img,
    .id-video-card:hover img {

        transform:
            none;

    }

}

/* =========================================================
   IGNITING DREAMS — MOBILE HERO TAGS
   Keep Entrepreneurship, Mentorship & Opportunity on one line
   ========================================================= */

@media (max-width: 767px) {

    .id-hero__tags {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .id-hero__tags > span {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 10px;
        letter-spacing: 0.06em;
        padding: 10px 11px;
    }

}