:root {

    --coral: #f5784d;
    --red: #b93939;
    --sage: #6a8d80;
    --pink: #ef489c;
    --rose: #f66bb1;

    --ink: #241d25;
    --cream: #fff8f3;
    --white: #ffffff;
    --muted: #756d73;

    --shadow:
        0 18px 50px rgba(36,29,37,.12);

    --radius: 24px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

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

    background:
        var(--cream);

    color:
        var(--ink);

    line-height:
        1.7;

    overflow-x:
        hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


.container {

    width:
        min(1160px, 92%);

    margin:
        auto;
}


/* =================================
   PARTICLE BACKGROUND
================================= */

.particles {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        0;

    opacity:
        .12;

    background-image:

        radial-gradient(
            circle,
            rgba(239,72,156,.6)
            1px,
            transparent
            1.5px
        );

    background-size:
        80px 80px;

    animation:
        particleMove 18s linear infinite;
}


@keyframes particleMove {

    0% {
        background-position:
            0 0;
    }

    100% {
        background-position:
            100px 140px;
    }

}


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

.header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

    background:
        rgba(255,248,243,.88);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(185,57,57,.1);
}


.nav-container {

    height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.logo {

    font-weight:
        800;

    letter-spacing:
        2px;

    font-size:
        18px;

    line-height:
        1;

    color:
        var(--red);
}


.logo span {

    display:
        inline-grid;

    place-items:
        center;

    width:
        35px;

    height:
        35px;

    border-radius:
        50%;

    background:
        var(--coral);

    color:
        white;

    margin-right:
        7px;
}


.logo small {

    display:
        block;

    font-size:
        8px;

    letter-spacing:
        4px;

    color:
        var(--sage);

    margin-left:
        43px;

    margin-top:
        5px;
}


nav {

    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}


nav a {

    font-size:
        14px;

    font-weight:
        600;

    color:
        #51494f;

    position:
        relative;

    padding:
        8px 0;
}


nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--coral),
            var(--pink)
        );

    transition:
        .3s;
}


nav a:hover::after,
nav a.active::after {

    width:
        100%;
}


.menu-toggle {

    display:
        none;

    border:
        0;

    background:
        var(--red);

    color:
        white;

    border-radius:
        12px;

    padding:
        9px 13px;

    font-size:
        20px;

    cursor:
        pointer;
}


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

.hero {

    min-height:
        100vh;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    padding:
        130px 0 70px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(245,120,77,.22),
            transparent 32%
        ),

        radial-gradient(
            circle at 90% 30%,
            rgba(239,72,156,.17),
            transparent 28%
        ),

        var(--cream);
}


.hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(245,120,77,.5)
            1px,
            transparent
            1.5px
        );

    background-size:
        48px 48px;

    opacity:
        .3;

    animation:
        particleMove 12s linear infinite;
}


.hero-content {

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:
        60px;

    align-items:
        center;

    position:
        relative;

    z-index:
        2;
}


.eyebrow {

    font-size:
        12px;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    color:
        var(--sage);

    font-weight:
        700;

    margin-bottom:
        16px;
}


h1,
h2,
h3 {

    font-family:
        "Playfair Display",
        serif;

    line-height:
        1.12;
}


h1 {

    font-size:
        clamp(50px,7vw,88px);

    max-width:
        800px;
}


h1 span,
h2 span {

    color:
        var(--red);
}


.hero-description {

    font-size:
        18px;

    color:
        var(--muted);

    max-width:
        650px;

    margin:
        25px 0 32px;
}


.hero-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;
}


.btn {

    padding:
        14px 25px;

    border-radius:
        999px;

    font-weight:
        700;

    display:
        inline-block;

    transition:
        .3s;
}


.btn-primary {

    background:
        linear-gradient(
            110deg,
            var(--coral),
            var(--pink)
        );

    color:
        white;

    box-shadow:
        0 12px 28px
        rgba(239,72,156,.22);
}


