@font-face {
  font-family:Cormorant;
  src:url('fonts/cormorant.woff2') format('woff2');
  font-weight:300 600;
  font-display:swap
}


@font-face {
  font-family:Jakarta;
  src:url('fonts/jakarta.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap
}


:root {
  color-scheme:dark;
  --bg:#180f0c;
  --ink:#100c09;
  --card:#241b15;
  --text:#ede9e0;
  --muted:#a79b8d;
  --gold:#bf9b60;
  --border:#49392d
}


* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.7 Jakarta,Arial,sans-serif
}

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

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

img {
  display:block;
  max-width:100%;
  object-fit:cover
}

svg {
  width:22px;
  height:22px;
  flex-shrink:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3,.footer-brand {
  font-family:Cormorant,Georgia,serif;
  font-weight:400;
  line-height:1.05
}

h1 {
  font-size:clamp(64px,7vw,96px);
  letter-spacing:-.025em
}

h2 {
  font-size:clamp(44px,5vw,64px)
}

h3 {
  font-size:28px
}

em {
  font-weight:400;
  color:var(--gold)
}

address {
  font-style:normal
}

a,button {
  transition:background .2s,color .2s,transform .2s
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}

a:hover {
  color:var(--gold)
}

.container {
  width:min(1280px,100%);
  padding-inline:40px;
  margin-inline:auto
}

.section {
  padding-block:110px
}

.eyebrow {
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--gold);
  font-family:Jakarta,Arial,sans-serif;
  line-height:1.7
}

.eyebrow+h1,.eyebrow+h2 {
  margin-top:20px
}

.intro {
  max-width:450px;
  color:var(--muted);
  margin-top:28px;
  line-height:1.9
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  background:var(--text);
  color:var(--bg);
  padding:16px 30px;
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:600
}

.button:hover {
  background:var(--gold);
  color:var(--bg)
}

.text-link {
  display:inline-flex;
  gap:12px;
  align-items:center;
  border-bottom:1px solid currentColor;
  padding-bottom:5px;
  font-size:12px
}

.gold {
  color:var(--gold)
}

.actions {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:36px
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--gold);
  color:var(--ink);
  padding:12px;
  z-index:200
}

.skip-link:focus {
  top:10px
}


.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  background:rgb(24 15 12 / .95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)
}

.header-inner {
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand {
  text-transform:uppercase;
  letter-spacing:.28em;
  font:22px Cormorant,Georgia,serif
}

.main-nav {
  display:flex;
  gap:32px
}

.main-nav a {
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.15em
}

.menu-toggle {
  display:none
}

.hero {
  padding-top:80px
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  padding-block:90px
}

.hero-image {
  width:100%;
  height:auto;
  aspect-ratio:4/5
}

.service-strip {
  display:flex;
  flex-wrap:wrap;
  gap:15px 25px;
  justify-content:center;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.2em;
  padding:20px 24px;
  background:var(--ink);
  border-block:1px solid var(--border)
}

.service-strip span {
  color:var(--gold)
}


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

.section-heading>p {
  color:var(--muted);
  font-size:14px;
  max-width:385px
}

.style-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px
}

.style-card:nth-child(2) {
  padding-top:48px
}

.card-image {
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5
}

.card-image img {
  width:100%;
  height:100%;
  transition:transform .7s
}

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

.card-number {
  position:absolute;
  top:16px;
  left:16px;
  padding:2px 12px;
  border:1px solid #ffffff55;
  background:#0006;
  font-size:12px
}

.card-arrow {
  position:absolute;
  bottom:16px;
  right:16px;
  background:var(--gold);
  color:var(--ink);
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:24px
}

.card-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-top:20px
}

.card-title h3 {
  font-size:34px
}

.card-title>span {
  font-size:12px;
  color:var(--gold);
  white-space:nowrap
}

.style-card p {
  font-size:13px;
  color:var(--muted);
  margin-top:10px
}

.card-book {
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  margin-top:16px
}

