:root {
        --ink: #343a31;
        --olive: #626b51;
        --cream: #f8f7f2;
        --sand: #eeece3;
        --line:#dddcd2;
    }

    * {
        box-sizing:border-box;
    }

    html {
        scroll-behavior:smooth;
    }

    body {
        margin: 0;
        color: var(--ink);
        background: var(--cream);
        font-family: Arial, Helvetica, sans-serif;
        line-height:1.65;
    }

    h1, h2, h3, .serif {
        font-family: Georgia, 'Times New Roman', serif;
        font-weight: 400;
        line-height:1.17;
    }

    h1 {
        font-size: clamp(2.7rem, 5vw, 5.6rem);
        margin:0 0 20px;
    }

    h2 {
        font-size: clamp(2rem, 3vw, 3.5rem);
        margin:0 0 20px;
    }

    h3 {
        font-size: 1.45rem;
        margin:10px 0;
    }

    p {
        margin:0 0 17px;
    }

    a {
        color:inherit;
    }

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: 12px max(5vw, 24px);
        background: #faf9f5;
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom:1px solid var(--line);
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 15px;
        text-decoration:none;
    }

    .brand img {
        width: 200px;
        height: auto;
        object-fit: contain;
        mix-blend-mode:multiply;
    }

    .nav {
        display: flex;
        gap: 26px;
        align-items:center;
    }

    .nav a {
        text-decoration: none;
        font-size: .82rem;
        letter-spacing: .08em;
        text-transform:uppercase;
    }

    .btn {
        display: inline-block;
        background: var(--olive);
        color: #fff;
        text-decoration: none;
        padding: 13px 25px;
        border-radius: 30px;
        font-size: .84rem;
        letter-spacing:.05em;
    }

    .btn:hover {
        background:#424c39;
    }

    .hero {
        min-height: 620px;
        display: grid;
        grid-template-columns: 48% 52%;
        background:#efeee6;
    }

    .hero-copy {
        padding: clamp(50px, 7vw, 110px) 7vw;
        align-self:center;
    }

    .eyebrow {
        letter-spacing: .23em;
        font-size: .75rem;
        text-transform: uppercase;
        color: var(--olive);
        margin-bottom:18px;
    }

    .hero-copy p {
        max-width: 500px;
        font-size:1.08rem;
    }

    .hero-photo {
        background: url('../assets/hero.webp') center center/cover no-repeat;
        min-height:480px;
    }

    .container {
        max-width: 1250px;
        margin: auto;
        padding:85px 35px;
    }

    .intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 90px;
        align-items:start;
    }

    .intro p {
        font-size:1.05rem;
    }

    .topics {
        background:#eeede5;
    }

    .topic-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap:24px;
    }

    .topic {
        background: #faf9f5;
        overflow:hidden;
    }

    .topic img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display:block;
    }

    .topic div {
        padding:20px 22px 24px;
    }

    .topic p {
        font-size:.93rem;
    }

    .small-label {
        font-size: .76rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color:var(--olive);
    }

    .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:90px;
    }

    .muted {
        background:#e7e8df;
    }

    .rule {
        height: 1px;
        background: var(--line);
        margin:25px 0;
    }

    .contact {
        text-align: center;
        max-width:850px;
    }

    .contact p {
        max-width: 620px;
        margin:0 auto 26px;
    }

    footer {
        border-top: 1px solid var(--line);
        padding: 30px 5vw;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        font-size: .82rem;
        color:#666;
    }

    footer a {
        margin-left:16px;
    }

    .note {
        font-size: .8rem;
        color:#777;
    }

    @media (max-width: 850px) {
        header {
            flex-wrap: wrap;
            justify-content:center;
        }

        .brand img {
            height: 100px;
            width: auto;
        }

        .nav {
            gap: 15px;
            flex-wrap: wrap;
            justify-content:center;
        }

        .nav a {
            font-size:.7rem;
        }

        .hero, .intro, .split {
            grid-template-columns:1fr;
        }

        .hero-photo {
            min-height: 360px;
            order:-1;
        }

        .hero-copy {
            padding:50px 7vw;
        }

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

        .container {
            padding:65px 22px;
        }

        .intro, .split {
            gap:20px;
        }
    }

    @media (max-width: 540px) {
        .topic-grid {
            grid-template-columns:1fr;
        }

        .topic img {
            height:220px;
        }

        footer {
            display:block;
        }

        .nav {
            gap:11px;
        }

        .hero-photo {
            min-height: 270px;
        }
    }

    .section-lead {
        max-width: 790px;
        font-size:1.08rem;
    }

    .phase-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-top:32px;
    }

    .phase {
        background:#f2f0e8;
    }

    .phase img {
        width: 100%;
        height: 175px;
        object-fit: cover;
        display:block;
    }

    .phase h3, .phase p {
        margin-left: 18px;
        margin-right:18px;
    }

    .phase h3 {
        margin-top:18px;
    }

    .phase p {
        font-size: .92rem;
        padding-bottom:17px;
    }

    .foundation {
        background:#e9e8df;
    }

    .foundation-inner {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 55px;
        align-items:center;
    }

    .foundation-pics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:14px;
    }

    .foundation figure {
        margin: 0;
        background:#faf9f5;
    }

    .foundation img {
        display: block;
        width: 100%;
        height: 190px;
        object-fit:cover;
    }

    .foundation figcaption {
        padding: 12px 14px;
        font-family: Georgia, serif;
        font-size:1.1rem;
    }

    @media (max-width: 850px) {
        .phase-grid {
            grid-template-columns:repeat(2, 1fr);
        }

        .foundation-inner {
            grid-template-columns:1fr;
        }
    }

    @media (max-width: 540px) {
        .phase-grid {
            gap:10px;
        }

        .phase img {
            height:130px;
        }

        .phase h3 {
            font-size:1.13rem;
        }

        .phase h3, .phase p {
            margin-left: 10px;
            margin-right:10px;
        }

        .foundation-pics {
            grid-template-columns:1fr 1fr;
        }

        .foundation img {
            height:120px;
        }
    }

    .group-note {
        margin-top: 35px;
        padding: 26px 30px;
        background: #f8f7f2;
        border-left: 2px solid #8a9276;
        max-width:900px;
    }

    .group-note h3 {
        margin:0 0 12px;
    }

    .group-note p {
        margin:0;
    }

    @media (max-width: 540px) {
        .group-note {
            padding: 20px;
        }
    }