/*==================================================
GREEN ASIST | 01-home-methodology.css
SOLUTION METHODOLOGY | PREMIUM GRAPHITE FINAL
==================================================*/

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

.challenges{
    position:relative;
    overflow:hidden;

    scroll-margin-top:100px;

    padding:58px 0 54px;

    color:#f1f5f2;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(40,94,69,.15) 0%,
            rgba(40,94,69,.055) 30%,
            rgba(40,94,69,0) 58%
        ),
        radial-gradient(
            circle at 8% 10%,
            rgba(105,139,119,.09) 0%,
            rgba(105,139,119,0) 34%
        ),
        radial-gradient(
            circle at 90% 16%,
            rgba(124,151,137,.065) 0%,
            rgba(124,151,137,0) 34%
        ),
        linear-gradient(
            180deg,
            #17221f 0%,
            #121c19 54%,
            #0e1614 100%
        );
}

.challenges::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.020) 1px,
            transparent 1px
        );

    background-size:88px 88px;

    opacity:.12;
}

.challenges::after{
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:-1px;

    height:44px;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(14,22,20,0) 0%,
            rgba(14,22,20,.18) 48%,
            rgba(14,22,20,.45) 100%
        );

    z-index:2;
}

/*==================================================
CONTAINER
==================================================*/

.challenges .container,
.challenges-container{
    position:relative;
    z-index:3;
}

/*==================================================
HEADER
==================================================*/

.challenges-head{
    display:grid;
    grid-template-columns:minmax(360px,545px) minmax(420px,1fr);
    align-items:end;

    gap:52px;

    max-width:100%;
}

.challenges-title-block{
    min-width:0;
}

.challenges-copy-block{
    max-width:760px;

    padding-bottom:7px;
}

.challenges .section-header{
    max-width:1080px;

    margin:0 auto 28px;
}

.challenges .section-kicker{
    display:none;
}

.challenges-title,
.challenges .section-title{
    max-width:760px;

    margin:0;

    color:#f4f7f5;

    font-size:clamp(33px,2.7vw,44px);
    line-height:1.04;
    font-weight:770;
    letter-spacing:-.046em;
}

.challenges-text,
.challenges .section-text{
    max-width:780px;

    margin:0;

    color:rgba(235,241,237,.75);

    font-size:15px;
    line-height:1.58;
}

.challenges-lead{
    position:relative;

    max-width:760px;

    margin:15px 0 0;
    padding-left:20px;

    color:rgba(244,248,245,.90);

    font-size:16px;
    line-height:1.54;
    font-weight:650;
}

.challenges-lead::before{
    content:"";

    position:absolute;
    left:0;
    top:.32em;

    width:3px;
    height:calc(100% - .64em);

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #83c99a,
            rgba(131,201,154,.16)
        );
}

/*==================================================
DIVIDER
==================================================*/

.challenges-divider,
.challenge-divider{
    position:relative;

    width:100%;
    height:1px;

    margin:22px 0 24px;

    background:
        linear-gradient(
            90deg,
            rgba(135,194,154,0) 0%,
            rgba(135,194,154,.13) 18%,
            rgba(135,194,154,.28) 50%,
            rgba(135,194,154,.13) 82%,
            rgba(135,194,154,0) 100%
        );
}

.challenges-divider::before,
.challenge-divider::before{
    content:"";

    position:absolute;
    left:50%;
    top:50%;

    width:220px;
    height:24px;

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

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(113,184,137,.08) 0%,
            rgba(113,184,137,0) 72%
        );
}

/*==================================================
METHODOLOGY GRID
==================================================*/

.methodology-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-items:start;

    gap:14px;
}

.methodology-item{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:10px;

    text-align:center;
}

/*==================================================
METHODOLOGY VISUAL
==================================================*/

.methodology-visual{
    position:relative;
    overflow:hidden;

    width:100%;
    max-width:158px;

    aspect-ratio:1 / 1;

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

    border:1px solid rgba(255,255,255,.105);
    border-radius:25px;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(89,161,112,.11) 0%,
            rgba(89,161,112,.035) 34%,
            rgba(89,161,112,0) 68%
        ),
        radial-gradient(
            circle at 20% 16%,
            rgba(255,255,255,.065) 0%,
            rgba(255,255,255,0) 34%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.047),
            rgba(255,255,255,.012)
        ),
        rgba(25,35,32,.72);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.060),
        inset 0 -1px 0 rgba(0,0,0,.13),
        0 18px 38px rgba(0,0,0,.20),
        0 0 0 1px rgba(255,255,255,.010);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}

