:root {
    --cream: #fce4c5;
    --ink: #020d02;
    --amber: #a55e0b;
    --navy: #101d29;
    --p-peach: #fff6ea;
    --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;
    line-height: 1.15;
    color: var(--navy)
}

.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
}

nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,246,234,.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(165,94,11,.15)
}

    nav .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px
    }

.logo {
    font-family: "Bricolage Grotesque",sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--navy);
    text-decoration: none
}

    .logo span {
        color: var(--amber)
    }

.links {
    display: flex;
    gap: 28px;
    align-items: center
}

    .links a {
        font-family: "Poppins",sans-serif;
        font-size: .88rem;
        color: var(--navy);
        text-decoration: none;
        font-weight: 500;
        padding-bottom: 3px;
        border-bottom: 2px solid transparent;
        transition: .25s
    }

        .links a:hover, .links a.on {
            border-color: var(--amber);
            color: var(--amber)
        }

.btn {
    display: inline-block;
    font-family: "Poppins",sans-serif;
    font-weight: 600;
    font-size: .9rem;
    padding: 14px 30px;
    border-radius: 50px;
    background: var(--amber);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(165,94,11,.28);
    transition: .3s
}

    .btn:hover {
        transform: translateY(-3px);
        background: var(--navy)
    }

.links .btn {
    padding: 10px 22px;
    font-size: .82rem;
    color: #fff;
    border: 0
}

    .links .btn:hover {
        color: #fff
    }

/* HERO split */
.hero {
    padding: 90px 0 100px;
    background: linear-gradient(135deg,var(--p-sage) 0%,var(--p-peach) 45%,var(--p-apricot) 100%);
    position: relative;
    overflow: hidden
}

    .hero .wrap {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 50px;
        align-items: center
    }

.eyebrow {
    font-family: "Poppins",sans-serif;
    font-size: .78rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 20px;
    display: block
}

.hero h1 {
    font-size: clamp(2.4rem,6vw,4.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 24px
}

.hero p {
    font-size: 1.12rem;
    max-width: 560px;
    margin-bottom: 34px
}

.clock {
    position: relative;
    width: min(340px,80vw);
    aspect-ratio: 1;
    margin: auto
}

    .clock .ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px dashed var(--amber);
        opacity: .5
    }

    .clock .ring2 {
        position: absolute;
        inset: 26px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 24px 60px rgba(16,29,41,.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .clock b {
        font-family: "Bricolage Grotesque",sans-serif;
        font-size: 6rem;
        font-weight: 800;
        line-height: 1;
        color: var(--navy)
    }

    .clock small {
        font-family: "Poppins",sans-serif;
        letter-spacing: .25em;
        text-transform: uppercase;
        font-size: .75rem;
        color: var(--amber)
    }

    .clock i {
        position: absolute;
        width: 74px;
        height: 74px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-style: normal;
        font-family: "Poppins",sans-serif;
        font-size: .62rem;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0,0,0,.08)
    }

        .clock i:nth-of-type(1) {
            background: var(--p-apricot);
            top: -14px;
            left: 50%;
            transform: translateX(-50%)
        }

        .clock i:nth-of-type(2) {
            background: var(--p-sage);
            bottom: 18px;
            left: -14px
        }

        .clock i:nth-of-type(3) {
            background: var(--p-mist);
            bottom: 18px;
            right: -14px
        }

/* INTRO strip */
.intro {
    padding: 40px 0 20px;
    text-align: center;
}
    .intro p {
        max-width: 760px;
        margin: auto;
        font-size: 1.2rem
    }

    .intro .serif {
        font-size: 1.7rem;
        display: block;
        margin-top: 18px
    }

/* TIMELINE */
.tl {
    padding: 10px 0 30px;
}
.line {
    position: relative;
    max-width: 1000px;
    margin: auto
}

    .line::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: repeating-linear-gradient(var(--amber) 0 10px,transparent 10px 20px);
        transform: translateX(-50%);
        opacity: .45
    }

.step {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: center;
    margin-bottom: 60px
}

    .step .dot {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: var(--navy);
        color: var(--cream);
        font-family: "Bricolage Grotesque",sans-serif;
        font-weight: 800;
        font-size: 1.6rem;
        display: grid;
        place-items: center;
        margin: auto;
        border: 6px solid var(--p-peach);
        box-shadow: 0 0 0 2px var(--amber);
        z-index: 2
    }

