/* OurWelcomeHome — shared styles
   Palette: ivory ground, charcoal ink, coral accent (from the logo star), blush tint. */
:root {
  --ivory: #FAF6F1;
  --blush: #F6ECE7;
  --ink: #221D19;
  /* was #7D7268 — only 4.4:1 on the ivory ground, under the 4.5 minimum for the
     small labels it's used on. #6F665E reads the same but clears it at 5.2:1 */
  --stone: #6F665E;
  --coral: #C95F54;
  --coral-deep: #A94C43;
  --line: #E7DCD1;
  --white: #FFFFFF;
  --body: #4A423B;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* the sticky header is 84px (64 on phones), so anything an anchor jumps to lands
   underneath it — the heading disappears and the reader starts mid-sentence */
h1[id], h2[id], h3[id], section[id], div[id], footer[id] { scroll-margin-top: 100px; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Karla', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
/* Cormorant defaults to old-style figures, which turn the 1 in "Top 1% 1BR" into
   something close to a lowercase i, and leave stat tiles bobbing up and down */
h1, h2, h3,
.fact .n, .dist b, .price-card .amt, .refund .pct, .facts-strip .v, .home-meta {
  font-variant-numeric: lining-nums;
}
a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--coral-deep); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--coral);
}
.eyebrow svg { flex: none; }

.btn {
  display: inline-block; padding: 12px 26px; border-radius: 3px;
  background: var(--coral); color: var(--white); font-weight: 700; font-size: 14.5px;
  letter-spacing: 0.03em; border: none; cursor: pointer; transition: background .18s ease;
}
.btn:hover { background: var(--coral-deep); color: var(--white); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--ivory); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ---------- nav ---------- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 246, 241, 0.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 84px; }
.brand { display: flex; align-items: center; order: 0; }
.brand img { height: 68px; width: auto; }
.nav-links { display: flex; gap: 22px; margin-inline-start: auto; font-size: 14.5px; font-weight: 500; order: 1; }
.nav-links a { color: var(--ink); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--coral); }
.nav .btn { padding: 9px 20px; order: 2; }
.nav-toggle { display: none; order: 3; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 4px; }
.nav-toggle svg { display: block; }

/* ---------- page head (interior pages) ---------- */
.page-head { background: var(--blush); border-bottom: 1px solid var(--line); padding: 36px 0 32px; }
.page-head h1 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 10px; }
.page-head p.lead { max-width: 62ch; color: var(--body); margin: 12px 0 0; font-size: 16px; }
/* a page head that carries a photo: copy left, image right */
.page-head .head-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.page-head .head-art img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  border-radius: 4px; border: 1px solid rgba(34,29,25,0.08);
  box-shadow: 0 14px 30px -18px rgba(34,29,25,0.4);
}

/* ---------- prose ---------- */
.prose { padding: 40px 0 52px; }
.prose h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: 'Karla', sans-serif; font-size: 16.5px; font-weight: 700; margin: 22px 0 7px; }
.prose p, .prose li { color: var(--body); }
.prose p { margin: 0 0 12px; max-width: 70ch; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; max-width: 70ch; }
.prose li { margin-bottom: 5px; }
.prose .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.note-box { background: var(--blush); border: 1px solid var(--line); border-radius: 4px; padding: 16px 20px; max-width: 70ch; }

/* ---------- booking widget ---------- */
.booking-embed {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px; box-shadow: 0 16px 34px -22px rgba(34,29,25,0.4);
}
/* At rest the frame is just tall enough for Smoobu's search row; it grows to clear
   the open date picker (195x196, bottoming out near 305px) while the frame has
   focus — see site.js. A cross-origin dropdown can't overflow onto our page, so
   resizing the frame is the only way to avoid dead white space under the form. */
.booking-embed iframe {
  width: 100%; border: 0; display: block; height: 170px;
  transition: height .2s ease;
}
.booking-embed.is-open iframe { height: 320px; }
.booking-note { text-align: center; font-size: 12.5px; color: var(--stone); margin-top: 10px; }

/* ---------- home hero ---------- */
.hero { position: relative; }
.hero-img { width: 100%; height: 440px; object-fit: cover; object-position: center 62%; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(34,29,25,0.64) 0%, rgba(34,29,25,0.36) 46%, rgba(34,29,25,0.06) 75%);
}
.hero-copy { position: absolute; inset: 0; display: flex; align-items: center; }
.hero-copy .inner { max-width: 600px; color: var(--ivory); }
.hero-copy .eyebrow { color: #F4C9C2; }
.hero-copy h1 { font-size: clamp(29px, 4.2vw, 50px); color: var(--white); margin: 12px 0 14px; }
.hero-copy p { font-size: 16px; max-width: 50ch; margin: 0 0 22px; color: rgba(255,255,255,0.92); }

.book-band { position: relative; margin-top: -44px; z-index: 5; }

/* ---------- intro ---------- */
.intro { padding: 48px 0 44px; }
.intro-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
.intro h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 12px 0 14px; }
.intro-grid p { margin: 0 0 12px; color: var(--body); max-width: 56ch; }
.intro-art img { border-radius: 4px; border: 1px solid var(--line); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.intro-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.fact .n { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1; }
.fact .l { font-size: 12px; color: var(--stone); margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; }

/* ---------- properties ---------- */
.homes { background: var(--blush); padding: 48px 0 52px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sec-head h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 10px; }
.sec-head .more { font-weight: 700; font-size: 14.5px; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.home-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.home-card:hover { box-shadow: 0 14px 30px -16px rgba(34,29,25,0.25); transform: translateY(-2px); }
.home-card img { height: 230px; width: 100%; object-fit: cover; }
/* the one that is not bookable yet spans the row, so an odd card count never strands a cell */
.home-card--next { grid-column: 1 / -1; }
@media (min-width: 641px) {
  .home-card--next { flex-direction: row; }
  .home-card--next .shot { width: 46%; flex: none; display: block; }
  .home-card--next img { height: 100%; min-height: 252px; }
  .home-card--next .home-body { justify-content: center; }
}
.home-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.home-loc { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.home-body h3 { font-size: 23px; font-weight: 600; }
.home-meta { display: flex; gap: 12px; color: var(--stone); font-size: 14px; }
/* what actually separates one flat from another — the names alone don't */
.home-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.home-points li { position: relative; padding-left: 15px; font-size: 14px; color: var(--body); line-height: 1.4; }
.home-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--coral);
}
.home-body .cta { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 14.5px; }

/* ---------- quote band ---------- */
.band { position: relative; }
.band img { width: 100%; height: 250px; object-fit: cover; object-position: center 55%; }
.band-veil { position: absolute; inset: 0; background: rgba(34,29,25,0.42); display: flex; align-items: center; }
.band-veil blockquote { margin: 0 auto; max-width: 740px; padding: 0 28px; text-align: center; color: var(--white); font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(20px, 2.6vw, 30px); font-style: italic; line-height: 1.4; }

/* ---------- reviews ---------- */
.reviews { padding: 48px 0; }
.reviews h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 10px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 28px; }
.review { border-top: 2px solid var(--coral); padding-top: 20px; }
.stars { color: var(--coral); letter-spacing: 3px; font-size: 14px; }
.review p { color: var(--body); font-size: 15px; margin: 12px 0 14px; }
.review .who { font-weight: 700; font-size: 14.5px; }
.review .when { color: var(--stone); font-size: 13px; }

