:root {
      --paper: #f8f5ef;
      --paper-2: #f1eee6;
      --sage: #a9b19c;
      --sage-dark: #737f69;
      --lavender: #a8a0c8;
      --lavender-dark: #81789f;
      --ink: #55524f;
      --muted: #89847d;
      --line: #c9c5bb;
      --white: #fffdf9;
    }

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

    html { scroll-behavior: smooth; }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: "DM Sans", sans-serif;
      font-weight: 300;
      overflow-x: hidden;
    }

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

    /* NAV */
    .nav {
      position: fixed;
      z-index: 50;
      top: 0;
      left: 0;
      right: 0;
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 5vw;
      background: linear-gradient(to bottom, rgba(38,43,37,.72), transparent);
      color: white;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 11px;
      font-family: "Cormorant Garamond", serif;
      font-size: 27px;
      line-height: .75;
    }

    .nav-logo .script {
      font-family: "Parisienne", cursive;
      font-size: 35px;
    }

    .nav-links {
      display: flex;
      gap: 30px;
      list-style: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 10px;
    }

    .nav-links a {
      position: relative;
      padding-bottom: 5px;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background: currentColor;
      transition: width .3s ease;
    }

    .nav-links a:hover::after,
    .nav-links a.active::after { width: 100%; }

    .nav-social {
      display: flex;
      gap: 16px;
      font-size: 19px;
    }

    /* HERO */
    .hero {
      position: relative;
      min-height: 720px;
      height: 100svh;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-art {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(250,247,240,.98) 0%, rgba(250,247,240,.88) 27%, rgba(250,247,240,.18) 55%, rgba(30,45,34,.12) 100%),
        url("ZwaanC.jpg");
      background-size: cover;
      background-position: center 46%;
      transform: scale(1.02);
    }

    .hero-art::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 23% 42%, rgba(174,163,203,.16), transparent 24%),
        radial-gradient(circle at 39% 75%, rgba(168,179,152,.18), transparent 28%);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: 48%;
      max-width: 620px;
      margin-left: 7vw;
      padding-top: 55px;
    }

    .hero-brand {
      font-family: "Parisienne", cursive;
      font-size: clamp(70px, 8vw, 128px);
      line-height: .78;
      color: var(--lavender-dark);
      text-shadow: 0 1px rgba(255,255,255,.3);
    }

    .hero-brand span {
      display: block;
      color: var(--sage-dark);
      margin-left: 20%;
      margin-top: 10px;
    }
