:root{
    --connect-navy:#071d3d;
    --connect-blue:#0a5aa8;
    --connect-sky:#eaf6fb;
    --connect-orange:#f26a21;
    --connect-red:#b42228;
    --connect-ink:#173449;
    --connect-muted:#587485;
    --connect-line:#cfe3ec;
    --connect-white:#ffffff;
}

/* =========================================================
   GLOBAL
========================================================= */

html{
    scroll-behavior:smooth;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}


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

.connect-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
    align-items:center;
    gap:clamp(34px,6vw,84px);

    min-height:min(700px,78vh);

    padding:
        clamp(64px,9vw,118px)
        clamp(22px,7vw,104px);

    color:var(--connect-white);

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(42,151,204,.38),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #061832 0%,
            #083365 58%,
            #0a5aa8 100%
        );
}

.connect-hero__glow{
    position:absolute;
    z-index:-1;

    width:460px;
    height:460px;

    right:-150px;
    bottom:-250px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

    box-shadow:
        0 0 0 70px rgba(255,255,255,.035),
        0 0 0 140px rgba(255,255,255,.025);
}

.connect-hero .eyebrow{
    color:#8fd7f5;
}

.connect-hero h1{
    max-width:880px;

    margin:.22em 0 .42em;

    color:var(--connect-white);

    font:
        clamp(2.55rem,6vw,5.6rem)/.98
        Georgia,
        serif;

    letter-spacing:-.035em;
}

.connect-hero__copy > p:not(.eyebrow){
    max-width:720px;

    margin:0;

    color:#d9ebf6;

    font-size:clamp(1.05rem,1.6vw,1.25rem);
    line-height:1.7;
}


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

.connect-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:18px 26px;

    margin-top:32px;
}

.connect-hero .button{
    background:var(--connect-orange);
    border-color:var(--connect-orange);
    color:var(--connect-white);
}

.connect-hero .button:hover,
.connect-hero .button:focus-visible{
    background:#d95312;
    border-color:#d95312;
}

.connect-text-link{
    display:inline-flex;
    align-items:center;
    gap:9px;

    color:var(--connect-white);

    font-weight:800;
    text-decoration:none;
}

.connect-text-link:hover,
.connect-text-link:focus-visible{
    text-decoration:underline;
    text-underline-offset:4px;
}

.connect-text-link span{
    color:var(--connect-orange);
}


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

.connect-hero__brand{
    display:flex;
    align-items:center;
    justify-content:center;

    width:min(100%,390px);
    aspect-ratio:1/1;

    justify-self:end;

    padding:clamp(24px,4vw,46px);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.3);
    border-radius:32px;

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

    box-shadow:0 28px 80px rgba(0,0,0,.24);

    transform:rotate(2deg);
}

.connect-hero__brand img{
    position:static !important;

    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:100% !important;

    margin:0 auto !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:none !important;
}


/* =========================================================
   HEALING HOME GROUP / PARENT SECTION
========================================================= */

.connect-parent{
    display:grid;

    grid-template-columns:
        minmax(220px,.75fr)
        minmax(0,1.25fr);

    gap:clamp(30px,7vw,110px);

    padding:
        clamp(62px,9vw,112px)
        clamp(22px,7vw,104px);

    background:var(--connect-white);
}

.connect-parent h2,
.connect-section-heading h2,
.connect-newsletter h2{
    margin:.2em 0;

    color:#214d66;

    font:
        clamp(2rem,4.3vw,4rem)/1.04
        Georgia,
        serif;
}

.connect-parent > div:last-child{
    max-width:790px;
}

.connect-parent p,
.connect-section-heading > p:last-child,
.connect-newsletter p{
    color:var(--connect-muted);

    font-size:1.08rem;
    line-height:1.75;
}

.connect-text-link--dark{
    margin-top:10px;
    color:var(--connect-blue);
}


/* =========================================================
   INITIATIVES SECTION
========================================================= */

.connect-initiatives{
    padding:
        clamp(62px,9vw,112px)
        clamp(22px,7vw,104px);

    background:var(--connect-sky);

    border-block:1px solid var(--connect-line);

    scroll-margin-top:100px;
}

.connect-section-heading{
    max-width:790px;
    margin-bottom:38px;
}

.connect-section-heading > p:last-child{
    margin-bottom:0;
}


/* =========================================================
   INITIATIVE GRID
========================================================= */

.connect-grid{
    display:grid;

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

    gap:22px;

    align-items:stretch;
}


/* =========================================================
   INITIATIVE CARDS
========================================================= */

.connect-card{
    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:100%;

    border:1px solid var(--connect-line);
    border-radius:22px;

    background:var(--connect-white);

    box-shadow:
        0 18px 48px rgba(33,77,102,.09);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.connect-card::before{
    content:"";

    display:block;

    width:100%;
    height:5px;

    flex:0 0 5px;

    background:var(--connect-blue);
}

.connect-card--hope::before{
    background:var(--connect-red);
}

.connect-card--bsn::before{
    background:
        linear-gradient(
            90deg,
            var(--connect-orange),
            var(--connect-red),
            var(--connect-blue)
        );
}

.connect-card--aab::before{
    background:var(--connect-blue);
}

.connect-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 26px 64px rgba(33,77,102,.14);
}


/* =========================================================
   CARD LOGO AREA
========================================================= */

.connect-card__logo{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    height:245px;
    min-height:245px;
    flex:0 0 245px;

    padding:26px 30px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );

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