.box {
    padding: 36px 34px;
    border-radius: 28px;
    box-shadow: 0 18px 44px rgba(16,29,41,.08);
    transition: .3s
}

    .box:hover {
        transform: translateY(-6px)
    }

    .box h3 {
        font-size: 1.7rem;
        margin: 6px 0 4px
    }
    .box em {
        font-family: "Cormorant Garamond",serif;
        font-size: 20px;
        color: var(--amber);
        display: block;
        margin-bottom: 0;
        line-height: 20px;
    }

    .box .lab {
        font-family: "Poppins",sans-serif;
        font-size: .7rem;
        letter-spacing: .24em;
        color: var(--amber);
        text-transform: uppercase
    }

.s1 .box {
    background: var(--p-apricot);
    grid-column: 1;
    border-radius: 28px 28px 28px 80px
}

.s1 .dot {
    grid-column: 2
}

.s2 .box {
    background: var(--p-sage);
    grid-column: 3;
    grid-row: 1;
    border-radius: 28px 28px 80px 28px
}

.s2 .dot {
    grid-column: 2;
    grid-row: 1
}

.s3 .box {
    background: var(--p-mist);
    grid-column: 1;
    border-radius: 28px 80px 28px 28px
}

.s3 .dot {
    grid-column: 2
}

/* TPOS */
.tpos {
    background: var(--navy);
    padding: 100px 0;
    border-radius: 60px;
    margin: 0 14px;
    position: relative;
    overflow: hidden
}

    .tpos::before {
        content: "∞";
        position: absolute;
        right: -30px;
        top: -80px;
        font-family: "Cormorant Garamond",serif;
        font-size: 26rem;
        color: rgba(252,228,197,.05);
        line-height: 1
    }

    .tpos h2 {
        color: var(--cream);
        text-align: center;
        font-size: clamp(2rem,4vw,3.1rem);
        margin-bottom: 14px
    }

    .tpos .sub {
        text-align: center;
        color: #e0cba9;
        max-width: 700px;
        margin: 0 auto 56px
    }

.decks {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    position: relative
}

.deck {
    background: var(--p-peach);
    border-radius: 22px;
    padding: 34px 24px 30px;
    text-align: center;
    transition: .35s;
    border-bottom: 8px solid var(--amber)
}

    .deck:nth-child(1) {
        transform: rotate(-3deg);
        background: var(--p-mist);
        border-color: #7e9bb5
    }

    .deck:nth-child(2) {
        transform: rotate(2deg) translateY(16px);
        background: var(--p-blush);
        border-color: #c98a5a
    }

    .deck:nth-child(3) {
        transform: rotate(-2deg);
        background: var(--p-apricot)
    }

    .deck:nth-child(4) {
        transform: rotate(3deg) translateY(16px);
        background: var(--p-sage);
        border-color: #8aa57a
    }

    .deck:hover {
        transform: rotate(0) translateY(-10px)
    }

    .deck .ic {
        font-family: "Cormorant Garamond",serif;
        font-size: 3.2rem;
        color: var(--amber);
        line-height: 1
    }

    .deck h3 {
        font-size: 1.2rem;
        margin: 10px 0 4px
    }

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

    .deck p {
        font-size: .93rem
    }

.tpos .close {
    max-width: 720px;
    margin: 70px auto 0;
    text-align: center;
    color: var(--cream);
    font-family: "Cormorant Garamond",serif;
    font-size: 1.6rem;
    font-style: italic
}

/* CTA */
.cta {
    padding: 40px 0;
    text-align: center;
    background: radial-gradient(circle at 50% 0,var(--p-apricot) 0,transparent 55%);
}
.cta h2 {
    font-size: clamp(2rem,4.4vw,3.4rem);
    margin-bottom: 16px;
    margin-top: 0;
}
.cta p {
    max-width: 470px;
    margin: 0 auto 24px;
}
.cta .rap {
    font-family: "Poppins",sans-serif;
    letter-spacing: .3em;
    font-size: .8rem;
    color: var(--amber);
    margin-top: 34px;
    display: block
}
.clock i img {
    height: 40px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(86%) saturate(1552%) hue-rotate(69deg) brightness(101%) contrast(94%);
}
.box p {
    margin: 1px 0 16px;
}
@media(max-width:900px) {
    .hero .wrap, .decks {
        grid-template-columns: 1fr
    }

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

    .line::before {
        left: 34px
    }

    .step {
        grid-template-columns: 70px 1fr;
        gap: 10px
    }

        .step .dot {
            grid-column: 1 !important;
            grid-row: 1 !important;
            width: 56px;
            height: 56px;
            margin: 0
        }

        .step .box {
            grid-column: 2 !important;
            grid-row: 1 !important
        }

    .deck {
        transform: none !important
    }
}