/* =========================================================
   FLOAT & CAST BAITS
   INFORMATION PAGES
========================================================= */


/* =========================================================
   COMMON PAGE HERO
========================================================= */

.page-hero {

    min-height: 360px;

    background:

        radial-gradient(
            circle at 80% 50%,
            rgba(102,115,59,.4),
            transparent 35%
        ),

        linear-gradient(
            110deg,
            #080a08,
            #171c12
        );

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 60px 20px;

}


.page-hero p {

    color: #ff8a00;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 4px;

    margin-bottom: 12px;

}


.page-hero h1 {

    font-size: clamp(
        55px,
        7vw,
        90px
    );

    line-height: .9;

    letter-spacing: -4px;

    margin-bottom: 20px;

}


.page-hero span {

    color: #b7bab3;

    font-size: 15px;

    line-height: 1.6;

}


.page-small-title {

    color: #ff8a00 !important;

    font-size: 10px !important;

    font-weight: 900 !important;

    letter-spacing: 3px;

}


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

.about-story {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    min-height: 700px;

}


.about-story-art {

    background:

        radial-gradient(
            circle,
            #7b824c,
            #3b4425
        );

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px;

}


.about-story-art img {

    width: 100%;

    max-width: 650px;

    filter:
        drop-shadow(
            0 30px 30px
            rgba(0,0,0,.3)
        );

}


.about-story-content {

    background: #0b0d0a;

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 90px;

}


.about-story-content h2 {

    font-size: clamp(
        45px,
        5vw,
        68px
    );

    line-height: .92;

    letter-spacing: -3px;

    margin:
        18px
        0
        30px;

}


.about-story-content p {

    color: #b3b6af;

    font-size: 14px;

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 20px;

}


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

.values-section {

    background: #f5f1e7;

    padding: 100px 7%;

}


.values-grid {

    display: grid;

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

    gap: 24px;

}


.value-card {

    background: white;

    padding: 45px 35px;

    min-height: 300px;

    position: relative;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.value-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.08);

}


.value-number {

    color: #ff8a00;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2px;

}


.value-card h3 {

    font-size: 28px;

    margin:
        35px
        0
        15px;

}


.value-card p {

    color: #74766f;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   ABOUT STATEMENT
========================================================= */

.about-statement {

    background: #ff8a00;

    color: #11120f;

    text-align: center;

    padding: 100px 20px;

}


.about-statement > p {

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

    margin-bottom: 18px;

}


.about-statement h2 {

    font-size: clamp(
        45px,
        6vw,
        80px
    );

    line-height: .9;

    letter-spacing: -3px;

    margin-bottom: 40px;

}


.about-statement .primary-button {

    display: inline-block;

    background: #11120f;

    color: white;

}


.about-statement .primary-button:hover {

    background: #66733b;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    max-width: 1450px;

    margin: auto;

    padding: 100px 7%;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 90px;

}


.contact-info h2 {

    font-size: clamp(
        42px,
        5vw,
        64px
    );

    line-height: .93;

    letter-spacing: -3px;

    margin:
        18px
        0
        28px;

}


.contact-intro {

    color: #6f716a;

    line-height: 1.8;

    font-size: 14px;

    max-width: 500px;

    margin-bottom: 40px;

}


.contact-info-box {

    border-top:
        1px solid
        #d5d2c9;

    padding:
        22px
        0;

}


.contact-info-box strong {

    display: block;

    color: #66733b;

    font-size: 10px;

    letter-spacing: 1.5px;

    margin-bottom: 8px;

}


.contact-info-box p {

    color: #777971;

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-container {

    background: white;

    padding: 45px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.07);

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

}


.form-field {

    margin-bottom: 22px;

}


.form-field label {

    display: block;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;

    margin-bottom: 8px;

}


.form-field label span {

    color: #9b9c97;

    font-size: 8px;

    margin-left: 5px;

}


.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    background: #f8f7f3;

    border:
        1px solid
        #d3d0c7;

    outline: none;

    padding: 15px;

    font-size: 14px;

    transition:
        border-color .2s ease;

}


.form-field textarea {

    resize: vertical;

    min-height: 170px;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color: #ff8a00;

}


.contact-submit-button {

    width: 100%;

    border: none;

    background: #11120f;

    color: white;

    padding: 18px;

    cursor: pointer;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    transition: .2s ease;

}


.contact-submit-button:hover {

    background: #ff8a00;

    color: #11120f;

}


.contact-submit-button:disabled {

    opacity: .65;

    cursor: not-allowed;

}


.contact-form-message {

    min-height: 20px;

    color: #66733b;

    font-size: 12px;

    font-weight: 900;

    margin-top: 15px;

}


/* =========================================================
   SHIPPING
========================================================= */

.policy-section {

    max-width: 1450px;

    margin: auto;

    padding: 100px 7%;

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 80px;

    align-items: start;

}


.policy-intro {

    position: sticky;

    top: 140px;

}


.policy-intro h2 {

    font-size: clamp(
        42px,
        5vw,
        65px
    );

    line-height: .92;

    letter-spacing: -3px;

    margin:
        18px
        0
        30px;

}


.policy-intro > p:last-child {

    color: #70726b;

    font-size: 14px;

    line-height: 1.8;

    max-width: 500px;

}


.policy-content {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.policy-card {

    background: white;

    padding: 40px;

    border-left:
        4px solid
        transparent;

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

}


.policy-card:hover {

    border-left-color: #ff8a00;

    transform:
        translateX(4px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.06);

}


.policy-number {

    display: block;

    color: #ff8a00;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 17px;

}


.policy-card h3 {

    font-size: 22px;

    margin-bottom: 16px;

}


.policy-card p {

    color: #72746d;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 12px;

}


.policy-card p:last-of-type {

    margin-bottom: 0;

}


.policy-link {

    display: inline-block;

    color: #66733b;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

    margin-top: 20px;

}


.policy-link:hover {

    color: #ff8a00;

}


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

.shipping-cta {

    background: #66733b;

    color: white;

    text-align: center;

    padding: 95px 20px;

}


.shipping-cta > p {

    color: #11120f;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

}


.shipping-cta h2 {

    font-size: clamp(
        40px,
        5vw,
        65px
    );

    margin:
        12px
        0
        35px;

    letter-spacing: -2px;

}


.shipping-cta .primary-button {

    display: inline-block;

}


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

@media (max-width: 950px) {

    .about-story {

        grid-template-columns: 1fr;

    }


    .about-story-art {

        min-height: 500px;

    }


    .contact-section {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .values-grid {

        grid-template-columns: 1fr;

    }


    .policy-section {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .policy-intro {

        position: static;

    }

}


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

@media (max-width: 650px) {

    .page-hero {

        min-height: 290px;

    }


    .about-story-art {

        min-height: 390px;

        padding: 30px;

    }


    .about-story-content {

        padding:
            70px
            30px;

    }


    .values-section {

        padding:
            70px
            20px;

    }


    .about-statement {

        padding:
            80px
            20px;

    }


    .contact-section {

        padding:
            70px
            20px;

    }


    .contact-form-container {

        padding:
            30px
            22px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .policy-section {

        padding:
            70px
            20px;

    }


    .policy-card {

        padding:
            30px
            25px;

    }


    .shipping-cta {

        padding:
            75px
            20px;

    }

}