.btn-outline {

    border:
        1px solid
        rgba(185,57,57,.3);

    color:
        var(--red);

    background:
        white;
}


.btn:hover {

    transform:
        translateY(-4px);
}


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

.hero-visual {

    min-height:
        500px;

    display:
        grid;

    place-items:
        center;
}


.fashion-orbit {

    width:
        min(460px,80vw);

    aspect-ratio:
        1;

    position:
        relative;
}


.fashion-core {

    position:
        absolute;

    inset:
        25%;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            145deg,
            var(--coral),
            var(--red)
        );

    color:
        white;

    font:
        700 70px
        "Playfair Display";

    box-shadow:
        0 30px 70px
        rgba(185,57,57,.3);

    animation:
        floating 5s ease-in-out infinite;
}


.orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(185,57,57,.35);

    border-radius:
        50%;

    inset:
        5%;

    animation:
        orbitSpin 18s linear infinite;
}


.orbit-two {

    inset:
        16%;

    animation-duration:
        13s;

    animation-direction:
        reverse;

    border-color:
        rgba(239,72,156,.45);
}


.orbit-three {

    inset:
        29%;

    animation-duration:
        9s;

    border-color:
        rgba(106,141,128,.55);
}


.orbit-dot {

    position:
        absolute;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    box-shadow:
        0 0 25px currentColor;
}


.dot-one {

    background:
        var(--pink);

    color:
        var(--pink);

    top:
        12%;

    left:
        50%;

    animation:
        dotFloat 4s ease-in-out infinite;
}


.dot-two {

    background:
        var(--sage);

    color:
        var(--sage);

    right:
        13%;

    bottom:
        28%;

    animation:
        dotFloat 5s ease-in-out infinite reverse;
}


.dot-three {

    background:
        var(--coral);

    color:
        var(--coral);

    left:
        15%;

    bottom:
        20%;

    animation:
        dotFloat 3.5s ease-in-out infinite;
}


@keyframes orbitSpin {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes floating {

    50% {
        transform:
            translateY(-15px)
            scale(1.04);
    }

}


@keyframes dotFloat {

    50% {
        transform:
            translateY(-15px);
    }

}


/* =================================
   SECTIONS
================================= */

section {

    position:
        relative;

    padding:
        105px 0;

    overflow:
        hidden;
}


.ripple-block::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border:
        1px solid
        rgba(245,120,77,.18);

    border-radius:
        50%;

    left:
        -180px;

    bottom:
        -250px;

    box-shadow:

        0 0 0 65px
        rgba(245,120,77,.035),

        0 0 0 130px
        rgba(245,120,77,.025),

        0 0 0 195px
        rgba(245,120,77,.018);

    animation:
        ripplePulse 7s
        ease-in-out
        infinite;

    pointer-events:
        none;
}


.ripple-block::after {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    border:
        1px solid
        rgba(239,72,156,.14);

    border-radius:
        50%;

    right:
        -130px;

    top:
        -120px;

    box-shadow:

        0 0 0 45px
        rgba(239,72,156,.025),

        0 0 0 90px
        rgba(239,72,156,.018);

    animation:
        ripplePulse 8s
        ease-in-out
        infinite
        reverse;

    pointer-events:
        none;
}


@keyframes ripplePulse {

    0%,
    100% {
        transform:
            scale(.8);

        opacity:
            .45;
    }

    50% {
        transform:
            scale(1.15);

        opacity:
            1;
    }

}


/* =================================
   TWO COLUMN
================================= */

.two-column {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

    position:
        relative;

    z-index:
        2;
}


.section-content p {

    color:
        var(--muted);

    margin-bottom:
        18px;
}


.section-image {

    position:
        relative;
}


.image-placeholder {

    min-height:
        520px;

    border-radius:
        32px;

    display:
        grid;

    place-items:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            var(--red),
            var(--coral) 48%,
            var(--pink)
        );

    color:
        white;

    box-shadow:
        var(--shadow);
}