.caption {
  font-size:12px;
  color:var(--muted);
  margin-top:26px
}

.care {
  background:var(--ink)
}

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

.care-image {
  position:relative
}

.care-image img {
  width:100%;
  height:auto;
  aspect-ratio:1
}

.care-image>span {
  position:absolute;
  bottom:-20px;
  right:16px;
  background:var(--gold);
  color:var(--ink);
  padding:16px 24px;
  font:italic 26px Cormorant,Georgia,serif
}

.care-copy>p:not(.eyebrow) {
  margin-top:24px;
  color:var(--muted)
}

.care-item {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--border)
}

.care-item p {
  color:var(--muted);
  font-size:13px;
  margin-top:10px
}

.care-copy>.text-link {
  margin-top:28px
}


.menu-heading {
  border-bottom:1px solid var(--border);
  padding-bottom:36px;
  margin-bottom:28px
}

.categories {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:44px
}

.categories a {
  padding:8px 16px;
  border:1px solid #bf9b6055;
  border-radius:30px;
  font-size:12px
}

.categories a:hover {
  background:var(--gold);
  color:var(--ink)
}

.price-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px
}

.price-card {
  border:1px solid var(--border);
  background:#241b1566;
  padding:24px;
  scroll-margin-top:110px
}

.price-card h3 {
  font-size:27px;
  color:var(--gold);
  border-bottom:1px solid var(--gold);
  padding-bottom:16px
}

.price-card ul {
  list-style:none;
  margin:0;
  padding:0
}

.price-card li {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:baseline;
  border-bottom:1px solid var(--border);
  padding:18px 0;
  font-size:13px
}

.price {
  font:24px Cormorant,Georgia,serif;
  white-space:nowrap
}

.location {
  background:var(--gold);
  color:var(--ink)
}

.location-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:70px;
  padding-block:80px;
  align-items:center
}

.location .eyebrow,.location em {
  color:inherit
}

.location h2 {
  font-size:clamp(52px,6vw,80px)
}

.location address {
  max-width:370px;
  font-size:21px;
  margin:12px 0 24px
}

.location a:hover {
  color:var(--ink);
  opacity:.7
}

.location-mark {
  font-size:36px
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px
}

details {
  border-bottom:1px solid var(--border);
  padding:20px 0
}

summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  cursor:pointer;
  list-style:none
}

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

summary:after {
  content:'+';
  font-size:26px;
  color:var(--gold)
}

details[open] summary:after {
  content:'−'
}

details p {
  margin-top:16px;
  color:var(--muted);
  font-size:13px
}


.booking {
  background:#261c16;
  border-top:1px solid var(--border)
}

.booking-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px
}

.contact-phone {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:32px;
  font:36px Cormorant,Georgia,serif
}

.address-block {
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--border)
}

.address-block address {
  margin:14px 0;
  max-width:400px;
  font-size:14px
}

form {
  background:var(--card);
  padding:40px;
  min-width:0
}

label {
  display:block;
  font-size:13px;
  margin-bottom:8px
}

input,select,textarea {
  display:block;
  width:100%;
  min-width:0;
  border:1px solid var(--border);
  border-radius:0;
  background:var(--bg);
  color:var(--text);
  padding:12px;
  margin-bottom:24px;
  outline-color:var(--gold);
  font-size:14px
}

textarea {
  resize:vertical
}

.booking-submit {
  width:100%;
  letter-spacing:0;
  text-transform:none;
  font-size:14px
}

.booking form .caption {
  margin-top:16px
}

footer {
  background:var(--ink);
  padding:60px 0 115px
}

.footer-grid {
  display:flex;
  justify-content:space-between;
  gap:40px
}

.footer-brand {
  font-size:34px
}

.footer-grid p,.footer-grid address {
  color:var(--muted);
  font-size:13px;
  margin-top:14px;
  max-width:350px
}

.footer-grid nav {
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:24px;
  font-size:13px
}

