/* ============================================================
   HOSTING LEBANON - design system
   Source: "Hosting Lebanon Visual Identity Guidelines" (Sep 2026).

   Palette   Cedar Green #565440, Soft Ivory #efeeed, Limestone #d9d5cf
             (primary); Olive #888258 and Sand #c1a075 (secondary); plus
             the tints the guide derives from each.
   Type      Bodoni Moda for headlines and titles, Inter Light for body text
             and Inter Medium for subheadings. The guide names Breadley Sans
             and Blauer Nue, but both were supplied as personal-use / all-
             rights-reserved files with no commercial licence, so the agency
             that drew the identity picked these open-licensed stand-ins
             (Bodoni Moda as the closest look to the wordmark, Inter for text).
             Both are SIL Open Font License, free for commercial use and for
             self-hosting, and are served from fonts/.
   Rules     No gradients, no textures or grain, no colours outside the
             palette, no shadows or effects on the logo. The logo files in
             images/brand/ are the designer's vectors, never redrawn.
   Motif     The arch of the emblem: hero photo, eyebrow mark, favicon.
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primary palette */
  --cedar: #565440;
  --cedar-deep: #403e30;       /* hover state of cedar surfaces */
  --cedar-2: #7a7869;          /* tints */
  --cedar-3: #a9a79c;
  --cedar-4: #dcdbd6;
  --ivory: #efeeed;
  --ivory-2: #f4f3f2;
  --ivory-3: #f9f8f8;
  --limestone: #d9d5cf;
  --limestone-2: #e4e1dc;
  --limestone-3: #efedea;
  /* secondary palette */
  --olive: #888258;
  --olive-2: #a49f7f;
  --olive-3: #c3bfa9;
  --sand: #c1a075;
  --sand-2: #d4bd9e;
  --sand-3: #e6d8c6;
  /* third-party colour, used only on the WhatsApp control */
  --whatsapp: #1faa53;

  /* roles */
  --bg: var(--ivory);
  --surface: var(--ivory-3);
  --surface-2: var(--limestone-2);
  --ink: #1f1e19;
  --ink-soft: var(--cedar);
  --ink-faint: #6e6c5d;
  --line: var(--limestone);
  --line-strong: var(--cedar-3);
  --on-cedar: var(--ivory);
  --on-cedar-soft: var(--cedar-4);

  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --r-card: 1rem;
  --r-inner: 0.6rem;
  --r-input: 0.5rem;
  --nav-h: 4.5rem;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

strong, b { font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  vertical-align: -0.2em;
  flex: none;
}

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- typography ---------- */

h1, h2, h3 { font-weight: 500; line-height: 1.1; }

/* Headlines: Bodoni Moda, set in caps like the
   wordmark. The guide's subheads are half the headline height, body copy
   half its cap height; the scale below keeps roughly to that. */
.display,
.h2,
.detail__head h1,
.detail__body h2,
.band h2,
.modal__top h3,
.menu a {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.04;
  color: var(--ink);
}

