/* =========================================================
   LA CLÉ — LEGAL
========================================================= */

.legal-page {
    margin: 0;

    background: #eee7dc;

    color: #1c1d18;
}


/* =========================================================
   HEADER
========================================================= */

.legal-header {
    position: sticky;

    z-index: 100;

    top: 0;

    min-height: 72px;

    padding:
        0 clamp(22px, 5vw, 80px);

    display: flex;

    align-items: center;

    border-bottom:
        1px solid rgba(194,151,71,.22);

    background:
        rgba(3,14,9,.97);

    backdrop-filter:
        blur(12px);
}


.legal-brand {
    display: flex;

    align-items: center;

    gap: 14px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;

    color: #e3c073;
}


.legal-monogram {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(220,177,89,.75);

    border-radius: 50%;

    font-size: 12px;
}


.legal-nav {
    margin-left: auto;

    display: flex;

    gap: 38px;
}


.legal-nav a {
    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;

    letter-spacing: .15em;

    text-transform: uppercase;

    color:
        rgba(239,224,194,.63);
}


/* =========================================================
   HERO
========================================================= */

.legal-hero {
    padding:
        clamp(95px, 10vw, 160px)
        clamp(28px, 8vw, 130px);

    background:
        linear-gradient(
            145deg,
            #0b281b,
            #03110b
        );

    color: #eee1c7;
}


.legal-hero-inner {
    width:
        min(1150px, 100%);
}


.legal-eyebrow,
.legal-intro-title > span,
.legal-final > span {
    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;

    letter-spacing: .27em;

    text-transform: uppercase;

    color: #c49343;
}


.legal-hero h1 {
    margin:
        23px 0 30px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(73px, 9vw, 145px);

    line-height: .78;

    font-weight: 400;

    color: #efe2c8;
}


.legal-hero p {
    margin:
        0 0 35px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(24px, 2.2vw, 36px);

    color:
        rgba(237,217,179,.77);
}


.legal-hero small {
    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;

    letter-spacing: .13em;

    text-transform: uppercase;

    color:
        rgba(231,204,150,.44);
}


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

.legal-intro {
    padding:
        clamp(90px, 9vw, 145px)
        clamp(28px, 8vw, 130px);

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        clamp(60px, 10vw, 170px);

    border-bottom:
        1px solid #cbbdab;
}


.legal-intro-title h2 {
    margin:
        20px 0 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(53px, 5vw, 82px);

    line-height: .88;

    font-weight: 400;
}


.legal-intro-copy p {
    max-width: 640px;

    font-size: 14px;

    line-height: 1.9;

    color: #6c6358;
}


.legal-intro-copy .legal-lead {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(22px, 2vw, 30px);

    line-height: 1.45;

    color: #302e28;
}


/* =========================================================
   CONTENT
========================================================= */

.legal-content {
    padding:
        0 clamp(28px, 8vw, 130px);
}


.legal-section {
    padding:
        clamp(60px, 6vw, 95px)
        0;

    display: grid;

    grid-template-columns:
        100px minmax(0, 820px);

    gap:
        clamp(30px, 5vw, 75px);

    border-bottom:
        1px solid #cabdab;
}


.legal-number {
    padding-top: 10px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;

    letter-spacing: .17em;

    color: #a7752c;
}


.legal-section h2 {
    margin:
        0 0 28px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(38px, 4vw, 61px);

    line-height: .95;

    font-weight: 400;

    color: #26251f;
}


.legal-section p,
.legal-section li {
    font-size: 14px;

    line-height: 1.9;

    color: #6a6258;
}


.legal-section p {
    margin:
        0 0 19px;
}


.legal-section ul {
    margin:
        25px 0 30px;

    padding:
        0;

    list-style: none;
}


.legal-section li {
    position: relative;

    padding:
        9px 0 9px 25px;

    border-bottom:
        1px solid rgba(181,163,140,.42);
}


.legal-section li::before {
    content: "—";

    position: absolute;

    left: 0;

    color: #a8762c;
}


