:root {
    --plum: #3b1230;
    --plum-soft: #5a2448;
    --marigold: #f2a31b;
    --rose: #d63a73;
    --leaf: #2f6b4f;
    --blush: #fbeef0;
    --paper: #fffafb;
    --ink: #2a1824;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Nunito Sans', Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    line-height: 1.15;
    margin: 0 0 .5em;
}

a {
    color: inherit;
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 22px;
}

:focus-visible {
    outline: 3px solid var(--marigold);
    outline-offset: 3px;
}

/* Header */
header.top {
    background: var(--plum);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

    header.top .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
    }

.logo {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .02em;
}

    .logo span {
        color: var(--marigold);
    }

nav a {
    text-decoration: none;
    margin-left: 22px;
    font-weight: 600;
    font-size: .95rem;
    opacity: .9;
}

    nav a:hover {
        color: var(--marigold);
        opacity: 1;
    }

/* Hero */
.hero {
    background: var(--plum);
    color: #fff;
    overflow: hidden;
}

    .hero .wrap {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 40px;
        align-items: center;
        padding-top: 56px;
        padding-bottom: 72px;
    }

    .hero h1 {
        font-size: clamp(2.6rem, 6vw, 4.6rem);
        font-weight: 700;
    }

        .hero h1 em {
            font-weight: 500;
            color: var(--marigold);
        }

    .hero p {
        font-size: 1.12rem;
        max-width: 34em;
        color: #f1dfe9;
    }

.btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--marigold);
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
}

    .btn.primary {
        background: var(--marigold);
        color: var(--plum);
    }

        .btn.primary:hover {
            background: #ffb73a;
        }

    .btn.ghost {
        color: #fff;
    }

        .btn.ghost:hover {
            background: rgba(255,255,255,.1);
        }

.hero-art {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 220px 220px 24px 24px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--rose), var(--marigold)) center/no-repeat;
    box-shadow: 0 0 0 8px var(--plum-soft), 0 0 0 10px var(--marigold);
}

    .hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Sections */
section {
    padding: 76px 0;
}

.head {
    max-width: 40em;
    margin-bottom: 38px;
}

    .head h2 {
        font-size: clamp(1.9rem, 4vw, 2.7rem);
        color: var(--plum);
    }

    .head p {
        margin: 0;
        color: #5d4655;
    }

/* Services */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.svc {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #f0d9df;
    display: flex;
    flex-direction: column;
}

    .svc .pic {
        aspect-ratio: 4/3;
        background-size: cover;
        background-position: center;
    }

    .svc .body {
        padding: 20px 22px 24px;
    }

    .svc h3 {
        font-size: 1.35rem;
        color: var(--plum);
        margin-bottom: .3em;
    }

    .svc p {
        margin: 0;
        color: #5d4655;
        font-size: .97rem;
    }

    .svc:nth-child(1) .pic {
        background-color: #e0527f;
    }

    .svc:nth-child(2) .pic {
        background-color: #f2a31b;
    }

    .svc:nth-child(3) .pic {
        background-color: #b0357b;
    }

    .svc:nth-child(4) .pic {
        background-color: #d63a73;
    }

    .svc:nth-child(5) .pic {
        background-color: #2f6b4f;
    }

    .svc:nth-child(6) .pic {
        background-color: #7a3c8f;
    }

/* Gallery */
.gallery-band {
    background: var(--blush);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: 14px;
}

    .gallery .g {
        border-radius: 14px;
        background-size: cover;
        background-position: center;
        background-color: var(--rose);
    }

        .gallery .g:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }

        .gallery .g:nth-child(4) {
            grid-row: span 2;
            background-color: var(--marigold);
        }

        .gallery .g:nth-child(3) {
            background-color: var(--leaf);
        }

        .gallery .g:nth-child(5) {
            background-color: var(--plum-soft);
        }

/* Why us */
.why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

    .why div {
        border-top: 4px solid var(--marigold);
        padding-top: 14px;
    }

    .why h3 {
        font-size: 1.15rem;
        color: var(--plum);
    }

    .why p {
        margin: 0;
        font-size: .95rem;
        color: #5d4655;
    }

/* Contact */
.contact {
    background: var(--plum);
    color: #fff;
}

    .contact .wrap {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 54px;
    }

    .contact h2 {
        font-size: clamp(1.9rem, 4vw, 2.7rem);
    }

    .contact .info p {
        color: #f1dfe9;
        margin: .3em 0;
    }

.form {
    background: #fff;
    color: var(--ink);
    border-radius: 18px;
    padding: 28px;
}

    .form label {
        display: block;
        font-weight: 700;
        font-size: .92rem;
        margin: 14px 0 4px;
    }

    .form input[type=text], .form input[type=date], .form select, .form textarea {
        width: 100%;
        padding: 11px 13px;
        border: 1.5px solid #d9c3cc;
        border-radius: 10px;
        font: inherit;
        background: #fff;
    }

    .form textarea {
        min-height: 90px;
        resize: vertical;
    }

.err {
    color: #b3123f;
    font-size: .85rem;
}

.thanks {
    background: #e6f3ec;
    color: #1d4d37;
    padding: 14px 16px;
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: 8px;
}

.form .btn.primary {
    margin-top: 20px;
    width: 100%;
    color: var(--plum);
}

footer {
    background: #2a0c22;
    color: #d9bfd0;
    text-align: center;
    padding: 22px;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .hero .wrap, .contact .wrap {
        grid-template-columns: 1fr;
    }

    .hero-art {
        max-width: 380px;
        margin: 0 auto;
    }

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

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

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

@media (max-width: 560px) {
    nav a:not(.keep) {
        display: none;
    }

    .grid, .why {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}