/* ---------- faq ---------- */
.faq { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; }
.faq h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 10px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; margin-top: 22px; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-item h3 { font-family: 'Karla', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.faq-item p { margin: 0; color: var(--body); font-size: 14.5px; }
.faq-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- property detail ---------- */
.prop-hero { width: 100%; height: 360px; object-fit: cover; }
.prop-head { padding: 28px 0 6px; }
.prop-head h1 { font-size: clamp(26px, 3.2vw, 40px); margin-top: 10px; }
.prop-meta { display: flex; gap: 14px; color: var(--stone); font-size: 14.5px; margin-top: 8px; flex-wrap: wrap; }
.prop-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 22px 0 44px; align-items: start; }
.prop-desc p { color: var(--body); max-width: 58ch; margin: 0 0 12px; }
.prop-desc ul { color: var(--body); padding-left: 18px; margin: 0 0 12px; }
.prop-desc li { margin-bottom: 4px; }
.prop-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prop-gallery img { border-radius: 3px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.prop-book { padding: 0 0 52px; }
.prop-book h2 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 16px; }

/* ---------- interior page furniture ----------
   These pages were walls of stacked text. The rules below give them the same
   vocabulary as the home page: tiles for figures, cards for grouped facts,
   chips for lists, and collapsible blocks for the long legal sections. */

/* a strip of key figures / facts */
.facts-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; margin: 0 0 34px;
}
.facts-strip div { background: var(--white); padding: 16px 18px; }
.facts-strip .k {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 5px;
}
.facts-strip .v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; line-height: 1.15; }

/* distances — the strongest argument for the location */
/* six tiles: 3x2 fills evenly, auto-fit left one stranded on its own row */
.dist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 8px; }
.dist {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
}
.dist b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1; color: var(--coral); }
.dist span { font-size: 14px; color: var(--body); line-height: 1.35; }
.dist small { font-size: 11.5px; color: var(--stone); letter-spacing: 0.06em; text-transform: uppercase; }

/* cards carrying an icon + a short point */
.icon-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.icon-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px; }
.icon-card svg { color: var(--coral); margin-bottom: 10px; }
.icon-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.icon-card p { margin: 0; font-size: 14.5px; color: var(--body); line-height: 1.5; }

/* chips for flat lists (amenities, apps) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.chips li {
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; font-size: 14px; color: var(--body);
}
.chips.plain li { background: var(--blush); border-color: transparent; }

/* priced extras */
.price-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; }
.price-card .amt { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; color: var(--coral); line-height: 1; }
.price-card h3 { font-family: 'Karla', sans-serif; font-size: 15.5px; font-weight: 700; margin: 8px 0 5px; }
.price-card p { margin: 0; font-size: 14px; color: var(--body); line-height: 1.45; }

/* refund timeline */
.refund { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.refund div { border-left: 3px solid var(--coral); background: var(--white); padding: 14px 18px; border-radius: 0 4px 4px 0; }
.refund .pct { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; line-height: 1; margin-bottom: 5px; }
.refund p { margin: 0; font-size: 14px; color: var(--body); line-height: 1.45; }
.refund .none { border-left-color: var(--stone); }

/* numbered house rules */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; counter-reset: rule; }
.rules li {
  counter-increment: rule; background: var(--white); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 16px 14px 46px; position: relative;
  font-size: 14.5px; color: var(--body); line-height: 1.45;
}
.rules li::before {
  content: counter(rule); position: absolute; left: 14px; top: 13px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--blush);
  color: var(--coral); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* collapsible blocks for the long legal text */
details.acc { border: 1px solid var(--line); border-radius: 4px; background: var(--white); margin-bottom: 10px; }
details.acc + details.acc { margin-top: 0; }
details.acc > summary {
  cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 15.5px;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone);
  transform: rotate(45deg); transition: transform .18s ease;
}
details.acc[open] > summary::after { transform: rotate(-135deg); }
details.acc > summary:hover { color: var(--coral); }
details.acc .acc-body { padding: 0 18px 16px; }
details.acc .acc-body p:last-child, details.acc .acc-body ul:last-child { margin-bottom: 0; }

/* instagram band */
.ig-band { background: var(--blush); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; }
/* Instagram's embed will not render below ~326px wide, so the posts take the full
   container and the copy sits above them rather than stealing a column */
