*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:#171713;
    color:#f2ebdb;
    font-family:DM Sans,sans-serif
}
a{
    text-decoration:none;
    color:inherit
}
img{
    display:block;
    max-width:100%
}
.demo{
    background:#c5a576;
    color:#151410;
    text-align:center;
    font-size:10px;
    letter-spacing:.16em;
    padding:9px;
    font-weight:800
}
.bar-nav{
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5.5%;
    background:#171713
}
.mark{
    display:flex;
    align-items:center;
    gap:13px;
    font-family:Playfair Display,serif;
    font-size:27px;
    letter-spacing:.04em;
    font-weight:700
}
.mark-icon{
    color:#c5a576;
    font-size:32px
}
.mark small{
    display:block;
    font:700 9px DM Sans;
    letter-spacing:.34em;
    color:#c5a576
}
.bar-nav nav{
    display:flex;
    gap:38px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em
}
.bar-nav nav a:hover{
    color:#c5a576
}
.nav-book{
    border:1px solid #c5a576;
    padding:14px 21px;
    font-size:11px;
    letter-spacing:.1em;
    color:#d7b98b;
    font-weight:800
}
.bar-hero{
    min-height:720px;
    height:calc(100vh - 125px);
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden
}
.hero-bg,.hero-shade{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-bg{
    object-position:center 50%
}
.hero-shade{
    background:linear-gradient(90deg,rgba(15,15,12,.96),rgba(15,15,12,.65) 54%,rgba(15,15,12,.14))
}
.hero-content{
    position:relative;
    margin-left:9%;
    max-width:850px
}
.hero-overline,.kicker{
    font-size:11px;
    letter-spacing:.3em;
    font-weight:800;
    color:#c5a576
}
.hero-overline span{
    padding:0 13px
}
.bar-hero h1,.bar-about h2,.bar-services h2,.bar-visit h2{
    font-family:Barlow Condensed,sans-serif;
    font-weight:800;
    font-size:clamp(90px,12vw,190px);
    line-height:.77;
    letter-spacing:-.045em;
    margin:34px 0
}
.bar-hero h1 em,.bar-about h2 i,.bar-services h2 i,.bar-visit h2 i{
    font-family:Playfair Display,serif;
    font-weight:400;
    color:#c5a576;
    letter-spacing:-.075em
}
.hero-content>p{
    max-width:430px;
    font-size:16px;
    line-height:1.8;
    color:#ddd5c7
}
.bar-btn{
    display:inline-flex;
    align-items:center;
    gap:40px;
    background:#c5a576;
    color:#181713;
    padding:19px 24px;
    font-size:11px;
    letter-spacing:.12em;
    font-weight:800;
    margin-top:27px
}
.bar-btn:hover{
    background:#ead3ad
}
.hero-foot{
    position:absolute;
    bottom:27px;
    left:9%;
    right:7%;
    display:flex;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:.2em;
    color:#d6c7b3
}
.ticker{
    background:#c5a576;
    color:#1b1a15;
    overflow:hidden;
    white-space:nowrap;
    padding:17px 0;
    font:800 19px Barlow Condensed;
    letter-spacing:.24em
}
.ticker div{
    width:max-content;
    animation:move 22s linear infinite
}
@keyframes move{
    to{
        transform:translateX(-35%)
    }
}
.bar-about{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:700px;
    background:#eae3d5;
    color:#1a1915
}
.about-photo{
    position:relative;
    min-height:600px
}
.about-photo img{
    height:100%;
    width:100%;
    object-fit:cover;
    filter:grayscale(65%)
}
.photo-stamp{
    position:absolute;
    right:-35px;
    top:13%;
    border-radius:50%;
    height:130px;
    width:130px;
    background:#c5a576;
    display:grid;
    place-content:center;
    text-align:center;
    font:800 17px Barlow Condensed;
    letter-spacing:.12em;
    transform:rotate(12deg)
}
.about-copy{
    padding:110px 12%;
    align-self:center
}
.bar-about h2,.bar-services h2{
    font-size:clamp(72px,8vw,120px);
    margin:35px 0
}
.about-copy>p:not(.kicker){
    line-height:1.9;
    color:#514d46;
    max-width:460px
}
.small-rule{
    height:1px;
    background:#b5a994;
    margin:36px 0
}
.quote{
    font-family:Playfair Display,serif;
    font-size:23px!important;
    font-style:italic
}
.bar-services{
    padding:115px 8%;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:8%;
    background:#171713
}
.service-intro>p:last-child{
    color:#9c998e;
    max-width:300px;
    line-height:1.8
}
.service-list{
    align-self:center
}
.service-list article{
    border-top:1px solid #4d4b43;
    display:grid;
    grid-template-columns:60px 1fr 30px;
    gap:10px;
    align-items:center;
    padding:26px 0
}
.service-list article:last-child{
    border-bottom:1px solid #4d4b43
}
.service-list article>span{
    color:#c5a576;
    font-size:12px
}
.service-list h3{
    font:800 clamp(25px,3vw,40px) Barlow Condensed;
    margin:0
}
.service-list p{
    color:#99978d;
    font-size:13px;
    margin:6px 0 0
}
.service-list b{
    font-size:25px;
    color:#c5a576
}
.bar-visit{
    background:#c5a576;
    color:#1a1915;
    text-align:center;
    padding:110px 20px 120px
}
.bar-visit .kicker{
    color:#4b3a24
}
.bar-visit h2{
    font-size:clamp(85px,11vw,165px);
    margin:40px 0
}
.bar-visit h2 i{
    color:#f4eddf
}
.bar-visit p:not(.kicker){
    max-width:490px;
    margin:auto;
    line-height:1.8
}
.bar-btn.light{
    background:#181713;
    color:#fff
}
.bar-footer{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:35px 7%;
    font-size:11px;
    letter-spacing:.14em
}
@media(max-width:900px){
    .bar-nav nav{
        display:none
    }
    .bar-hero{
        min-height:600px
    }
    .bar-about,.bar-services{
        grid-template-columns:1fr
    }
    .about-photo{
        min-height:380px;
        max-height:520px
    }
    .photo-stamp{
        right:20px
    }
    .about-copy{
        padding:80px 7%
    }
    .bar-services{
        padding:80px 7%
    }
    .bar-hero h1{
        font-size:clamp(85px,16vw,150px)
    }
}
@media(max-width:600px){
    .bar-nav{
        height:75px;
        padding:0 20px
    }
    .mark{
        font-size:20px
    }
    .nav-book{
        font-size:9px;
        padding:12px
    }
    .bar-hero{
        height:650px;
        min-height:0
    }
    .hero-content{
        margin-left:6%;
        margin-right:6%
    }
    .bar-hero h1{
        font-size:clamp(76px,18vw,115px)
    }
    .hero-foot{
        left:6%;
        right:6%;
        font-size:8px
    }
    .hero-foot span:last-child{
        display:none
    }
    .bar-about h2,.bar-services h2{
        font-size:80px
    }
    .bar-footer{
        flex-direction:column
    }
    .bar-visit h2{
        font-size:85px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    .ticker div{
        animation:none
    }
}