:root{--black:#151311;--gold:#c4a268;--cream:#f6f0e7;--muted:#a89b8c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--cream);font-family:'DM Sans',sans-serif}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img,video{max-width:100%}[hidden]{display:none!important}.eyebrow{font-size:.68rem;letter-spacing:.26em;font-weight:600;color:var(--gold);line-height:1.7}.display-title{font:400 clamp(2.7rem,7vw,5.4rem)/1.03 'Cormorant Garamond',serif;margin:.35em 0}.display-title em,.brand em,.hero-names em{color:var(--gold);font-weight:400}.site-header{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:24px clamp(22px,5vw,80px);border-bottom:1px solid #ffffff18}.site-header>span,.header-back{font-size:.68rem;letter-spacing:.16em;color:#e2d5c3}.brand{font:500 clamp(1.45rem,3vw,2.1rem) 'Cormorant Garamond',serif}.gate-locked{overflow:hidden}.gate{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(circle at 50% 42%,#30271e,#100f0e 75%)}.gate-copy h1{font:400 clamp(2.9rem,8vw,5.8rem) 'Great Vibes',cursive;color:#f0d8ad;margin:10px 0}.gate-copy p:not(.eyebrow){color:#c7b9a5;font-size:.83rem}.hint{font-size:.80rem;letter-spacing:.09em;color:var(--gold);margin:28px 0}.envelope-button{border:0;background:none;padding:0;margin:56px 0 8px;perspective:1100px}.envelope{display:block;position:relative;width:min(370px,82vw);height:240px;filter:drop-shadow(0 25px 32px #0009)}.envelope-back{position:absolute;inset:0;background:#d6c29f;border-radius:4px}.envelope-letter{position:absolute;z-index:2;left:7%;bottom:8px;width:86%;height:90%;background:#fffaf0;border:1px solid #c4a268;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;transition:transform 1s .65s}.letter-small{color:#8b6b43;font-size:.55rem;letter-spacing:.17em}.letter-title{font:400 2.5rem 'Cormorant Garamond',serif;color:#392c22}.letter-title i{color:#b98d47}.envelope-pocket{position:absolute;z-index:3;inset:0;background:#e4d3b5;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}.envelope-flap{position:absolute;z-index:5;inset:0;background:#c9b18c;clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;transition:transform .8s}.wax-seal{position:absolute;z-index:6;left:50%;top:43%;transform:translate(-50%,-50%);height:56px;width:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#caa962,#8d642c);border:3px double #e9d3a0;color:#fff0c6;font:600 16px 'Cormorant Garamond',serif;transition:opacity .25s}.wax-seal span{font-size:11px}.opened .envelope-flap{transform:rotateX(180deg);z-index:1}.opened .wax-seal{opacity:0}.opened .envelope-letter{transform:translateY(-135px)}.landing-content{min-height:100vh}.landing-content.entered{animation:fadeIn .7s both}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}.landing-intro{text-align:center;padding:72px 20px 48px;max-width:750px;margin:auto}.landing-intro>p:last-child,.section-heading>p:last-child{font-size:.87rem;line-height:1.9;color:#c2b7a8}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1250px;margin:0 auto;padding:0 25px 85px}.choice-card{position:relative;overflow:hidden;min-height:550px;display:block;border:1px solid #a98a5555}.choice-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .7s}.choice-card:hover img{transform:scale(1.06)}.choice-shade{position:absolute;inset:0;background:linear-gradient(transparent 30%,#080706df)}.choice-copy{position:absolute;inset:auto 30px 35px;display:flex;flex-direction:column;gap:9px}.choice-copy strong{font:400 clamp(2.5rem,5vw,4.7rem) 'Cormorant Garamond',serif}.choice-copy>span:last-child{font-size:.8rem;color:#eee1cd}.site-footer{padding:30px clamp(20px,5vw,70px);border-top:1px solid #ffffff20;display:flex;gap:15px;justify-content:space-between;font-size:.65rem;letter-spacing:.16em;color:#bda982}.event-hero{height:min(780px,85svh);min-height:570px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden}.event-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(#0008,#0008 35%,#000d)}.hero-content{position:relative;padding:30px}.hero-content h1{font:400 clamp(4rem,11vw,9rem) 'Cormorant Garamond',serif;margin:5px 0}.hero-names{font:400 clamp(1.7rem,4vw,3rem) 'Cormorant Garamond',serif}.hero-date{font-size:.76rem;letter-spacing:.13em;margin:25px 0 35px}.button{display:inline-block;border:1px solid transparent;padding:16px 27px;font-size:.72rem;letter-spacing:.13em;text-align:center}.button-outline{border-color:#f4e7d0}.button-gold{background:var(--gold);color:#18130c}.button-dark{background:var(--black);color:#fff;margin-top:28px}.scratch-section,.details-section,.schedule-section,.dress-section,.gallery-section,.rsvp-section{text-align:center;padding:90px 22px}.scratch-section{background:var(--cream);color:#3a2e23}.scratch-section>p:not(.eyebrow){color:#76634b}.scratch-card{position:relative;max-width:540px;height:220px;margin:45px auto 0;border:1px solid #c4a268;border-radius:5px;box-shadow:0 15px 55px #0002;overflow:hidden;background:#fffaf0}.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.scratch-under strong{font:500 clamp(2rem,7vw,3.7rem) 'Cormorant Garamond',serif}.scratch-under>span:last-child{font:400 1.3rem 'Cormorant Garamond',serif}#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.text-button{background:none;border:0;color:#745a32;text-decoration:underline;text-underline-offset:5px;font-size:.78rem}.reveal-actions{margin-top:25px}.reveal-message{font:400 1.8rem 'Cormorant Garamond',serif}.section-heading{max-width:750px;margin:0 auto 45px}.details-section{background:#171411}.invitation-text{max-width:700px;margin:auto;color:#e0d3c1;font:400 clamp(1.25rem,3vw,1.7rem)/1.55 'Cormorant Garamond',serif}.invitation-text .gold-amp{font:400 2.7rem 'Great Vibes',cursive;color:var(--gold)}.cordially{font:600 .68rem 'DM Sans',sans-serif;letter-spacing:.25em;color:var(--gold);margin:35px 0}.invitation-text h3{font:400 clamp(2.3rem,6vw,4rem) 'Cormorant Garamond',serif;color:#e8c990}.event-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:50px auto 10px;padding:35px 0;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25}.event-facts>div{display:flex;flex-direction:column;gap:12px}.event-facts span{font-size:.6rem;letter-spacing:.2em;color:var(--gold)}.event-facts strong{font:400 1.3rem 'Cormorant Garamond',serif}.schedule-section{background:#211b16}.schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px;max-width:1200px;margin:auto;text-align:left}.schedule-card{padding:36px 26px;min-height:265px;display:flex;flex-direction:column}.schedule-card h3{font:400 2.2rem 'Cormorant Garamond',serif;margin:20px 0 5px}.schedule-card p{font-size:.8rem;line-height:1.7}.dress-line{margin-top:auto;padding-top:20px;border-top:1px solid #ffffff44;font-size:.6rem;letter-spacing:.15em}.dress-line strong{display:block;margin-top:7px;font-size:.83rem}.tone-denim{background:#273e59}.tone-pink{background:#66374d}.tone-black{background:#111;border:1px solid #a98952}.tone-white{background:#eae7e0;color:#27231d}.tone-white .eyebrow{color:#77643c}.tone-white .dress-line{border-color:#2224}.dress-section{background:#f4eee5;color:#2e261e}.dress-section .section-heading>p:last-child{color:#6d6051}.poster{width:min(100%,570px);display:block;margin:0 auto 20px;box-shadow:0 10px 45px #0002}.secondary-poster{margin-top:55px}.text-link{display:inline-block;margin:10px auto 20px;color:#826133;text-decoration:underline;text-underline-offset:5px;font-size:.78rem}.gallery-section{background:#14110f}.gallery-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery-grid img{width:100%;height:360px;object-fit:cover}.gallery-grid img:first-child{object-position:center 35%}.video-grid{max-width:1200px;margin:25px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.video-grid video{width:100%;max-height:430px;background:#000}.rsvp-section{background:#211b16}.rsvp-section>p:not(.eyebrow){font-size:.85rem;color:#c8b7a2}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:950px;margin:40px auto 0}.contact-card{border:1px solid #b69a6355;padding:25px 12px;display:flex;flex-direction:column;gap:15px}.contact-card h3{font:400 1.7rem 'Cormorant Garamond',serif;margin:0}.contact-card a{font-size:.8rem}.contact-card a:last-child{color:var(--gold)}.confetti-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:9px;height:14px;animation:confettiFall 3.2s linear forwards}@keyframes confettiFall{to{transform:translate(var(--drift),110vh) rotate(720deg);opacity:0}}@media(max-width:720px){.site-header>span{display:none}.choice-grid{grid-template-columns:1fr;padding:0 16px 60px}.choice-card{min-height:440px}.event-hero{min-height:590px}.event-facts{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.gallery-grid img{height:230px}.video-grid{grid-template-columns:1fr}.scratch-section,.details-section,.schedule-section,.dress-section,.gallery-section,.rsvp-section{padding:70px 17px}.site-footer{flex-direction:column;align-items:center;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ==========================================
   KING & PETALS
   LUXURY OPENING PAGE
========================================== */


/* DESIGN COLORS */

:root {
    --luxury-black: #080808;
    --luxury-gold: #d4af67;
    --luxury-light-gold: #f2d99b;
    --luxury-white: #ffffff;
}


/* ==========================================
   OPENING SCREEN
========================================== */

.landing-body .gate {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100svh;

    z-index: 20;

    background: #080808;

    color: white;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
}


/* VIDEO BACKGROUND */

.gate-video-wrapper {
    position: absolute;
    inset: -15px;

    z-index: 0;

    overflow: hidden;

    background:
        url("../images/airport.png")
        center / cover no-repeat;
}

.gate-video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        blur(5px)
        brightness(.65);

    transform: scale(1.05);
}