.hero-logo {
    width: 70%;
    display: block;
}

            .subbrand {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 13px;
                margin-top: 23px;
                color: var(--lavender-dark);
                font-size: 9px;
                letter-spacing: 4px;
                text-transform: uppercase;
            }

                .subbrand::before,
                .subbrand::after {
                    content: "";
                    height: 1px;
                    width: 45px;
                    background: var(--lavender);
                }

            .hero-copy {
                margin-top: 40px;
                max-width: 310px;
                font-family: "Cormorant Garamond", serif;
                font-style: italic;
                font-size: 21px;
                line-height: 1.35;
                color: #6c6862;
            }

            .button {
                display: inline-flex;
                align-items: center;
                gap: 18px;
                margin-top: 27px;
                border: 1px solid #a7aaa0;
                padding: 13px 21px;
                font-size: 9px;
                letter-spacing: 2px;
                text-transform: uppercase;
                transition: .3s ease;
            }

                .button:hover {
                    background: var(--sage-dark);
                    color: white;
                    border-color: var(--sage-dark);
                }

            .hero-scroll {
                position: absolute;
                left: 7vw;
                bottom: 27px;
                z-index: 3;
                font-size: 9px;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: #68675f;
            }

                .hero-scroll::before {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 48px;
                    margin-bottom: 7px;
                    background: #8d9188;
                }
            /* GENERAL */
            .section {
                padding: 105px 7vw;
            }

            .eyebrow {
                font-size: 9px;
                letter-spacing: 4px;
                text-transform: uppercase;
                color: var(--sage-dark);
            }

            .script-heading {
                font-family: "Parisienne", cursive;
                font-size: clamp(54px, 6vw, 92px);
                font-weight: 400;
                line-height: .8;
                color: var(--lavender-dark);
            }

                .script-heading .green {
                    color: var(--sage-dark);
                }
            /* FEATURED */
            .featured {
                position: relative;
                background: var(--paper);
                padding-top: 95px;
                padding-bottom: 100px;
                overflow: hidden;
            }

            .featured-grid {
                display: grid;
                grid-template-columns: 43% 42%;
                gap: 7%;
                align-items: center;
                max-width: 1120px;
                margin: auto;
            }

            .featured-image {
                position: relative;
            }

                .featured-image img {
                    width: 100%;
                    display: block;
                    box-shadow: 0 18px 35px rgba(62,65,57,.13);
                }

            .featured-info {
                padding-bottom: 20px;
            }

                .featured-info .script-heading {
                    margin-bottom: 23px;
                }

            .art-title {
                display: flex;
                align-items: center;
                gap: 15px;
                margin-bottom: 20px;
                font-family: "Cormorant Garamond", serif;
                color: var(--lavender-dark);
                font-size: 17px;
                letter-spacing: 4px;
                text-transform: uppercase;
            }

                .art-title::before {
                    content: "";
                    width: 48px;
                    height: 1px;
                    background: var(--lavender);
                }

            .details {
                color: #8b8881;
                font-size: 13px;
                line-height: 1.9;
            }

            .quote {
                margin-top: 20px;
                font-family: "Cormorant Garamond", serif;
                font-size: 19px;
                font-style: italic;
                color: #78736c;
            }

            .lotus-decoration {
                position: absolute;
                right: 2vw;
                bottom: 15px;
                width: 210px;
                opacity: .32;
                filter: saturate(.7);
            }
            /* RECENT WORK */
            .works {
                background: var(--paper-2);
                padding-top: 90px;
            }

            .works-head {
                display: flex;
                justify-content: space-between;
                align-items: end;
                margin-bottom: 35px;
            }

            .works-intro {
                max-width: 370px;
                color: #817d76;
                font-size: 12px;
                line-height: 1.8;
            }

            .works-link {
                white-space: nowrap;
                border-bottom: 1px solid #a8aaa2;
                padding-bottom: 7px;
                font-size: 9px;
                letter-spacing: 2px;
                text-transform: uppercase;
            }

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

            .work-card {
                text-align: center;
            }

            .work-image {
                aspect-ratio: 4 / 5;
                overflow: hidden;
                background: #d7d9cf;
                box-shadow: 0 10px 25px rgba(70,75,63,.09);
            }

                .work-image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform .7s ease;
                }

            .work-card:hover img {
                transform: scale(1.04);
            }

            .work-name {
                margin-top: 12px;
                font-family: "Cormorant Garamond", serif;
                font-size: 19px;
                font-style: italic;
                color: #77716b;
            }

            .work-meta {
                margin-top: 2px;
                font-size: 8px;
                letter-spacing: 3px;
                text-transform: uppercase;
                color: #99948c;
            }
            /* ABOUT */
            .about {
                display: grid;
                grid-template-columns: 43% 1fr;
                gap: 8%;
                align-items: center;
                background: var(--paper);
            }

            .atelier-image {
                position: relative;
                min-height: 430px;
                background: linear-gradient(135deg, rgba(180,192,171,.5), rgba(220,205,220,.25)), url("ZwaanC.jpg");
                background-size: cover;
                background-position: 72% center;
            }

                .atelier-image::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(90deg, rgba(245,241,232,.1), rgba(255,255,255,.08));
                }

            .about-copy {
                max-width: 500px;
            }

                .about-copy p {
                    margin-top: 22px;
                    color: #7e7972;
                    font-family: "Cormorant Garamond", serif;
                    font-size: 18px;
                    line-height: 1.65;
                }
            /* SHOP */
            .shop {
                position: relative;
                background: linear-gradient(rgba(225,231,217,.82), rgba(225,231,217,.82)), url("ZwaanC.jpg");
                background-size: cover;
                background-position: center 58%;
                text-align: center;
                padding: 110px 7vw;
                overflow: hidden;
            }

                .shop::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.42), transparent 50%);
                }

            .shop-inner {
                position: relative;
                z-index: 2;
                max-width: 680px;
                margin: auto;
            }

            .shop .script-heading {
                color: #77836e;
            }

            .shop p {
                max-width: 480px;
                margin: 25px auto 0;
                font-family: "Cormorant Garamond", serif;
                font-style: italic;
                font-size: 20px;
                color: #6f7669;
            }
            /* CONTACT */
            .contact {
                background: var(--paper);
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8%;
                align-items: center;
            }

            .contact-card {
                background: linear-gradient(135deg, #e1e6d8, #f1eee7);
                padding: 65px;
                min-height: 300px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

                .contact-card p {
                    max-width: 390px;
                    margin-top: 25px;
                    color: #77756e;
                    font-family: "Cormorant Garamond", serif;
                    font-size: 19px;
                    font-style: italic;
                    line-height: 1.5;
                }

            .email {
                display: inline-block;
                margin-top: 25px;
                font-family: "Cormorant Garamond", serif;
                font-size: 23px;
                color: var(--sage-dark);
                border-bottom: 1px solid #aab2a1;
            }
            /* FOOTER */
            footer {
                padding: 25px 7vw;
                background: #a9b19c;
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-family: "Cormorant Garamond", serif;
                font-size: 13px;
                font-style: italic;
                letter-spacing: 1px;
            }

                footer .center {
                    display: flex;
                    align-items: center;
                    gap: 25px;
                    text-transform: uppercase;
                    letter-spacing: 4px;
                    font-size: 9px;
                    font-style: normal;
                }

                    footer .center::before,
                    footer .center::after {
                        content: "";
                        width: 70px;
                        height: 1px;
                        background: rgba(255,255,255,.6);
                    }
            /* RESPONSIVE */
            @media (max-width: 900px) {
                .nav-links {
                    gap: 14px;
                }

                .nav-social {
                    display: none;
                }

                .hero-content {
                    width: 70%;
                    margin-left: 6vw;
                }


                .hero-art {
                  
                    background-image: linear-gradient(90deg, rgba(250,247,240,.98) 0%, rgba(250,247,240,.88) 40%, rgba(250,247,240,.18) 65%, rgba(30,45,34,.12) 100%), url("ZwaanC.jpg");
               
                }


                .hero-brand {
                    font-size: clamp(65px, 13vw, 110px);
                }

                .featured-grid,
                .about,
                .contact {
                    grid-template-columns: 1fr;
                }

                .featured-grid {
                    gap: 45px;
                }

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

                .contact-card {
                    padding: 45px;
                }
            }

            @media (max-width: 600px) {
                .nav {
                    height: 75px;
                    padding: 10px 5vw;
                }

                .nav-logo {
                    font-size: 21px;
                }

                    .nav-logo .script {
                        font-size: 27px;
                    }

                .nav-links {
                    gap: 10px;
                    font-size: 8px;
                    letter-spacing: 1px;
                }

                .hero {
                    min-height: 720px;
                    align-items: end;
                }

                .hero-art {
                    background-position: 62% center;
                    background-image: linear-gradient(0deg, rgba(249,246,239,.97) 0%, rgba(249,246,239,.72) 67%, rgba(249,246,239,.08) 80%), url("ZwaanC.jpg");
                }

                .hero-content {
                    width: 100%;
                    margin: 0;
                    padding: 0 7vw 105px;
                }

                .hero-brand {
                    font-size: 76px;
                }

                    .hero-brand span {
                        margin-left: 16%;
                    }

                .hero-copy {
                    margin-top: 28px;
                    font-size: 19px;
                }

                .hero-scroll {
                    display: none;
                }

                .section {
                    padding: 75px 7vw;
                }

                .featured-grid,
                .about,
                .contact {
                    grid-template-columns: 1fr;
                }

                .works-head {
                    display: block;
                }

                .works-intro {
                    margin: 18px 0;
                }

                .works-grid {
                    grid-template-columns: 1fr 1fr;
                    gap: 14px;
                }

                .work-name {
                    font-size: 16px;
                }

                .work-meta {
                    font-size: 7px;
                    letter-spacing: 1.5px;
                }

                .contact-card {
                    padding: 38px 28px;
                }

                footer {
                    flex-direction: column;
                    gap: 14px;
                    text-align: center;
                }

                    footer .center::before,
                    footer .center::after {
                        width: 30px;
                    }
            }