.ig-grid { display: block; }
.ig-copy { max-width: 62ch; margin-bottom: 24px; }
.ig-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ig-posts iframe {
  width: 100%; height: 500px; border: 0; display: block;
  background: var(--white); border-radius: 4px;
}
.ig-copy h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 10px 0 8px; }
.ig-copy p { margin: 0 0 14px; color: var(--body); font-size: 15px; max-width: 40ch; }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 4px; }
.team-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.team-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.team-card .body { padding: 18px 20px 20px; }
.team-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; margin: 0 0 3px; }
.team-card .role { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-bottom: 9px; }
.team-card p { margin: 0; color: var(--body); font-size: 14.5px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 24px 26px; }
.contact-card h3 { font-family: 'Karla', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; color: var(--stone); }
.contact-card p { margin: 0 0 16px; font-size: 16px; }
.contact-card p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: #CFC5BB; padding: 40px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot-brand img { height: 78px; width: auto; }
.foot-brand p { font-size: 14px; max-width: 40ch; margin: 12px 0 0; }
footer.site h4 { color: var(--white); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; }
.foot-links { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.foot-links a { color: #CFC5BB; }
.foot-links a:hover { color: var(--white); }
.foot-base { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 30px; padding-top: 18px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; color: #9A9089; flex-wrap: wrap; }

/* ---------- tablet ---------- */
@media (max-width: 1040px) {
  .nav-links { gap: 16px; font-size: 14px; }
  .brand img { height: 60px; }
  /* three across would drop each embed under Instagram's minimum width */
  .ig-posts { grid-template-columns: 1fr; gap: 14px; }
  .ig-posts iframe { max-width: 420px; margin: 0 auto; }
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 20px; }
  h1[id], h2[id], h3[id], section[id], div[id], footer[id] { scroll-margin-top: 78px; }

  .nav { height: 64px; gap: 10px; }
  .brand img { height: 46px; }
  .nav .btn { margin-inline-start: auto; padding: 8px 16px; font-size: 13.5px; }
  .nav-toggle { display: block; padding: 6px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ivory); border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 0; padding: 4px 20px 12px; margin-left: 0;
    box-shadow: 0 12px 24px -14px rgba(34,29,25,0.3);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
  .nav-links a:last-child { border-bottom: none; }

  .hero-img { height: 340px; object-position: center 58%; }
  .hero-veil { background: linear-gradient(rgba(34,29,25,0.48), rgba(34,29,25,0.58)); }
  .hero-copy h1 { margin: 10px 0 10px; }
  .hero-copy p { font-size: 15px; margin-bottom: 18px; }
  .book-band { margin-top: -22px; }

  .intro { padding: 32px 0 30px; }
  .intro-grid { grid-template-columns: 1fr; gap: 20px; }
  /* one wide column would blow the illustration up — cap it instead,
     anchored high so the crop keeps faces rather than knees */
  .intro-art img { aspect-ratio: auto; height: 240px; object-position: center 25%; }
  .intro-facts { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; padding-top: 18px; }
  .fact .n { font-size: 27px; }

  .homes { padding: 34px 0 38px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .home-grid { gap: 16px; }
  .home-card img { height: 190px; }
  .home-body h3 { font-size: 21px; }

  .band img { height: 190px; }
  .reviews { padding: 34px 0; }
  .review-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 22px; }
  .faq { padding: 34px 0; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq-cta .btn { flex: 1 1 auto; text-align: center; }

  .page-head { padding: 26px 0 24px; }
  .page-head .head-grid { grid-template-columns: 1fr; gap: 20px; }
  .page-head .head-art img { aspect-ratio: auto; height: 180px; object-position: center 55%; }
  /* the fields stack into rows here, so the form itself is already tall */
  .booking-embed iframe { height: 300px; }
  .booking-embed.is-open iframe { height: 350px; }
  .prose { padding: 30px 0 40px; }
  .prose .cols2, .contact-grid, .prop-body, .team-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: 1fr; gap: 20px; }
  .ig-posts { grid-template-columns: 1fr; gap: 12px; }
  .ig-posts iframe { height: 480px; }
  .facts-strip { grid-template-columns: 1fr 1fr; margin-bottom: 26px; }
  .facts-strip div:last-child { grid-column: 1 / -1; }  /* 5 facts, 2 columns */
  .dist-grid, .icon-cards, .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-cards { gap: 14px; }

  .team-grid { gap: 16px; }
  .team-card img { aspect-ratio: auto; height: 240px; object-position: center 25%; }
  .contact-grid { gap: 16px; }

  .prop-hero { height: 230px; }
  .prop-body { gap: 26px; padding: 18px 0 32px; }
  .prop-book { padding-bottom: 38px; }

  footer.site { padding: 32px 0 22px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-brand img { height: 64px; }
  .foot-base { margin-top: 24px; }
}

/* one column once two would be too narrow to read */
@media (max-width: 560px) {
  .dist-grid, .icon-cards, .price-cards, .refund, .rules { grid-template-columns: 1fr; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .home-grid { grid-template-columns: 1fr; }
  /* narrow enough that the natural 3:2 shape is the right size again */
  .team-card img, .intro-art img { aspect-ratio: 3/2; height: auto; object-position: center; }
  .hero-img { height: 300px; }
  .home-card img { height: 180px; }
  .band img { height: 165px; }
  .prop-gallery { gap: 10px; }
  .booking-embed iframe { height: 330px; }
  .booking-embed.is-open iframe { height: 370px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-card, .btn, .booking-embed iframe { transition: none; }
}

/* =========================================================
   HOME PAGE v2 — the warm, playful pass
   Everything below is additive: it only touches the home page's new
   components, plus a couple of shared pieces (.more, softer corners).
   Interior pages keep the styles they already had.
   ========================================================= */

/* Photo-carrying pieces get a softer corner than the 4px used elsewhere —
   rounder reads friendlier, and it is the cheapest playfulness on the page. */
.home-card, .hello-art img, .direct-card, .drive-note { border-radius: 10px; }

/* the arrow text link, previously only styled inside .sec-head */
.more {
  display: inline-block; font-weight: 700; font-size: 14.5px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap;
}

/* ---------- hero ---------- */
/* taller than v1: the hero now carries a button row and a proof badge */
.hero-img { height: 500px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* a white wash over a bright lawn photo turns olive — a dark scrim keeps the
   label legible wherever the hero image happens to be light */
.btn.light {
  background: rgba(34,29,25,0.34); color: var(--white);
  border: 1px solid rgba(255,255,255,0.7); backdrop-filter: blur(4px);
}
.btn.light:hover { background: var(--white); color: var(--ink); }
.hero-badge {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: rgba(255,255,255,0.95);
  background: rgba(34,29,25,0.45); border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px; padding: 7px 16px; backdrop-filter: blur(4px);
}
.hero-badge b { font-weight: 700; }
.hero-badge .hb-star { color: #F4C9C2; }

/* ---------- hello / hosts ---------- */
.hello { padding: 54px 0 46px; }
.hello-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.hello-art img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  border: 1px solid var(--line); box-shadow: 0 22px 44px -26px rgba(34,29,25,0.5);
}
.hello-copy h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 12px 0 8px; }
.hello-copy p { color: var(--body); margin: 0 0 12px; max-width: 54ch; }
/* the Arabic welcome sits in its own RTL block — no Latin inside it to flip */
.hello-copy p.ar {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px;
  color: var(--coral); margin: 0 0 14px;
}
.chip-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 18px; }
.chip-facts li {
  background: var(--blush); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; color: var(--body);
}

/* ---------- numbers band ----------
   A dark band between two ivory sections. The page needed a beat of contrast
   somewhere, and the proof numbers are what deserve it. */
.nums-band { background: var(--ink); padding: 32px 0; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.num b {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 44px; font-weight: 600; line-height: 1; color: var(--white);
  font-variant-numeric: lining-nums;
}
.num b span { font-size: 21px; color: #E79086; }
.num .l { display: block; margin-top: 8px; font-size: 13px; color: #C9BFB6; line-height: 1.4; }

/* ---------- homes ---------- */
.sec-sub { color: var(--body); margin: 10px 0 0; max-width: 62ch; font-size: 15px; }
/* the image is a link now, so the zoom has something to be clipped by */
.shot { display: block; position: relative; overflow: hidden; }
.shot img { transition: transform .5s ease; }
.home-card:hover .shot img { transform: scale(1.05); }
.home-tag {
  position: absolute; left: 12px; top: 12px;
  background: var(--coral); color: var(--white); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px;
}
.home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.home-body h3 { font-size: 26px; }
.home-official {
  font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--stone); margin-top: 5px; line-height: 1.35;
}
.home-rate { flex: none; text-align: right; }
.home-rate b {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 23px; line-height: 1; color: var(--coral); font-variant-numeric: lining-nums;
}
.home-rate span { font-size: 11.5px; color: var(--stone); white-space: nowrap; }
.home-hook { margin: 4px 0 0; color: var(--body); font-size: 15px; line-height: 1.5; }
/* three facts and two separators do not fit one line on a narrow card */
.home-meta { flex-wrap: wrap; row-gap: 2px; }
.home-price { font-size: 14px; color: var(--stone); }
.home-price b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: var(--ink); font-variant-numeric: lining-nums; }

/* ---------- drive times ---------- */
.drive { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0 46px; }
.drive h2 { font-size: clamp(26px, 3vw, 38px); margin: 10px 0 24px; max-width: 30ch; }
/* four tiles here, not the six the area guide carries */
.drive .dist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.drive .dist { background: var(--blush); border-color: transparent; }
.drive-note {
  margin-top: 22px; background: var(--blush); padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.drive-note p { margin: 0; color: var(--body); font-size: 15px; max-width: 68ch; }

/* ---------- quote band ---------- */
.band-veil blockquote cite {
  display: block; margin-top: 14px; font-family: 'Karla', sans-serif; font-style: normal;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.82);
}

/* ---------- reviews ---------- */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.reviews-head h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 10px; }
.rev-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--blush); border: 1px solid var(--line); color: var(--coral);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600;
}
.review p { margin: 10px 0 0; }

/* ---------- book direct ---------- */
.direct { padding: 48px 0; }
.direct h2 { font-size: clamp(26px, 3vw, 38px); margin: 10px 0 24px; }
.direct-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.direct-card {
  background: var(--white); border: 1px solid var(--line); padding: 24px 26px;
  box-shadow: 0 16px 34px -26px rgba(34,29,25,0.45);
}
/* the Airbnb side is deliberately quieter — dashed, unshadowed, no button */
.direct-card.alt { background: transparent; box-shadow: none; border-style: dashed; }
.direct-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 600; margin: 0 0 14px; }
.direct-card ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.direct-card li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--body); line-height: 1.45; }
.direct-card li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--coral); font-weight: 700; }
.direct-card.alt li::before { content: "\2013"; color: var(--stone); }
.direct-card.alt ul { margin-bottom: 14px; }
.direct-note { margin: 18px 0 0; color: var(--stone); font-size: 14px; }