/* DARK CINEMATIC OVERLAY */

.gate-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.75),
            rgba(0,0,0,.48) 50%,
            rgba(0,0,0,.75)
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.55),
            transparent 35%,
            rgba(0,0,0,.82)
        );
}


/* GOLDEN GLOW */

.gate-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,103,.13),
            transparent 65%
        );

    filter: blur(35px);

    z-index: 2;

    pointer-events: none;
}


/* ==========================================
   TOP LOGO
========================================== */

.gate-logo {
    position: absolute;

    top: 35px;
    left: 5%;

    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--luxury-gold);
}

.logo-crown {
    font-size: 23px;
    line-height: 1;
}

.logo-initials {
    font-family: "Cormorant Garamond", serif;

    font-size: 40px;
    line-height: 1;
}

.logo-initials em {
    font-style: italic;
    color: var(--luxury-light-gold);
}

.logo-name {
    font-size: 9px;
    letter-spacing: 5px;

    margin-top: 7px;
}


/* TOP RIGHT */

.gate-top-message {
    position: absolute;

    top: 52px;
    right: 5%;

    z-index: 5;

    font-size: 10px;
    letter-spacing: 4px;

    color: white;

    text-align: right;
}

.message-line {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 15px;

    color: var(--luxury-gold);
}

.message-line::before,
.message-line::after {
    content: "";

    height: 1px;
    width: 75px;

    background: rgba(212,175,103,.6);

    margin: 0 10px;
}


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

