@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
    --ink: #25251f;
    --paper: #f8f5ee;
    --sage: #b7c5a6;
    --coral: #e8a08c;
    --yellow: #efc75e;
    --blue: #a9c9d5
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.55 "DM Sans",Arial,sans-serif
}

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

.topline {
    max-width: 1240px;
    margin: auto;
    padding: 10px 28px;
    border-bottom: 1px solid #ded8cb;
    display: flex;
    justify-content: space-between;
    font-size: 12px
}

.nav {
    max-width: 1240px;
    margin: auto;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 35px
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: auto
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yellow);
    font: 24px Georgia
}

.brand strong {
    display: block;
    letter-spacing: .14em;
    font-size: 15px
}

.brand small {
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #777
}

.navlinks {
    display: flex;
    gap: 28px;
    font-size: 13px
}

.nav-phone {
    font-size: 13px;
    font-weight: 700
}

.top-slider {
    height: min(78vh,720px);
    min-height: 520px;
    position: relative;
    overflow: hidden;
    background: #c8bfb0
}

.slides, .slide {
    position: absolute;
    inset: 0
}

.slide {
    opacity: 0;
    transition: opacity .7s;
    pointer-events: none
}

    .slide.active {
        opacity: 1;
        pointer-events: auto
    }

.slide-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform 7s
}

.active .slide-image {
    transform: scale(1.07)
}

.shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(20,20,15,.48),rgba(20,20,15,.08) 65%,rgba(20,20,15,.12))
}

.img1 {
    background-image: url("/images/teaserbox_13827513.jpg");
    background-color: #c8b99c
}

.img2 {
    background-image: url("/images/teaserbox_26524846.jpeg");
    background-color: #879f9b
}

.img3 {
    background-image: url("/images/teaserbox_13827516.JPG");
    background-color: #d8c9b7
}

.img4 {
    background-image: url("/images/teaserbox_13827511.jpg");
    background-color: #d0c0aa
}

.img5 {
    background-image: url("/images/teaserbox_15689960.jpg");
    background-color: #9b8e7c
}

.slide-copy {
    position: absolute;
    left: 7vw;
    bottom: 12vh;
    color: #fffdf8;
    text-shadow: 0 2px 18px #0005
}

    .slide-copy small {
        text-transform: uppercase;
        letter-spacing: .17em;
        font-weight: 700;
        font-size: 12px
    }

    .slide-copy h1 {
        font: 500 clamp(60px,9vw,128px)/.88 "Playfair Display",Georgia,serif;
        letter-spacing: -.045em;
        margin: 18px 0 0
    }

    .slide-copy em {
        font-style: italic
    }

    .slide-copy span {
        font-style: normal
    }

.slider-ui {
    position: absolute;
    left: 7vw;
    right: 7vw;
    bottom: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dots {
    display: flex;
    gap: 8px
}

.dot {
    width: 34px;
    height: 3px;
    border: 0;
    background: #ffffff80;
    padding: 0;
    cursor: pointer
}

    .dot.active {
        background: #fff
    }

.arrow {
    width: 42px;
    height: 42px;
    border: 1px solid #fff9;
    border-radius: 50%;
    background: #0002;
    color: white;
    font-size: 18px;
    cursor: pointer
}

.hero {
    max-width: 1240px;
    margin: auto;
    padding: 90px 28px 85px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center
}

.eyebrow, .label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 700;
    color: #6d7567
}

.hero h2, h2 {
    font: 500 clamp(45px,5vw,70px)/1.02 "Playfair Display",Georgia,serif;
    letter-spacing: -.035em;
    margin: 20px 0
}

    .hero h2 em, h2 span {
        color: #718167;
        font-style: italic
    }

.lead {
    font-size: 18px;
    color: #5d5c54;
    max-width: 590px
}

.actions {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 28px
}

.button {
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700
}

.dark {
    background: var(--ink);
    color: white
}

.light {
    border: 1px solid #bbb4a7
}

.text-link {
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 3px
}

.hero-art {
    height: 500px;
    position: relative;
    display: grid;
    place-items: center
}

.sun {
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: var(--yellow);
    right: 8%;
    top: 6%
}

.arch {
    width: 380px;
    height: 460px;
    background: var(--sage);
    border-radius: 190px 190px 30px 30px;
    position: relative;
    overflow: hidden
}

    .arch:after {
        content: "";
        position: absolute;
        inset: 55px 45px 0;
        background: var(--paper);
        border-radius: 170px 170px 0 0
    }