.image-placeholder::before {

    content:
        "";

    position:
        absolute;

    inset:
        20px;

    border:
        1px solid
        rgba(255,255,255,.3);

    border-radius:
        28px;

}


.image-rings {

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.5);

    box-shadow:

        0 0 0 50px
        rgba(255,255,255,.08),

        0 0 0 100px
        rgba(255,255,255,.05);

    animation:
        ripplePulse 6s
        ease-in-out
        infinite;
}


.image-placeholder span {

    font:
        600 46px
        "Playfair Display";

    text-align:
        center;

    letter-spacing:
        5px;

    position:
        relative;

    z-index:
        2;
}


/* =================================
   HEADINGS
================================= */

.section-heading {

    text-align:
        center;

    max-width:
        780px;

    margin:
        0 auto 55px;

    position:
        relative;

    z-index:
        2;
}


h2 {

    font-size:
        clamp(38px,5vw,62px);

    margin-bottom:
        22px;
}


h3 {

    font-size:
        25px;
}


.section-heading p:last-child {

    color:
        var(--muted);
}


/* =================================
   COLLECTIONS
================================= */

.collection-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        24px;

    position:
        relative;

    z-index:
        2;
}


.collection-card {

    background:
        white;

    border:
        1px solid
        rgba(36,29,37,.06);

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        0 8px 30px
        rgba(36,29,37,.06);

    transition:
        .35s;

    position:
        relative;
}


.collection-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        var(--shadow);
}


.card-number {

    position:
        absolute;

    z-index:
        5;

    right:
        18px;

    top:
        15px;

    background:
        rgba(255,255,255,.9);

    padding:
        6px 11px;

    border-radius:
        30px;

    color:
        var(--red);

    font-weight:
        800;
}


.card-visual {

    height:
        280px;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    font:
        600 42px
        "Playfair Display";

    letter-spacing:
        5px;

    position:
        relative;

    overflow:
        hidden;
}


.card-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        -50%;

    background:
        repeating-radial-gradient(
            circle,
            transparent 0 30px,
            rgba(255,255,255,.13)
            31px 32px
        );

    animation:
        rotateRings 14s
        linear infinite;
}


.card-visual span {

    position:
        relative;

    z-index:
        2;
}


.visual-one {

    background:
        linear-gradient(
            140deg,
            var(--sage),
            var(--pink)
        );
}


.visual-two {

    background:
        linear-gradient(
            140deg,
            var(--red),
            var(--coral)
        );
}


.visual-three {

    background:
        linear-gradient(
            140deg,
            var(--pink),
            var(--rose)
        );
}


@keyframes rotateRings {

    to {
        transform:
            rotate(360deg);
    }

}


.card-content {

    padding:
        26px;
}


.card-content p {

    color:
        var(--muted);

    margin:
        10px 0 18px;
}


.card-content a {

    color:
        var(--red);

    font-weight:
        700;
}


/* =================================
   SERVICES
================================= */

.service-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        24px;

    position:
        relative;

    z-index:
        2;
}


.service-card {

    padding:
        30px;

    background:
        white;

    border-radius:
        var(--radius);

    box-shadow:
        0 8px 30px
        rgba(36,29,37,.06);

    transition:
        .35s;
}


.service-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);
}


.icon {

    width:
        58px;

    height:
        58px;

    border-radius:
        18px;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(245,120,77,.13);

    color:
        var(--red);

    font-size:
        25px;

    margin-bottom:
        20px;
}


.service-card:nth-child(2)
.icon {

    background:
        rgba(239,72,156,.12);
}


.service-card:nth-child(3)
.icon {

    background:
        rgba(106,141,128,.14);
}


.service-card:nth-child(4)
.icon {

    background:
        rgba(185,57,57,.12);
}


.service-card:nth-child(5)
.icon {

    background:
        rgba(246,107,177,.13);
}


.service-card p {

    color:
        var(--muted);

    margin-top:
        10px;
}


/* =================================
   DARK SECTION
================================= */

.dark-section {

    background:
        #291f27;

    color:
        white;
}