.gate-main {
    position: relative;
    z-index: 4;

    width: 100%;
    max-width: 1000px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 40px 20px;
}


/* HEADING */

.landing-body .gate-copy .eyebrow {
    color: white;

    font-size: 11px;
    letter-spacing: 6px;

    font-weight: 500;
}

.title-crown {
    font-size: 43px;

    color: var(--luxury-gold);

    margin-top: 20px;

    text-shadow:
        0 0 25px rgba(212,175,103,.4);
}

.landing-body .gate-title {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(65px, 8vw, 125px);

    font-weight: 500;
    line-height: 1;

    color: var(--luxury-light-gold);

    margin: 0;

    text-shadow:
        0 5px 35px rgba(0,0,0,.5);
}

.gate-title em {
    font-family: "Great Vibes", cursive;

    font-weight: 400;

    color: var(--luxury-gold);
}


/* COUPLE NAMES */

.couple-names {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    font-family: "Cormorant Garamond", serif;

    font-size: 25px;
    letter-spacing: 10px;

    color: white;

    margin-top: 20px;
}

.couple-names span {
    display: block;

    width: 80px;
    height: 1px;

    background: var(--luxury-gold);
}


/* TAGLINE */

.landing-body .gate-tagline {
    margin-top: 18px;

    color: white;

    font-size: 10px;
    letter-spacing: 5px;
}


/* ==========================================
   BLACK ENVELOPE
========================================== */

.landing-body .envelope-button {
    position: relative;

    margin: 35px 0 0;

    border: none;
    background: transparent;

    padding: 0;

    perspective: 1200px;

    transition: transform .4s ease;
}

.landing-body .envelope-button:hover {
    transform: translateY(-6px);
}

.landing-body .envelope {
    display: block;

    position: relative;

    width: min(400px, 80vw);
    height: 245px;

    filter:
        drop-shadow(0 20px 35px rgba(0,0,0,.8));
}


/* BACK */

.landing-body .envelope-back {
    position: absolute;
    inset: 0;

    background: #111111;

    border: 1px solid var(--luxury-gold);

    border-radius: 2px;
}


/* LETTER */

.landing-body .envelope-letter {
    position: absolute;

    left: 7%;
    bottom: 8px;

    width: 86%;
    height: 90%;

    z-index: 2;

    background: #ffffff;

    border: 2px solid var(--luxury-gold);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    transition:
        transform 1s .65s;
}

.landing-body .letter-small {
    color: #8b6b36;

    font-size: 10px;
    letter-spacing: 2px;
}

.landing-body .letter-title {
    font-family: "Cormorant Garamond", serif;

    font-size: 34px;

    color: #111111;
}

.landing-body .letter-title i {
    color: var(--luxury-gold);
}


/* FRONT POCKET */

.landing-body .envelope-pocket {
    position: absolute;
    inset: 0;

    z-index: 3;

    background:
        linear-gradient(
            135deg,
            #171717,
            #080808
        );

    border-bottom:
        1px solid var(--luxury-gold);

    clip-path:
        polygon(
            0 0,
            50% 55%,
            100% 0,
            100% 100%,
            0 100%
        );
}


/* FLAP */

.landing-body .envelope-flap {
    position: absolute;
    inset: 0;

    z-index: 5;

    background:
        linear-gradient(
            145deg,
            #242424,
            #050505
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 55%
        );

    transform-origin: top;

    transition:
        transform .8s ease;
}


/* GOLD SEAL */

.landing-body .wax-seal {
    position: absolute;

    left: 50%;
    top: 43%;

    transform:
        translate(-50%, -50%);

    width: 65px;
    height: 65px;

    border-radius: 50%;

    z-index: 6;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 30% 25%,
            #f7df9e,
            #c49a48 45%,
            #75501c
        );

    border:
        3px double #f7df9e;

    box-shadow:
        0 0 0 3px #76551e,
        0 5px 20px rgba(0,0,0,.6),
        0 0 30px rgba(212,175,103,.25);

    color: #211605;

    transition: opacity .3s ease;
}

.seal-crown {
    font-size: 19px;
    line-height: 1;
}

.seal-initials {
    font-family: "Cormorant Garamond", serif;

    font-size: 17px;
    font-weight: 700;

    line-height: 1;
}


/* OPENING ANIMATION */