.display { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
.display em {
  font-style: normal;
  color: var(--olive);
}

.h2 { font-size: clamp(1.75rem, 3.3vw, 2.5rem); }
.h3 { font-size: 1.25rem; font-weight: 500; }

.lede {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 34rem;
}

/* Small caps label with the arch mark in front, as on the guide's section pages. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.eyebrow::before {
  content: "";
  width: 0.8rem;
  height: 1rem;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M1.5 23.5V10.5a8.5 8.5 0 0 1 17 0v13z' fill='none' stroke='%23888258' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- brand marks (images/brand/*.svg, coloured with `color`) ---------- */

.brand-logo { display: block; color: var(--cedar); fill: currentColor; flex: none; }
.brand-logo--secondary { width: 6.62rem; height: 2.75rem; }      /* 211.94 x 88.13 */
.brand-logo--primary { width: 8.08rem; height: 9rem; }           /* 215.61 x 240.26 */
.brand-logo--mark { width: 2.4rem; height: 3.05rem; }            /* 40 x 50.66 */
.orn { display: block; width: 1.6rem; height: 1.6rem; fill: currentColor; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(239, 238, 237, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__pill {
  max-width: 76rem;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav__logo { display: block; color: var(--cedar); }
.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav__links a {
  display: inline-block;
  padding: 0.3rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--cedar); }

.nav__burger {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--cedar);
  cursor: pointer;
}
.nav__burger i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 1.5px;
  background: var(--ivory);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger i:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.nav__burger i:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  background: var(--cedar);
  color: var(--ivory);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu nav { display: grid; justify-items: center; gap: 2.2rem; }
.menu .brand-logo { color: var(--ivory); }
.menu ul { list-style: none; text-align: center; display: grid; gap: 1.3rem; }
.menu a {
  color: var(--ivory);
  font-size: 2rem;
  letter-spacing: 0.1em;
}
.menu li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.menu.is-open li { opacity: 1; transform: none; }
.menu.is-open li:nth-child(1) { transition-delay: 0.08s; }
.menu.is-open li:nth-child(2) { transition-delay: 0.14s; }
.menu.is-open li:nth-child(3) { transition-delay: 0.2s; }
.menu.is-open li:nth-child(4) { transition-delay: 0.26s; }
.menu.is-open li:nth-child(5) { transition-delay: 0.32s; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--cedar);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  background: var(--cedar);
  color: var(--on-cedar);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--cedar-deep); border-color: var(--cedar-deep); }
