/* ==========================================================
   CONDUCTING — WHAT WE DO PAGE

   This file contains only the styles used by what-we-do.html.

   Search for:

   - PAGE BACKGROUND
   - PAGE INTRO
   - SECTION HEADINGS
   - HOW WE WORK
   - CAPABILITIES
   - WHERE WE FIT
   - PRINCIPLE
   - CLOSING
   - TABLET
   - MOBILE
   ========================================================== */


/* ==========================================================
   01 — PAGE BACKGROUND
   ========================================================== */

body {

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(155, 189, 100, 0.055),
            transparent 28rem
        ),
        var(--background);

}


/* ==========================================================
   02 — PAGE INTRO
   ========================================================== */

.page-intro {

    padding:
        clamp(76px, 11vw, 152px)
        0
        clamp(78px, 10vw, 138px);

    border-bottom: 1px solid var(--line);

}


.page-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap: clamp(48px, 8vw, 128px);

    align-items: end;

}


h1 {

    max-width: 980px;

    margin: 0;

    font-size: clamp(2.8rem, 4.6vw, 5rem);

    line-height: 0.98;

    letter-spacing: -0.045em;

    font-weight: 500;

}


h1 span {

    color: var(--green);

}


.page-intro-copy {

    max-width: 520px;

    margin: 0;

    color: #d0d2ce;

    font-size: clamp(1.06rem, 1.4vw, 1.28rem);

}


/* ==========================================================
   03 — SHARED PAGE SECTIONS
   ========================================================== */

.section {

    padding:
        clamp(84px, 10vw, 144px)
        0;

    border-bottom: 1px solid var(--line);

}


.section-heading {

    display: grid;

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

    gap: clamp(42px, 8vw, 120px);

    align-items: start;

    margin-bottom: clamp(52px, 7vw, 92px);

}


.section-number {

    color: var(--quiet);

    font-size: 0.78rem;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


h2 {

    max-width: 850px;

    margin: 0;

    font-size: clamp(2.1rem, 4vw, 4rem);

    line-height: 1.02;

    letter-spacing: -0.045em;

    font-weight: 500;

}


.section-lead {

    max-width: 760px;

    margin: 28px 0 0;

    color: var(--muted);

    font-size: clamp(1.02rem, 1.3vw, 1.2rem);

}


/* ==========================================================
   04 — HOW WE WORK
   ========================================================== */

.approach-grid {

    display: grid;

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

    gap: 1px;

    border: 1px solid var(--line);

    background-color: var(--line);

}


.approach-item {

    min-height: 300px;

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

    background-color: var(--background);

    transition:
        background-color 240ms ease,
        transform 240ms ease;

}


.approach-item:hover {

    background-color: var(--surface);

    transform: translateY(-3px);

}


.approach-index {

    color: var(--green);

    font-size: 0.82rem;

    letter-spacing: 0.13em;

}


.approach-item h3 {

    margin: 74px 0 18px;

    font-size: clamp(1.35rem, 2vw, 1.75rem);

    line-height: 1.15;

    letter-spacing: -0.025em;

    font-weight: 500;

}


.approach-item p {

    margin: 0;

    color: var(--muted);

}


/* ==========================================================
   05 — CAPABILITIES
   ========================================================== */

.capability-list {

    border-top: 1px solid var(--line);

}


.capability {

    display: grid;

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

    gap: clamp(36px, 8vw, 120px);

    padding:
        clamp(34px, 5vw, 58px)
        0;

    border-bottom: 1px solid var(--line);

}


.capability h3 {

    margin: 0;

    font-size: clamp(1.35rem, 2.4vw, 2.15rem);

    line-height: 1.12;

    letter-spacing: -0.035em;

    font-weight: 500;

}


.capability-content {

    max-width: 760px;

}


.capability-content p {

    margin: 0;

    color: var(--muted);

    font-size: 1.05rem;

}


.capability-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;

}


.capability-tags span {

    padding: 8px 13px;

    border: 1px solid var(--line);

    border-radius: 999px;

    color: #c8cbc5;

    font-size: 0.84rem;

}


/* ==========================================================
   06 — WHERE WE FIT
   ========================================================== */

.project-types {

    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap: clamp(48px, 9vw, 140px);

    align-items: start;

}


.project-types-copy h2 {

    margin-top: 24px;

}


.project-types-copy p {

    max-width: 650px;

    margin: 26px 0 0;

    color: var(--muted);

    font-size: 1.08rem;

}


.project-list {

    margin: 0;

    padding: 0;

    list-style: none;

    border-top: 1px solid var(--line);

}


.project-list li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding: 22px 0;

    border-bottom: 1px solid var(--line);

    color: #d6d8d3;

}


.project-list li::after {

    content: "↗";

    color: var(--green);

    transition: transform 220ms ease;

}


.project-list li:hover::after {

    transform: translate(3px, -3px);

}


/* ==========================================================
   07 — PRINCIPLE STATEMENT
   ========================================================== */

.principle {

    padding:
        clamp(100px, 14vw, 190px)
        0;

    border-bottom: 1px solid var(--line);

    text-align: center;

}


.principle p {

    max-width: 980px;

    margin: 0 auto;

    color: #e6e7e2;

    font-size: clamp(2rem, 4.3vw, 4.5rem);

    line-height: 1.08;

    letter-spacing: -0.045em;

}


.principle span {

    color: var(--green);

}


/* ==========================================================
   08 — CLOSING CALL TO ACTION
   ========================================================== */

.closing {

    padding:
        clamp(86px, 11vw, 150px)
        0;

}


.closing-grid {

    display: grid;

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

    gap: 40px;

    align-items: end;

}


.closing h2 {

    max-width: 820px;

}


.closing p {

    max-width: 640px;

    margin: 26px 0 0;

    color: var(--muted);

    font-size: 1.08rem;

}


/* ==========================================================
   09 — GENTLE PAGE REVEAL
   ========================================================== */

.reveal {

    animation: reveal 720ms ease both;

}


@keyframes reveal {

    from {

        opacity: 0;

        transform: translateY(8px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   10 — TABLET LAYOUT
   ========================================================== */

@media (max-width: 900px) {

    .page-intro-grid,
    .section-heading,
    .project-types,
    .closing-grid {

        grid-template-columns: 1fr;

    }


    .page-intro-grid {

        align-items: start;

    }


    .approach-grid {

        grid-template-columns: 1fr;

    }


    .approach-item {

        min-height: auto;

    }


    .approach-item h3 {

        margin-top: 42px;

    }


    .capability {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .closing-grid {

        align-items: start;

    }

}


/* ==========================================================
   11 — MOBILE LAYOUT
   ========================================================== */

@media (max-width: 720px) {

    h1 {

        font-size: 2.4rem;

        line-height: 1;

        letter-spacing: -0.03em;

    }


    .page-intro {

        padding-top: 62px;

    }


    .section {

        padding-block: 78px;

    }


    .section-heading {

        margin-bottom: 42px;

    }


    .principle {

        text-align: left;

    }

}