.landing-body .envelope.opened .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.landing-body .envelope.opened .wax-seal {
    opacity: 0;
}

.landing-body .envelope.opened .envelope-letter {
    transform: translateY(-135px);
}


/* HINT */

.landing-body .hint {
    margin-top: 30px;

    font-size: 14px;
    letter-spacing: 3px;

    color: white;
}

.landing-body .hint span {
    color: var(--luxury-gold);

    margin: 0 10px;
}


/* ==========================================
   SIDE DECORATIONS
========================================== */

.gate-side {
    position: absolute;

    top: 50%;

    z-index: 4;

    display: flex;
    flex-direction: column;

    gap: 12px;

    padding: 20px;

    border-left:
        1px solid var(--luxury-gold);

    font-size: 10px;
    letter-spacing: 3px;

    color: white;
}

.gate-side-left {
    left: 4%;
}

.gate-side-right {
    right: 4%;

    text-align: right;

    border-left: none;

    border-right:
        1px solid var(--luxury-gold);
}


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

.gate-footer {
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 5%;

    border-top:
        1px solid rgba(212,175,103,.5);

    background:
        rgba(0,0,0,.5);

    font-size: 10px;
    letter-spacing: 1.5px;

    color: white;
}

.gate-footer a {
    color: var(--luxury-gold);

    margin-left: 5px;

    text-decoration: none;
}

.gate-footer a:hover {
    color: white;
}


/* ==========================================
   LANDING PAGE
========================================== */

.landing-body {
    background: #080808;
    color: white;
}

.landing-body .landing-content {
    background: #080808;
}

.landing-body .site-header {
    border-bottom:
        1px solid rgba(212,175,103,.35);
}

.landing-body .brand {
    display: flex;
    flex-direction: column;

    align-items: center;

    color: var(--luxury-gold);
}

.brand-crown {
    font-size: 23px;
}

.brand-monogram {
    font-family: "Cormorant Garamond", serif;
    font-size: 35px;
}

.brand-monogram em {
    color: white;
}

.landing-body .brand small {
    font-size: 9px;
    letter-spacing: 3px;
}

.header-message {
    color: white;

    font-size: 10px;
    letter-spacing: 3px;
}

.header-message span {
    color: var(--luxury-gold);
}

.landing-body .landing-intro {
    padding-top: 90px;
}

.landing-body .display-title {
    color: var(--luxury-light-gold);
}

.landing-body .choice-card {
    border:
        1px solid rgba(212,175,103,.6);
}

.landing-body .choice-card:hover {
    border-color: var(--luxury-gold);
}

.landing-body .card-link {
    color: var(--luxury-gold) !important;

    font-size: 11px !important;
    letter-spacing: 2px;

    margin-top: 15px;
}


/* LANDING FOOTER */

.landing-body .site-footer {
    background: #080808;

    border-top:
        1px solid rgba(212,175,103,.5);

    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 30px 5%;

    font-size: 11px;
    letter-spacing: 1px;
}

.footer-developer a {
    color: var(--luxury-gold);
}

.footer-developer a:hover {
    color: white;
}


/* ==========================================
   RESPONSIVE DESIGN
========================================== */

