/*==================================================
GREEN ASIST | 01-home-ga-way.css 
THE GREEN ASIST WAY | BUILD-03 | 3 COLUMN SYSTEM
PREMIUM CHALLENGE → WAY TRANSITION
==================================================*/

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

.ga-way{
    --ga-way-compass-size:356px;
    --ga-way-node-size:60px;
    --ga-way-core-size:108px;

    --ga-way-content-top:96px;
    --ga-way-content-bottom:32px;
    --ga-way-balanced-height:500px;
    --ga-way-balanced-bottom:46px;

    --ga-way-card-height:66px;
    --ga-way-card-gap:4px;
    --ga-way-stack-height:416px;

    position:relative;
    width:100%;
    height:var(--ga-way-balanced-height);
    min-height:var(--ga-way-balanced-height);
    overflow:hidden;

    color:var(--ga-way-heading-color);
    font-family:var(--font-main);

    background:
        radial-gradient(circle at 84% 48%,rgba(0,133,66,.034),transparent 31%),
        radial-gradient(circle at 13% 76%,rgba(0,133,66,.024),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f7faf8 100%);

    border-top:1px solid rgba(17,24,25,.08);
    border-bottom:1px solid var(--ga-way-border);
}

.ga-way::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:108px;
    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(17,24,25,.145) 0%,
        rgba(17,24,25,.078) 34%,
        rgba(17,24,25,.032) 66%,
        rgba(255,255,255,0) 100%
    );

    z-index:1;
}

.ga-way::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    pointer-events:none;

    background:linear-gradient(
        90deg,
        rgba(0,133,66,0) 0%,
        rgba(0,133,66,.14) 26%,
        rgba(0,133,66,.22) 50%,
        rgba(0,133,66,.14) 74%,
        rgba(0,133,66,0) 100%
    );

    z-index:2;
}

.ga-way *{
    font-family:var(--font-main);
}

/*==================================================
MAIN GRID
==================================================*/

.ga-way-container{
    position:relative;
    z-index:3;

    width:100%;
    height:100%;

    display:grid;
    grid-template-columns:minmax(0,36%) minmax(0,25%) minmax(0,39%);
    align-items:stretch;
}

/*==================================================
LEFT COLUMN
==================================================*/

.ga-way-left{
    position:relative;
    z-index:3;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    min-width:0;
    overflow:visible;

    padding:46px 28px var(--ga-way-content-bottom) clamp(42px,4vw,74px);

    background:transparent;
}

.ga-way-left::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 16% 18%,rgba(0,133,66,.032),transparent 31%),
        radial-gradient(circle at 82% 82%,rgba(32,34,37,.014),transparent 28%);
}

.ga-way-left > *{
    position:relative;
    z-index:2;
}

/*==================================================
LEFT TEXT
==================================================*/

.ga-way-kicker{
    display:block;

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

    margin:0;

    white-space:nowrap;

    color:var(--ga-way-accent);

    font-size:clamp(1.4rem,2.18vw,1.8rem);
    font-weight:750;
    line-height:1;
    letter-spacing:.015em;
    text-transform:uppercase;
}

.ga-way-kicker::after{
    content:"";
    display:block;

    width:100%;
    height:1px;

    margin-top:12px;

    background:linear-gradient(
        90deg,
        rgba(0,133,66,.76) 0%,
        rgba(0,133,66,.24) 46%,
        rgba(0,133,66,.05) 100%
    );
}

.ga-way-title{
    width:100%;
    max-width:560px;

    margin:28px 0 0;

    color:var(--ga-way-heading-color);

    font-size:clamp(2.35rem,2.62vw,3.05rem);
    font-weight:760;
    line-height:1.10;
    letter-spacing:-.056em;
}

.ga-way-title span{
    display:block;
    white-space:nowrap;
}

.ga-way-title span + span{
    margin-top:4px;
}

.ga-way-lead{
    max-width:500px;

    margin:22px 0 0;

    color:var(--ga-way-body-color);

    font-size:var(--ga-way-lead-size);
    font-weight:400;
    line-height:1.68;
}