/* ---------- reveal on scroll ----------
   The hidden state only exists once site.js has marked the document, so a
   blocked or broken script leaves the page fully visible rather than blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- tablet ---------- */
@media (max-width: 1040px) {
  .nums { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .drive .dist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  /* On a phone the hero copy is taller than any fixed image height, and the
     absolute overlay would spill over the booking card. Stack image, veil and
     copy in one grid cell instead, so the section grows to fit the words. */
  .hero { display: grid; }
  .hero-img, .hero-veil, .hero-copy { grid-area: 1 / 1; }
  .hero-img { height: 100%; min-height: 360px; }
  .hero-veil { position: static; }
  .hero-copy { position: static; padding: 26px 0 40px; }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
  .hero-badge { margin-top: 14px; font-size: 12.5px; padding: 6px 13px; }

  .hello { padding: 34px 0 30px; }
  .hello-grid { grid-template-columns: 1fr; gap: 22px; }
  .hello-art img { aspect-ratio: auto; height: 240px; object-position: center 25%; }

  .nums-band { padding: 26px 0; }
  .nums { grid-template-columns: 1fr 1fr; gap: 20px; }
  .num b { font-size: 34px; }
  .num b span { font-size: 17px; }
  .num .l { font-size: 12.5px; }

  .home-body h3 { font-size: 23px; }
  /* side by side, the name gets squeezed into a three-line column — stack the
     rating under it and let the title have the full width of the card */
  .home-top { flex-direction: column; gap: 4px; }
  .home-rate { text-align: left; display: flex; align-items: baseline; gap: 6px; }
  .home-rate b { font-size: 19px; }
  .home-official { margin-top: 2px; }

  .drive { padding: 34px 0 32px; }
  .drive-note { padding: 16px 18px; }
  .drive-note p { font-size: 14.5px; }

  .reviews-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .direct { padding: 34px 0; }
  .direct-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* still the stacked-grid hero — only the floor changes */
  .hero-img { height: 100%; min-height: 320px; }
  .hello-art img { aspect-ratio: 3/2; height: auto; object-position: center; }
  .drive .dist-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .shot img { transition: none; }
}

/* ---------- card footer: price + link on one line ---------- */
.home-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.home-foot .cta { margin-top: 0; padding-top: 0; }
/* the official listing name moved below the hook — it is for recognition and
   search, not for reading, so it sits quietly above the price line */
.home-official { margin-top: 10px; }

/* ---------- the price comparison ----------
   Two tiles, ours lit and theirs plain. This is the single most persuasive
   thing on the page, so it goes above the two lists, not inside them. */
.price-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; margin: 0 0 24px; }
.pc {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.pc-win { border-color: var(--coral); box-shadow: 0 16px 34px -26px rgba(201,95,84,0.8); }
.pc-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
.pc-v {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; line-height: 1;
  font-variant-numeric: lining-nums; color: var(--stone);
}
.pc-win .pc-v { color: var(--coral); }
.pc-n { font-size: 13px; color: var(--stone); }

/* ---------- guest avatars ----------
   An initial today, a cartoon character the moment the artwork lands. */
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar:has(img) { background: none; border: none; }

@media (max-width: 560px) {
  .price-compare { grid-template-columns: 1fr; gap: 12px; }
  .pc { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pc-v { font-size: 30px; }
}

/* ---------- "why guests come" ----------
   Four reasons, so four columns — the shared .icon-cards is three wide and
   would strand the fourth card alone on its own row. */
.drive .icon-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.drive .icon-card { padding: 18px 20px; }
.drive .icon-card h3 { font-size: 20px; }
.drive .icon-card p { font-size: 14px; }
/* the drive times are now a supporting row under the reasons, not the headline */
.drive .drive-times .dist { padding: 13px 16px; }
.drive .drive-times .dist b { font-size: 24px; }

@media (max-width: 1040px) {
  .drive .icon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .drive .icon-cards { grid-template-columns: 1fr; }
}

/* a quoted review left in its own language, with the English underneath */
.rev-tr {
  margin: 8px 0 0; font-size: 13.5px; font-style: italic;
  color: var(--stone); line-height: 1.5; padding-left: 12px;
  border-left: 2px solid var(--line);
}

/* ---------- reason cards, layout B ----------
   Two across instead of four, with the illustration beside the words. Four
   columns left each drawing about 260px wide, which is too small to read the
   faces — and the faces are the whole point: a guest should recognise their own
   reason for coming before they read a word. */
.drive .icon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.icon-card.reason { display: flex; align-items: center; gap: 18px; padding: 16px; }
.reason-art {
  flex: none; width: 220px; height: 190px; object-fit: cover;
  border-radius: 8px; background: var(--blush);
}
.reason-body h3 { margin-top: 0; }
.icon-card.reason p { margin: 0; }

@media (max-width: 1040px) {
  .reason-art { width: 170px; height: 165px; }
}
@media (max-width: 760px) {
  /* side by side stops working once the text column is narrower than the art */
  .icon-card.reason { flex-direction: column; align-items: stretch; gap: 14px; }
  .reason-art { width: 100%; height: 180px; }
}

/* These must live AFTER the base .reason rules above: an earlier media query
   loses to a later plain rule of equal specificity, so the 2-column grid was
   winning at every width until this block was added. */
@media (max-width: 760px) {
  .drive .icon-cards { grid-template-columns: 1fr; }
}

/* a drawn face needs more room than an initial did, and sits high in a square
   portrait — so crop towards the top rather than the middle */
.avatar { width: 46px; height: 46px; }
.avatar img { object-position: center 28%; }

/* ---------- quote band: let it fit the words ----------
   This band was built for a one-line quote. Shereen's is three times longer, so
   on a phone the fixed 165px image squeezed it into an unreadable strip.

   The QUOTE now sets the height and the photo fills whatever that turns out to
   be. Doing it the other way round — letting the image size the band — gave
   520px of pathway behind 173px of words on a 390px screen.

   Also: a darker wash, and no italics below 860px. Italic serif at 20px over a
   sunlit photo is the hardest thing on the page to read. */
.band { position: relative; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-veil { position: relative; background: rgba(34,29,25,0.54); padding: 34px 0; min-height: 250px; }
.band-veil blockquote { text-shadow: 0 1px 14px rgba(34,29,25,0.5); }

@media (max-width: 860px) {
  .band-veil { min-height: 190px; background: rgba(34,29,25,0.62); padding: 26px 0; }
  .band-veil blockquote { font-size: 18.5px; line-height: 1.55; padding: 0 22px; font-style: normal; }
  .band-veil blockquote cite { font-size: 11.5px; margin-top: 12px; letter-spacing: 0.12em; }
}

/* ---------- FAQ head with the support illustration ---------- */
.faq-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; margin-bottom: 14px; }
.faq-art {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: 0 18px 36px -26px rgba(34,29,25,0.45);
}

/* ---------- illustrations inside the long prose pages ---------- */
.page-art {
  display: block; width: 100%; max-width: 620px; aspect-ratio: 3/2; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); margin: 6px 0 18px;
}
.page-art.wide { max-width: 100%; aspect-ratio: 2/1; }

@media (max-width: 860px) {
  .faq-head { grid-template-columns: 1fr; gap: 18px; }
  .faq-art { aspect-ratio: auto; height: 200px; object-position: center 30%; }
  .page-art { aspect-ratio: auto; height: 190px; }
  .page-art.wide { aspect-ratio: auto; height: 200px; }
}

/* the registered US address belongs in the terms, not under every page — it
   was the first thing a guest read in the footer of a family hosting business */
.reg-note { font-size: 13px; color: var(--stone); }

/* the welcome basket sits under the hosts illustration, next to the sentence
   that promises it — a photo of the real thing beats the claim */
.hello-art { display: grid; gap: 12px; }
.hello-extra {
  width: 100%; height: 170px; object-fit: cover; object-position: center 62%;
  border-radius: 10px; border: 1px solid var(--line); aspect-ratio: auto;
}
@media (max-width: 860px) { .hello-extra { height: 140px; } }

/* "Best for" line on the Homes page — the cards there have room to say who each
   home actually suits, which is the question a guest is really asking */
.home-for { margin: 8px 0 0; font-size: 14px; color: var(--body); line-height: 1.5; }
.home-for b { font-weight: 700; color: var(--ink); }

/* ---------- the height-attribute trap ----------
   These images carry width/height attributes (900x600, 1600x800) for layout
   stability. With `width:100%` and no `height`, the browser uses the ATTRIBUTE
   height as a presentational hint — 600px, 800px — and `aspect-ratio` never
   gets a look in, because it only applies when one axis is auto. That is why
   the FAQ illustration rendered 454x600 and the Stay & Explore map came out
   full-bleed and enormous. `height: auto` hands control back to aspect-ratio. */
.faq-art, .page-art, .reason-art, .hello-extra, .home-card img, .team-card img { height: auto; }
.reason-art { height: 190px; }
.hello-extra { height: 170px; }
.home-card img { height: 230px; }
.team-card img { height: auto; aspect-ratio: 3/2; }

/* the map is a supporting diagram, not a hero */
.page-art.wide { max-width: 760px; aspect-ratio: 2/1; }

@media (max-width: 1040px) { .reason-art { height: 165px; } }
@media (max-width: 860px) {
  .reason-art { height: 180px; }
  .hello-extra { height: 140px; }
  .home-card img { height: 190px; }
  .faq-art { height: 200px; aspect-ratio: auto; }
  .page-art, .page-art.wide { height: 190px; aspect-ratio: auto; }
}
@media (max-width: 640px) { .home-card img { height: 180px; } }

/* ---------- facts strip, lighter ----------
   As big white boxes with a lot of air it read as a spreadsheet. Same numbers,
   a quarter of the height: one quiet row, hairline dividers, no cell borders. */
.facts-strip {
  display: flex; flex-wrap: wrap; gap: 0; background: none; border: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; margin: 0 0 28px; overflow: visible;
}
.facts-strip div {
  background: none; padding: 12px 26px 12px 0; margin-right: 26px;
  border-right: 1px solid var(--line); flex: 0 1 auto;
}
.facts-strip div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.facts-strip .k {
  font-size: 10.5px; letter-spacing: 0.14em; margin-bottom: 2px; color: var(--stone);
}
.facts-strip .v { font-size: 21px; line-height: 1.2; color: var(--ink); }

@media (max-width: 860px) {
  .facts-strip { border-bottom: none; }
  .facts-strip div {
    flex: 1 0 40%; padding: 10px 14px 10px 0; margin-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .facts-strip div:last-child { border-bottom: none; }
  .facts-strip .v { font-size: 19px; }
}

/* ---------- interior page headers ----------
   A 3:2 photo beside the title was taller than the words and pulled the eye
   away from them. Wider crop, capped height, secondary. */
.page-head .head-grid { grid-template-columns: 1.5fr 1fr; gap: 36px; }
.page-head .head-art img { aspect-ratio: 16/9; max-height: 200px; height: auto; }

@media (max-width: 860px) {
  .page-head .head-art img { max-height: 150px; }
}

/* On a phone even a light table is still a table: five cells, wrapped labels,
   stray dividers. Below 860px the same facts read as one plain sentence. */
@media (max-width: 860px) {
  .facts-strip { display: block; border-bottom: none; padding: 12px 0 2px; }
  .facts-strip div { display: inline; border: none; padding: 0; margin: 0; }
  .facts-strip div::after { content: " · "; color: var(--stone); }
  .facts-strip div:last-child::after { content: ""; }
  .facts-strip .k {
    display: inline; font-size: 13.5px; letter-spacing: 0; text-transform: none;
    color: var(--stone); margin: 0;
  }
  .facts-strip .v {
    display: inline; font-family: 'Karla', sans-serif; font-size: 14.5px;
    font-weight: 700; color: var(--ink); margin-left: 4px;
  }
}

/* appended after the desktop head-grid rule, or the phone keeps two columns
   and the header photo shrinks to a 96px stamp beside the title */
@media (max-width: 860px) {
  .page-head .head-grid { grid-template-columns: 1fr; gap: 18px; }
  .page-head .head-art img { width: 100%; max-height: 150px; aspect-ratio: 16/9; }
}

/* `.facts-strip div` also matches the .k and .v divs INSIDE each fact, so the
   separator landed between a label and its own number: "Rating · 4.98". Scope
   the separator to direct children only. */
.facts-strip div::after { content: none; }
@media (max-width: 860px) {
  .facts-strip > div::after { content: " · "; color: var(--stone); }
  .facts-strip > div:last-child::after { content: none; }
}

/* ---------- banded interior pages ----------
   The homepage works because it changes ground every section: ivory, blush,
   white, ink. Policies and Contact were one unbroken column of ivory prose, so
   they read as a document rather than as part of the same site. These give the
   long pages the same rhythm without touching the type. */
.prose.alt { background: var(--blush); }
.prose.white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prose.tight { padding: 34px 0 38px; }
.prose .sec-eyebrow { display: block; margin-bottom: 10px; }
.prose h2:first-child { margin-top: 0; }

/* an illustration in a page header should never be cropped like a photo —
   it is drawn to a frame, and 16:9 cuts the subject off at the knees */
.head-art.art-toon img {
  aspect-ratio: 3/2; max-height: none; object-fit: contain;
  background: var(--white); border-radius: 10px;
}

/* contact: three ways to reach us, as cards rather than a list of links */
.reach { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 6px 0 4px; }
.reach-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 6px;
}
.reach-card svg { color: var(--coral); margin-bottom: 4px; }
.reach-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; margin: 0; }
.reach-card .line { font-size: 15.5px; font-weight: 700; }
.reach-card p { margin: 0; font-size: 14px; color: var(--stone); line-height: 1.5; }
.reach-card .btn { align-self: flex-start; margin-top: 8px; }

