/* ============================================================
   SETHA ABOUT THE WORLD HOMESTAY — stylesheet
   ------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (look for these ALL-CAPS labels):
   1. FONTS + COLOURS  (change the look of the whole site here)
   2. BASE / RESET
   3. LAYOUT HELPERS
   4. HEADER
   5. HERO
   6. SETHA (story timeline)
   7. ROOMS
   8. RESTAURANT
   9. COOKING CLASS
   10. SERVICES
   11. REVIEWS
   12. FIND US (map)
   13. NEWSLETTER
   14. FOOTER
   15. ROOM DETAIL PAGES
   16. RESPONSIVE TWEAKS (phone / tablet / desktop)
   ============================================================ */

/* ---------- 1. FONTS + COLOURS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Karla:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Colours: named after real things in Setha's garden ---
     Want a different mood? Change these values and the
     whole site updates. */
  --cream:      #FBF4E6;   /* page background — warm plaster wall */
  --cream-deep: #F1E6D0;   /* card / section background, one shade deeper */
  --ink:        #2B2A1E;   /* main text colour — warm near-black */
  --ink-soft:   #5B5646;   /* secondary text colour */
  --leaf:       #3E6B49;   /* primary green — buttons, links, accents */
  --leaf-mid:   #345A3D;   /* button hover */
  --leaf-deep:  #223526;   /* dark green — footer background */
  --brick:      #B5583A;   /* terracotta, from the garden brick paths */
  --lotus:      #C64F73;   /* lotus-pond pink — used sparingly */
  --gold:       #C69A3C;   /* warm gold — stars, small flourishes */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius: 6px;
  --radius-lg: 14px;
  --shadow: 0 12px 30px -14px rgba(43, 42, 30, 0.35);
  --shadow-soft: 0 4px 16px -8px rgba(43, 42, 30, 0.28);
  --wrap: 1140px;
}

/* ---------- 2. BASE / RESET ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }
p { margin: 0 0 1em; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 10px;
}

section { padding: 84px 0; }
section.tight { padding: 56px 0; }

.section-head { max-width: 660px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }
.section-head p { color: var(--ink-soft); font-size: 18px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* FIX: colour is forced with higher specificity so the menu rule
   can never override it and make the button text invisible. */
a.btn-primary,
.btn-primary {
  background: var(--leaf);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
a.btn-primary:hover,
.btn-primary:hover { background: var(--leaf-mid); color: #fff; }

a.btn-outline,
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,.14); }

a.btn-outline.dark,
.btn-outline.dark { color: var(--ink); border-color: var(--ink); }
.btn-outline.dark:hover { background: rgba(43,42,30,.06); }

.btn-sm { padding: 10px 20px; font-size: 14px; }

/* Signature motif: a herringbone "brick path" divider.
   This echoes the real brick walkways in Setha's garden. */
.brick-divider {
  height: 18px;
  background-color: var(--cream-deep);
  background-image:
    repeating-linear-gradient(45deg,  var(--brick) 0 3px, transparent 3px 17px),
    repeating-linear-gradient(-45deg, var(--brick) 0 3px, transparent 3px 17px);
  opacity: .5;
}

/* ---------- 4. HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid rgba(43,42,30,.08);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand img { height: 50px; width: auto; }
.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* Menu links are uppercase and bold, as requested */
.main-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.main-nav a:hover { color: var(--leaf); }
/* the Book Now button inside the menu keeps its white text */
.main-nav a.btn { color: #fff; letter-spacing: .06em; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
}