.toy {
    position: absolute;
    z-index: 2
}

.ball {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--coral);
    right: 45px;
    top: 115px
}

.block {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    color: white;
    font: 36px Georgia
}

.b1 {
    background: #d47f72;
    left: 45px;
    top: 170px;
    transform: rotate(-8deg)
}

.b2 {
    background: #8fa6bb;
    left: 90px;
    top: 240px;
    transform: rotate(7deg)
}

.bunny {
    width: 110px;
    height: 125px;
    background: #eee7d8;
    border-radius: 50%;
    left: 145px;
    bottom: 30px
}

.scribble {
    position: absolute;
    font: italic 20px "Playfair Display";
    right: 0;
    top: 15%;
    transform: rotate(7deg)
}

.intro, .categories, .brands, .service, .visit {
    max-width: 1240px;
    margin: auto;
    padding: 105px 28px;
    border-top: 1px solid #ded8cb
}

.intro {
    display: grid;
    grid-template-columns: .6fr 1fr;
    gap: 70px
}

    .intro p, .section-heading > p, .service p {
        max-width: 650px;
        color: #65635a;
        font-size: 17px
    }

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: end;
    margin-bottom: 45px
}

.grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.card {
    min-height: 275px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative
}

    .card h3, .service h3 {
        font: 500 32px/1.05 "Playfair Display";
        margin: auto 0 8px
    }

    .card p {
        font-size: 13px;
        margin: 0
    }

    .card b {
        position: absolute;
        right: 25px;
        bottom: 20px;
        font-size: 24px
    }

.c1 {
    background: var(--coral)
}

.c2 {
    background: var(--yellow)
}

.c3 {
    background: var(--blue)
}

.c4 {
    background: #d9c7b2
}

.c5 {
    background: #b9c7aa
}

.c6 {
    background: #d6b6c0
}

.quote {
    padding: 110px 28px;
    background: var(--ink);
    color: white;
    text-align: center
}

    .quote > div {
        font: 100px/.4 Georgia;
        color: var(--yellow)
    }

blockquote {
    max-width: 900px;
    margin: 45px auto 25px;
    font: italic 500 clamp(34px,4vw,58px)/1.12 "Playfair Display"
}

.quote small {
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #c8c4b7
}

.brands h2 {
    margin-bottom: 40px
}

.brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

    .brand-list span {
        padding: 12px 17px;
        border: 1px solid #cfc8ba;
        border-radius: 999px;
        font: 18px "Playfair Display"
    }

.service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border-top: 0;
    padding-top: 25px
}

    .service > div {
        padding: 50px;
        background: var(--yellow)
    }

        .service > div + div {
            background: var(--blue)
        }

.visit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.map {
    height: 350px;
    background: #e6dfd1;
    /*background-image: url("/images/laden.jpg");*/
    /*background-size: auto;*/
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 12px;
    letter-spacing: .08em
}

    .map strong {
        font: 24px "Playfair Display"
    }

footer {
    padding: 35px 28px;
    background: #e7dfd1;
    font-size: 12px
}

    footer span {
        margin-left: 8px;
        color: #777
    }

@media(max-width:800px) {
    .topline {
        display: none
    }

    .nav {
        padding: 18px 20px
    }

    .navlinks {
        display: none
    }

    .top-slider {
        height: 68vh;
        min-height: 470px
    }

    .slide-copy {
        left: 20px;
        bottom: 100px
    }

        .slide-copy h1 {
            font-size: 64px
        }

    .slider-ui {
        left: 20px;
        right: 20px
    }

    .hero, .intro, .visit {
        grid-template-columns: 1fr
    }

    .hero {
        padding: 65px 20px
    }

    .intro, .categories, .brands, .service, .visit {
        padding: 75px 20px
    }

    .section-heading {
        display: block
    }

    .grid {
        grid-template-columns: 1fr 1fr
    }

    .service {
        grid-template-columns: 1fr
    }

    .hero-art {
        height: 380px
    }

    .arch {
        width: 290px;
        height: 360px
    }
}

@media(max-width:520px) {
    .grid {
        grid-template-columns: 1fr
    }

    .slide-copy h1 {
        font-size: 54px
    }
}