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

.hero {
    position: relative;

    width: 100%;

    background: #f7faf9;

    overflow: hidden;

    padding: 90px 0 80px;
}


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

.hero .container {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding-left: 24px;
    padding-right: 24px;

    box-sizing: border-box;
}


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

.hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: center;

    gap: 60px;

    width: 100%;
}


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

.hero-content {
    min-width: 0;

    width: 100%;

    max-width: 700px;
}


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

.hero-label {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 25px;

    padding: 11px 20px;

    background: #eaf4f1;

    border-radius: 30px;

    color: #075f50;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    line-height: 1.4;

    text-transform: none;

    box-sizing: border-box;
}


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

.hero h1 {

    margin: 0;

    color: #075f50;

    font-size: clamp(48px, 5.2vw, 78px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    max-width: 720px;
}


.hero h1 span {
    color: #c99525;
}


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

.hero-content > p {

    max-width: 650px;

    margin: 30px 0 0;

    color: #5e706c;

    font-size: 18px;

    line-height: 1.8;
}


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

.hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 32px;
}


.hero-buttons .btn {
    white-space: nowrap;
}


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

.hero-stats {

    display: grid;

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

    gap: 25px;

    margin-top: 45px;

    max-width: 650px;
}


.hero-stats > div {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.hero-stats strong {

    color: #075f50;

    font-size: 30px;

    line-height: 1;

    font-weight: 800;
}


.hero-stats span {

    color: #687975;

    font-size: 13px;

    line-height: 1.4;
}


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

.hero-image {

    position: relative;

    width: 100%;

    min-width: 0;

    display: flex;

    justify-content: center;

    align-items: center;
}


.hero-image img {

    display: block;

    width: 100%;

    max-width: 560px;

    height: auto;

    max-height: 650px;

    object-fit: contain;
}

/* ==========================================================
   HERO - TABLET
========================================================== */

@media (max-width: 1000px) {

    .hero {
        padding: 70px 0 65px;
    }


    .hero-grid {

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

        gap: 35px;
    }


    .hero h1 {

        font-size: clamp(42px, 6vw, 62px);

        letter-spacing: -1.5px;
    }


    .hero-content > p {

        font-size: 17px;
    }


    .hero-image img {

        max-width: 420px;
    }


    .hero-stats {

        gap: 18px;
    }

}

/* ==========================================================
   HERO - MOBILE
========================================================== */

@media (max-width: 700px) {

    .hero {

        padding: 50px 0 55px;

        overflow: hidden;
    }


    .hero .container {

        padding-left: 20px;
        padding-right: 20px;
    }


    .hero-grid {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 40px;
    }


    .hero-content {

        width: 100%;

        max-width: none;

        text-align: center;
    }


    /* ------------------------------------------
       LABEL
    ------------------------------------------ */

    .hero-label {

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        padding: 9px 15px;

        font-size: 11px;

        letter-spacing: 1px;

        line-height: 1.5;
    }


    /* ------------------------------------------
       HEADING
    ------------------------------------------ */

    .hero h1 {

        width: 100%;

        max-width: none;

        margin: 0;

        font-size: clamp(38px, 11vw, 52px);

        line-height: 1.08;

        letter-spacing: -1px;

        word-break: normal;

        overflow-wrap: normal;
    }


    /* ------------------------------------------
       DESCRIPTION
    ------------------------------------------ */

    .hero-content > p {

        width: 100%;

        max-width: 600px;

        margin: 24px auto 0;

        font-size: 16px;

        line-height: 1.7;
    }


    /* ------------------------------------------
       BUTTONS
    ------------------------------------------ */

    .hero-buttons {

        width: 100%;

        justify-content: center;

        flex-direction: column;

        gap: 12px;

        margin-top: 28px;
    }


    .hero-buttons .btn {

        width: 100%;

        max-width: 300px;

        box-sizing: border-box;

        text-align: center;
    }
    
    /* ==========================================================
   PREMIUM BUTTON SYSTEM
========================================================== */

.btn {
    position: relative;

    display: inline-flex;

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

    gap: 10px;

    min-height: 48px;

    padding: 13px 24px;

    border-radius: 10px;

    border: 1px solid transparent;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    box-sizing: border-box;

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


/* ==========================================================
   PRIMARY PREMIUM BUTTON
========================================================== */

.btn-primary {

    background:
        linear-gradient(
            135deg,
            #075f4f 0%,
            #064c40 100%
        );

    color: #ffffff !important;

    border-color: #075f4f;

    box-shadow:
        0 8px 20px rgba(5, 79, 65, .18);
}


.btn-primary:hover {

    color: #ffffff !important;

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #08745f 0%,
            #075848 100%
        );

    border-color: #08745f;

    box-shadow:
        0 12px 25px rgba(5, 79, 65, .25);
}


.btn-primary:active {

    transform: translateY(0);

    box-shadow:
        0 5px 12px rgba(5, 79, 65, .18);
}


/* ==========================================================
   GOLD ACCENT
========================================================== */

.btn-primary::after {

    content: "";

    width: 7px;
    height: 7px;

    border-top: 2px solid #d49a24;
    border-right: 2px solid #d49a24;

    transform: rotate(45deg);

    transition: transform .25s ease;
}


.btn-primary:hover::after {

    transform:
        translateX(3px)
        rotate(45deg);
}


/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.btn-outline {

    background: #ffffff;

    color: #075f4f !important;

    border-color: #075f4f;

    box-shadow: none;
}


.btn-outline:hover {

    background: #075f4f;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(5, 79, 65, .16);
}


/* ==========================================================
   BUTTON GROUP
========================================================== */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 30px;
}


/* ==========================================================
   INSIGHT BUTTON
========================================================== */

.insight-button {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 45px;
}


.insight-button .btn {

    min-width: 190px;
}


/* ==========================================================
   EXECUTIVE / ABOUT BUTTON
========================================================== */

.executive-content .btn {

    margin-top: 10px;

    min-width: 160px;
}


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

@media screen and (max-width: 768px) {

    .btn {

        min-height: 46px;

        padding: 12px 20px;

        font-size: 14px;

        border-radius: 9px;
    }


    .hero-buttons {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 24px;
    }


    .hero-buttons .btn {

        width: 100%;
    }


    .executive-content .btn {

        width: auto;

        min-width: 150px;
    }


    .insight-button {

        width: 100%;

        margin-top: 30px;
    }


    .insight-button .btn {

        width: auto;

        min-width: 190px;
    }

}


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

@media screen and (max-width: 480px) {

    .btn {

        min-height: 44px;

        padding: 11px 18px;

        font-size: 14px;
    }


    .executive-content .btn {

        min-width: 145px;
    }


    .insight-button .btn {

        min-width: 185px;
    }

}


    /* ------------------------------------------
       STATS
    ------------------------------------------ */

    .hero-stats {

        width: 100%;

        max-width: none;

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

        gap: 10px;

        margin-top: 35px;

        text-align: center;
    }


    .hero-stats strong {

        font-size: 23px;
    }


    .hero-stats span {

        font-size: 11px;

        line-height: 1.35;
    }


    /* ------------------------------------------
       IMAGE
    ------------------------------------------ */

    .hero-image {

        width: 100%;

        max-width: 100%;

        order: 2;
    }


    .hero-image img {

        width: 100%;

        max-width: 340px;

        max-height: 430px;

        height: auto;

        margin: 0 auto;
    }

}

/* ==========================================================
   HERO - SMALL PHONES
========================================================== */

@media (max-width: 420px) {

    .hero {

        padding: 40px 0 45px;
    }


    .hero .container {

        padding-left: 16px;
        padding-right: 16px;
    }


    .hero-label {

        font-size: 10px;

        padding: 8px 12px;

        letter-spacing: .8px;
    }


    .hero h1 {

        font-size: 36px;

        line-height: 1.08;
    }


    .hero-content > p {

        font-size: 15px;

        line-height: 1.65;
    }


    .hero-buttons .btn {

        max-width: 280px;
    }


    .hero-stats {

        gap: 6px;
    }


    .hero-stats strong {

        font-size: 21px;
    }


    .hero-stats span {

        font-size: 10px;
    }


    .hero-image img {

        max-width: 300px;
    }

}