.btn:active { transform: scale(0.97); }
.btn__orb {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(239, 238, 237, 0.16);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.btn:hover .btn__orb { transform: translate(2px, -1px); background: rgba(239, 238, 237, 0.26); }
.btn--wa .btn__orb { background: var(--whatsapp); }
.btn--wa:hover .btn__orb { background: #23c05f; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--limestone-2); border-color: var(--cedar); }
.btn--ghost .btn__orb { background: var(--limestone-2); }
.btn--ghost:hover .btn__orb { background: var(--limestone); }

.btn--light {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--cedar);
}
.btn--light:hover { background: var(--ivory-3); border-color: var(--ivory-3); }
.btn--light .btn__orb { background: var(--limestone-2); }

/* ---------- sections ---------- */

.section { padding: 6.5rem 0; }
.section--tight { padding: 4.5rem 0; }
.section-head { margin-bottom: 3rem; max-width: 40rem; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head .lede { margin-top: 0.9rem; }

/* ---------- hero (home) ---------- */

.hero {
  padding: calc(var(--nav-h) + 4.5rem) 0 5rem;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 8fr);
  gap: 4rem;
  align-items: center;
}
.hero__copy .eyebrow { margin-bottom: 1.4rem; }
.hero__copy .lede { margin: 1.5rem 0 2.2rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* The photo sits in an arch, the emblem's shape: a semicircle over a
   4:5 rectangle. 50% of the width is 40% of that height, hence the radii. */
.hero__art { position: relative; padding: 0 1rem 1rem 0; }
.hero__art::before {
  content: "";
  position: absolute;
  inset: 1rem 0 0 1rem;
  background: var(--limestone);
  border-radius: 50% 50% var(--r-card) var(--r-card) / 40% 40% var(--r-card) var(--r-card);
}
.frame {
  position: relative;
  padding: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.frame img {
  border-radius: var(--r-inner);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__art .frame {
  aspect-ratio: 4 / 5;
  padding: 0.5rem;
  background: var(--ivory);
  border-color: var(--cedar-3);
  border-radius: 50% 50% var(--r-card) var(--r-card) / 40% 40% var(--r-card) var(--r-card);
}
.hero__art .frame img {
  border-radius: 50% 50% var(--r-inner) var(--r-inner) / 40% 40% var(--r-inner) var(--r-inner);
}
.hero__badge {
  position: absolute;
  left: -0.5rem;
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--cedar);
}
.hero__badge .icon { color: var(--whatsapp); width: 1.35em; height: 1.35em; }

/* ---------- property cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0.45rem;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.card__media {
  position: relative;
  border-radius: var(--r-inner) var(--r-inner) 0.4rem 0.4rem;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--limestone-2);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__price {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  background: rgba(86, 84, 64, 0.92);
  color: var(--ivory);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-weight: 500;
  font-size: 0.92rem;
}
.card__price small { font-weight: 300; opacity: 0.8; font-size: 0.8em; }
.card__price s { font-weight: 300; opacity: 0.7; font-size: 0.82em; margin-right: 0.15em; }
/* The stay's ornament, white on a cedar plate as on the guide's signage. */
.card__orn {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: rgba(86, 84, 64, 0.78);
  color: var(--ivory);
}
.card__orn .orn { width: 1.7rem; height: 1.7rem; }
.card__body { padding: 1.1rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card__title { font-size: 1.2rem; font-weight: 500; }
.card__meta {
  display: flex;
  gap: 1rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.card > a.card__cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* horizontal scroll variant (home featured) */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 24rem);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 1.25rem 1.8rem;
  margin: 0 -1.25rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .card { scroll-snap-align: start; }

/* ---------- amenity chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.chip--tag {
  background: var(--cedar);
  color: var(--ivory);
  border-color: var(--cedar);
}

/* ---------- how it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  counter-reset: step;
}
.step {
  position: relative;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.6rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.8rem;
  left: 0;
  background: var(--bg);
  padding-right: 0.8rem;
  font-weight: 500;
  color: var(--olive);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); font-size: 1rem; max-width: 24rem; }
.step .icon { color: var(--cedar); width: 1.7rem; height: 1.7rem; margin-bottom: 0.9rem; }

/* ---------- reviews ---------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.5rem;
}
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.6rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.review__stars { display: flex; gap: 0.15rem; color: var(--sand); }
.review__stars .icon { width: 1rem; height: 1rem; }
.review p { color: var(--ink); font-size: 1.02rem; }
.review footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.review footer strong { font-weight: 500; }
.review footer span { color: var(--ink-faint); font-size: 0.9rem; }

/* ---------- payment band ---------- */

.band {
  background: var(--cedar);
  color: var(--on-cedar);
  border-radius: var(--r-card);
  padding: 3.5rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
}
.band h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); color: var(--ivory); }
.band p { color: var(--on-cedar-soft); margin-top: 0.9rem; max-width: 30rem; }
.band__side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.payline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(239, 238, 237, 0.07);
  border: 1px solid rgba(239, 238, 237, 0.18);
  border-radius: var(--r-inner);
  padding: 0.9rem 1.2rem;
  width: 100%;
}
.payline .icon { width: 1.5rem; height: 1.5rem; color: var(--sand); }
.payline div { display: flex; flex-direction: column; }
.payline strong { font-size: 1.02rem; }
.payline span { font-size: 0.88rem; color: var(--on-cedar-soft); }

/* ---------- property detail ---------- */

.detail { padding: calc(var(--nav-h) + 3.5rem) 0 5rem; }
.detail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.detail__head h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.detail__orn { color: var(--cedar); margin-bottom: 1rem; }
.detail__orn .orn { width: 3.2rem; height: 3.2rem; }
.detail__loc { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-soft); font-weight: 400; margin-top: 0.5rem; }

.detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2.2rem;
  align-items: start;
}

.detail__body { display: flex; flex-direction: column; gap: 2.6rem; }
.detail__body h2 {
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.detail__body .prose { color: var(--ink-soft); max-width: 42rem; }
.detail__body .prose p + p { margin-top: 0.9rem; }

.amenity-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.6rem; }
.amenity-group h3 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); margin-bottom: 0.6rem; }
.detail-list { display: flex; flex-direction: column; gap: 0.5rem; color: var(--ink-soft); }
.detail-list li small { display: block; color: var(--ink-faint); font-size: 0.85rem; }
.detail-list li.is-unavailable { color: var(--ink-faint); text-decoration: line-through; }
.detail-list__note { margin-top: 0.3rem; color: var(--ink-faint); font-size: 0.92rem; }
.detail-list__note p + p { margin-top: 0.6rem; }

