:root {
 --black: #090807;
 --black-soft: #100e0c;
 --cream: #d9cbbd;
 --gold: #9c7753;
 --gold-light: #c6a57d;
 --white: #f4eee7;
 --muted: #9d9187;
}

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

html {
 scroll-behavior: smooth;
}

body {
 background: var(--black);
 color: var(--cream);
 font-family: "Inter", sans-serif;
 overflow-x: hidden;
}

img {
 display: block;
 width: 100%;
}

a {
 color: inherit;
}

.navbar {
 min-height: 92px;
 padding: 0 6%;

 display: flex;
 align-items: center;
 justify-content: space-between;

 border-bottom: 1px solid rgba(198,165,125,.18);

 background: rgba(9,8,7,.94);
}

.logo {
 font-family: "Playfair Display", serif;
 font-size: 35px;
 text-decoration: none;
 letter-spacing: 4px;
}

.mini-logo {
 border: 1px solid var(--gold);
 border-radius: 50%;
 width: 38px;
 height: 38px;

 display: grid;
 place-items: center;

 text-decoration: none;

 font-family: "Playfair Display", serif;
}

nav {
 display: flex;
 gap: 27px;
}

nav a {
 text-decoration: none;
 text-transform: uppercase;
 font-size: 10px;
 letter-spacing: 1.6px;
}

.booking-top,
.outline-btn {
 border: 1px solid rgba(198,165,125,.55);
 padding: 13px 22px;
 text-decoration: none;
 font-size: 10px;
 letter-spacing: 1.5px;
}

.hero {
 min-height: 710px;

 display: grid;
 grid-template-columns: .85fr 1.35fr;

 border-bottom: 1px solid rgba(198,165,125,.2);
}

.hero-copy {
 padding: 110px 5vw 70px 8vw;

 display: flex;
 flex-direction: column;
 justify-content: center;
}

.eyebrow,
.section-tag {
 color: var(--gold);
 font-size: 10px;
 letter-spacing: 2.5px;
 margin-bottom: 26px;
}

.hero h1 {
 font-family: "Playfair Display", serif;
 font-size: clamp(62px, 6.5vw, 102px);
 font-weight: 500;
 line-height: .91;
 color: var(--cream);
}

.hero-line {
 width: 50px;
 height: 1px;
 background: var(--gold);
 margin: 30px 0 20px;
}

.hero-text {
 color: var(--muted);
 margin-bottom: 35px;
}

.outline-btn {
 align-self: flex-start;
}

.hero-image {
 overflow: hidden;
 position: relative;
}

.hero-image::after {
 content: "";
 position: absolute;
 inset: 0;

 background:
   linear-gradient(
     90deg,
     var(--black) 0%,
     rgba(9,8,7,.3) 25%,
     transparent 60%
   );
}

.hero-image img {
 height: 100%;
 object-fit: cover;
 filter: saturate(.5) brightness(.62);
}

.benefits {
 display: grid;
 grid-template-columns: repeat(3,1fr);

 max-width: 1100px;
 margin: auto;

 border-left: 1px solid rgba(198,165,125,.2);
 border-right: 1px solid rgba(198,165,125,.2);
}

.benefits div {
 padding: 30px;

 display: flex;
 align-items: center;
 justify-content: center;
 gap: 18px;

 border-right: 1px solid rgba(198,165,125,.2);
}

.benefits div:last-child {
 border-right: none;
}

.benefits span {
 color: var(--gold-light);
 font-size: 25px;
}

.benefits p {
 font-size: 10px;
 line-height: 1.6;
 letter-spacing: 1px;
}

.about {
 text-align: center;
 padding: 130px 7% 80px;
 max-width: 1000px;
 margin: auto;
}

.about h2,
.gallery h2,
.contact h2 {
 font-family: "Playfair Display", serif;
 font-size: clamp(45px,6vw,75px);
 font-weight: 500;
}

.about h2 em,
.contact h2 em {
 color: var(--gold-light);
 font-weight: 500;
}

.section-intro {
 margin: 28px auto 0;
 max-width: 620px;
 color: var(--muted);
 line-height: 1.8;
}

.services {
 padding: 20px 7% 120px;

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

.service-card {
 border: 1px solid rgba(198,165,125,.18);
 background: var(--black-soft);
}

.service-card img {
 height: 430px;
 object-fit: cover;

 filter:
   grayscale(30%)
   brightness(.68);

 transition: .6s ease;
}

.service-card:hover img {
 filter: grayscale(0) brightness(.85);
}

.card-copy {
 padding: 25px;
}

.card-copy span {
 color: var(--gold);
 font-size: 11px;
}

.card-copy h3 {
 font-family: "Playfair Display", serif;
 font-size: 27px;
 margin: 10px 0;
}

.card-copy p {
 color: var(--muted);
 font-size: 13px;
}

.quote {
 background: #0f0c0a;
 padding: 100px 7%;
 text-align: center;

 border-top: 1px solid rgba(198,165,125,.18);
 border-bottom: 1px solid rgba(198,165,125,.18);
}

.quote > span {
 font-family: "Playfair Display", serif;
 font-size: 70px;
 color: var(--gold);
}

.quote blockquote {
 font-family: "Playfair Display", serif;
 font-size: clamp(28px,4vw,45px);
 line-height: 1.35;
}

.quote p {
 color: var(--gold);
 margin-top: 35px;
 letter-spacing: 5px;
}

.gallery {
 padding: 130px 7%;
}

.gallery-heading {
 margin-bottom: 55px;
}

.gallery-grid {
 display: grid;
 grid-template-columns: 1fr 1.3fr 1fr;
 gap: 18px;
}

.gallery-grid img {
 height: 520px;
 object-fit: cover;
 filter: saturate(.55);
}

.gallery-grid img:nth-child(2) {
 margin-top: 60px;
}

.contact {
 padding: 130px 7%;
 text-align: center;
 background: #110e0c;
}

.contact p:not(.section-tag) {
 color: var(--muted);
 margin: 25px 0 35px;
}

.contact > a {
 display: inline-block;
 padding: 16px 28px;
 border: 1px solid var(--gold);
 text-decoration: none;
 font-size: 11px;
 letter-spacing: 2px;
}

footer {
 text-align: center;
 padding: 55px 7%;
}

.footer-logo {
 font-family: "Playfair Display", serif;
 font-size: 30px;
 letter-spacing: 4px;
 text-decoration: none;
}

footer p {
 color: var(--gold);
 margin: 14px 0 30px;
 font-size: 11px;
 letter-spacing: 2px;
}

footer small {
 color: var(--muted);
}

@media(max-width:900px) {

 nav,
 .mini-logo {
   display: none;
 }

 .navbar {
   padding: 0 5%;
 }

 .booking-top {
   padding: 10px 12px;
 }

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

 .hero-copy {
   padding: 100px 7% 60px;
 }

 .hero-image {
   height: 520px;
 }

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

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

 .gallery-grid img,
 .gallery-grid img:nth-child(2) {
   margin: 0;
   height: 420px;
 }

}