@media (max-width: 860px) {
  .reach { grid-template-columns: 1fr; gap: 14px; }
  .head-art.art-toon img { aspect-ratio: 3/2; }
}

/* The basket replaces Dani beside the FAQ (his illustration now lives on the
   Contact page, and one drawing shouldn't do two jobs). Smaller than the slot
   was: it is a detail, not a scene, and it reads better as a small object. */
.faq-head { grid-template-columns: 1.6fr 1fr; align-items: center; }
.faq-art { max-width: 320px; justify-self: end; aspect-ratio: 3/2; object-position: center 62%; }

/* the hosts block is one illustration again */
.hello-art { display: block; }

@media (max-width: 860px) {
  .faq-art { max-width: 100%; justify-self: stretch; height: 170px; }
}

/* ---------- amenities with icons ----------
   Sixteen pills of text was a wall of ovals. An icon per line lets the eye scan
   for the one thing it came to check — usually the washing machine or the Wi-Fi. */
.amen {
  list-style: none; padding: 0; margin: 4px 0 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 26px;
}
.amen li {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; color: var(--body); line-height: 1.35;
}
.amen svg {
  flex: none; width: 21px; height: 21px; color: var(--coral);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- facts strip, third attempt ----------
   Hairlines between flex items left odd half-height rules and a lot of air. The
   site already has a tile that works — .dist on the drive times — so this uses
   the same shape: small tiles, label above, value in the serif, no stray rules. */
.facts-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; background: none; border: none; border-radius: 0; margin: 0 0 26px;
}
.facts-strip > div {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 16px; margin: 0;
}
.prose.white .facts-strip > div { background: var(--blush); border-color: transparent; }
.facts-strip .k { font-size: 10.5px; letter-spacing: 0.13em; margin-bottom: 3px; }
.facts-strip .v { font-size: 20px; line-height: 1.2; color: var(--ink); }

