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

faint-dividing-line {
    display: block;

    width: 50%;
    height: 1px;

    margin: clamp(10px, 2vw, 20px) auto;

    background: var(--charcoal-15);
}


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

.about-section {
    position: relative;

    width: calc(100% - 64px);
    max-width: 1200px;

    margin: 0 auto;

    padding:
        clamp(65px, 7vw, 105px)
        clamp(45px, 7vw, 90px);

    background: var(--pissy-cream);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        20px 20px 0 var(--charcoal),
        0 0 20px var(--shadow-halo);
}


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

.about-section-top {
    margin-bottom: clamp(50px, 6vw, 80px);
}


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

.about-section-top h2 {
    margin: 0;

    max-width: 700px;

    font-family: inherit;

    font-size: clamp(34px, 2.2vw, 58px);

    font-weight: 450;

    line-height: 1.08;

    letter-spacing: -1.5px;

    color: var(--black);
}


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

.about-section-intro {

    margin: 0;

    font-family: var(--primary-font);

    font-size: clamp(20px, 1.5vw, 30px);

    font-weight: 400;

    line-height: 1.55;

    color: var(--charcoal);
}
.about-expect .about-section-intro {
    margin-top: 20px;
    font-size: clamp(18px, 1.6vw, 25px);

    line-height: 1.5;
}


/* ============================================================
   SHARED BODY TEXT
   ============================================================ */

.about-section p {
    margin: 0;

    font-family: var(--primary-font);

    font-size: 12px;

    font-weight: 400;

    line-height: 1.85;

    color: var(--charcoal);
}


.about-section p + p {
    margin-top: 25px;
}


/* ============================================================
   LABELS
   ============================================================ */

.about-label {
    display: block;

    margin-bottom: 18px;

    font-family: var(--primary-font);

    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--charcoal);
}


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

.about-lauren {
    position: relative;
}


/* ------------------------------------------------------------
   MAIN CONTENT
   ------------------------------------------------------------ */

.about-lauren-main {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(260px, 1fr);

    gap: clamp(50px, 7vw, 100px);

    margin-top: clamp(55px, 7vw, 90px);

    align-items: start;
}


/* ------------------------------------------------------------
   TEXT
   ------------------------------------------------------------ */

.about-lauren-copy {
    max-width: 700px;
}


.about-lauren-copy p {
    max-width: 680px;
}


.about-lauren-copy p + p {
    margin-top: 28px;
}


/* ------------------------------------------------------------
   QUALIFICATIONS
   ------------------------------------------------------------ */

.about-lauren-credentials {
    position: relative;

    display: flex;

    justify-content: center;

    padding-top: 10px;
}


/* ------------------------------------------------------------
   DOCUMENT
   ------------------------------------------------------------ */

.credential-document {
    width: min(100%, 360px);

    padding: 22px;

    box-sizing: border-box;

    background: var(--cream);

    border: 1px solid var(--charcoal-15);

    box-shadow:
        12px 14px 0 var(--charcoal),
        0 0 20px var(--shadow-halo);

    transform: rotate(1.5deg);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.credential-document:hover {
    transform: rotate(0deg) translateY(-4px);

    box-shadow:
        15px 17px 0 var(--charcoal),
        0 12px 28px var(--charcoal-15);
}


/* ------------------------------------------------------------
   DOCUMENT HEADER
   ------------------------------------------------------------ */

.credential-document-top {
    display: flex;

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

    padding-bottom: 18px;

    border-bottom: 1px solid var(--charcoal-15);

    font-family: var(--secondary-font);

    font-size: 10px;

    letter-spacing: 1.5px;

    color: var(--warm-grey);
}


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

.credential-document-image {
    margin: 22px 0;

    overflow: hidden;
}


.credential-document-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* ------------------------------------------------------------
   DOCUMENT FOOTER
   ------------------------------------------------------------ */

.credential-document-bottom {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    padding-top: 18px;

    border-top: 1px solid var(--charcoal-15);
}


.credential-document-bottom > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.credential-label {
    font-family: var(--secondary-font);

    font-size: 9px;

    letter-spacing: 1.5px;

    color: var(--warm-grey);
}


.credential-document-bottom strong {
    font-family: var(--primary-font);

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    color: var(--charcoal);
}


/* ------------------------------------------------------------
   WHY THERAPY MATTERS
   ------------------------------------------------------------ */

.about-lauren-belief {
    display: grid;

    grid-template-columns:
        minmax(170px, 0.7fr)
        minmax(0, 2fr);

    gap: clamp(35px, 6vw, 90px);

    margin-top: clamp(70px, 9vw, 120px);

    padding-top: 35px;

    border-top: 1px solid var(--charcoal-15);
}


.about-lauren-belief .about-label {
    margin-top: 5px;
}


.about-lauren-belief p {
    max-width: 780px;

    margin: 0;

    font-size: clamp(18px, 1.6vw, 25px);

    line-height: 1.5;

    font-weight: 400;
}


/* ============================================================
   MY APPROACH
   ============================================================ */

.about-approach {
    position: relative;

    background: var(--pissy-cream);

    padding-top: clamp(55px, 7vw, 95px);
    padding-bottom: clamp(60px, 8vw, 105px);
}


/* ============================================================
   APPROACH HEADING
   ============================================================ */

.about-approach .about-section-top {
    position: relative;

    z-index: 2;

    margin-bottom: clamp(50px, 6vw, 85px);
}


.about-approach .about-section-top h2 {
    position: relative;
}


/* ------------------------------------------------------------
   APPROACH INTRO
   ------------------------------------------------------------ */

.about-approach .about-section-intro {
    margin-top: clamp(25px, 3vw, 38px);

    font-size: clamp(20px, 1.5vw, 30px);

    line-height: 1.55;

    color: var(--charcoal);
}


/* ------------------------------------------------------------
   MAIN APPROACH FLOW
   ------------------------------------------------------------ */

.approach-content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: clamp(45px, 7vw, 100px);

    row-gap: 0;

    align-items: start;
}


