:root {
    --cream: #fce4c5;
    --ink: #020d02;
    --amber: #a55e0b;
    --navy: #101d29;
    --p-peach: #fff4e3;
    --p-apricot: #f8d9ad;
    --p-sage: #e1ebd8;
    --p-mist: #dce7f0;
    --p-blush: #f7dccb;
}

body {
    font-family: "DM Sans",sans-serif;
    background: var(--p-peach);
    color: var(--navy);
    line-height: 1.7;
    overflow-x: hidden
}

h1, h2, h3 {
    font-family: "Bricolage Grotesque",sans-serif;
    color: var(--navy);
    line-height: 1.15
}

.serif {
    font-family: "Cormorant Garamond",serif;
    font-style: italic;
    font-weight: 600;
    color: var(--amber)
}

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px
}

/* HERO */
.hero {
    position: relative;
    padding: 90px 0 40px;
    text-align: center;
    background: radial-gradient(circle at 12% 20%,var(--p-apricot) 0,transparent 38%), radial-gradient(circle at 88% 30%,var(--p-mist) 0,transparent 36%), radial-gradient(circle at 50% 100%,var(--p-sage) 0,transparent 40%),var(--p-peach);
}
    .hero .tag {
        display: inline-block;
        font-family: "Poppins",sans-serif;
        font-size: .78rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--amber);
        background: #fff;
        padding: 8px 20px;
        border-radius: 40px;
        margin-bottom: 28px;
        box-shadow: 0 4px 14px rgba(0,0,0,.05)
    }

    .hero h1 {
        font-size: clamp(2.6rem,7vw,5.6rem);
        font-weight: 800;
        letter-spacing: -.02em
    }

        .hero h1 .serif {
            font-size: 1.08em;
            font-weight: 600
        }

    .hero p.lead {
        max-width: 680px;
        margin: 26px auto 40px;
        font-size: 1.15rem;
        color: #2c3b48
    }

.float {
    position: absolute;
    border-radius: 50%;
    opacity: .7
}

.f1 {
    width: 90px;
    height: 90px;
    background: var(--p-blush);
    top: 18%;
    left: 7%
}

.f2 {
    width: 46px;
    height: 46px;
    background: var(--p-sage);
    top: 62%;
    left: 16%
}

.f3 {
    width: 130px;
    height: 130px;
    background: var(--p-apricot);
    bottom: 14%;
    right: 8%
}

.f4 {
    width: 34px;
    height: 34px;
    border: 3px solid var(--amber);
    top: 20%;
    right: 18%;
    background: transparent
}

/* STORY */
.story {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

    .story h2 {
        font-size: clamp(2rem,4vw,3.1rem);
        margin-bottom: 22px
    }

    .story p {
        margin-bottom: 16px;
        font-size: 1.06rem
    }

.quote-card {
    background: var(--navy);
    color: var(--cream);
    padding: 48px 40px;
    border-radius: 30px 30px 120px 30px;
    position: relative
}

    .quote-card::before {
        content: "\201C";
        font-family: "Cormorant Garamond",serif;
        font-size: 8rem;
        color: var(--amber);
        position: absolute;
        top: -20px;
        left: 24px;
        line-height: 1
    }

    .quote-card p {
        font-family: "Cormorant Garamond",serif;
        font-size: 1.9rem;
        line-height: 1.35;
        margin-top: 36px;
        font-weight: 500
    }

    .quote-card small {
        display: block;
        margin-top: 18px;
        font-family: "Poppins",sans-serif;
        font-size: .75rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--p-apricot)
    }

/* WHY */
.why {
    background: var(--cream);
    padding: 20px 0;
    border-radius: 60px;
}
    .why h2 {
        text-align: center;
        font-size: clamp(2rem,4vw,3rem);
        margin-bottom: 14px
    }

    .why .sub {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 48px
    }

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

.pill {
    background: rgba(255,255,255,.75);
    border-radius: 22px;
    padding: 24px 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: .3s;
    border: 1px solid rgba(165,94,11,.12)
}

    .pill:hover {
        transform: translateY(-6px);
        background: #fff
    }

    .pill b {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--amber);
        color: #fff;
        display: grid;
        place-items: center;
        font-family: "Poppins",sans-serif;
        font-size: .85rem
    }

/* THREE MODALITIES (venn) */
.mod {
    padding: 30px 0 30px;
    text-align: center;
}
    .mod h2 {
        font-size: clamp(2rem,4vw,3rem);
        margin-bottom: 12px
    }

.venn {
    position: relative;
    width: min(560px,92vw);
    height: min(500px,86vw);
    margin: 50px auto 30px
}

    .venn div {
        position: absolute;
        width: 56%;
        height: 56%;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        mix-blend-mode: multiply
    }

    .venn h3 {
        font-size: 1.15rem
    }

    .venn span {
        font-size: .72rem;
        font-family: "Poppins",sans-serif;
        max-width: 120px
    }

.v1 {
    background: var(--p-apricot);
    top: 0;
    left: 22%
}

.v2 {
    background: var(--p-sage);
    bottom: 0;
    left: 0
}

.v3 {
    background: var(--p-mist);
    bottom: 0;
    right: 0
}

.venn .core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: auto;
    mix-blend-mode: normal;
    background: var(--navy);
    color: var(--cream);
    font-family: "Bricolage Grotesque",sans-serif;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 1rem;
    z-index: 3
}