@media (max-width: 768px) {

    .gate-logo {
        top: 20px;
        left: 20px;
    }

    .gate-top-message {
        display: none;
    }

    .gate-main {
        padding: 20px;
    }

    .landing-body .gate-title {
        font-size: clamp(55px, 12vw, 85px);
    }

    .couple-names {
        font-size: 17px;
        letter-spacing: 5px;

        gap: 10px;
    }

    .couple-names span {
        width: 30px;
    }

    .landing-body .gate-tagline {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .gate-side {
        display: none;
    }

    .landing-body .envelope {
        width: min(340px, 82vw);
        height: 220px;
    }

    .landing-body .envelope-button {
        margin-top: 35px;
    }

    .landing-body .hint {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .gate-footer {
        flex-direction: column;

        text-align: center;

        gap: 8px;

        padding: 15px;

        font-size: 9px;
    }

    .landing-body .site-footer {
        flex-direction: column;
        text-align: center;
    }

    .header-message {
        display: none;
    }

}


@media (max-height: 750px) {

    .gate-logo {
        top: 12px;
    }

    .gate-main {
        transform: scale(.85);
    }

    .gate-footer {
        padding-top: 12px;
        padding-bottom: 12px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .gate-video {
        display: none;
    }

    .landing-body .envelope-button:hover {
        transform: none;
    }

}


/* ==========================================
   KING & PETALS
   GOLD ENVELOPE REFINEMENT
========================================== */


/* GOLD ENVELOPE BACK */

.landing-body .envelope-back {
    background: linear-gradient(
        135deg,
        #f8e5a8 0%,
        #d4af67 40%,
        #a87932 100%
    );

    border: 1px solid #f8e5a8;
}


/* GOLD FRONT POCKET */

.landing-body .envelope-pocket {
    background: linear-gradient(
        135deg,
        #eacb83 0%,
        #c99d4d 50%,
        #a87932 100%
    );

    border-bottom: 1px solid #f8e5a8;

    clip-path: polygon(
        0 0,
        50% 55%,
        100% 0,
        100% 100%,
        0 100%
    );
}


/* GOLD TOP FLAP */

.landing-body .envelope-flap {
    background: linear-gradient(
        145deg,
        #f7df9e 0%,
        #d4af67 55%,
        #a87932 100%
    );

    clip-path: polygon(
        0 0,
        100% 0,
        50% 55%
    );

    transform-origin: top center;

    backface-visibility: hidden;
}


/* BLACK WAX SEAL */

.landing-body .wax-seal {
    background: radial-gradient(
        circle at 30% 25%,
        #333333 0%,
        #111111 55%,
        #000000 100%
    );

    border: 3px double #d4af67;

    box-shadow:
        0 0 0 3px #111111,
        0 5px 20px rgba(0,0,0,.65),
        0 0 20px rgba(212,175,103,.25);

    color: #f2d99b;
}


/* SEAL SYMBOLS */

.landing-body .seal-crown,
.landing-body .seal-initials {
    color: #f2d99b;
}


/* ENVELOPE SHADOW */

.landing-body .envelope {
    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,.75));
}


/* HOVER */

.landing-body .envelope-button:hover {
    transform: translateY(-5px);
}


/* ==========================================
   FOOTER - ALL LEFT
========================================== */

.landing-body .gate-footer {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    flex-direction: row;

    gap: 12px;

    text-align: left;

    padding: 20px 5%;

    font-size: 10px;
    letter-spacing: 1px;
}

.landing-body .gate-footer a {
    color: #d4af67;

    text-decoration: none;
}

.landing-body .gate-footer a:hover {
    color: #ffffff;
}

.footer-divider {
    color: #d4af67;
}


/* MOBILE FOOTER */

@media (max-width: 768px) {

    .landing-body .gate-footer {
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 6px;

        text-align: left;

        padding: 15px 20px;

        font-size: 9px;
    }

    .footer-divider {
        display: none;
    }

}


/* =====================================
   ENVELOPE CLICK FIX
===================================== */

.gate-video-wrapper,
.gate-overlay,
.gate-glow {
    pointer-events: none;
}

.landing-body .gate-main {
    position: relative;
    z-index: 10;
}

.landing-body .envelope-button {
    position: relative;
    z-index: 11;

    cursor: pointer;

    pointer-events: auto;
}

.landing-body .envelope-button:disabled {
    cursor: default;
}

.landing-body .envelope.opened .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.landing-body .envelope.opened .wax-seal {
    opacity: 0;
}

.landing-body .envelope.opened .envelope-letter {
    transform: translateY(-135px);
}


/* BIGGER LUXURY ENVELOPE */

.landing-body .envelope {
    width: min(700px, 85vw);
    height: auto;
    aspect-ratio: 1.8 / 1;
}

.landing-body .envelope-button {
    margin-top: 35px;
}

.landing-body .wax-seal {
    width: 90px;
    height: 90px;
}

.landing-body .seal-crown {
    font-size: 26px;
}

.landing-body .seal-initials {
    font-size: 22px;
}

/* TABLETS */

@media (max-width: 768px) {
    .landing-body .envelope {
        width: min(500px, 88vw);
    }

    .landing-body .wax-seal {
        width: 70px;
        height: 70px;
    }
}

/* SMALL PHONES */

@media (max-width: 480px) {
    .landing-body .envelope {
        width: 90vw;
    }

    .landing-body .envelope-button {
        margin-top: 25px;
    }
}


/* ==========================================
   KING & PETALS
   LUXURY LANDING PAGE
========================================== */

.luxury-landing {
    --luxury-black: #080808;
    --luxury-gold: #d6ae62;
    --luxury-white: #ffffff;

    background:
        radial-gradient(
            ellipse at 50% 35%,
            #211b12 0%,
            #080808 70%
        );

    color: var(--luxury-white);

    min-height: 100vh;

    font-family: "DM Sans", sans-serif;
}


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

.luxury-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 6%;

    border-bottom: 1px solid rgba(214,174,98,.35);
}

.luxury-logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--luxury-gold);
    text-decoration: none;
}

.logo-crown {
    font-size: 20px;
}

.logo-initials {
    font-family: "Cormorant Garamond", serif;
    font-size: 40px;
    line-height: 1;
}

.logo-initials em {
    font-style: italic;
}

.logo-name {
    font-size: 9px;
    letter-spacing: 5px;
    margin-top: 5px;
}

.luxury-header-right {
    font-size: 10px;
    letter-spacing: 4px;
    font-weight: 600;
}

.luxury-header-right span {
    color: var(--luxury-gold);
    margin-left: 8px;
    font-size: 17px;
}


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

.luxury-intro {
    text-align: center;
    padding: 60px 20px 45px;
}

.luxury-eyebrow {
    color: var(--luxury-gold);
    font-size: 11px;
    letter-spacing: 5px;
    font-weight: 600;
}

.luxury-intro h1 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(55px, 6vw, 100px);
    font-weight: 500;

    color: #f5e7c9;

    margin: 15px 0;
    line-height: 1.1;
}

.luxury-description {
    color: #c9c5be;

    font-family: "Cormorant Garamond", serif;
    font-size: 23px;

    line-height: 1.5;
}

.luxury-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 28px;
}

.luxury-divider span {
    width: 80px;
    height: 1px;
    background: var(--luxury-gold);
}

.luxury-divider i {
    color: var(--luxury-gold);
    font-size: 25px;
    font-style: normal;
}


/* ==========================================
   CARD LAYOUT
========================================== */