.approach-theme {
    position: relative;

    min-height: 300px;

    height: 100%;

    padding: clamp(30px, 4vw, 55px);

    box-sizing: border-box;

    background: var(--spinning-plate-green);

    border: 2px solid var(--charcoal);
}


/* ------------------------------------------------------------
   TRUST / HONESTY PAIR
   ------------------------------------------------------------ */

.approach-main {
    position: relative;

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: clamp(45px, 7vw, 100px);

    padding: 0 0 clamp(45px, 6vw, 70px);
}


/*
   The divider lives in the gap between the two panels rather
   than running through the text itself.
*/

.approach-main::before {
    content: "";

    position: absolute;

    top: 12%;
    bottom: 36%;

    left: 50%;

    width: 1px;

    background: var(--charcoal-15);

    transform: translateX(-50%);
}


/* ------------------------------------------------------------
   TRUST / HONESTY PANELS
   ------------------------------------------------------------ */

.approach-trust-right {
    background: var(--trust-and-honesty);
}


.approach-trust-left {
    background: var(--being-wrong);
}


.approach-trust {
    position: relative;

    padding:
        clamp(28px, 4vw, 48px)
        clamp(28px, 4vw, 48px);

    border: 2px solid var(--charcoal);

    box-sizing: border-box;
}


.approach-trust-right::before {
    background: var(--charcoal);
}


.approach-trust .about-label {
    margin-bottom: 25px;
}


.approach-trust p {
    font-size: 13px;

    line-height: 1.9;
}


.approach-trust p + p {
    margin-top: 20px;
}


/* ------------------------------------------------------------
   VERTICAL DIVIDER BETWEEN THEME PANELS
   ------------------------------------------------------------ */

.approach-theme:nth-of-type(2)::after {
    content: "";

    position: absolute;

    top: 12%;
    bottom: 12%;

    right: calc(-0.5 * clamp(45px, 7vw, 100px));

    width: 1px;

    background: var(--charcoal-15);
}


/* ------------------------------------------------------------
   PLATES
   ------------------------------------------------------------ */

.approach-theme:nth-of-type(2) {
    background-color: var(--spinning-plate-green);
}




/* ------------------------------------------------------------
   APPROACH THEME LABELS
   ------------------------------------------------------------ */

.approach-theme .about-label {
    position: relative;

    z-index: 2;

    margin-bottom: 28px;

    color: var(--charcoal);
}


.approach-theme p {
    position: relative;

    z-index: 2;

    font-size: 13px;

    line-height: 1.9;
}


.approach-theme p + p {
    margin-top: 25px;
}


/* ------------------------------------------------------------
   HAMSTER WHEEL
   ------------------------------------------------------------ */

.approach-theme:nth-of-type(3) {
    background-color: var(--the-wheels-on-the-bus-go-round-and-round-sage);
}


.approach-theme:nth-of-type(3) .about-label {
    color: var(--charcoal);
}