.gallery { position: relative; }
.gallery .frame { aspect-ratio: 16 / 10; }
.gallery .frame img { aspect-ratio: 16 / 10; }

.mapbox {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 8;
  background: var(--surface-2);
}
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }

/* booking card */
.book {
  position: sticky;
  top: calc(var(--nav-h) + 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 0.45rem;
}
.book__in {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.book__price { display: flex; align-items: baseline; gap: 0.4rem; }
.book__price strong { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.01em; }
.book__price span { color: var(--ink-faint); }
/* minmax(0,1fr) + min-width:0, or the date inputs' intrinsic width (the native
   picker is wide) shoves the second field out of the card and off the page. */
.book__dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); }
.field input, .field select {
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: 0.6rem 0.75rem;
  background: var(--ivory);
  width: 100%;
  min-width: 0;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(136, 130, 88, 0.22);
}
.book__total {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.book__total[hidden] { display: none; }
.book__total-row { display: flex; justify-content: space-between; }
.book__total-row[hidden] { display: none; }
.book__total-row--final {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line-strong);
  font-weight: 500;
  color: var(--ink);
}
.book__total strong { color: var(--ink); font-weight: 500; }
.book .btn { width: 100%; justify-content: space-between; }
.book__hint { font-size: 0.88rem; color: var(--ink-faint); text-align: center; }
.book__hint a { color: var(--olive); font-weight: 500; }
.linklike {
  background: none;
  border: none;
  font: inherit;
  font-weight: 500;
  color: var(--cedar);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.linklike:hover { color: var(--olive); border-color: var(--olive); }

/* ---------- inline availability calendar ---------- */

.cal {
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  padding: 0.7rem 0.6rem 0.5rem;
  background: var(--ivory);
}
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.cal__label { font-weight: 500; font-size: 0.95rem; }
.cal__nav {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: var(--ink);
}
.cal__nav .icon { width: 1rem; height: 1rem; }
.cal__nav:hover:not(:disabled) { background: var(--limestone-2); }
.cal__nav:disabled { opacity: 0.35; cursor: default; }
/* 7 x 1fr flexes from the 340px desktop sidebar to full-width static
   mobile without media queries; auto rows absorb 4-, 5- and 6-week months. */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 0.4rem;
}
.cal__dow {
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
  padding: 0.2rem 0;
}
.cal__day {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.82rem;
  aspect-ratio: 1;
  min-height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal__day:hover:not(:disabled) { background: var(--limestone-2); }
/* Pads are spans, so :disabled never matches them -- kill the hover too. */
.cal__day--pad,
.cal__day--pad:hover { background: none; cursor: default; }
.cal__day--off { color: var(--ink-faint); cursor: default; }
/* Same idiom as .detail-list .is-unavailable: faded plus struck through.
   A struck day can still be enabled -- it is a valid checkout morning for a
   stay that starts before the booking does. */
.cal__day--busy { color: var(--ink-faint); text-decoration: line-through; }
.cal__day--in,
.cal__day--out {
  background: var(--cedar);
  color: var(--ivory);
  text-decoration: none;
}
.cal__day--in:hover:not(:disabled),
.cal__day--out:hover:not(:disabled) { background: var(--cedar-deep); }
.cal__day--range { background: var(--limestone-2); border-radius: 0; }
.cal__day--today { box-shadow: inset 0 0 0 1px var(--olive); }
.cal__note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
}
.book__warn {
  font-size: 0.88rem;
  color: var(--olive);
  font-weight: 500;
  text-align: center;
}
/* [hidden] loses to the class's own display elsewhere in this file; be
   explicit, exactly as .book__total[hidden] above had to be. */