.luxury-cards {
    width: min(1450px, 94%);

    margin: 0 auto 80px;

    display: grid;

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

    gap: 25px;

    align-items: center;
}


/* ==========================================
   CARD BASE
========================================== */

.luxury-card {
    position: relative;

    height: 580px;

    display: block;

    overflow: hidden;

    border: 1px solid var(--luxury-gold);
    border-radius: 140px 140px 12px 12px;

    background: #111;

    color: white;
    text-decoration: none;

    isolation: isolate;

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.luxury-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.6),
        0 0 30px rgba(214,174,98,.18);
}


/* ==========================================
   CARD IMAGE
========================================== */

.card-photo {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.card-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}

.luxury-card:hover .card-photo img {
    transform: scale(1.07);
}

.card-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),
            transparent 85%
        );
}


/* ==========================================
   DARK CARD PANELS
========================================== */

.card-dark-panel {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 65%;

    padding: 45px 28px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            120deg,
            #090909 0%,
            #17130d 100%
        );

    border-right: 1px solid rgba(214,174,98,.5);

    border-radius: 0 48% 48% 0 / 0 35% 35% 0;

    z-index: 2;
}

.wedding-card .card-dark-panel {
    left: auto;
    right: 0;

    border-right: none;
    border-left: 1px solid rgba(214,174,98,.5);

    border-radius: 48% 0 0 48% / 35% 0 0 35%;

    text-align: right;
    align-items: flex-end;
}


/* ==========================================
   CARD TYPOGRAPHY
========================================== */

.card-date {
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;
    line-height: 2;

    color: var(--luxury-gold);
}

.card-date span {
    display: block;
}

.card-line {
    width: 90px;
    height: 1px;

    background: var(--luxury-gold);

    margin: 25px 0;
}

.card-dark-panel h2 {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(40px, 3.5vw, 62px);

    line-height: .95;
    font-weight: 500;

    color: white;

    margin: 0 0 22px;
}

.card-subtitle {
    font-size: 10px;
    letter-spacing: 4px;

    color: var(--luxury-gold);
}

.card-description {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;

    font-size: 21px;
    line-height: 1.4;

    color: #d7d2c9;

    margin: 25px 0;
}


/* ==========================================
   BUTTON
========================================== */

.luxury-card-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    padding: 15px 18px;

    border: 1px solid var(--luxury-gold);
    border-radius: 5px;

    color: var(--luxury-gold);

    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;
}

.luxury-card:hover .luxury-card-button {
    background: var(--luxury-gold);
    color: black;
}


/* ==========================================
   CARD DECORATION
========================================== */

.card-bottom-decoration {
    position: absolute;

    bottom: 18px;
    left: 0;
    right: 0;

    text-align: center;

    color: var(--luxury-gold);

    font-size: 15px;
    letter-spacing: 8px;

    z-index: 3;

    pointer-events: none;
}


/* ==========================================
   CENTER DECORATION
========================================== */

.cards-center {
    text-align: center;
    color: var(--luxury-gold);
}

.center-top {
    font-size: 25px;
}

.cards-center p {
    font-family: "Great Vibes", cursive;
    font-size: 33px;

    line-height: 1.4;

    margin: 25px 0;
}

.center-line {
    width: 70px;
    height: 1px;

    background: var(--luxury-gold);

    margin: 0 auto;
}

.center-bottom {
    display: block;
    font-size: 25px;
    margin-top: 25px;
}


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

.luxury-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 25px;

    padding: 25px 5%;

    border-top: 1px solid rgba(214,174,98,.4);

    font-size: 10px;
    letter-spacing: 2px;

    color: #ddd;
}