.copyright {
  margin-top:40px;
  border-top:1px solid var(--border);
  padding-top:24px;
  font-size:12px;
  color:var(--muted)
}

.floating-contact {
  position:fixed;
  right:24px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:40;
  display:flex;
  gap:12px
}

.floating-contact a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:56px;
  padding:12px 20px;
  border-radius:40px;
  color:#10100b;
  font-weight:600;
  box-shadow:0 6px 24px #0005;
  font-size:14px
}

.floating-contact a:hover {
  transform:translateY(-3px)
}

.whatsapp {
  background:#25d366
}

.call {
  background:var(--gold)
}


@media(max-width:1023px) {
  .container {
  padding-inline:24px
}

.section {
  padding-block:80px
}

.header-book {
  display:none
}

.menu-toggle {
  display:block;
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
  width:42px;
  height:42px;
  font-size:24px
}

.main-nav {
  display:none;
  position:absolute;
  top:80px;
  left:0;
  right:0;
  background:var(--bg);
  padding:20px 24px 32px;
  flex-direction:column;
  gap:0;
  border-bottom:1px solid var(--border)
}

.main-nav a {
  padding:14px 0;
  font:26px Cormorant,Georgia,serif;
  text-transform:none;
  letter-spacing:0;
  border-bottom:1px solid var(--border)
}

.menu-open .main-nav {
  display:flex
}

.hero-grid {
  gap:32px;
  padding-block:60px
}

.hero h1 {
  font-size:64px
}

.price-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.care-grid {
  gap:36px
}

.booking-grid {
  gap:32px
}

form {
  padding:26px
}

.location-grid {
  gap:30px
}


}


@media(max-width:767px) {
  .hero-grid,.care-grid,.booking-grid,.faq-grid,.location-grid {
  grid-template-columns:1fr
}

.hero-grid {
  padding-block:48px
}

.hero-image {
  aspect-ratio:4/5
}

.hero h1 {
  font-size:64px
}

.section-heading {
  display:block
}

.section-heading>p {
  margin-top:24px
}

.style-grid {
  grid-template-columns:1fr;
  gap:40px
}

.style-card:nth-child(2) {
  padding-top:0
}

.care-grid {
  gap:60px
}

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

.location-grid {
  padding-block:64px
}

.faq-grid {
  gap:30px
}

.booking-grid {
  gap:40px
}

.footer-grid {
  flex-direction:column
}

.floating-contact {
  right:16px;
  gap:10px
}

.floating-contact a {
  padding-inline:18px
}

.intro {
  font-size:14px
}

.service-strip {
  font-size:9px;
  gap:10px 12px
}


}


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

*,*:before,*:after {
  transition:none!important;
  animation:none!important
}


}



/* Five editorial cards: three above, two centered below. */
.style-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 44px 30px; }
.style-card { flex: 0 1 calc((100% - 60px) / 3); min-width: 0; }
@media (max-width: 1023px) and (min-width: 768px) {
  .style-card { flex-basis: calc((100% - 30px) / 2); }
  .style-card:nth-child(2) { padding-top: 0; }
}
@media (max-width: 767px) { .style-card { flex-basis: 100%; } }