/*==================================================
MANIFESTO
==================================================*/

.ga-way-manifesto{
    position:relative;

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

    margin-top:42px;
    padding:20px 24px;

    display:grid;
    grid-template-columns:50px 1fr;
    gap:18px;
    align-items:center;

    border-radius:18px;

    background:
        linear-gradient(135deg,#ffffff 0%,#f3faf6 100%);

    border:1px solid rgba(0,133,66,.12);

    box-shadow:
        0 18px 34px rgba(32,34,37,.06),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.ga-way-manifesto::before{
    content:"";
    position:absolute;

    left:0;
    top:18px;
    bottom:18px;

    width:3px;
    border-radius:999px;

    background:rgba(0,133,66,.72);
}

.ga-way-manifesto-mark{
    position:relative;

    width:50px;
    height:50px;

    border-radius:50%;

    background:
        radial-gradient(circle at center,#ffffff 0 31%,transparent 32%),
        var(--ga-way-accent-soft);

    box-shadow:
        inset 0 0 0 1px rgba(0,133,66,.13),
        0 10px 20px rgba(0,133,66,.08);
}

.ga-way-manifesto-mark::before,
.ga-way-manifesto-mark::after{
    content:"";
    position:absolute;

    left:50%;
    top:50%;

    background:var(--ga-way-accent);

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

.ga-way-manifesto-mark::before{
    width:2px;
    height:20px;
}

.ga-way-manifesto-mark::after{
    width:20px;
    height:2px;
}

.ga-way-manifesto-label{
    display:block;

    margin-bottom:7px;

    color:var(--ga-way-accent);

    font-size:var(--ga-way-manifesto-label-size);
    font-weight:800;
    line-height:1;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.ga-way-manifesto p{
    max-width:410px;

    margin:0;

    color:var(--ga-way-heading-color);

    font-size:var(--ga-way-manifesto-text-size);
    font-weight:650;
    line-height:1.36;
}

/*==================================================
VALUES
==================================================*/

.ga-way-values{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;

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

    margin-top:54px;
}

.ga-way-values span{
    height:34px;
    min-height:34px;
    box-sizing:border-box;
    white-space:nowrap;

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

    padding:0 10px;

    border-radius:999px;

    background:rgba(0,133,66,.07);
    color:var(--ga-way-accent);

    font-size:.74rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.055em;
    text-transform:uppercase;

    border:1px solid rgba(0,133,66,.16);
    box-shadow:none;
}

/*==================================================
MIDDLE COLUMN | PRINCIPLE CARDS
==================================================*/

.ga-way-middle{
    position:relative;
    z-index:2;

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

    min-width:0;

    /* Optical alignment: principles stack center follows the left content group center */
    padding:
        calc(var(--ga-way-content-top) - 58px)
        0
        var(--ga-way-content-bottom)
        62px;
}

.ga-way-principles{
    width:100%;
    max-width:320px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(6,var(--ga-way-card-height));
    gap:var(--ga-way-card-gap);
}

.ga-way-principle{
    position:relative;
    min-height:0;
    display:grid;
    grid-template-columns:32px 26px 1fr;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-radius:15px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcfb 100%);
    border:1px solid rgba(32,34,37,.07);
    box-shadow:
        0 10px 22px rgba(32,34,37,.04),
        inset 0 1px 0 rgba(255,255,255,.92);
    overflow:visible;
}

/* Progressive premium surface tones */
.ga-way-principle:nth-child(1){
    background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%);
    border-color:rgba(32,34,37,.065);
    box-shadow:
        0 10px 22px rgba(32,34,37,.036),
        inset 0 1px 0 rgba(255,255,255,.97);
}

.ga-way-principle:nth-child(2){
    background:linear-gradient(180deg,#fdfefd 0%,#f8fcfa 100%);
    border-color:rgba(0,133,66,.065);
    box-shadow:
        0 10px 22px rgba(32,34,37,.037),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.ga-way-principle:nth-child(3){
    background:linear-gradient(180deg,#fcfefd 0%,#f6fbf8 100%);
    border-color:rgba(0,133,66,.075);
    box-shadow:
        0 10px 22px rgba(32,34,37,.038),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ga-way-principle:nth-child(4){
    background:linear-gradient(180deg,#fbfdfc 0%,#f4f9f6 100%);
    border-color:rgba(0,133,66,.08);
    box-shadow:
        0 10px 22px rgba(32,34,37,.039),
        inset 0 1px 0 rgba(255,255,255,.94);
}

.ga-way-principle:nth-child(5){
    background:linear-gradient(180deg,#fafcfb 0%,#f2f7f4 100%);
    border-color:rgba(0,133,66,.075);
    box-shadow:
        0 10px 22px rgba(32,34,37,.04),
        inset 0 1px 0 rgba(255,255,255,.93);
}

.ga-way-principle:nth-child(6){
    background:linear-gradient(180deg,#f8fbf9 0%,#eef5f1 100%);
    border-color:rgba(0,133,66,.07);
    box-shadow:
        0 10px 22px rgba(32,34,37,.042),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.ga-way-principle::after{
    content:"";
    position:absolute;

    top:50%;
    left:calc(100% + 10px);

    width:38px;
    height:1px;

    transform:translateY(-50%);

    background:linear-gradient(
        90deg,
        rgba(0,133,66,.18) 0%,
        rgba(0,133,66,.08) 72%,
        rgba(0,133,66,.02) 100%
    );
}

.ga-way-principle::before{
    content:"";
    position:absolute;

    top:50%;
    left:calc(100% + 46px);

    width:7px;
    height:7px;

    opacity:.42;

    transform:translateY(-50%) rotate(45deg);

    border-top:1.25px solid rgba(0,133,66,.22);
    border-right:1.25px solid rgba(0,133,66,.22);
}

.ga-way-principle img{
    width:31px;
    height:31px;

    object-fit:contain;
}

.ga-way-principle span{
    color:var(--ga-way-accent);

    font-size:.96rem;
    font-weight:750;
    letter-spacing:-.02em;
}

.ga-way-principle h3{
    margin:0 0 3px;

    color:var(--ga-way-heading-color);

    font-size:.74rem;
    font-weight:750;
    line-height:1.1;
    text-transform:uppercase;
    letter-spacing:0;
}

.ga-way-principle p{
    margin:0;

    color:var(--ga-way-body-color);

    font-size:.66rem;
    line-height:1.28;
}

/*==================================================
RIGHT COLUMN | COMPASS GROUP
==================================================*/

.ga-way-right{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-rows:auto 1fr auto;
    align-items:start;
    justify-items:center;

    min-width:0;
    overflow:visible;

    /* Balanced bottom gap: compass bottom text follows the lower edge of principle card 06 without leaving excess empty space */
    padding:
        52px
        clamp(28px,2.4vw,48px)
        var(--ga-way-balanced-bottom)
        12px;
}

.ga-way-right::before{
    content:"";
    position:absolute;

    left:50%;
    top:50%;

    width:390px;
    height:390px;

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

    background:radial-gradient(circle,rgba(0,133,66,.034),transparent 70%);

    pointer-events:none;
}

.ga-way-right > *{
    position:relative;
    z-index:2;
}

/*==================================================
COMPASS HEAD
==================================================*/

.ga-way-compass-head{
    width:100%;
    max-width:410px;

    margin:0;

    text-align:center;
}

.ga-way-compass-head span{
    display:block;

    margin:0;

    color:var(--ga-way-accent);

    font-size:.76rem;
    font-weight:850;
    line-height:1;
    letter-spacing:.27em;
    text-transform:uppercase;
    white-space:nowrap;
}

.ga-way-compass-head p{
    margin:7px 0 0;

    color:var(--ga-way-muted-color);

    font-size:.78rem;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    opacity:.88;
}

.ga-way-compass-head strong{
    color:var(--ga-way-accent);
    font-weight:800;
}

/*==================================================
COMPASS
==================================================*/

.ga-way-compass{
    position:relative;
    width:var(--ga-way-compass-size);
    height:var(--ga-way-compass-size);
    align-self:start;
    justify-self:center;
    margin-top:8px;
}

.ga-way-outer-ring{
    position:absolute;
    inset:0;
    border-radius:50%;

    border:1px solid rgba(32,34,37,.16);
    background:
        conic-gradient(
            from 24deg,
            rgba(255,255,255,.94),
            rgba(225,233,228,.94),
            rgba(255,255,255,.98),
            rgba(221,229,224,.92),
            rgba(255,255,255,.94)
        );

    box-shadow:
        0 18px 42px rgba(32,34,37,.065),
        0 0 0 6px rgba(255,255,255,.54),
        inset 0 0 0 1px rgba(255,255,255,.76),
        inset 0 0 14px rgba(0,133,66,.028);

    opacity:.97;
}

.ga-way-ring{
    position:absolute;
    inset:56px;
    border-radius:50%;

    border:9px solid rgba(0,133,66,.92);
    background:transparent;

    box-shadow:
        0 18px 34px rgba(0,133,66,.13),
        0 0 0 1px rgba(255,255,255,.76),
        inset 0 0 0 1px rgba(255,255,255,.72),
        inset 0 0 12px rgba(255,255,255,.16);
}

.ga-way-core{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--ga-way-core-size);
    height:var(--ga-way-core-size);
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:
        radial-gradient(circle at 42% 30%, #ffffff 0%, #ffffff 35%, #f6fbf8 58%, #e9f4ee 100%);
    color:var(--ga-way-accent);
    text-align:center;

    border:1px solid rgba(0,133,66,.18);

    box-shadow:
        0 22px 44px rgba(32,34,37,.13),
        0 0 0 8px rgba(255,255,255,.66),
        0 0 0 13px rgba(0,133,66,.045),
        0 0 34px rgba(0,133,66,.16),
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -14px 24px rgba(0,133,66,.055);
}

.ga-way-core::before{
    content:none;
}

.ga-way-core::after{
    content:"";
    position:absolute;
    left:22%;
    top:16%;
    width:44%;
    height:24%;
    border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0));
    pointer-events:none;
    opacity:.78;
}

.ga-way-core span{
    position:relative;
    z-index:2;

    display:block;
    margin:0;
    font-size:1.02rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.05em;
    text-align:center;
}

.ga-way-node{
    position:absolute;
    width:var(--ga-way-node-size);
    height:var(--ga-way-node-size);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    border:1px solid rgba(32,34,37,.07);
    box-shadow:
        0 15px 26px rgba(32,34,37,.075),
        inset 0 1px 0 rgba(255,255,255,.92);
    transform:translate(-50%,-50%);
}

.ga-way-node img{
    width:34px;
    height:34px;
    object-fit:contain;
}

/*==================================================
NODE POSITIONS
==================================================*/

.ga-way-node-01{ left:86%; top:50%; }
.ga-way-node-02{ left:68%; top:18.82%; }
.ga-way-node-03{ left:32%; top:18.82%; }
.ga-way-node-04{ left:14%; top:50%; }
.ga-way-node-05{ left:32%; top:81.18%; }
.ga-way-node-06{ left:68%; top:81.18%; }

/*==================================================
COMPASS BOTTOM
==================================================*/

.ga-way-bottom{
    width:100%;
    max-width:410px;
    align-self:end;
    margin:0;
    text-align:center;
}

.ga-way-bottom-line{
    display:none;
}

.ga-way-bottom p{
    margin:0;
    color:var(--ga-way-body-color);
    font-size:.74rem;
    font-weight:500;
    line-height:1.32;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.9;
}

.ga-way-bottom strong{
    color:var(--ga-way-accent);
    font-weight:700;
}

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

/*==================================================
NOTE
Responsive rules for this HOME section are centralized in 07_home.css.
This file intentionally contains desktop/base section styling only.
==================================================*/