.footer-left {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-separator {
    color: var(--luxury-gold);
}

.luxury-footer a {
    color: var(--luxury-gold);
    text-decoration: none;
}

.luxury-footer a:hover {
    color: white;
}

.footer-right {
    white-space: nowrap;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .luxury-cards {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .cards-center {
        display: none;
    }

    .luxury-card {
        height: 520px;
    }

    .card-dark-panel {
        width: 75%;
        padding: 25px 18px;
    }

    .card-dark-panel h2 {
        font-size: 42px;
    }

    .card-date {
        letter-spacing: 2px;
    }

    .luxury-card-button {
        font-size: 9px;
        letter-spacing: 1px;
    }
}


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

@media (max-width: 700px) {

    .luxury-header {
        padding: 20px 5%;
    }

    .luxury-header-right {
        font-size: 8px;
        letter-spacing: 2px;
        max-width: 170px;
        text-align: right;
        line-height: 1.8;
    }

    .luxury-intro {
        padding: 45px 20px 35px;
    }

    .luxury-intro h1 {
        font-size: 54px;
    }

    .luxury-description {
        font-size: 19px;
    }

    .luxury-cards {
        grid-template-columns: 1fr;
        width: 92%;
        gap: 30px;
        margin-bottom: 50px;
    }

    .luxury-card {
        height: 490px;
        border-radius: 100px 100px 10px 10px;
    }

    .card-dark-panel {
        width: 72%;
        padding: 25px 20px;
    }

    .card-dark-panel h2 {
        font-size: 43px;
    }

    .card-description {
        font-size: 18px;
    }

    .luxury-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        line-height: 1.8;
    }

    .footer-right {
        display: none;
    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 380px) {

    .luxury-intro h1 {
        font-size: 45px;
    }

    .luxury-card {
        height: 460px;
    }

    .card-dark-panel {
        width: 78%;
        padding: 18px 12px;
    }

    .card-dark-panel h2 {
        font-size: 36px;
    }

    .card-date {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .luxury-card-button {
        padding: 12px 8px;
        font-size: 8px;
        gap: 5px;
    }

}


/* Landing layout reset */

.landing-content.luxury-landing {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    overflow: visible;
}

.landing-content.luxury-landing[hidden] {
    display: none !important;
}

.luxury-landing .luxury-cards .luxury-card {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .luxury-card,
    .card-photo img,
    .luxury-card-button {
        transition: none;
    }

    .luxury-card:hover {
        transform: none;
    }
}


/* ==========================================
   KING & PETALS
   COMPACT LUXURY CARD LAYOUT
========================================== */


/* REMOVE HEADER DIVIDER */

.luxury-header {
    border-bottom: none !important;

    padding: 15px 5%;
}


/* COMPACT INTRODUCTION */

.luxury-intro {
    padding: 15px 20px 20px;
    margin: 0 auto;
}

.luxury-intro h1 {
    font-size: clamp(45px, 5vw, 72px);
    line-height: 1;

    margin: 10px 0 0;
}

.luxury-eyebrow {
    font-size: 10px;
    letter-spacing: 4px;
    margin: 0;
}

.luxury-description,
.luxury-divider {
    display: none;
}


/* ==========================================
   CENTER BOTH CARDS
========================================== */

.luxury-cards {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 470px));

    justify-content: center;

    align-items: center;

    gap: 20px;

    width: min(1000px, 94%);

    margin: 20px auto 35px;

}


/* REMOVE CENTER DECORATION */

.cards-center {
    display: none;
}


/* ==========================================
   SOFT ROUNDED CARD CORNERS
========================================== */

.luxury-card {

    width: 100%;

    height: 440px;

    border-radius: 30px;

    border: 1px solid rgba(214,174,98,.8);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}

.luxury-card:hover {

    transform: translateY(-5px);

    border-color: #f1d28e;

    box-shadow:
        0 15px 45px rgba(0,0,0,.45),
        0 0 18px rgba(214,174,98,.12);

}


/* ==========================================
   IMAGE
========================================== */

.card-photo img {
    object-fit: cover;
}


/* ==========================================
   COMPACT CARD PANEL
========================================== */

.card-dark-panel {

    width: 65%;

    padding: 25px;

    border-radius: 0 35% 35% 0 / 0 25% 25% 0;

}

.wedding-card .card-dark-panel {

    border-radius: 35% 0 0 35% / 25% 0 0 25%;

}


/* CARD TEXT */

.card-dark-panel h2 {

    font-size: clamp(38px, 3.5vw, 53px);

    margin-bottom: 12px;

}

.card-date {

    font-size: 10px;

    letter-spacing: 2px;

}

.card-line {

    margin: 15px 0;

    width: 60px;

}

.card-description {

    font-size: 17px;

    margin: 15px 0;

}

.card-subtitle {

    font-size: 9px;

    letter-spacing: 3px;

}


/* ==========================================
   BUTTON - SOFT PILL SHAPE
========================================== */

.luxury-card-button {

    border-radius: 50px;

    padding: 12px 18px;

    border: 1px solid #d6ae62;

    font-size: 9px;

    letter-spacing: 1px;

    transition: all .3s ease;

}

.luxury-card:hover .luxury-card-button {

    background: #d6ae62;

    color: #080808;

}


/* ==========================================
   BOTTOM DECORATION
========================================== */

.card-bottom-decoration {

    bottom: 12px;

    font-size: 12px;

}


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

.luxury-footer {

    padding: 18px 5%;

    margin-top: 0;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .luxury-cards {

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

        gap: 15px;

        width: 95%;

    }

    .luxury-card {

        height: 420px;

        border-radius: 25px;

    }

    .card-dark-panel {

        width: 75%;

        padding: 18px;

    }

    .card-dark-panel h2 {

        font-size: 38px;

    }

}


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

@media (max-width: 700px) {

    .luxury-header {

        padding: 15px 5%;

    }

    .luxury-intro {

        padding: 20px 15px;

    }

    .luxury-intro h1 {

        font-size: 48px;

    }

    .luxury-cards {

        grid-template-columns: 1fr;

        width: 90%;

        gap: 20px;

        margin: 15px auto 35px;

    }

    .luxury-card {

        height: 400px;

        border-radius: 25px;

    }

    .card-dark-panel {

        width: 70%;

        padding: 20px;

    }

    .card-dark-panel h2 {

        font-size: 40px;

    }

    .card-description {

        font-size: 16px;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 380px) {

    .luxury-intro h1 {

        font-size: 40px;

    }

    .luxury-card {

        height: 370px;

    }

    .card-dark-panel {

        width: 78%;

        padding: 15px;

    }

    .card-dark-panel h2 {

        font-size: 34px;

    }

}

/* ==========================================
   KING & PETALS
   CINEMATIC BLURRED BACKGROUND
========================================== */

/* Main landing container */

.landing-body .landing-content.luxury-landing {

    position: relative;

    isolation: isolate;

    min-height: 100svh;

    background: #080808;

    overflow: hidden;

}


/* ==========================================
   BACKGROUND PHOTO + BLUR
========================================== */

.luxury-landing::before {

    content: "";

    position: absolute;

    inset: -35px;

    z-index: -2;

    background-image:
        url("../images/bg.png");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    /* Increase this for stronger blur */

    filter: blur(15px);

    transform: scale(1.05);

    pointer-events: none;

}


/* ==========================================
   CINEMATIC OVERLAY
========================================== */

.luxury-landing::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: linear-gradient(

        180deg,

        rgba(0, 0, 0, 0.28) 0%,

        rgba(0, 0, 0, 0.38) 45%,

        rgba(0, 0, 0, 0.48) 100%

    );

    pointer-events: none;

}


/* ==========================================
   KEEP ALL CONTENT SHARP
========================================== */

.luxury-landing .luxury-header,
.luxury-landing .luxury-intro,
.luxury-landing .luxury-cards,
.luxury-landing .luxury-footer {

    position: relative;

    z-index: 1;

}


/* Transparent sections */

.luxury-landing .luxury-header,
.luxury-landing .luxury-intro,
.luxury-landing .luxury-cards {

    background: transparent;

}


/* ==========================================
   CARD PANELS
   Keep their existing shape and layout
========================================== */

.luxury-landing .card-dark-panel {

    background: rgba(8, 8, 8, 0.92);

}


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

.luxury-landing .luxury-footer {

    background: rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}


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

@media (max-width: 768px) {

    .luxury-landing::before {

        background-position: 60% center;

        filter: blur(14px);

        transform: scale(1.08);

    }

}

/* ==========================================
   LANDING PAGE — SPACING & FOOTER FIX
========================================== */

/* Keep the instruction clear of the footer divider */
.invitation-gate,
.envelope-gate {
    padding-bottom: 65px;
}

/* Instruction below the envelope */
.envelope-hint,
.envelope-instruction,
.open-instruction {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    margin-bottom: 38px;
}

/* Keep footer text on a single line */
.luxury-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
}