.methodology-visual::before{
    content:"";

    position:absolute;
    inset:13px;

    border:1px solid rgba(137,200,157,.055);
    border-radius:19px;

    pointer-events:none;
}

.methodology-visual::after{
    content:"";

    position:absolute;
    left:50%;
    top:50%;

    width:66%;
    height:66%;

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

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(98,188,128,.095) 0%,
            rgba(98,188,128,.030) 32%,
            rgba(98,188,128,0) 70%
        );

    filter:blur(7px);
}

/*==================================================
METHODOLOGY ICONS
==================================================*/

.methodology-icon{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

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

    pointer-events:none;
}

.methodology-icon img{
    width:clamp(50px,3.3vw,62px);
    height:clamp(50px,3.3vw,62px);

    display:block;

    object-fit:contain;

    opacity:.97;

    filter:
        brightness(0)
        saturate(100%)
        invert(79%)
        sepia(28%)
        saturate(585%)
        hue-rotate(79deg)
        brightness(103%)
        contrast(91%)
        drop-shadow(0 0 7px rgba(98,205,135,.16));

    transition:
        transform .28s ease,
        opacity .28s ease,
        filter .28s ease;
}

.methodology-item:hover .methodology-visual{
    transform:translateY(-3px);

    border-color:rgba(137,211,162,.23);

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(92,179,122,.15) 0%,
            rgba(92,179,122,.045) 34%,
            rgba(92,179,122,0) 68%
        ),
        radial-gradient(
            circle at 20% 16%,
            rgba(255,255,255,.080) 0%,
            rgba(255,255,255,0) 34%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.017)
        ),
        rgba(28,40,36,.82);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        inset 0 -1px 0 rgba(0,0,0,.13),
        0 22px 46px rgba(0,0,0,.23),
        0 0 24px rgba(104,200,137,.055);
}

.methodology-item:hover .methodology-icon img{
    transform:scale(1.045);

    opacity:1;

    filter:
        brightness(0)
        saturate(100%)
        invert(84%)
        sepia(30%)
        saturate(640%)
        hue-rotate(79deg)
        brightness(106%)
        contrast(93%)
        drop-shadow(0 0 8px rgba(104,215,143,.20));
}

/*==================================================
METHODOLOGY TEXT
==================================================*/

.methodology-item h3{
    max-width:165px;

    margin:0;

    color:rgba(247,249,248,.90);

    font-size:14.25px;
    line-height:1.28;
    font-weight:390;
    letter-spacing:-.02em;
}

/*==================================================
LEGACY SAFETY
==================================================*/

.challenge-grid,
.challenge-card,
.challenge-marker,
.challenge-tag,
.challenge-impact{
    display:contents;
}

.challenge-card p{
    display:none;
}

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

.challenges-close{
    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:25px;
}

.challenges-close p,
.challenges-closing{
    position:relative;

    max-width:860px;

    margin:0;
    padding:0 28px;

    color:rgba(247,249,248,.92);

    font-size:15px;
    line-height:1.48;
    font-weight:400;
    letter-spacing:-.018em;
    text-align:center;
}

.challenges-close p::before,
.challenges-close p::after,
.challenges-closing::before,
.challenges-closing::after{
    content:"";

    position:absolute;
    top:50%;

    width:46px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(124,194,147,0),
            rgba(124,194,147,.32)
        );
}

.challenges-close p::before,
.challenges-closing::before{
    right:100%;
}

.challenges-close p::after,
.challenges-closing::after{
    left:100%;

    transform:scaleX(-1);
}

.challenges-link{
    display:none;
}

/*==================================================
RESPONSIVE
==================================================*/

/*==================================================
NOTE
Responsive rules for this HOME section are centralized
in 01-home.css and 09-responsive.css.

This file intentionally contains desktop/base section
styling only.
==================================================*/