.legal-section a {
    color: #906724;
}


.legal-data {
    margin:
        30px 0;

    padding:
        27px 30px;

    border:
        1px solid #cabaa4;

    background:
        rgba(255,255,255,.21);
}


.legal-data p {
    margin:
        7px 0;
}


.legal-data strong {
    color: #353128;
}


/* =========================================================
   PROVIDERS
========================================================= */

.legal-providers {
    margin:
        35px 0;

    border-top:
        1px solid #cabaa4;
}


.legal-providers > div {
    padding:
        19px 0;

    display: grid;

    grid-template-columns:
        .5fr 1fr;

    gap: 30px;

    border-bottom:
        1px solid #cabaa4;
}


.legal-providers strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;

    font-weight: 400;

    color: #8d672d;
}


.legal-providers span {
    align-self: center;

    font-size: 13px;

    color: #746b60;
}


/* =========================================================
   RIGHTS
========================================================= */

.legal-email {
    display: inline-block;

    margin:
        5px 0 30px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(30px, 3vw, 46px);

    color: #9a6f2d !important;
}


.legal-external {
    margin-top: 18px;

    padding:
        18px 0;

    display: flex;

    justify-content: space-between;

    border-top:
        1px solid #c5b59f;

    border-bottom:
        1px solid #c5b59f;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;
}


/* =========================================================
   FINAL
========================================================= */

.legal-final {
    padding:
        clamp(100px, 10vw, 165px)
        clamp(28px, 8vw, 130px);

    background:
        linear-gradient(
            145deg,
            #0b281b,
            #03110b
        );

    color: #ecdec2;
}


.legal-final h2 {
    margin:
        22px 0 45px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(61px, 7vw, 108px);

    line-height: .82;

    font-weight: 400;
}


.legal-final > a {
    width: min(580px, 100%);

    padding:
        20px 0;

    display: flex;

    justify-content: space-between;

    border-top:
        1px solid rgba(211,169,84,.43);

    border-bottom:
        1px solid rgba(211,169,84,.43);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(25px, 2vw, 34px);

    color: #d8af62;
}


/* =========================================================
   FOOTER
========================================================= */

.legal-footer {
    min-height: 95px;

    padding:
        0 clamp(25px, 6vw, 95px);

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    align-items: center;

    gap: 25px;

    background: #020a06;

    border-top:
        1px solid rgba(206,161,73,.2);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        rgba(232,211,167,.45);
}


.legal-footer > a {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 23px;

    text-transform: none;

    color: #d5aa57;
}


.legal-footer > div:nth-child(2) {
    text-align: center;
}


.legal-footer-links {
    display: flex;

    justify-content: flex-end;

    gap: 20px;
}


.legal-footer-links a {
    color:
        rgba(232,211,167,.55);
}


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

@media (max-width: 700px) {

    .legal-header {
        min-height: 66px;

        padding:
            0 18px;
    }


    .legal-nav {
        display: none;
    }


    .legal-hero {
        padding:
            85px 20px
            75px;
    }


    .legal-hero h1 {
        font-size:
            clamp(66px, 20vw, 92px);
    }


    .legal-intro {
        padding:
            75px 20px;

        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .legal-intro-copy p {
        font-size: 15px;
    }


    .legal-content {
        padding:
            0 20px;
    }


    .legal-section {
        padding:
            65px 0;

        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .legal-section h2 {
        font-size:
            clamp(39px, 12vw, 54px);
    }


    .legal-section p,
    .legal-section li {
        font-size: 15px;

        line-height: 1.8;
    }


    .legal-data {
        padding:
            22px 18px;
    }


    .legal-providers > div {
        grid-template-columns:
            1fr;

        gap: 6px;
    }


    .legal-final {
        padding:
            85px 20px;
    }


    .legal-footer {
        padding:
            35px 20px;

        display: flex;

        flex-direction: column;

        text-align: center;
    }


    .legal-footer-links {
        justify-content: center;

        flex-wrap: wrap;
    }

}