:root {
  --bg:#faf7f2;
  --bg-2:#f2ece2;
  --ink:#1a1614;
  --ink-soft:#5a4a3d;
  --mocha:#8b6f5e;
  --mocha-dark:#6b5545;
  --sand:#e8ddd0;
  --line:#d9cdb6;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --maxw:1180px;
}

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

html {
  scroll-behavior:smooth;
  scroll-padding-top:80px
}

body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased
}

img,video,iframe {
  max-width:100%;
  display:block
}

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

h1,h2,h3,h4 {
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.15
}

h1 {
  font-size:clamp(2.8rem,7vw,5.5rem)
}

h2 {
  font-size:clamp(2rem,4vw,3.2rem);
  margin-bottom:.6em
}

h3 {
  font-size:1.55rem;
  margin-bottom:.4em
}

h4 {
  font-size:1.1rem;
  margin:1.8rem 0 .6rem;
  color:var(--mocha-dark);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--sans);
  font-weight:500
}

p {
  color:var(--ink-soft);
  margin-bottom:1em
}

.eyebrow {
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.75rem;
  color:var(--mocha);
  margin-bottom:1rem
}

.container {
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.5rem
}


/* NAV */
.nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.5rem;
  background:rgba(250,247,242,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:.3s
}

.nav.scrolled {
  border-color:var(--line);
  padding:.6rem 1.5rem
}

.brand {
  display:flex;
  align-items:center;
  gap:.6rem
}

.brand-mark {
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:500;
  letter-spacing:.02em
}

.brand-mark em {
  font-style:italic;
  color:var(--mocha);
  margin:0 .05em
}

.brand-mark.small {
  font-size:1.2rem
}

.brand-name {
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.16em;
  text-transform:uppercase
}

.nav-links {
  display:flex;
  gap:2rem
}

.nav-links a {
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .2s
}

.nav-links a:hover {
  color:var(--mocha)
}

.nav-toggle {
  display:none;
  background:none;
  border:0;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px
}

.nav-toggle span {
  width:24px;
  height:1.5px;
  background:var(--ink);
  transition:.3s
}


/* HERO */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  color:#fff;
  padding:6rem 1.5rem 3rem
}

.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(26,22,20,.55),rgba(26,22,20,.75));
  z-index:1
}

.hero-inner {
  position:relative;
  z-index:2;
  max-width:800px
}

.hero-logo {
  font-family:var(--serif);
  font-size:clamp(3rem,10vw,6rem);
  line-height:1;
  margin-bottom:1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.1em
}

.hero-logo em {
  color:var(--sand);
  font-style:italic
}

.hero h1 {
  color:#fff;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:400;
  margin-bottom:.8rem
}

.tagline {
  font-family:var(--serif);
  font-style:italic;
  color:var(--sand);
  font-size:clamp(1.2rem,2.4vw,1.8rem);
  margin-bottom:2rem
}

.eyebrow.hero-eb,.hero .eyebrow {
  color:var(--sand);
  opacity:.85;
  margin-bottom:2.5rem
}

.hero .eyebrow {
  letter-spacing:.32em
}


/* BUTTON */
.btn {
  display:inline-block;
  padding:.95rem 2rem;
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  border:1px solid var(--mocha);
  background:var(--mocha);
  color:#fff;
  cursor:pointer;
  transition:.25s;
  font-family:var(--sans);
  font-weight:500
}

.btn:hover {
  background:var(--mocha-dark);
  border-color:var(--mocha-dark)
}

.btn-primary {
}


/* SECTIONS */
.section {
  padding:6rem 0
}

.section-alt {
  background:var(--bg-2)
}

.section-head {
  text-align:center;
  max-width:680px;
  margin:0 auto 4rem
}

.lede {
  font-size:1.05rem
}

.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center
}

.about-img img {
  aspect-ratio:3/4;
  object-fit:cover;
  width:100%;
  filter:grayscale(.15)
}


/* CARDS */
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
  margin-bottom:5rem
}

.card {
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  transition:.35s;
  display:block
}

.card:hover {
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(107,85,69,.35)
}

.card img {
  aspect-ratio:4/5;
  object-fit:cover;
  transition:.5s
}

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

.card-body {
  padding:1.6rem 1.4rem 1.8rem
}

.card-body h3 {
  margin-bottom:.5rem
}

.card-body p {
  font-size:.92rem;
  margin-bottom:1rem
}

.card-cta {
  color:var(--mocha);
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500
}


/* DETAILS */
.details {
  max-width:820px;
  margin:0 auto
}

.details-title {
  text-align:center;
  margin-bottom:2rem;
  font-size:1.4rem;
  color:var(--mocha-dark)
}

.details details {
  border-top:1px solid var(--line);
  padding:1.2rem 0
}

.details details:last-child {
  border-bottom:1px solid var(--line)
}

.details summary {
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.25rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--ink)
}

.details summary::-webkit-details-marker {
  display:none
}