/* ---------- LANGUAGE SWITCH (EN | FR) ---------- */
.lang-switch {
  display: inline-flex;
  border: 1.5px solid rgba(43,42,30,.28);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-switch button {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .08em;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.4;
}
.lang-switch button:hover { color: var(--leaf); }
.lang-switch button.is-on { background: var(--leaf); color: #fff; }

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--leaf-deep);
  overflow: hidden;
}
.hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* FIX: the dark shading now sits ON TOP of the photo, not under it.
   This is what makes the white text readable. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;              /* MUST be above the photo, or the photo hides it */
  background:
    linear-gradient(100deg, rgba(10,16,10,.92) 0%, rgba(10,16,10,.75) 40%, rgba(10,16,10,.34) 70%),
    linear-gradient(180deg, rgba(14,22,14,.3) 0%, rgba(8,13,8,.5) 45%, rgba(6,11,6,.86) 100%);
  /* TOO DARK? Lower the last number (.86) toward .6 and the photo shows more.
     TEXT HARD TO READ? Raise it toward .95. */
}
.hero-inner {
  position: relative;   /* keeps the text above the shading */
  z-index: 2;
  padding: 120px 24px 76px;
  max-width: 680px;
}
.hero .eyebrow { color: #E8D9A8; }
.hero h1 {
  color: #fff;
  font-size: clamp(34px, 6vw, 58px);
  margin-bottom: .4em;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
/* FIX: subtitle was 19px and too light — now bigger and stronger */
.hero p.lead {
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 500;
  color: #F4EEDF;
  max-width: 560px;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero .btn-outline { border-color: rgba(255,255,255,.9); color: #fff; }
.hero .btn-outline:hover { background: rgba(255,255,255,.16); }

/* Small trust strip under the hero buttons */
.hero-trust {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #E4EFE4;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(8,14,8,.55);
  padding: 5px 12px;
  border-radius: 999px;
}
.hero-trust span::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- 6. SETHA (story timeline) ---------- */
/* FIX: was ".story .wrap" which never matched, because "wrap" and
   "story" are on the SAME element. Now written as .wrap.story */
.wrap.story {
  display: grid;
  grid-template-columns: .95fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.story figure {
  position: relative;
  margin: 0;
  padding: 0 44px 44px 0;
  position: sticky;
  top: 110px;
}
.story figure img.main {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.story figure img.inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 7px solid var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(4deg);
}

/* The timeline */
.timeline {
  margin: 30px 0 0;
  padding: 0 0 0 30px;
  list-style: none;
  border-left: 2px solid rgba(62,107,73,.28);
}
.timeline li {
  position: relative;
  padding-bottom: 30px;
}
.timeline li:last-child { padding-bottom: 6px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--leaf);
  border: 3px solid var(--cream);
}
.timeline .year {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 4px;
}
.timeline p { margin: 0; color: var(--ink-soft); }

.story-pull {
  margin: 30px 0 0;
  padding: 24px 28px;
  background: var(--cream-deep);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- 7. ROOMS ---------- */
.stay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.stay-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;            /* needed for the whole-card click area */
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
/* Lift the card when the mouse is over it (or when a keyboard user
   tabs into it). Turn this off by deleting the two lines below. */
.stay-card:hover,
.stay-card:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 24px 46px -18px rgba(43, 42, 30, .45);
}
/* Slow zoom on the photo while hovering */
.stay-card .photo-strip img { transition: transform .55s ease; }
.stay-card:hover .photo-strip img { transform: scale(1.06); }

/* CLICK ANYWHERE ON THE CARD -> opens the room page.
   The "Room details" link is invisibly stretched over the whole card. */
.stay-card .stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* ...but the WhatsApp button sits on top, so it still opens WhatsApp.
   NOTE: :not(.stretched) matters — giving the stretched link position:relative
   would make its click area shrink to the button instead of the whole card. */
.stay-card .stay-card-actions .btn:not(.stretched) { position: relative; z-index: 2; }
/* the little "3 available" badge must not swallow the click */
.stay-card .unit-badge { pointer-events: none; }
/* IMPORTANT: the stretched link must never get a transform of its own.
   A transform would make its invisible click area shrink back down to
   the size of the button, so clicking the photo would stop working. */
.stay-card .stretched,
.stay-card .stretched:hover { transform: none; }
/* ONE photo per card. A single clean image, never cropped into pieces.
   The fixed aspect-ratio means tall phone photos and wide photos both
   fill the space neatly instead of overflowing. */
.stay-card .photo-strip {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
  flex-shrink: 0;
}
.stay-card .photo-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the "3 available" / "Only 1" badge */
.unit-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(34,53,38,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.unit-badge.only-one { background: var(--brick); }

/* FIX: card text now sits in its own block below the photos,
   never on top of them. */
.stay-card-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.stay-card-body h3 { font-size: 23px; margin-bottom: 4px; }
.stay-card-body .beds {
  font-size: 14.5px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 14px;
}
.stay-card-body p { color: var(--ink-soft); font-size: 15.5px; }

/* price: crossed-out original then the direct price */
.price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 4px;
}
.price-was {
  text-decoration: line-through;
  color: #9A9483;
  font-size: 16px;
  font-weight: 600;
}
.price-now {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--leaf);
  line-height: 1;
}
.price-unit { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.price-note { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 16px; }

.direct-flag {
  display: inline-block;
  background: rgba(62,107,73,.12);
  color: var(--leaf);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.stay-card-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.stay-note {
  margin-top: 40px;
  padding: 20px 24px;
  background: rgba(62,107,73,.09);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* ---------- 8. RESTAURANT ---------- */
/* FIX: was ".food .wrap" — same problem as the story section. */
.wrap.food {
  display: grid;
  grid-template-columns: .9fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.food-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
}
.food-photos img {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.food-photos img:first-child {
  grid-column: 1 / 3;
  aspect-ratio: 16 / 10;
}

.open-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.open-hours li {
  background: var(--cream);
  border: 1px solid rgba(43,42,30,.12);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
}
.open-hours li strong { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); margin-bottom: 2px; }

.everyone-flag {
  display: inline-block;
  background: var(--brick);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- 9. COOKING CLASS ---------- */
.cooking {
  background: var(--leaf-deep);
  color: #E7F0E7;
}
.cooking h2 { color: #fff; }
.wrap.cooking-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}
.cooking .eyebrow { color: var(--gold); }
.cooking p { color: #CFDCCF; }
.cooking-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 20px;
}
.cooking-price .amount {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.cooking-price .per { font-size: 15px; color: #CFDCCF; font-weight: 600; }
.cooking-list { margin: 0 0 22px; padding: 0; list-style: none; }
.cooking-list li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 9px;
  color: #DCE7DC;
  font-size: 15.5px;
}
.cooking-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.cooking-photo img {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow);
  width: 100%;
}

/* ---------- 10. SERVICES ---------- */
.services-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 44px;
}
.service-block {
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
}
.service-block.free { background: rgba(62,107,73,.10); }
.service-block h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 18px;
}
.service-list { margin: 0; padding: 0; list-style: none; }
.service-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(43,42,30,.09);
  font-size: 16px;
  font-weight: 600;
}
.service-list li:last-child { border-bottom: none; }
.service-list .icon { width: 22px; height: 22px; color: var(--leaf); flex-shrink: 0; }
.service-list .tag {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--brick);
  white-space: nowrap;
}
.service-list .tag.free-tag { color: var(--leaf); }

/* ---------- 11. REVIEWS ---------- */
.review-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.score-card {
  background: var(--leaf-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.score-card .score {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: #F1E9D6;
  line-height: 1;
}
.score-card .platform { font-weight: 800; letter-spacing: .05em; margin-top: 8px; }
.score-card .sub { font-size: 13.5px; color: #C9D6C9; margin-top: 6px; flex: 1; }
.score-card a {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  text-decoration: underline;
  color: #F1E9D6;
  font-weight: 600;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.quote-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}
.quote-card p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  margin-bottom: 10px;
}
.quote-card cite { font-style: normal; font-size: 14px; color: var(--ink-soft); font-weight: 700; }

/* ---------- 12. FIND US ---------- */
/* FIX: was ".findus .wrap" — same selector problem again. */
.wrap.findus {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 44px;
  align-items: stretch;
}
.findus-card {
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  padding: 34px;
}
.findus-card address { font-style: normal; font-size: 18px; margin-bottom: 8px; }
.findus-card .pluscode {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--brick);
  margin-bottom: 16px;
}
.findus-card .tuktuk { color: var(--ink-soft); }
.findus iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------- 13. NEWSLETTER ---------- */
.newsletter { background: var(--leaf); color: #fff; }
.newsletter .wrap { text-align: center; max-width: 620px; }
.newsletter h2 { color: #fff; }
.newsletter p { color: #E3EFE4; }
.newsletter-form {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input[type="email"] {
  flex: 1 1 260px;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
}
.newsletter-form button {
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---------- 14. FOOTER ---------- */
.site-footer {
  background: var(--leaf-deep);
  color: #DCE6DC;
  padding: 56px 0 30px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { height: 56px; }
.footer-brand span { font-family: var(--font-display); font-size: 19px; color: #fff; }

.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-links h5 {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FB39F;
  margin: 0 0 12px;
}
.footer-links a {
  display: block;
  text-decoration: none;
  color: #DCE6DC;
  font-size: 15px;
  margin-bottom: 8px;
}
.footer-links a:hover { color: #fff; }

.footer-bottom {
  padding-top: 24px;
  font-size: 13.5px;
  color: #9FB39F;
}

/* ---------- 15. ROOM DETAIL PAGES ---------- */
.room-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--leaf-deep);
  overflow: hidden;
}
.room-hero img.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Strong shading so the room name, the beds line and the "All rooms"
   link stay readable no matter how bright the photo behind them is. */
.room-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;              /* MUST be above the photo, or the photo hides it */
  background:
    linear-gradient(100deg, rgba(10,16,10,.88) 0%, rgba(10,16,10,.62) 48%, rgba(10,16,10,.3) 78%),
    linear-gradient(180deg, rgba(16,24,16,.5) 0%, rgba(8,13,8,.92) 100%);
}
.room-hero .wrap { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 52px; }
.room-hero h1 {
  color: #fff;
  font-size: clamp(30px, 5vw, 48px);
  margin-bottom: .2em;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.room-hero .beds-line {
  font-size: 17.5px;
  color: #F2F7F2;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #F0E4BC;
  background: rgba(10,16,10,.55);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.back-link:hover { color: #fff; background: rgba(10,16,10,.8); }

.wrap.room-layout {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 52px;
  align-items: start;
}

.room-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 34px;
}
.room-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.room-gallery img:first-child { grid-column: 1 / 3; aspect-ratio: 16 / 9; }

/* the booking box that sticks as you scroll */
.book-box {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 26px;
  position: sticky;
  top: 104px;
}
.book-box .unit-line {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 14px;
}

/* price table by number of guests */
.price-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.price-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(43,42,30,.14);
}
.price-table th:last-child, .price-table td:last-child { text-align: right; }
.price-table td {
  padding: 12px 0;
  border-bottom: 1px solid rgba(43,42,30,.08);
  font-size: 15.5px;
}
.price-table tr:last-child td { border-bottom: none; }
.price-table .guests { font-weight: 600; }
.price-table .was { text-decoration: line-through; color: #9A9483; font-size: 14px; margin-right: 8px; }
.price-table .now { font-weight: 800; color: var(--leaf); font-size: 17px; }

.book-box .btn { width: 100%; margin-bottom: 10px; }
.book-box .small-print { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; text-align: center; }

.room-facts { margin: 0 0 30px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.room-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  padding: 8px 0;
}
.room-facts .icon { width: 20px; height: 20px; color: var(--leaf); flex-shrink: 0; }

/* ---------- 16. RESPONSIVE TWEAKS ---------- */
@media (max-width: 1000px) {
  .stay-grid { grid-template-columns: 1fr 1fr; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 13px; letter-spacing: .06em; }
}

@media (max-width: 900px) {
  .wrap.story,
  .wrap.food,
  .wrap.findus,
  .wrap.cooking-inner,
  .wrap.room-layout { grid-template-columns: 1fr; }

  /* must stay "relative" (not static) or the small inset photo
     escapes and floats over the hero on phones */
  .story figure { position: relative; top: auto; order: -1; }
  .food-photos { order: 2; }
  .cooking-photo { order: -1; }

  .stay-grid { grid-template-columns: 1fr; }
  .review-scores { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .services-split { grid-template-columns: 1fr; }
  .book-box { position: static; }
}

@media (max-width: 640px) {
  section { padding: 56px 0; }
  .wrap { padding: 0 18px; }

  .main-nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 18px 18px;
    border-bottom: 1px solid rgba(43,42,30,.08);
    display: none;
    box-shadow: var(--shadow-soft);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 0; width: 100%; border-bottom: 1px solid rgba(43,42,30,.06); font-size: 14px; }
  .main-nav .btn { margin-top: 10px; }
  .lang-switch { margin-top: 12px; align-self: flex-start; }
  .nav-toggle { display: block; }
  .brand span { display: none; }

  .hero { min-height: 90vh; }
  .hero-inner { padding: 100px 18px 56px; }
  .hero-actions { flex-direction: column; align-items: stretch; }

  .room-facts { grid-template-columns: 1fr; }
  .room-gallery { grid-template-columns: 1fr; }
  .room-gallery img:first-child { grid-column: auto; }
  .footer-top { flex-direction: column; }
  .footer-links { gap: 32px; }
}