.mod-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px;
    margin-top: 40px;
    text-align: left
}

.mod-item {
    padding: 30px;
    border-radius: 24px;
    background: #fff;
    border-top: 6px solid var(--amber);
    box-shadow: 0 14px 36px rgba(16,29,41,.07)
}

    .mod-item:nth-child(2) {
        border-color: #8aa57a
    }

    .mod-item:nth-child(3) {
        border-color: #7e9bb5
    }

    .mod-item h3 {
        font-size: 1.35rem;
        margin-bottom: 6px
    }

    .mod-item em {
        font-family: "Cormorant Garamond",serif;
        font-size: 1.2rem;
        color: var(--amber);
        display: block;
        margin-bottom: 10px
    }

/* PHILOSOPHY */
.phil {
    padding: 30px 0;
    background: linear-gradient(180deg,var(--p-peach),var(--p-blush));
}
.phil h2 {
    text-align: center;
    font-size: clamp(2rem,4vw,3rem);
    margin-bottom: 16px;
    margin-top: 0;
}
.arches {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
    align-items: end
}

.arch {
    border-radius: 200px 200px 28px 28px;
    padding: 70px 30px 40px;
    text-align: center;
    color: var(--navy);
    transition: .35s
}

    .arch:hover {
        transform: translateY(-10px)
    }
    .arch:nth-child(1) {
        background: var(--p-mist);
        min-height: 180px;
    }
    .arch:nth-child(2) {
        background: var(--p-apricot);
        min-height: 180px;
    }
    .arch:nth-child(3) {
        background: var(--p-sage);
        min-height: 180px;
    }
    .arch h3 {
        font-size: 1.9rem;
        letter-spacing: .08em;
        margin-bottom: 14px
    }

    .arch .num {
        font-family: "Cormorant Garamond",serif;
        font-size: 3.4rem;
        color: var(--amber);
        line-height: 1
    }

/* WHO */
.who {
    padding: 30px 0;
}
    .who h2 {
        font-size: clamp(2rem,4vw,3rem);
        text-align: center;
        margin-bottom: 12px
    }

    .who .sub {
        text-align: center;
        margin-bottom: 50px
    }

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

.card {
    border-radius: 26px;
    padding: 36px 30px;
    position: relative;
    overflow: hidden;
    transition: .3s
}

    .card:hover {
        transform: rotate(-1.2deg) translateY(-6px)
    }

    .card:nth-child(1) {
        background: var(--p-blush)
    }

    .card:nth-child(2) {
        background: var(--p-mist)
    }

    .card:nth-child(3) {
        background: var(--p-sage)
    }

    .card .n {
        font-family: "Bricolage Grotesque",sans-serif;
        font-weight: 800;
        font-size: 5rem;
        color: rgba(16,29,41,.08);
        position: absolute;
        right: 18px;
        top: -6px
    }

    .card h3 {
        font-size: 1.3rem;
        margin-bottom: 12px;
        position: relative
    }

.hint {
    margin: 46px auto 0;
    max-width: 560px;
    text-align: center;
    background: #fff;
    padding: 22px 30px;
    border-radius: 60px;
    box-shadow: 0 10px 28px rgba(16,29,41,.07);
    font-family: "Cormorant Garamond",serif;
    font-size: 1.5rem;
    font-style: italic;
    color: var(--amber)
}

/* PROMISE */
.promise {
    background: var(--navy);
    color: var(--cream);
    padding: 100px 0;
    text-align: center;
    border-radius: 60px 60px 0 0;
    position: relative;
    overflow: hidden
}

    .promise::before, .promise::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(248,217,173,.08)
    }

    .promise::before {
        width: 380px;
        height: 380px;
        top: -140px;
        left: -100px
    }

    .promise::after {
        width: 300px;
        height: 300px;
        bottom: -120px;
        right: -60px
    }

    .promise h2 {
        color: var(--cream);
        font-size: clamp(2rem,4.2vw,3.2rem);
        margin-bottom: 24px
    }

    .promise p {
        max-width: 720px;
        margin: 0 auto 14px;
        font-size: 1.12rem;
        color: #e8d5b6;
        position: relative
    }

    .promise .big {
        font-family: "Cormorant Garamond",serif;
        font-style: italic;
        font-size: 1.9rem;
        color: var(--p-apricot);
        margin: 26px auto 36px
    }

    .promise .btn {
        background: var(--cream);
        color: var(--navy);
        position: relative
    }

        .promise .btn:hover {
            background: var(--amber);
            color: #fff
        }

a.btn {
    font-family: 'DM Sans';
    text-decoration: none;
    line-height: 52px;
    display: inline-block;
    padding: 0 20px;
    border-radius: 50px;
}
.card:last-child {
    grid-column-start: 1;
    grid-column-end: 4;
    background: #f8d9ad;
}
.lastcontent {
    background: var(--ink);
    color: var(--cream);
    text-align: center;
    padding: 20px 15px;
    font-family: "Poppins",sans-serif;
    font-size: .85rem;
}
    .lastcontent b {
        font-family: "Bricolage Grotesque",sans-serif;
        font-size: 1.3rem;
        display: block;
        margin-bottom: 6px;
    }

@media(max-width:900px) {
    .story, .cards, .arches, .mod-list, .pills {
        grid-template-columns: 1fr
    }

    .links a:not(.btn) {
        display: none
    }

    .arch {
        min-height: auto !important
    }
}