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


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

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .about-banner {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 17rem;
        overflow: hidden;
        color: #fff;
        background: var(--forest);
    }

    .about-banner__image,
    .about-banner__overlay {
        position: absolute;
        inset: 0;
    }

    .about-banner__image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .about-banner__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(5, 20, 15, .92) 0%,
                rgba(5, 20, 15, .75) 20%,
                rgba(5, 20, 15, .48) 48%,
                rgba(5, 20, 15, .42) 70%,
                rgba(5, 20, 15, .58) 100%
            );
    }

    .about-banner__inner {
        position: relative;
        z-index: 2;

        width: 100%;

        padding:
            6.5rem
            1.5rem
            2.5rem;
    }

    .about-banner .eyebrow {
        color: #fff;
        opacity: 1;

        font-weight: 600;

        text-shadow:
            0 1px 8px rgba(0, 0, 0, .35);
    }

    .about-banner h1 {
        margin: 0;

        font-family: var(--serif);
        font-size: clamp(2.8rem, 11vw, 3.8rem);
        font-weight: 400;
        line-height: 1;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    }

    .about-page .nav__logo .nav__logo-green {
        display: none;
    }

    .about-page .nav__logo .nav__logo-white {
        display: block;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .about-banner {
        min-height: 20rem;
    }

    .about-banner__inner {
        padding:
            8rem
            4rem
            3rem;
    }

    .about-banner h1 {
        font-size: clamp(3.6rem, 6vw, 4.8rem);
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .about-banner {
        min-height: 22rem;
    }

    .about-banner__inner {
        width: min(90%, var(--max-width));

        margin: 0 auto;

        padding:
            8rem
            0
            3.5rem;
    }

    .about-banner h1 {
        font-size: clamp(4rem, 4vw, 5rem);
    }

    .about-page .nav__logo .nav__logo-green {
        display: none;
    }

    .about-page .nav__logo .nav__logo-white {
        display: block;
    }

}


/* ========================================
   OUR STORY
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .about-story {
        padding:
            5rem
            1.5rem;

        background: var(--cream);
    }

    .about-story__inner {
        display: grid;
        gap: 3rem;

        max-width: var(--max-width);

        margin: 0 auto;
    }

    .about-story__image {
        overflow: hidden;

        aspect-ratio: 1 / .85;

        border-radius:
            18% 5% 14% 4% /
            12% 6% 16% 8%;
    }

    .about-story__image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .about-story__content h2 {
        max-width: 34rem;

        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.6rem, 10vw, 4rem);
        font-weight: 400;
        line-height: 1;
    }

    .about-story__content > p:not(.eyebrow) {
        max-width: 34rem;

        color: #52605a;

        line-height: 1.75;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .about-story {
        padding:
            6rem
            4rem;
    }

    .about-story__inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;

        align-items: center;
    }

    .about-story__image {
        aspect-ratio: .85;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .about-story {
        padding:
            8rem
            5%;
    }

    .about-story__inner {
        grid-template-columns: 1.1fr .9fr;
        gap: clamp(5rem, 8vw, 9rem);
    }

    .about-story__content h2 {
        font-size: clamp(3rem, 3.8vw, 4.7rem);
    }

}


/* ========================================
   PHILOSOPHY
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .about-philosophy {
        padding:
            5rem
            1.5rem;

        color: #fff;
        background: var(--forest);
    }

    .about-philosophy__inner {
        max-width: var(--max-width);

        margin: 0 auto;
    }

    .about-philosophy__heading {
        max-width: 38rem;

        margin-bottom: 3.5rem;
    }

    .about-philosophy__heading h2 {
        margin: 0;

        font-family: var(--serif);
        font-size: clamp(2.6rem, 10vw, 4rem);
        font-weight: 400;
        line-height: 1;
    }

    .about-philosophy__values {
        display: grid;
        gap: 2.5rem;
    }

    .philosophy-card {
        position: relative;

        padding-top: 1.5rem;

        border-top: 1px solid rgba(255,255,255,.18);
    }

    .philosophy-card__number {
        color: rgba(255,255,255,.35);

        font-family: var(--serif);
        font-size: 1rem;
    }

    .philosophy-card__icon {
        display: grid;
        place-items: center;

        width: 2.25rem;
        height: 2.25rem;

        margin:
            1.3rem
            0
            1rem;

        color: rgba(255,255,255,.85);
    }

    .philosophy-card__icon svg {
        width: 100%;
        height: 100%;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .philosophy-card h3 {
        margin:
            0
            0
            .7rem;

        font-family: var(--serif);
        font-size: 1.6rem;
        font-weight: 400;
    }

    .philosophy-card p {
        max-width: 24rem;

        margin: 0;

        color: rgba(255,255,255,.68);

        font-size: .88rem;
        line-height: 1.7;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .about-philosophy {
        padding:
            6rem
            4rem;
    }

    .about-philosophy__values {
        grid-template-columns: repeat(2, 1fr);
        gap:
            3rem
            4rem;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .about-philosophy {
        padding:
            8rem
            5%;
    }

    .about-philosophy__inner {
        display: grid;
        grid-template-columns: .7fr 1.5fr;
        gap: clamp(5rem, 8vw, 9rem);
    }

    .about-philosophy__heading {
        margin-bottom: 0;
    }

    .about-philosophy__heading h2 {
        font-size: clamp(3rem, 4vw, 4.5rem);
    }

    .about-philosophy__values {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ========================================
   OUR APPROACH
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .about-approach {
        padding:
            5rem
            1.5rem;

        background: var(--cream-light);
    }

    .about-approach__inner {
        display: grid;
        gap: 3rem;

        max-width: var(--max-width);

        margin: 0 auto;
    }

    .about-approach__content h2 {
        max-width: 34rem;

        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.6rem, 10vw, 4rem);
        font-weight: 400;
        line-height: 1;
    }

    .about-approach__content > p:not(.eyebrow) {
        max-width: 34rem;

        color: #52605a;

        line-height: 1.75;
    }

    .about-approach__content .text-link {
        margin-top: 1.3rem;
    }

    .about-approach__image {
        overflow: hidden;

        aspect-ratio: 1 / .85;

        border-radius:
            6% 18% 6% 16% /
            8% 14% 8% 16%;
    }

    .about-approach__image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .about-approach {
        padding:
            6rem
            4rem;
    }

    .about-approach__inner {
        grid-template-columns: .9fr 1.1fr;
        gap: 4rem;

        align-items: center;
    }

    .about-approach__image {
        aspect-ratio: .9;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .about-approach {
        padding:
            8rem
            5%;
    }

    .about-approach__inner {
        grid-template-columns: .8fr 1.2fr;
        gap: clamp(5rem, 8vw, 9rem);
    }

    .about-approach__content h2 {
        font-size: clamp(3rem, 3.8vw, 4.6rem);
    }

}


/* ========================================
   TEAM / FOUNDER
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .about-team {
        padding:
            5rem
            1.5rem;

        background: var(--cream);
    }

    .about-team__inner {
        display: grid;
        gap: 3rem;

        max-width: var(--max-width);

        margin: 0 auto;
    }

    .about-team__portrait {
        overflow: hidden;

        aspect-ratio: .9;

        border-radius:
            45% 45% 8% 8% /
            25% 25% 8% 8%;
    }

    .about-team__portrait img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .about-team__content h2 {
        max-width: 34rem;

        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.6rem, 10vw, 4rem);
        font-weight: 400;
        line-height: 1;
    }

    .about-team__content > p:not(.eyebrow):not(.about-team__signature) {
        max-width: 34rem;

        color: #52605a;

        line-height: 1.75;
    }

    .about-team__signature {
        display: inline-block;
        margin:
            2.25rem
            0
            .15rem;

        color: var(--forest);
        font-family: "Allura", cursive;
        font-size: 3rem;
        font-weight: 400;
        line-height: .9;
        letter-spacing: .01em;
        transform: rotate(-4deg);
        transform-origin: left center;
    }

    .about-team__role {
        color: #6c7771;
        display: block;
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .12em;

        text-transform: uppercase;
    }

}

/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .about-team {
        padding:
            6rem
            4rem;
    }

    .about-team__inner {
        grid-template-columns: .8fr 1.2fr;
        gap: 4rem;

        align-items: center;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .about-team {
        padding:
            8rem
            5%;
    }

    .about-team__inner {
        grid-template-columns: .7fr 1.3fr;
        gap: clamp(5rem, 8vw, 9rem);
    }

    .about-team__portrait {
        max-width: 34rem;
    }

    .about-team__content h2 {
        font-size: clamp(3rem, 3.8vw, 4.6rem);
    }

}


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

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .about-cta {
        padding:
            6rem
            1.5rem;

        text-align: center;

        background: var(--cream-light);
    }

    .about-cta__inner {
        max-width: 46rem;

        margin: 0 auto;
    }

    .about-cta h2 {
        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.8rem, 10vw, 4.5rem);
        font-weight: 400;
        line-height: 1;
    }

    .about-cta p:not(.eyebrow) {
        max-width: 32rem;

        margin:
            1.5rem
            auto
            2rem;

        color: #55615b;

        line-height: 1.7;
    }

    .about-cta .button {
        white-space: nowrap;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .about-cta {
        padding:
            7rem
            4rem;
    }

    .about-cta h2 {
        font-size: clamp(3.5rem, 6vw, 4.8rem);
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .about-cta {
        padding:
            9rem
            5%;
    }

    .about-cta h2 {
        font-size: clamp(4rem, 4.5vw, 5.2rem);
    }

}