.dark-section .eyebrow {

    color:
        #9fc1b5;
}


.dark-section
.section-heading p:last-child,

.dark-section
.section-content p {

    color:
        #d4c8cf;
}


.dark-section
h2 span {

    color:
        var(--coral);
}


/* =================================
   STATS
================================= */

.stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        20px;

    position:
        relative;

    z-index:
        2;
}


.stat-card {

    padding:
        30px;

    text-align:
        center;

    background:
        rgba(255,255,255,.9);

    border-radius:
        22px;

    color:
        var(--ink);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.08);
}


.stat-card strong {

    display:
        block;

    font:
        700 44px
        "Playfair Display";

    color:
        var(--red);

    margin-bottom:
        5px;
}


/* =================================
   TIMELINE
================================= */

.timeline-wrap {

    position:
        relative;

    z-index:
        3;
}


.timeline-controls {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        35px;
}


.timeline-btn {

    border:
        1px solid
        rgba(255,255,255,.2);

    background:
        rgba(255,255,255,.06);

    color:
        white;

    border-radius:
        50%;

    width:
        50px;

    height:
        50px;

    cursor:
        pointer;

    font-size:
        20px;

    transition:
        .3s;
}


.timeline-btn:hover {

    background:
        var(--coral);

    transform:
        scale(1.1);
}


.timeline-track {

    display:
        flex;

    gap:
        25px;

    overflow-x:
        auto;

    scroll-behavior:
        smooth;

    scrollbar-width:
        thin;

    padding:
        10px 5px 30px;
}


.timeline-slide {

    min-width:
        calc(33.333% - 17px);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        25px;

    padding:
        32px;

    position:
        relative;

    overflow:
        hidden;

    transition:
        .4s;
}


.timeline-slide:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(245,120,77,.5);
}


.timeline-marker {

    font:
        700 48px
        "Playfair Display";

    color:
        var(--coral);

    margin-bottom:
        12px;
}


.timeline-line {

    width:
        55px;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--coral),
            var(--pink)
        );

    margin-bottom:
        20px;
}


.timeline-slide p {

    color:
        #d4c8cf;

    margin:
        14px 0 20px;
}


.timeline-label {

    display:
        inline-block;

    padding:
        5px 12px;

    border-radius:
        30px;

    background:
        rgba(245,120,77,.12);

    color:
        var(--coral);

    font-size:
        10px;

    letter-spacing:
        2px;

    font-weight:
        700;
}


/* =================================
   QUOTE
================================= */

.quote {

    padding:
        75px 0;

    text-align:
        center;

    background:
        linear-gradient(
            110deg,
            rgba(245,120,77,.13),
            rgba(239,72,156,.1)
        );
}


.quote p {

    font:
        500 clamp(27px,4vw,48px)
        "Playfair Display";

    max-width:
        900px;

    margin:
        auto;
}


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

.page-hero {

    padding:
        155px 0 90px;

    text-align:
        center;

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(239,72,156,.18),
            transparent 45%
        ),

        var(--cream);
}


.page-hero h1 {

    margin:
        auto;

    font-size:
        clamp(48px,7vw,80px);
}


.page-hero p {

    max-width:
        750px;

    margin:
        25px auto 0;

    color:
        var(--muted);

    font-size:
        17px;
}


/* =================================
   TEAM
================================= */

.team-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        24px;

    position:
        relative;

    z-index:
        2;
}


.team-card {

    padding:
        28px;

    text-align:
        center;

    background:
        white;

    border-radius:
        var(--radius);

    box-shadow:
        0 8px 30px
        rgba(36,29,37,.06);

    transition:
        .35s;
}


.team-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);
}


.team-avatar {

    width:
        130px;

    height:
        130px;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            135deg,
            var(--coral),
            var(--pink)
        );

    color:
        white;

    font:
        600 40px
        "Playfair Display";
}


.team-card small {

    color:
        var(--sage);

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        2px;
}


.team-card p {

    color:
        var(--muted);

    margin-top:
        12px;
}