.luxury-footer .footer-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
}

.luxury-footer .footer-left span {
    white-space: nowrap;
}

/* Small screens */
@media (max-width: 600px) {

    .invitation-gate,
    .envelope-gate {
        padding-bottom: 45px;
    }

    .envelope-hint,
    .envelope-instruction,
    .open-instruction {
        margin-top: 22px;
        margin-bottom: 28px;
    }

    .luxury-footer {
        padding: 12px 5px;
    }

    .luxury-footer .footer-left {
        gap: 5px;
        font-size: clamp(6px, 1.65vw, 10px);
        letter-spacing: 0;
    }

    .luxury-footer .footer-separator {
        margin: 0 2px;
    }
}

/* FINAL FOOTER ALIGNMENT — LANDING AND EVENT PAGES */

.luxury-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.luxury-footer .footer-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    text-align: left;
}

@media (max-width: 700px) {
    .luxury-footer {
        flex-direction: row;
        align-items: center;
        padding: 12px 4%;
    }

    .luxury-footer .footer-left {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 5px;
        white-space: nowrap;
        font-size: clamp(6px, 1.7vw, 10px);
        letter-spacing: 0;
    }
}

/* FIX: KEEP ENVELOPE HINT ABOVE FOOTER IN FULL SCREEN */

.landing-body .gate {
    padding-bottom: 85px;
}

.landing-body .gate-main {
    box-sizing: border-box;
    max-height: calc(100svh - 110px);
}

.landing-body .envelope-button {
    margin-bottom: 0;
}

.landing-body .hint {
    margin-top: 22px;
    margin-bottom: 0;
    position: relative;
    z-index: 6;
}

/* When the available screen height is limited */
@media (max-height: 950px) {
    .landing-body .gate-main {
        transform: scale(.88);
        transform-origin: center center;
    }

    .landing-body .envelope-button {
        margin-top: 18px;
    }

    .landing-body .hint {
        margin-top: 16px;
    }
}

/* Extra protection for short laptop screens */
@media (max-height: 750px) {
    .landing-body .gate-main {
        transform: scale(.76);
    }
}

/* FINAL FOOTER ALIGNMENT — LANDING AND EVENT PAGES */

.luxury-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.luxury-footer .footer-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    text-align: left;
}

@media (max-width: 700px) {
    .luxury-footer {
        flex-direction: row;
        align-items: center;
        padding: 12px 4%;
    }

    .luxury-footer .footer-left {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 5px;
        white-space: nowrap;
        font-size: clamp(6px, 1.7vw, 10px);
        letter-spacing: 0;
    }
}

/* Landing page: single-line footer on small screens */
@media (max-width: 600px) {
    .luxury-footer {
        padding: 12px 10px;
    }

    .luxury-footer .footer-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 6px;
        white-space: nowrap;
        font-size: clamp(7px, 1.8vw, 10px);
        letter-spacing: 0;
    }

    .luxury-footer .footer-left > span {
        white-space: nowrap;
    }

    .luxury-footer .footer-separator {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {

    .landing-body .gate-footer {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        gap: 8px;
        padding: 12px 15px;

        text-align: left;
        font-size: clamp(7px, 2vw, 9px);
        letter-spacing: 0;
    }

    .landing-body .gate-footer > * {
        margin: 0;
        white-space: nowrap;
    }

}