@media (max-width: 1040px) { .amen { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .amen { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 18px; }
  .facts-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
  .facts-strip > div { display: block; padding: 11px 13px; border: 1px solid var(--line); }
  .facts-strip > div::after { content: none; }
  .facts-strip .k { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
  .facts-strip .v { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; margin: 0; }
}
@media (max-width: 560px) { .amen { grid-template-columns: 1fr; } }

/* ---------- closing the gaps ----------
   Sarah: "there are places across the pages where there are too many blank
   spaces." Three causes: prose sections padded for a full page when they are
   now bands; two-column prose where one column runs short and leaves a hole;
   and link rows floating in their own section. */
.prose { padding: 34px 0 38px; }
.prose.tight { padding: 26px 0 28px; }
.prose h2 { margin: 26px 0 10px; }
.prose .cols2 { gap: 0 44px; align-items: start; }

/* a short right-hand column should not leave half a screen empty: below the
   widest desktop the two columns become one flowing measure */
@media (max-width: 1100px) { .prose .cols2 { grid-template-columns: 1fr; } }

/* link rows read as a line, not as a paragraph of spaced-out links */
.chips.plain { gap: 10px; }
.chips.plain li { padding: 6px 14px; font-size: 14px; }
.chips.plain li a { color: var(--ink); }
.chips.plain li a:hover { color: var(--coral); }

/* ---------- delivery apps ----------
   Was: a big illustration, then three stacked label-and-pill rows down the left
   edge — unorganised, and most of the width empty. Now the intro and the
   illustration share a row, and the three groups sit side by side beneath it.

   The marks are brand-coloured initials, not the companies' logos: using a
   third party's actual logo on a commercial site is their call, not ours. Drop
   real logo files into assets/img and these swap out in a minute. */
.deliver-head { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: center; margin-bottom: 22px; }
.deliver-head p { margin: 0; }
.deliver-art { width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

.deliver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.deliver-group h3 {
  font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.apps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.apps li {
  display: flex; align-items: center; gap: 11px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px 6px 6px; font-size: 14.5px; color: var(--ink);
}
.app-badge {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--b); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; line-height: 1;
}
.app-badge.ink { color: var(--ink); }
.deliver-note { margin: 20px 0 0; font-size: 14px; color: var(--stone); max-width: 70ch; }

@media (max-width: 860px) {
  .deliver-head { grid-template-columns: 1fr; gap: 16px; }
  .deliver-art { max-width: 420px; }
  .deliver { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 560px) { .deliver { grid-template-columns: 1fr; } }

/* the delivery intro is a plain measure again — the illustration moved to the
   page header, where it has room. Sitting beside the app columns it crowded
   "Everything else" into the corner. */
.deliver-intro { max-width: 68ch; margin: 0 0 22px; }
.deliver { margin-top: 4px; }

/* ---------- the featured review, made to be read ----------
   Sarah: "Shereen's review is not very well seen." White italic serif over a
   sunlit photo is the least legible thing a page can do, however pretty. So:
   a face to anchor it, more weight, a touch more size, and a stronger wash. */
.band-face {
  display: block; width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 18px;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 26px -12px rgba(34,29,25,0.8);
}
.band-veil { background: rgba(34,29,25,0.6); }
.band-veil blockquote {
  font-weight: 600; font-size: clamp(21px, 2.7vw, 32px);
  text-shadow: 0 2px 18px rgba(34,29,25,0.65);
}
.band-veil blockquote cite { color: rgba(255,255,255,0.92); font-weight: 700; }

@media (max-width: 860px) {
  .band-face { width: 72px; height: 72px; margin-bottom: 14px; }
  .band-veil { background: rgba(34,29,25,0.66); }
  .band-veil blockquote { font-size: 19px; font-weight: 600; }
}

/* `.band img` (position:absolute; inset:0; width/height:100%) was written for
   the background photo, but it also caught the portrait inside the quote and
   stretched it into an ellipse. Scope it to the band's own direct child. */
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-face {
  position: static; inset: auto; width: 92px; height: 92px; flex: none;
}
@media (max-width: 860px) { .band-face { width: 72px; height: 72px; } }

/* `.band img` is (0,1,1) and `.band-face` only (0,1,0), so the background-photo
   rule kept winning however late it was appended — the portrait stayed
   absolutely positioned and stretched to the full band. Match on both. */
.band img.band-face {
  position: static; inset: auto; display: block;
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 18px; border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 26px -12px rgba(34,29,25,0.8);
}
@media (max-width: 860px) {
  .band img.band-face { width: 72px; height: 72px; margin-bottom: 14px; }
}

/* ---------- hero legibility ----------
   The veil was a single diagonal sweep written for a headline and one line of
   text. The block now runs down to a button row and a badge, and those sit on
   the brightest part of the lawn. Two washes instead of one: the diagonal keeps
   the right-hand side open, and a soft bottom-left pool holds the controls. */
.hero-veil {
  background:
    linear-gradient(to top, rgba(34,29,25,0.55) 0%, rgba(34,29,25,0.12) 42%, rgba(34,29,25,0) 62%),
    linear-gradient(100deg, rgba(34,29,25,0.72) 0%, rgba(34,29,25,0.42) 48%, rgba(34,29,25,0.08) 78%);
}
/* a solid button reads at a glance; a translucent one over grass does not */
.btn.light { background: rgba(255,255,255,0.94); color: var(--ink); border-color: transparent; }
.btn.light:hover { background: var(--white); color: var(--coral-deep); }
.hero-badge { background: rgba(34,29,25,0.55); border-color: rgba(255,255,255,0.3); }

@media (max-width: 860px) {
  .hero-veil {
    background:
      linear-gradient(to top, rgba(34,29,25,0.62) 0%, rgba(34,29,25,0.4) 55%, rgba(34,29,25,0.3) 100%),
      linear-gradient(100deg, rgba(34,29,25,0.5) 0%, rgba(34,29,25,0.3) 100%);
  }
}

/* the golden-hour frame is already composed for this band — no re-centring */
.hero-img { object-position: center center; }

/* the golden-hour frame is warmer and darker than the midday lawn it replaced,
   so the wash can come back a notch and let the light through */
.hero-veil {
  background:
    linear-gradient(to top, rgba(34,29,25,0.5) 0%, rgba(34,29,25,0.1) 44%, rgba(34,29,25,0) 64%),
    linear-gradient(100deg, rgba(34,29,25,0.62) 0%, rgba(34,29,25,0.32) 50%, rgba(34,29,25,0.04) 80%);
}

/* ---------- hero copy legibility ----------
   The headline is large enough to survive anything; the paragraph is 16px white
   over dappled leaves and lawn, which is the hardest case there is. Three
   things together, because no one of them is enough:
   1. the wash goes deeper on the LEFT only, where the words are, and still
      clears by 70% so the photo keeps its light;
   2. the paragraph gains a step of size and weight;
   3. a soft shadow gives every letter its own edge against the leaves. */
.hero-veil {
  background:
    linear-gradient(to top, rgba(34,29,25,0.5) 0%, rgba(34,29,25,0.1) 44%, rgba(34,29,25,0) 64%),
    linear-gradient(100deg,
      rgba(34,29,25,0.82) 0%,
      rgba(34,29,25,0.66) 30%,
      rgba(34,29,25,0.3) 58%,
      rgba(34,29,25,0.04) 80%);
}
.hero-copy h1 { text-shadow: 0 2px 20px rgba(34,29,25,0.55); }
.hero-copy p {
  font-size: 17px; font-weight: 500; color: #fff; line-height: 1.65;
  text-shadow: 0 1px 3px rgba(34,29,25,0.6), 0 2px 16px rgba(34,29,25,0.7);
}
.hero-copy .eyebrow {
  color: #F8DCD6; text-shadow: 0 1px 10px rgba(34,29,25,0.7);
}

@media (max-width: 860px) {
  .hero-copy p { font-size: 15.5px; line-height: 1.6; }
}

/* Measured: white on this photo averaged 13.6:1, but the far end of the
   paragraph's longest line fell to 3.3:1 — under the 4.5:1 needed for body
   text. The wash now holds past the middle before it clears, and the measure is
   trimmed so no line reaches the bright grass on the right. */
.hero-veil {
  background:
    linear-gradient(to top, rgba(34,29,25,0.5) 0%, rgba(34,29,25,0.1) 44%, rgba(34,29,25,0) 64%),
    linear-gradient(100deg,
      rgba(34,29,25,0.84) 0%,
      rgba(34,29,25,0.74) 32%,
      rgba(34,29,25,0.56) 52%,
      rgba(34,29,25,0.18) 74%,
      rgba(34,29,25,0) 90%);
}
.hero-copy p { max-width: 44ch; }
.hero-copy .inner { max-width: 560px; }

/* ---------- "also on", under the Instagram copy ----------
   These three were floating as bare text in a band of their own, which read as
   an afterthought with a heading. They belong with the other places we live. */
.also-on { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.also-on li { font-size: 14.5px; }
.also-on a { color: var(--body); display: inline-flex; gap: 7px; align-items: baseline; }
.also-on a:hover { color: var(--coral); }
.also-on b { color: var(--ink); font-weight: 700; }

/* the questions row was floating in too much air */
.prose .chips { margin-bottom: 4px; }

/* ---------- closing call to action ----------
   A page about talking to a person should end by offering the thing that needs
   no talking. Dark strip, one line, one button. */
.cta-band { background: var(--ink); padding: 30px 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cta-band p {
  margin: 0; color: #E4DBD2; font-size: 16.5px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 1.35; max-width: 60ch;
}
@media (max-width: 860px) {
  .cta-band { padding: 24px 0; }
  .cta-band .wrap { gap: 16px; }
  .cta-band p { font-size: 19px; }
  .cta-band .btn { width: 100%; text-align: center; }
}

/* ---------- closing card ----------
   A dark strip here sat directly above the dark footer and read as one block —
   the sentence looked like footer furniture rather than an invitation. A light
   card on the ivory ground keeps it separate, and the footer stays the only
   dark thing at the bottom of the page. */
.closing-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-shadow: 0 16px 34px -28px rgba(34,29,25,0.5);
}
.closing-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600;
  margin: 0 0 4px;
}
.closing-card p { margin: 0; color: var(--body); font-size: 15px; }
.closing-card .btn { flex: none; }

@media (max-width: 640px) {
  .closing-card { padding: 20px; gap: 16px; }
  .closing-card .btn { width: 100%; text-align: center; }
}

/* The embeds were cut off mid-caption on phones: one column caps the frame at
   420px wide, and an Instagram photo post needs roughly its own width plus the
   header and action bar — about 560px, not the 480 it had. */
@media (max-width: 1040px) { .ig-posts iframe { height: 560px; } }
@media (max-width: 860px)  { .ig-posts iframe { height: 560px; } }
@media (max-width: 460px)  { .ig-posts iframe { height: 520px; } }

/* the basket is re-cropped around the box itself now, so the frame no longer
   needs nudging — centre it and let the picture do the work */
.faq-art { object-position: center center; }

/* ============================================================
   LANGUAGE SWITCH  —  lives here, not in rtl.css, because the
   English pages need the same pill and they never load rtl.css.
   ============================================================ */
.lang-switch {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  white-space: nowrap; background: var(--white); line-height: 1.2;
}
.lang-switch:hover { color: var(--coral); border-color: var(--coral); }
/* the nav is an explicit order:0/1/2/3 flex row — without an order of its own
   the pill falls into the brand slot and sits next to the logo */
.nav .lang-switch { order: 2; margin-inline-start: 4px; }
@media (max-width: 860px) {
  /* on phones the pill takes over the spacer duty from the Book-now button */
  .nav .lang-switch { margin-inline-start: auto; padding: 5px 10px; font-size: 12.5px; }
  .nav .lang-switch ~ .btn { margin-inline-start: 8px; }
}

/* Smoobu's checkout has no Arabic, so the Arabic pages say so above the widget */
.lang-note { font-size: 13.5px; color: var(--stone); text-align: center; margin: 10px 0 0; }
.lang-note a { color: var(--coral); font-weight: 600; }

/* ============================================================
   ROOM-BY-ROOM TOUR  —  the full photo set on a home page.
   Used where a home has a complete captioned set; the homes that
   still have the four-photo side gallery are unaffected.
   ============================================================ */

/* with a full tour below, the description runs the whole width
   instead of sharing the row with a four-photo teaser */
.prop-body.solo { grid-template-columns: 1fr; }

.tour { padding: 6px 0 46px; }
.tour h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; }
.tour .tour-sub { color: var(--stone); font-size: 15px; margin: 0 0 22px; max-width: 60ch; }
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
.tour-grid figure { margin: 0; }
.tour-grid img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; border-radius: 3px; background: var(--blush);
}
.tour-grid figcaption {
  font-size: 13.5px; line-height: 1.55; color: var(--stone); padding-top: 8px;
}
/* the upright shots — a bed end-on, a shower, the building door — lose their
   subject if a 4:3 tile crops them from the middle, so bias the crop upward */
.tour-grid img.upright { object-position: center 32%; }

@media (max-width: 900px) {
  .tour-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .tour { padding-bottom: 34px; }
}
@media (max-width: 560px) {
  .tour-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   TOUR LIGHTBOX  —  tap a photo to see it whole, with its caption.
   The grid tiles are cropped to 4:3; this is where the full frame
   and the caption live. Applies to every room-by-room tour.
   ============================================================ */
.tour-grid figure button.tour-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: 3px; overflow: hidden;
}
.tour-grid figure button.tour-open:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.lb {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(24, 20, 17, 0.93);
  padding: 24px 16px;
  grid-template-rows: 1fr auto;
  align-items: center; justify-items: center;
}
.lb[open], .lb.is-open { display: grid; }
.lb img {
  max-width: min(1200px, 100%); max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px; background: #241f1b;
}
.lb-cap {
  color: #F3EDE6; font-size: 14.5px; line-height: 1.6; text-align: center;
  max-width: 70ch; padding: 14px 8px 2px;
}
.lb-count { display: block; color: #A89C90; font-size: 12.5px; letter-spacing: 0.08em; padding-top: 6px; }
.lb button {
  position: absolute; background: rgba(255,255,255,0.1); border: 0; color: #fff;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 20px;
  display: grid; place-items: center; line-height: 1;
}
.lb button:hover { background: rgba(255,255,255,0.22); }
.lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }
[dir="rtl"] .lb-prev { left: auto; right: 16px; }
[dir="rtl"] .lb-next { right: auto; left: 16px; }
@media (max-width: 560px) {
  .lb { padding: 12px 8px; }
  .lb img { max-height: calc(100vh - 190px); }
  .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; }
  .lb-prev { left: 20px; } .lb-next { right: 20px; }
  [dir="rtl"] .lb-prev { left: auto; right: 20px; }
  [dir="rtl"] .lb-next { right: auto; left: 20px; }
}
/* the arrows are pointless with nothing to move between */
.lb.single .lb-prev, .lb.single .lb-next { display: none; }

/* ============================================================
   The booking band now sits above the photos on every home page,
   so a guest never scrolls past the gallery to reach the dates.
   That leaves the four-photo galleries full width instead of
   sharing a row with the description — four across, not two.
   ============================================================ */
.prop-shots { padding: 0 0 50px; }
.prop-shots .prop-gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) {
  .prop-shots { padding-bottom: 36px; }
  .prop-shots .prop-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 560px) {
  .prop-shots .prop-gallery { grid-template-columns: 1fr; }
}
/* the booking band is no longer the last thing on the page */
.prop-book { padding-bottom: 34px; }