/* =================================
   CONTACT
================================= */

.contact-grid {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        35px;

    position:
        relative;

    z-index:
        2;
}


.contact-box {

    background:
        white;

    padding:
        38px;

    border-radius:
        28px;

    box-shadow:
        var(--shadow);
}


.contact-item {

    padding:
        20px 0;

    border-bottom:
        1px solid #eee;
}


.contact-item:last-child {

    border-bottom:
        0;
}


.contact-item strong {

    display:
        block;

    color:
        var(--red);

    margin-bottom:
        4px;
}


form {

    display:
        grid;

    gap:
        16px;
}


input,
textarea,
select {

    width:
        100%;

    padding:
        15px 17px;

    border:
        1px solid
        #eadfe0;

    border-radius:
        14px;

    background:
        #fffaf8;

    font:
        inherit;

    outline:
        none;
}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--coral);

    box-shadow:
        0 0 0 4px
        rgba(245,120,77,.1);
}


textarea {

    min-height:
        170px;

    resize:
        vertical;
}


#formStatus {

    min-height:
        25px;

    font-weight:
        700;
}


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

.footer {

    background:
        #241d25;

    color:
        #ddd;

    padding:
        60px 0 25px;
}


.footer-grid {

    display:
        grid;

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

    gap:
        35px;
}


.footer h3 {

    color:
        white;

    margin-bottom:
        15px;
}


.footer p,
.footer a,
.footer span {

    color:
        #bdb1b8;

    font-size:
        14px;
}


.footer-links {

    display:
        grid;

    gap:
        8px;
}


.footer a:hover {

    color:
        var(--coral);
}


.footer-bottom {

    margin-top:
        45px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.1);

    text-align:
        center;

    color:
        #988c93;

    font-size:
        13px;
}


/* =================================
   REVEAL ANIMATION
================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(28px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}


.reveal.visible {

    opacity:
        1;

    transform:
        none;
}


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

@media(max-width:1000px) {

    .hero-content,
    .two-column,
    .contact-grid {

        grid-template-columns:
            1fr;
    }


    .hero-visual {

        min-height:
            400px;
    }


    .collection-grid,
    .service-grid {

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


    .team-grid {

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


    .stats-grid {

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


    .timeline-slide {

        min-width:
            70%;
    }


    .footer-grid {

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

}


@media(max-width:750px) {

    .menu-toggle {

        display:
            block;
    }


    nav {

        position:
            absolute;

        top:
            78px;

        left:
            0;

        width:
            100%;

        background:
            rgba(255,248,243,.98);

        display:
            none;

        flex-direction:
            column;

        padding:
            22px;

        box-shadow:
            0 15px 30px
            rgba(0,0,0,.08);
    }


    nav.open {

        display:
            flex;
    }


    .collection-grid,
    .service-grid,
    .team-grid,
    .stats-grid,
    .footer-grid {

        grid-template-columns:
            1fr;
    }


    .hero {

        padding-top:
            120px;
    }


    h1 {

        font-size:
            48px;
    }


    .hero-description {

        font-size:
            16px;
    }


    .hero-buttons {

        display:
            grid;
    }


    .btn {

        width:
            100%;

        text-align:
            center;
    }


    .fashion-core {

        font-size:
            50px;
    }


    .image-placeholder {

        min-height:
            380px;
    }


    .timeline-slide {

        min-width:
            88%;
    }


    section {

        padding:
            75px 0;
    }

}


@media(max-width:450px) {

    .nav-container {

        height:
            70px;
    }


    .logo {

        font-size:
            15px;
    }


    .logo small {

        margin-left:
            39px;
    }


    .hero {

        padding-top:
            105px;
    }


    h1 {

        font-size:
            42px;
    }


    h2 {

        font-size:
            38px;
    }


    .fashion-orbit {

        width:
            300px;
    }


    .hero-visual {

        min-height:
            320px;
    }


    .card-visual {

        height:
            240px;
    }


    .contact-box {

        padding:
            25px;
    }

}