.details summary::after {
  content:"+";
  color:var(--mocha);
  font-size:1.4rem;
  transition:.3s;
  font-family:var(--sans);
  font-weight:300
}

.details details[open] summary::after {
  transform:rotate(45deg)
}

.details details p {
  margin-top:1rem;
  font-size:.95rem
}

.details details ul {
  margin-top:.8rem;
  padding-left:1.2rem;
  color:var(--ink-soft);
  font-size:.95rem
}

.details details li {
  margin-bottom:.4rem
}


/* PRICE */
.price-block {
  margin-bottom:3.5rem;
  scroll-margin-top:100px
}

.price-block h3 {
  border-bottom:1px solid var(--mocha);
  padding-bottom:.5rem;
  margin-bottom:1rem;
  color:var(--mocha-dark)
}

.price-block.highlight {
  background:#fff;
  padding:0.5rem 0.5rem;
  border:1px solid var(--mocha);
  animation:pulse 1.5s ease
}

@keyframes pulse {
  0% {
    box-shadow:0 0 0 0 rgba(139,111,94,.4)
  }

  100% {
    box-shadow:0 0 0 20px rgba(139,111,94,0)
  }
}

.price-table {
  width:100%;
  border-collapse:collapse
}

.price-table tr {
  border-bottom:1px solid var(--line)
}

.price-table td {
  padding:.9rem 0;
  vertical-align:top
}

.price-table td:last-child {
  text-align:right;
  font-weight:500;
  color:var(--mocha-dark);
  white-space:nowrap;
  padding-left:1rem
}

.price-table td span {
  display:block;
  font-size:.82rem;
  color:var(--ink-soft);
  margin-top:.15rem;
  font-style:italic
}

.promo {
  margin-top:2rem;
  text-align:center;
  padding:1.2rem;
  border:1px dashed var(--mocha);
  color:var(--mocha-dark);
  font-family:var(--serif);
  font-size:1.3rem;
  font-style:italic
}


/* QUOTES */
.section-head .btn {
  margin-top:1rem
}

.quotes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:4rem
}

.quotes blockquote {
  background:#fff;
  padding:2rem;
  border:1px solid var(--line);
  position:relative
}

.quotes blockquote::before {
  content:"“";
  position:absolute;
  top:-.5rem;
  left:1rem;
  font-family:var(--serif);
  font-size:5rem;
  color:var(--sand);
  line-height:1
}

.quotes p {
  font-family:var(--serif);
  font-size:1.15rem;
  font-style:italic;
  color:var(--ink);
  margin-bottom:1rem;
  position:relative
}

.quotes cite {
  font-style:normal;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mocha)
}


/* CONTACT */
.contact-list {
  list-style:none;
  margin:1.5rem 0 2rem;
  border-top:1px solid var(--line)
}

.contact-list li {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}

.contact-list span {
  color:var(--mocha);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500
}

.contact-list a {
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:.2s
}

.contact-list a:hover {
  border-color:var(--mocha)
}
.opening-hours {
  list-style:none;
  text-align:right;
  color:var(--ink);
  font-size:.95rem;
}

.opening-hours li {
  border:0;
  padding:.15rem 0;
  display:block;
}

.opening-hours strong {
  color:var(--mocha-dark);
  font-weight:500;
  margin-right:.5rem;
}

.form {
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:2rem
}

.form label {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mocha)
}

.form input,.form textarea {
  padding:.85rem 1rem;
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--ink);
  border-radius:0
}

.form input:focus,.form textarea:focus {
  outline:none;
  border-color:var(--mocha)
}

.form .btn {
  align-self:flex-start
}

.map-placeholder {
  aspect-ratio:4/5;
  background:var(--sand);
  position:relative;
  overflow:hidden
}

.map-placeholder iframe {
  width:100%;
  height:100%;
  border:0
}

.hours-note {
  margin-top:1rem;
  font-size:.85rem;
  color:var(--ink-soft)
}


/* FOOTER */
.footer {
  background:var(--ink);
  color:var(--bg);
  padding:2.5rem 0
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem
}

.footer p {
  color:var(--sand);
  margin:0;
  font-size:.85rem
}

.footer a {
  color:var(--sand);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase
}

.footer .brand-mark {
  color:#fff
}

.footer .brand-mark em {
  color:var(--sand)
}


/* REVEAL */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease,transform .8s ease
}

.reveal.in {
  opacity:1;
  transform:none
}


/* RESPONSIVE */
@media (max-width:900px) {
  .two-col {
    grid-template-columns:1fr;
    gap:2.5rem
  }

  .cards {
    grid-template-columns:1fr;
    gap:1.2rem
  }

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

  .nav-toggle {
    display:flex
  }

  .nav-links {
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg);
    flex-direction:column;
    padding:1.5rem; gap:1.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .35s ease, opacity .25s ease, visibility .35s;
  }

  .nav-links.open {
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .section {
    padding:4rem 0
  }
}