.approach-theme-ending {
    margin-top: 30px !important;

    font-family: var(--primary-font) !important;

    font-size: clamp(21px, 2vw, 31px) !important;

    line-height: 1.25 !important;

    color: var(--charcoal) !important;
}


/* ------------------------------------------------------------
   FINAL STATEMENT
   ------------------------------------------------------------ */

.approach-final {
    position: relative;

    grid-column: 1 / -1;

    display: flex;

    justify-content: center;

    padding-top: clamp(35px, 5vw, 60px);
}


.approach-final p {
    font-size: clamp(23px, 2.3vw, 36px);

    line-height: 1.4;

    text-align: center;
}


/* ============================================================
   WHAT TO EXPECT
   ============================================================ */

.about-expect {
    background: var(--pissy-cream);
}


.expect-content {
    max-width: 900px;

    margin-left: auto;
}


.expect-step {
    display: grid;

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

    gap: 35px;

    padding: 38px 0;

    border-top: 1px solid var(--charcoal-25);
}


.expect-step:first-child {
    padding-top: 0;

    border-top: 0;
}


.expect-number {
    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    padding-top: 3px;

    font-family: var(--secondary-font);

    font-size: 11px;

    font-weight: 400;

    color: var(--sage-dark);
}


.expect-text {
    max-width: 650px;
}


.expect-text .about-label {
    margin-bottom: 15px;

    color: var(--charcoal);
}


.expect-text p {
    max-width: 620px;
}


.expect-final-step {
    padding-bottom: 0;
}


/* ============================================================
   LARGE SCREENS
   ============================================================ */

@media (min-width: 1350px) {

    .about-section {
        padding-left: 95px;
        padding-right: 95px;
    }

}


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