/* Belgard team — monograms, brushed gold and dark walnut. */
.team-section { background: var(--ink); border-block: 1px solid var(--border); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.team-card { border: 1px solid var(--border); background: var(--card); }
.team-art { position: relative; min-height: 290px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 70% 20%, #8e6e3940, transparent 65%), repeating-linear-gradient(110deg, transparent 0 17px, #bf9b6008 18px 19px), #1b1510; }
.team-art::before { content: ''; position: absolute; width: 190px; height: 220px; border: 1px solid #bf9b6055; border-radius: 50% 50% 0 0; }
.team-art::after { content: ''; position: absolute; inset: 15px; border: 1px solid #bf9b6025; pointer-events: none; }
.team-number { position: absolute; top: 30px; left: 28px; color: var(--gold); font-size: 10px; letter-spacing: .2em; }
.team-initial { font: italic 150px/1 Cormorant, Georgia, serif; color: var(--gold); text-shadow: 0 8px 30px #0005; transition: transform .4s; }
.team-seal { position: absolute; bottom: 27px; text-transform: uppercase; font-size: 9px; letter-spacing: .22em; color: var(--muted); }
.team-card:hover .team-initial { transform: translateY(-5px); }
.team-card:nth-child(2) .team-art { background-color: #24201a; }
.team-card:nth-child(3) .team-art { background-color: #2b1b17; }
.team-info { padding: 28px; }
.team-role { color: var(--gold); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; min-height: 34px; }
.team-info h3 { font-size: 46px; margin: 6px 0 16px; }
.team-specialty { font-size: 12px; border-top: 1px solid var(--border); padding-top: 17px; }
.team-description { font-size: 13px; color: var(--muted); margin-top: 12px; min-height: 88px; }
.team-book { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--gold); }
.team-book span { font-size: 24px; }
.hero .premium-title { font-size: clamp(48px, 5.6vw, 76px); }
@media (min-width: 1024px) { .main-nav { gap: 22px; } }
@media (max-width: 1023px) { .team-grid { gap: 18px; } .team-info { padding: 22px; } .team-art { min-height: 260px; } }
@media (max-width: 767px) { .team-grid { grid-template-columns: 1fr; gap: 28px; } .team-art { min-height: 280px; } .team-description { min-height: 0; } .team-role { min-height: 0; } .hero .premium-title { font-size: 50px; } }

/* Team portraits supplied for the three named specialists. */
.team-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .6s; }
.team-card:hover .team-photo img { transform: scale(1.025); }

/* Split contact actions, matching Belgard's walnut and brass palette. */
.floating-contact {
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  justify-content: space-between;
  pointer-events: none;
}
.floating-contact a {
  pointer-events: auto;
  min-height: 56px;
  padding: 14px 22px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: #18100df5;
  color: var(--gold);
  box-shadow: 0 6px 24px #0006, inset 0 0 0 3px #bf9b6012;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.floating-contact .whatsapp { background: var(--gold); color: var(--ink); }
.floating-contact .call:hover { background: var(--gold); color: var(--ink); }
.floating-contact .whatsapp:hover { background: var(--text); color: var(--ink); }
.floating-contact a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.location-map { padding-bottom: 60px; }
.location-map iframe { display: block; width: 100%; height: 450px; background: var(--card); box-shadow: 0 10px 30px #0003; }
@media (max-width: 767px) {
  .floating-contact { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
  .floating-contact a { padding: 12px 16px; min-height: 52px; font-size: 10px; gap: 9px; }
  .location-map { padding-bottom: 40px; }
  .location-map iframe { height: 330px; }
}

/* Google reviews embedded through the owner's Elfsight widget. */
.reviews-section { background: var(--ink); border-top: 1px solid var(--border); }
.reviews-section .section-heading { align-items: center; }
.reviews-section [data-elfsight-app-lazy] { min-height: 180px; min-width: 0; }
@media (max-width: 767px) { .reviews-section .section-heading > a { margin-top: 24px; } }

/* Shared parking announcement and Moroccan bath page. */
.parking-banner { min-height:40px; padding:7px 20px; display:flex; align-items:center; justify-content:center; gap:12px; background:var(--gold); color:var(--ink); font-size:12px; letter-spacing:.04em; }
.parking-banner:hover { background:#d3b47e; color:var(--ink); }
.parking-icon,.parking-note span { display:inline-grid; place-items:center; width:23px; height:23px; border:1px solid currentColor; border-radius:4px; font-weight:700; font-size:15px; }
.parking-directions { margin-left:16px; font-size:11px; }
.parking-note { display:flex; align-items:center; gap:10px; color:var(--gold); font-size:13px; font-weight:600; margin-top:20px; }
.location .parking-note { color:inherit; }
html { scroll-padding-top:145px; }
.hero { padding-top:120px; }
.main-nav a[aria-current="page"] { color:var(--gold); }
.bath-promo,.bath-booking { background:var(--ink); border-block:1px solid var(--border); }
.bath-promo-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.bath-promo-symbol { display:block; color:var(--gold); font-size:85px; text-align:center; margin-bottom:24px; }
.bath-hero { padding:180px 0 70px; }
.bath-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:70px; }
.bath-hero .eyebrow { margin-top:38px; }
.bath-hero h1 { font-size:clamp(58px,7vw,96px); }
.bath-art { min-height:550px; padding:35px; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 30%,#72543655,transparent 70%),repeating-linear-gradient(45deg,#bf9b6008 0 1px,transparent 1px 22px),var(--card); border:1px solid var(--border); }
.bath-arch { width:100%; min-height:470px; border:1px solid #bf9b6080; border-radius:50% 50% 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 20px; box-shadow:0 0 0 12px #bf9b6008; }
.bath-art-star { font-size:35px; color:var(--gold); margin-bottom:24px; }
.bath-art-name { font:54px/1.05 Cormorant,Georgia,serif; }
.bath-art-label { color:var(--gold); font-size:10px; letter-spacing:.25em; margin-top:30px; }
.bath-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.bath-details article { padding:30px; border:1px solid var(--border); background:var(--card); }
.bath-details h3 { margin:25px 0 18px; font-size:36px; }
.bath-details article>p:last-child { color:var(--muted); font-size:14px; }
@media(min-width:1024px) and (max-width:1199px) { .main-nav { gap:12px; } .header-book { padding:14px; } .header-inner { gap:12px; } }
@media(max-width:1023px) { .main-nav { top:120px; } .bath-hero-grid { gap:32px; } .bath-art { min-height:450px; padding:24px; } .bath-arch { min-height:390px; } .bath-details { gap:16px; } .bath-details article { padding:22px; } }
@media(max-width:767px) { .parking-banner { font-size:11px; gap:9px; } .parking-directions { display:none; } .bath-hero { padding-top:155px; padding-bottom:40px; } .bath-hero-grid,.bath-details { grid-template-columns:1fr; } .bath-art { margin-top:20px; min-height:400px; } .bath-arch { min-height:340px; } .bath-art-name { font-size:46px; } .bath-promo-inner { align-items:flex-start; flex-direction:column; } .bath-promo-symbol { display:none; } }

/* Moroccan bath packages. */
.bath-package h3 { font-size:46px; }
.bath-package .bath-package-price { font:64px/1.1 Cormorant,Georgia,serif; color:var(--gold); margin:28px 0; }
.bath-package-price span { font:12px Jakarta,Arial,sans-serif; letter-spacing:.12em; }
.bath-package .button { width:100%; margin-top:12px; padding-inline:18px; }

/* Real Belgard rooms and dedicated massage page. */
.spa-hero-photo { margin:0; min-width:0; }
.spa-hero-photo img { width:100%; height:560px; object-fit:cover; border:1px solid var(--border); }
.spa-hero-photo figcaption { color:var(--muted); font-size:11px; margin-top:12px; }
.spa-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.spa-card { min-width:0; }
.spa-photo-frame { display:block; position:relative; width:100%; height:0; padding-top:100%; overflow:hidden; background:var(--ink); border:1px solid var(--border); }
.spa-card .spa-photo-frame img { position:absolute; inset:0; display:block; width:100%; height:100%; max-height:100%; object-fit:contain; object-position:center; }
.spa-card h3 { margin:24px 0 14px; font-size:36px; }
.spa-card p { color:var(--muted); font-size:13px; min-height:48px; margin-bottom:18px; }
.massage-packages { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:1024px) { .main-nav { gap:12px; } .main-nav a { font-size:10px; } .header-book { padding-inline:18px; } }
@media(max-width:767px) { .spa-grid,.massage-packages { grid-template-columns:1fr; } .spa-grid { gap:40px; } .spa-hero-photo img { height:auto; max-height:560px; } .spa-card p { min-height:0; } }