/* ---- the neighbourhood / getting-around block on property pages (13 Oct 2026) ---- */
.prop-area { padding: 2px 0 46px; }
.prop-area h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 10px; }
.prop-area h3 { font-size: 17.5px; font-weight: 600; margin: 28px 0 8px; }
.prop-area p { max-width: 68ch; }
.area-times { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.area-times li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.area-times .n { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--coral); white-space: nowrap; }
.area-times .n small { font-family: 'Karla', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); margin-inline-start: 5px; }
.area-note { font-size: 13.5px; color: var(--stone); margin-top: 12px; }
@media (max-width: 640px) {
  .area-times { grid-template-columns: 1fr; gap: 0; }
  .prop-area { padding-bottom: 34px; }
}

/* ---- "Spending time in Sheikh Zayed" (19 Oct 2026) -------------------------
   Appended at the end on purpose: anything added further up this file loses to
   the @media blocks above it. Phone first — every grid here is a single column
   until there is room for more. */
.zayed { margin: 4px 0 2px; }
.zayed-hero { position: relative; border-radius: 4px; overflow: hidden; margin: 2px 0 32px; }
.zayed-hero img {
  width: 100%; height: auto; aspect-ratio: 3 / 1.08; object-fit: cover;
  object-position: center 62%; display: block; background: var(--blush);
}
.zayed-hero figcaption {
  position: absolute; inset: auto 0 0 0; padding: 52px 24px 18px; color: var(--white);
  background: linear-gradient(to top, rgba(34,29,25,0.74), rgba(34,29,25,0));
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(19px, 2.5vw, 28px); line-height: 1.3;
}
/* all six subjects are one even grid: three across, two at tablet, one on a
   phone. An earlier version gave the big three a half-width row each, which
   left the text column half empty and made the section very tall. */