@media (max-width: 900px) {

    .about-section {
        width: calc(100% - 24px);

        padding:
            clamp(55px, 8vw, 80px)
            clamp(28px, 6vw, 55px);
    }


    .about-section-top {
        margin-bottom: 55px;
    }


    .about-lauren-main {
        grid-template-columns:
            minmax(0, 1.7fr)
            minmax(220px, 1fr);

        gap: 40px;
    }


    .credential-document {
        width: 100%;
    }


    .about-lauren-belief {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* --------------------------------------------------------
       MY APPROACH - TABLET
       -------------------------------------------------------- */

    .about-approach .about-section-top {
        margin-bottom: 55px;
    }


    .approach-content {
        grid-template-columns: 1fr;

        row-gap: 50px;
    }


    .approach-main {
        grid-template-columns: 1fr 1fr;

        column-gap: 40px;
    }


    /*
       The theme panels stack on tablet, so the vertical divider
       between them is no longer needed.
    */

    .approach-theme:nth-of-type(2)::after {
        display: none;
    }


    .approach-final {
        grid-column: 1;
    }


    .expect-content {
        margin-left: 0;
    }

}


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

@media (max-width: 700px) {

    .about-lauren-main {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-top: 45px;
    }


    .about-lauren-credentials {
        order: 2;

        justify-content: flex-start;

        padding-top: 0;
    }


    .credential-document {
        width: min(100%, 390px);

        transform: rotate(0.8deg);
    }


    /*
       Prevent the desktop hover effect from changing the
       credential card on touch devices.
    */

    .credential-document:hover {
        transform: rotate(0.8deg);

        box-shadow:
            12px 14px 0 var(--charcoal),
            0 0 20px var(--shadow-halo);
    }


    .about-lauren-belief {
        margin-top: 65px;

        padding-top: 28px;
    }


    /* --------------------------------------------------------
       MY APPROACH - MOBILE
       -------------------------------------------------------- */

    .approach-main::before {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .about-section {
        width: calc(100% - 24px);

        padding:
            50px
            clamp(22px, 6vw, 30px);

        border-radius: 12px;

        box-shadow: 
        0 0 0 5px var(--charcoal), 
        0 10px 120px var(--shadow-halo);
    }


    .about-section-top {
        margin-bottom: 45px;
    }


    .about-section-intro {
        font-size: 16px;

        line-height: 1.6;
    }


    .about-section p {
        font-size: 11px;

        line-height: 1.8;
    }


    .about-lauren-belief {
        margin-top: 50px;

        padding-top: 30px;
    }


    .about-lauren-belief p {
        font-size: 16px;
    }


    /* --------------------------------------------------------
       MY APPROACH - MOBILE
       -------------------------------------------------------- */

    .about-approach {
        padding-top: 50px;
        padding-bottom: 55px;
    }


    .about-approach .about-section-top {
        margin-bottom: 42px;
    }


    .about-approach .about-section-intro {
        margin-top: 28px;

        font-size: 19px;

        line-height: 1.5;
    }


    .approach-content {
        display: grid;

        grid-template-columns: 1fr;

        row-gap: 42px;
    }


    .approach-main {
        grid-template-columns: 1fr;

        gap: 25px;

        padding-bottom: 0px;
    }


    .approach-trust {
        padding: 28px 25px;
    }


    .approach-trust p {
        font-size: 11px;

        line-height: 1.8;
    }


    .approach-theme {
        min-height: 0;

        padding: 28px 25px;
    }


    .approach-theme p {
        font-size: 11px;

        line-height: 1.8;
    }


    /*
       The theme panels are stacked on mobile, so there is no
       vertical divider between them.
    */

    .approach-theme:nth-of-type(2)::after {
        display: none;
    }


    .approach-theme-ending {
        margin-top: 25px !important;

        font-size: 21px !important;
    }


    .approach-final {
        padding-top: 32px;
    }


    .approach-final p {
        font-size: 21px;

        line-height: 1.45;
    }


    /* --------------------------------------------------------
       WHAT TO EXPECT - MOBILE
       -------------------------------------------------------- */

    .expect-step {
        grid-template-columns:
            45px
            minmax(0, 1fr);

        gap: 15px;

        padding: 30px 0;
    }


    .expect-number {
        font-size: 10px;
    }

}
/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {

    .about-section {
        background: var(--dark-bg);

        box-shadow:
            20px 20px 0 var(--dark-mode-shadow),
            0 0 20px var(--shadow-halo);
    }


    /* --------------------------------------------------------
       Shared text
       -------------------------------------------------------- */

    .about-section-top h2,
    .about-section-intro,
    .about-section p {
        color: var(--pale-nothing);
    }


    .about-label {
        color: var(--sage);
    }


    faint-dividing-line {
        background: var(--sage);
        opacity: 0.35;
    }


    /* --------------------------------------------------------
       About Lauren
       -------------------------------------------------------- */

    .credential-document {
        background: var(--dark-mode-shadow);

        border-color: var(--sage);

        box-shadow:
            12px 14px 0 var(--dark-mode-shadow),
            0 0 20px var(--shadow-halo);
    }


    .credential-document-top,
    .credential-label {
        color: var(--sage);
    }


    .credential-document-top {
        border-bottom-color: var(--sage);
    }


    .credential-document-bottom {
        border-top-color: var(--sage);
    }


    .credential-document-bottom strong {
        color: var(--pale-nothing);
    }


    .about-lauren-belief {
        border-top-color: var(--sage);
    }


    /* --------------------------------------------------------
       My Approach
       -------------------------------------------------------- */

    .about-approach {
        background: var(--dark-bg);
    }


    .about-approach .about-section-intro {
        color: var(--pale-nothing);
    }


    .approach-main::before,
    .approach-theme:nth-of-type(2)::after {
        background: var(--sage);
        opacity: 0.35;
    }


        .approach-trust,
    .approach-theme {
        border-color: var(--sage);
    }

    .approach-trust-left {
        background: var(--dark-being-wrong);
    }

    .approach-trust-right {
        background: var(--dark-trust-and-honesty);
    }

    .approach-theme:nth-of-type(2) {
        background: var(--dark-spinning-plate-green);
    }

    .approach-theme:nth-of-type(3) {
        background: var(--dark-wheels-sage);
    }
    .approach-theme:nth-of-type(3) .about-label {
        color: var(--sage);
    }


    .approach-trust .about-label,
    .approach-theme .about-label {
        color: var(--sage);
    }


    .approach-trust p,
    .approach-theme p {
        color: var(--pale-nothing);
    }


    .approach-theme-ending {
        color: var(--pale-nothing) !important;
    }


    .approach-final p {
        color: var(--pale-nothing);
    }


    /* --------------------------------------------------------
       What to Expect
       -------------------------------------------------------- */

    .expect-step {
        border-top-color: var(--sage);
    }


    .expect-number {
        color: var(--sage);
    }


    .expect-text .about-label {
        color: var(--sage);
    }


    /* --------------------------------------------------------
       Mobile shadow
       -------------------------------------------------------- */

    @media (max-width: 600px) {

        .about-section {
            box-shadow:
                0 0 0 5px var(--dark-mode-shadow),
                0 10px 120px var(--shadow-halo);
        }


        .credential-document:hover {
            box-shadow:
                12px 14px 0 var(--dark-mode-shadow),
                0 0 20px var(--shadow-halo);
        }

    }

}