/* =========================================================
   Gizmoo Core
   About Page
   assets/css/pages/page-about.css
   ========================================================= */


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

.gizmoo-about-hero {

    padding: 24px 0 70px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(31,133,91,.16),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            var(--gizmoo-bg)
        );

}


.gizmoo-about-hero-grid {

    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(360px,.9fr);

    align-items:center;

    gap:64px;

}


.gizmoo-about-hero-content h1 {

    max-width:760px;

    margin:0 0 20px;

    font-size:
    clamp(38px,4.5vw,54px);

    line-height:1.25;

    letter-spacing:-.04em;

}


.gizmoo-about-hero-content > p:not(.gizmoo-section-eyebrow) {

    max-width:620px;

    margin-bottom:30px;

    color:var(--gizmoo-text-muted);

    font-size:17px;

    line-height:1.9;

}



/* Actions */

.gizmoo-about-actions {

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}



/* Hero Card */

.gizmoo-about-hero-card {

    position:relative;

    overflow:hidden;

    padding:36px;

    min-height:360px;

    display:flex;

    flex-direction:column;

    justify-content:center;


    border:

    1px solid

    rgba(31,133,91,.18);


    border-radius:

    var(--gizmoo-radius-lg);


    background:

    linear-gradient(
        145deg,
        rgba(31,133,91,.14),
        transparent 60%
    ),
    var(--gizmoo-bg-soft);


    box-shadow:

    var(--gizmoo-shadow-medium);

}


.gizmoo-about-hero-card::before {

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    top:-100px;

    right:-90px;

    border-radius:50%;

    background:

    rgba(31,133,91,.14);

}



.gizmoo-about-card-label {

    position:relative;

    z-index:1;

    margin-bottom:20px;

    color:var(--gizmoo-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.12em;

}



.gizmoo-about-hero-card h3 {

    position:relative;

    z-index:1;

    margin-bottom:40px;

    font-size:28px;

    line-height:1.5;

}



.gizmoo-about-card-items {

    position:relative;

    z-index:1;

    display:grid;

    gap:14px;

}



.gizmoo-about-card-items div {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:12px;

    border-bottom:

    1px solid

    rgba(23,33,29,.10);

}



.gizmoo-about-card-items strong {

    color:var(--gizmoo-primary);

    font-size:20px;

}



.gizmoo-about-card-items span {

    color:var(--gizmoo-text-secondary);

}





/* =========================================================
   INTRO
   ========================================================= */


.gizmoo-about-intro {

    padding:30px 0 50px;

}

.gizmoo-about-intro {
    padding: 32px 0 56px;
}


.gizmoo-about-values {
    padding: 56px 0;
}


.gizmoo-about-process {
    padding: 28px 0;
}


.gizmoo-about-cta {
    padding: 28px 20px;
}



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


.gizmoo-about-values {

    padding:50px 0;

    background:

    var(--gizmoo-bg-secondary);

}



.gizmoo-about-values-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:24px;

}



.gizmoo-about-value-card {

    padding:28px;


    background:white;


    border:

    1px solid

    var(--gizmoo-border);


    border-radius:

    var(--gizmoo-radius-lg);


    transition:

    transform .2s ease,

    box-shadow .2s ease;

}



.gizmoo-about-value-card:hover {

    transform:translateY(-4px);

    box-shadow:

    var(--gizmoo-shadow-soft);

}



.gizmoo-about-value-card span {

    display:block;

    margin-bottom:20px;

    color:var(--gizmoo-primary);

    font-size:22px;

    font-weight:700;

}


.gizmoo-about-value-card h3 {

    margin-bottom:12px;

    font-size:22px;

}


.gizmoo-about-value-card p {

    margin:0;

    color:var(--gizmoo-text-muted);

}





/* =========================================================
   PROCESS
   ========================================================= */


.gizmoo-about-process {

    padding:80px 0;

}



.gizmoo-about-process-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:24px;

}



.gizmoo-about-process-grid > div {

    padding:28px;


    border:

    1px solid

    var(--gizmoo-border);


    border-radius:

    var(--gizmoo-radius-lg);


    background:white;

}



.gizmoo-about-process-grid strong {

    display:block;

    margin-bottom:18px;

    color:var(--gizmoo-primary);

    font-size:28px;

}



.gizmoo-about-process-grid h3 {

    margin-bottom:10px;

}



.gizmoo-about-process-grid p {

    margin:0;

    color:var(--gizmoo-text-muted);

}





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


.gizmoo-about-cta {

    padding:70px 20px;

    text-align:center;


    background:

    linear-gradient(
        135deg,
        #10251D,
        #17211D
    );


    color:white;

}



.gizmoo-about-cta h2 {

    margin:0 auto 18px;

    max-width:650px;

    color:white;

    font-size:40px;

}



.gizmoo-about-cta > .container > p:not(.gizmoo-section-eyebrow){

    color:#D4DEDA;

}





/* =========================================================
   Responsive
   ========================================================= */


@media(max-width:900px){


    .gizmoo-about-hero-grid,
    .gizmoo-about-intro-box {

        grid-template-columns:1fr;

    }


    .gizmoo-about-values-grid,
    .gizmoo-about-process-grid {

        grid-template-columns:1fr;

    }


    .gizmoo-about-hero {

        padding-top:15px;

    }


}



@media(max-width:600px){


    .gizmoo-about-hero-card {

        min-height:auto;

        padding:28px;

    }


    .gizmoo-about-intro-box {

        padding:28px;

    }


    .gizmoo-about-cta h2 {

        font-size:30px;

    }


}