.connect-card__logo img{
    position:static !important;

    display:block !important;

    width:auto !important;
    height:auto !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:100% !important;
    max-height:190px !important;

    margin:0 auto !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:none !important;

    inset:auto !important;
    float:none !important;
}


/* Hope One Walk */

.connect-card--hope .connect-card__logo img{
    max-width:230px !important;
    max-height:205px !important;
}


/* Burn Survivor Network */

.connect-card--bsn .connect-card__logo img{
    max-width:335px !important;
    max-height:170px !important;
}


/* All About Burns */

.connect-card--aab .connect-card__logo img{
    max-width:365px !important;
    max-height:190px !important;
}


/* =========================================================
   CARD BODY
========================================================= */

.connect-card__body{
    position:relative;
    z-index:2;

    display:flex;
    flex:1;
    flex-direction:column;

    min-width:0;

    padding:28px;

    background:var(--connect-white);
}

.connect-card__type{
    margin:0 0 8px;

    color:var(--connect-blue);

    font-size:.78rem;
    font-weight:900;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.connect-card--hope .connect-card__type{
    color:var(--connect-red);
}

.connect-card h3{
    margin:0 0 12px;

    color:var(--connect-navy);

    font:
        1.75rem/1.1
        Georgia,
        serif;
}

.connect-card__body > p:not(.connect-card__type){
    margin:0 0 24px;

    color:var(--connect-muted);

    font-size:1rem;
    line-height:1.65;
}

.connect-card__body > a{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:auto;

    color:var(--connect-blue);

    font-weight:850;
    text-decoration:none;
}

.connect-card--hope .connect-card__body > a{
    color:var(--connect-red);
}

.connect-card__body > a:hover,
.connect-card__body > a:focus-visible{
    text-decoration:underline;
    text-underline-offset:4px;
}


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

.connect-newsletter{
    display:grid;

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

    align-items:center;

    gap:36px;

    padding:
        clamp(58px,8vw,96px)
        clamp(22px,7vw,104px);

    color:var(--connect-white);

    background:
        linear-gradient(
            120deg,
            var(--connect-navy),
            #0a4d86
        );
}

.connect-newsletter .eyebrow{
    color:#8fd7f5;
}

.connect-newsletter h2{
    max-width:850px;
    color:var(--connect-white);
}

.connect-newsletter p{
    max-width:780px;

    margin-bottom:0;

    color:#d9ebf6;
}

.connect-newsletter__button{
    white-space:nowrap;

    background:var(--connect-orange) !important;
    border-color:var(--connect-orange) !important;
    color:#ffffff !important;
}


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

@media(max-width:980px){

    .connect-hero{
        grid-template-columns:1fr;
        min-height:0;
    }

    .connect-hero__brand{
        width:min(72vw,330px);

        justify-self:start;

        transform:none;
    }

    .connect-grid{
        grid-template-columns:1fr;
    }

    .connect-card{
        display:grid;

        grid-template-columns:
            minmax(230px,.72fr)
            minmax(0,1.28fr);
    }

    .connect-card::before{
        position:absolute;

        inset:0 auto 0 0;

        width:5px;
        height:auto;

        z-index:3;
    }

    .connect-card__logo{
        width:100%;

        height:300px;
        min-height:300px;

        flex:auto;

        padding:30px;

        border-right:1px solid var(--connect-line);
        border-bottom:0;
    }

    .connect-card--hope .connect-card__logo img{
        max-width:230px !important;
        max-height:220px !important;
    }

    .connect-card--bsn .connect-card__logo img{
        max-width:320px !important;
        max-height:185px !important;
    }

    .connect-card--aab .connect-card__logo img{
        max-width:330px !important;
        max-height:195px !important;
    }

    .connect-card__body{
        padding:32px;
    }
}


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

@media(max-width:700px){

    .connect-parent,
    .connect-newsletter{
        grid-template-columns:1fr;
    }

    .connect-card{
        display:flex;
        flex-direction:column;
    }

    .connect-card::before{
        position:static;

        width:100%;
        height:5px;

        flex:0 0 5px;
    }

    .connect-card__logo{
        width:100%;

        height:220px;
        min-height:220px;

        flex:0 0 220px;

        padding:24px 28px;

        border-right:0;
        border-bottom:1px solid var(--connect-line);
    }

    .connect-card--hope .connect-card__logo img{
        max-width:195px !important;
        max-height:175px !important;
    }

    .connect-card--bsn .connect-card__logo img{
        max-width:290px !important;
        max-height:150px !important;
    }

    .connect-card--aab .connect-card__logo img{
        max-width:305px !important;
        max-height:160px !important;
    }

    .connect-newsletter__button{
        justify-self:start;
    }
}


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

@media(max-width:480px){

    .connect-hero h1{
        font-size:2.35rem;
    }

    .connect-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .connect-hero__brand{
        width:100%;
        border-radius:24px;
    }

    .connect-card__logo{
        height:205px;
        min-height:205px;

        flex-basis:205px;

        padding:22px;
    }

    .connect-card--hope .connect-card__logo img{
        max-width:175px !important;
        max-height:160px !important;
    }

    .connect-card--bsn .connect-card__logo img{
        max-width:270px !important;
        max-height:140px !important;
    }

    .connect-card--aab .connect-card__logo img{
        max-width:280px !important;
        max-height:150px !important;
    }

    .connect-card__body{
        padding:24px 22px;
    }

    .connect-card h3{
        font-size:1.6rem;
    }
}


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

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

    html{
        scroll-behavior:auto;
    }

    .connect-card{
        transition:none;
    }

    .connect-card:hover{
        transform:none;
    }
}