.book__warn[hidden] { display: none; }
.btn.is-disabled,
.linklike.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(31, 30, 25, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  width: min(46rem, 100%);
  max-height: 90dvh;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.6rem;
  transform: translateY(24px) scale(0.98);
  transition: transform 0.45s var(--ease);
}
.modal.is-open .modal__panel { transform: none; }
.modal__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.modal__top h3 { font-size: 1.4rem; }
.modal__close {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.modal__close:active { transform: scale(0.94); }
.modal__close:hover { background: var(--limestone-2); }
.calframe {
  border-radius: var(--r-inner);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  height: 24rem;
}
.calframe iframe { width: 100%; height: 100%; border: 0; }
.modal__foot {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.modal__foot p { font-size: 0.95rem; color: var(--ink-soft); max-width: 24rem; }
.qrbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: 0.55rem;
  line-height: 0;
}
.qrbox img, .qrbox canvas { border-radius: 0.3rem; width: 108px !important; height: 108px !important; }

/* ---------- contact / payment page ---------- */

.paycard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.paycard h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; }
.paycard h3 .icon { color: var(--olive); width: 1.4em; height: 1.4em; }
.copyline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ivory);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-input);
  padding: 0.8rem 1rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.maillink {
  color: var(--cedar);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sand);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.maillink:hover { text-decoration-color: var(--cedar); }
.copybtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cedar);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.copybtn:hover { background: var(--limestone-2); }
.copybtn:active { transform: scale(0.96); }
.copybtn.is-done { color: var(--whatsapp); border-color: rgba(31, 170, 83, 0.4); }
.paysteps { display: flex; flex-direction: column; gap: 0.7rem; list-style: none; }
.paysteps li { display: flex; gap: 0.7rem; color: var(--ink-soft); }
.paysteps .icon { color: var(--whatsapp); margin-top: 0.2rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
}

/* ---------- footer ---------- */

.footer {
  margin-top: 6rem;
  background: var(--cedar);
  color: var(--on-cedar-soft);
  padding: 4.5rem 0 2.5rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer h4 {
  color: var(--sand-2);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer__brand .brand-logo { color: var(--ivory); }
.footer__brand p { margin-top: 1.4rem; max-width: 22rem; color: var(--on-cedar-soft); }
.footer ul { list-style: none; display: grid; gap: 0.55rem; }
.footer a { color: var(--on-cedar-soft); transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--ivory); }
.footer__legal {
  border-top: 1px solid rgba(239, 238, 237, 0.16);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--cedar-3);
}

/* ---------- floating whatsapp ---------- */

.fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  border: 2px solid var(--ivory);
  transition: transform 0.4s var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab .icon { width: 1.7rem; height: 1.7rem; }

/* ---------- stay search (homepage + stays page) ---------- */

.searchbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 1rem;
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 1.3rem;
}
.searchbar .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 480px) {
  .searchbar { grid-template-columns: 1fr; }
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--cedar);
  color: var(--ivory);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0.7rem;
}
.search-chip button {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 999px;
  background: rgba(239, 238, 237, 0.2);
  color: inherit;
  cursor: pointer;
}
.search-chip button:hover { background: rgba(239, 238, 237, 0.32); }
.search-chip .icon { width: 0.85rem; height: 0.85rem; }
.search-note { color: var(--ink-faint); font-size: 0.88rem; margin: 0 0 1.4rem; }

/* ---------- filters (properties page) ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.4rem;
  align-items: center;
}
.filter-pill {
  font: inherit;
  font-weight: 400;
  font-size: 0.92rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.filter-pill:hover { border-color: var(--cedar); color: var(--ink); }
.filter-pill.is-active {
  background: var(--cedar);
  color: var(--ivory);
  border-color: var(--cedar);
}
.filters select {
  margin-left: auto;
  font: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  background: var(--surface);
  color: var(--ink);
}

.empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-soft);
}
.empty .icon { width: 2.2rem; height: 2.2rem; color: var(--ink-faint); margin-bottom: 0.8rem; }

/* ---------- page hero (inner pages) ---------- */

.pagehead {
  padding: calc(var(--nav-h) + 4rem) 0 3rem;
}
.pagehead .lede { margin-top: 1.2rem; }

/* ---------- reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .menu li, .menu, .card, .btn, .fab { transition: none; }
}

/* ---------- responsive ---------- */