.zayed-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; margin: 2px 0 0; }
.zayed-tile img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 3px; display: block; background: var(--blush);
}
.zayed-tile h3 { font-size: 18.5px; margin: 13px 0 6px; }
.zayed-tile p { margin: 0; font-size: 14.5px; }
.guide-note { margin: 24px 0 34px; padding: 26px 28px; background: var(--blush); border-radius: 4px; }
.guide-note h3 { margin: 0 0 9px; font-size: clamp(19px, 2.2vw, 24px); }
.guide-note p { margin: 0; max-width: 62ch; }
@media (max-width: 860px) {
  .zayed-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .zayed-tiles { grid-template-columns: 1fr; gap: 22px; }
  .zayed-hero figcaption { padding: 38px 16px 14px; }
  .guide-note { padding: 22px 20px; }
}

/* ---- the homepage teaser that points at it ---- */
.zayed-teaser { padding: 2px 0 58px; }
.zayed-teaser .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0 42px; align-items: center; }
.zayed-teaser img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 4px; display: block; background: var(--blush);
}
.zayed-teaser h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; }
.zayed-teaser p { margin: 0 0 18px; max-width: 48ch; }
@media (max-width: 860px) {
  .zayed-teaser .wrap { grid-template-columns: 1fr; gap: 20px; }
  .zayed-teaser { padding-bottom: 44px; }
}

/* ---- the guide panel, once it has its picture (19 Oct 2026) ---- */
.guide-note.with-art { display: grid; grid-template-columns: 1fr 0.92fr; gap: 0 30px; align-items: center; }
.guide-note.with-art img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 3px; display: block; background: var(--white);
}
@media (max-width: 760px) {
  .guide-note.with-art { grid-template-columns: 1fr; gap: 18px; }
  .guide-note.with-art .guide-art { order: -1; }   /* picture first once stacked */
}

/* ---- nav dropdowns (19 Oct 2026) -------------------------------------------
   Opening is CSS, not script: :hover serves a mouse and :focus-within serves a
   keyboard, so the menus work even if site.js never loads. Below 860px the nav
   IS the burger panel, and the sub-links simply sit indented under their parent
   with nothing to open. The single case neither covers — a tap on a touch
   screen still wide enough to show the desktop nav — is the .open class, set by
   the one small handler in site.js. */
.nav-item { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; }
.nav-caret { flex: none; margin-inline-start: 5px; opacity: 0.5; }
.nav-menu {
  position: absolute; top: 100%; inset-inline-start: -14px; z-index: 30;
  min-width: 212px; padding: 7px 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 14px 34px rgba(34, 29, 25, 0.13);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  /* visibility is deliberately NOT transitioned: a transitioned visibility can
     be left mid-flight when a browser throttles animations, and the menu then
     never appears. It flips instantly; only the fade and slide are animated. */
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item.open > .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  display: block; padding: 8px 18px; white-space: nowrap;
  font-size: 14px; font-weight: 400; color: var(--body);
}
.nav-menu a:hover { background: var(--blush); color: var(--coral); }
/* seven items with carets is wider than six plain ones — buy the room back */
@media (min-width: 861px) and (max-width: 1120px) {
  .nav-links { gap: 15px; font-size: 13.8px; }
  .nav { gap: 18px; }
}
@media (max-width: 860px) {
  /* inside the burger panel the menus are not menus any more, just an indented
     list under each heading, always visible */
  .nav-item { display: block; align-self: auto; }
  .nav-item > a { display: flex; justify-content: space-between; }
  .nav-caret { display: none; }
  .nav-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 2px 0 8px; margin: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    transition: none;
  }
  .nav-menu a {
    padding: 8px 0 8px 16px; border-bottom: none;
    font-size: 14px; color: var(--stone);
  }
  [dir="rtl"] .nav-menu a { padding: 8px 16px 8px 0; }
}
/* the menu hangs from the bottom of the header, so the row that holds it has
   to be as tall as the header — otherwise it opens inside the bar */
@media (min-width: 861px) {
  .nav-links { align-self: stretch; align-items: center; }
}
@media (max-width: 860px) {
  /* seven sections' worth of sub-links is taller than a phone screen, and the
     panel hangs off the sticky header — without its own scroll the items past
     the fold could not be reached at all */
  .nav-links.open {
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (max-width: 620px) {
  /* a 2.8:1 banner is a 120px sliver on a phone — give it the same shape as
     the tiles so the picture is still a picture */
  .zayed-hero img { aspect-ratio: 3 / 2; }
}