/* Between the two-column breakpoint and a roomy desktop the booking aside is at
   its narrowest, and two date fields side by side clip the native dd/mm/yyyy
   text. Give each one the full width of the card instead. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .book__dates { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail__grid { grid-template-columns: 1fr; }
  .book { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__links { gap: 1.4rem; }
}

@media (max-width: 768px) {
  :root { --nav-h: 4rem; }
  .section { padding: 4.5rem 0; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__pill { padding: 0 1rem; }
  .brand-logo--secondary { width: 5.78rem; height: 2.4rem; }
  .hero { padding-top: calc(var(--nav-h) + 3rem); }
  .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__art { max-width: 24rem; margin: 0 auto; width: 100%; }
  .hero__badge { left: 0.6rem; bottom: 1.6rem; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2.6rem; }
  .band { grid-template-columns: 1fr; padding: 2.4rem 1.6rem; }
  .split { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .book__dates { grid-template-columns: 1fr; }
  .wrap { padding: 0 1rem; }
  .rail { grid-auto-columns: minmax(17rem, 85vw); padding: 0.5rem 1rem 1.5rem; margin: 0 -1rem; }
}

/* ---------- gallery thumbnails ---------- */

.gallery { min-width: 0; }
.detail__body { min-width: 0; }

.thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 5.5rem;
  max-width: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.7rem 0.2rem 0.2rem;
  scrollbar-width: thin;
}
.thumbs::-webkit-scrollbar { height: 6px; }
.thumbs::-webkit-scrollbar-thumb { background: var(--cedar-3); border-radius: 999px; }
.thumb {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { transform: translateY(-2px); }
.thumb.is-on { outline-color: var(--olive); }
/* The room name Airbnb files the photo under, from the CSV's image_tags column. */
.thumb__tag {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.3rem 0.4rem 0.25rem;
  font-size: 0.62rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ivory);
  text-align: left;
  background: rgba(31, 30, 25, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- main gallery photo (a button: tap for full screen) ---------- */

.gallery .frame {
  display: block;
  width: 100%;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  overflow: hidden;
}
.gallery .frame img { transition: transform 0.6s var(--ease); }
.gallery .frame:hover img { transform: scale(1.02); }
.frame__tag {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(86, 84, 64, 0.85);
  color: var(--ivory);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.frame__zoom {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(86, 84, 64, 0.85);
  color: var(--ivory);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery .frame:hover .frame__zoom { background: var(--olive); transform: scale(1.06); }
.frame__zoom .icon { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- full screen photo viewer ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(31, 30, 25, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__fig img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  border-radius: var(--r-inner);
  cursor: zoom-out;
  transform: scale(0.97);
  transition: transform 0.32s var(--ease);
}
.lightbox.is-open .lightbox__fig img { transform: none; }
.lightbox__cap {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--ivory);
}
.lightbox__cap span { font-size: 1.02rem; letter-spacing: 0.01em; }
.lightbox__cap small { color: var(--cedar-3); font-size: 0.82rem; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(239, 238, 237, 0.3);
  border-radius: 999px;
  background: rgba(239, 238, 237, 0.1);
  color: var(--ivory);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--olive); border-color: transparent; }
.lightbox__close:active,
.lightbox__nav:active { transform: scale(0.94); }
.lightbox__close { top: 1.1rem; right: 1.1rem; }
.lightbox__nav { top: 50%; margin-top: -1.45rem; }
.lightbox__nav--prev { left: 1.1rem; }
.lightbox__nav--next { right: 1.1rem; }
.lightbox .icon { width: 1.3rem; height: 1.3rem; fill: currentColor; }

@media (max-width: 640px) {
  /* Keep the arrows on the sides of the photo: the bottom corners belong to
     the floating WhatsApp button. */
  .lightbox__close,
  .lightbox__nav { width: 2.5rem; height: 2.5rem; }
  .lightbox__nav { margin-top: -1.25rem; }
  .lightbox__nav--prev { left: 0.6rem; }
  .lightbox__nav--next { right: 0.6rem; }
  .lightbox__close { top: 0.8rem; right: 0.8rem; }
  .lightbox__fig img { max-height: calc(100vh - 8rem); }
  .lightbox .icon { width: 1.15rem; height: 1.15rem; }
}