/* ==========================================================================
   Amritam Retreat: shared styles
   Tokens, base, layout and components. Future property pages reuse this file,
   so class names are generic (.property-hero, .amenity-list, .review-card).
   ========================================================================== */


/* 1. Tokens
   -------------------------------------------------------------------------- */

/* Fonts, self-hosted from /fonts (SIL Open Font License, see the OFL files there).
   Latin characters only, plus the rupee sign and अमृतम्, as the site uses nothing else.
   index.html preloads DM Sans and Fraunces, so keep those file names in step. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

/* Just the rupee sign (₹, 2 KB), which isn't in the Latin file. Only loads where ₹ appears. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-rupee.woff2") format("woff2");
  unicode-range: U+20B9;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}

/* One fixed italic (weight 400, soft), for the headline accent and quotes */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}

/* Only the five glyphs of अमृतम् */
@font-face {
  font-family: "Tiro Devanagari Sanskrit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tiro-devanagari-sanskrit-amritam.woff2") format("woff2");
  unicode-range: U+0905, U+0924, U+092E, U+0943, U+094D;
}

/* Brand palette. The same in both themes. */
:root {
  --color-forest: #23402F;
  --color-moss: #5E7B4F;
  --color-cream: #F7F2E9;
  --color-sand: #EADFCB;
  --color-terracotta: #A9502B;      /* accents: step numbers, initials, the Sanskrit word; white text 5.4:1 */
  --color-terracotta-dark: #8F4223; /* small capitals labels and the italic headline (light theme); white text 7.1:1 */
  --color-whatsapp: #0F7F44;        /* WhatsApp buttons: a deeper WhatsApp green, white text 5.1:1 */
  --color-whatsapp-dark: #0B6A38;   /* their hover, white text 6.7:1 */
  --color-marigold: #E2A23B;        /* stars and small highlights only, never body text */
  --color-pool: #2F7F86;
  --color-ink: #1E2622;
  --color-white: #FFFFFF;

  /* Type */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sanskrit: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.04rem + 0.12vw, 1.125rem);   /* body: 17px to 18px */
  --step-1: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --step-3: clamp(1.875rem, 1.45rem + 2.1vw, 3.125rem);
  --step-4: clamp(2.375rem, 1.6rem + 3.6vw, 4.75rem);

  /* Space and shape */
  --gutter: 1.25rem;
  --container: 72rem;
  --section-space: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --radius: 16px;
  --radius-s: 10px;
  --radius-pill: 999px;

  /* Sticky header height (without its 1px border), used for anchor offsets, the menu panel and the hero */
  --header-h: 3.75rem;
}

@media (min-width: 64rem) {
  :root {
    --gutter: 2rem;
    --header-h: 4.5rem;
  }
}

/* Theme roles. The dark values sit in :root; light overrides them through
   data-theme="light" on <html>, which is the default (index.html sets it, and js/site.js
   switches it). Contrast ratios checked for WCAG 2.2 AA. */
:root {
  color-scheme: dark;
  --bg: #111915;                    /* page background */
  --bg-alt: #17221B;                /* alternate sections */
  --surface-1: #1C2820;             /* cards on --bg */
  --surface-2: #223028;             /* cards on --bg-alt */
  --text: #E3DDD0;                  /* 13.2:1 on --bg, 10.2:1 on --surface-2 */
  --heading: #F5EFE3;
  --accent-text: #E59B73;           /* eyebrows: 7.9:1 on --bg, 6.1:1 on --surface-2 */
  --sanskrit: var(--color-marigold);
  --icon: #9DB88A;                  /* icons and details only */
  --icon-pool: #5FB8BF;
  --line: rgb(227 221 208 / 0.14);
  --line-strong: rgb(227 221 208 / 0.35);
  --focus: var(--color-marigold);   /* 8.1:1 on --bg, 6.2:1 on --surface-2 */
  --star-off: #3D4C42;
  --caption-bg: rgb(17 25 21 / 0.86);
  --caption-text: #F5EFE3;
  --badge-bg: #2E4A39;
  --badge-text: #F5EFE3;
  --footer-bg: #1A2E22;
  --gmaps-attribution: #FFFFFF;     /* Google's attribution colour for dark backgrounds */
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -12px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 40px -14px rgb(0 0 0 / 0.7);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--color-cream);
  --bg-alt: var(--color-sand);
  --surface-1: var(--color-sand);
  --surface-2: var(--color-cream);
  --text: var(--color-ink);                    /* 14.6:1 on cream */
  --heading: var(--color-forest);              /* 10.2:1 on cream, 8.6:1 on sand */
  --accent-text: var(--color-terracotta-dark); /* 6.3:1 on cream, 5.4:1 on sand */
  --sanskrit: var(--color-terracotta);
  --icon: var(--color-moss);                   /* icons only (3.6:1 on sand), not small text */
  --icon-pool: var(--color-pool);
  --line: rgb(35 64 47 / 0.14);
  --line-strong: rgb(35 64 47 / 0.35);
  --focus: var(--color-forest);
  --star-off: #D8C7A6;
  --caption-bg: rgb(247 242 233 / 0.94);
  --caption-text: var(--color-forest);
  --badge-bg: var(--color-forest);
  --badge-text: var(--color-cream);
  --footer-bg: var(--color-forest);
  --gmaps-attribution: #5E5E5E;                /* 5.8:1 on cream, 4.9:1 on sand */
  --shadow: 0 1px 2px rgb(70 45 20 / 0.06), 0 10px 28px -12px rgb(70 45 20 / 0.22);
  --shadow-lift: 0 2px 4px rgb(70 45 20 / 0.08), 0 18px 40px -14px rgb(70 45 20 / 0.32);
}


/* 2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body:has(.lightbox:popover-open),
body:has(.site-nav:popover-open) {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  color: var(--heading);
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 60;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  font-size: var(--step-1);
  line-height: 1.25;
}

p,
li {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

a {
  color: var(--heading);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.on-dark :focus-visible {
  outline-color: var(--color-marigold);
}

.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--heading);
  color: var(--bg);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline-color: var(--color-marigold);
}


/* 3. Layout
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Cards take a lighter surface than the section they sit in.
   --section-bg lets small details (icon badges, chips) match the section behind the card. */
:root,
.section {
  --surface: var(--surface-1);
  --section-bg: var(--bg);
}

.section {
  padding-block: var(--section-space);
}

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

.section--tight {
  padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: var(--step-3);
}

.section-head > p:not(.eyebrow) {
  margin-top: 1rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

.eyebrow {
  margin-bottom: 0.5rem;
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ridge {
  width: 7.5rem;
  height: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--icon);
}

.section-head--center .ridge {
  margin-inline: auto;
}

.prose {
  max-width: 65ch;
}

.prose > * + * {
  margin-top: 1em;
}

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 2rem + 3vw, 5rem);
  }
}

.card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
}

.icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--section-bg);
  color: var(--icon);
}


/* 4. Buttons (two styles only: primary and secondary)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Every filled button on the site opens WhatsApp, so primary means WhatsApp green */
.btn--primary {
  background: var(--color-whatsapp);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-whatsapp-dark);
}

.btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--heading);
}

.btn--secondary:hover {
  background: var(--heading);
  border-color: var(--heading);
  color: var(--bg);
}

.on-dark .btn--secondary {
  color: var(--color-cream);
}

.on-dark .btn--secondary:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-forest);
}

.btn--small {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn-row--center {
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

/* Round 44px buttons in the header (theme switch, menu) */
.icon-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--heading);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--surface-1);
}

.icon-button .icon {
  width: 1.25rem;
  height: 1.25rem;
}


/* 5. Header and navigation
   Phones and tablets: a Menu button opens the section links in a panel (popover, works without JavaScript).
   Desktop: the links sit in the header.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100% - 2 * var(--gutter), var(--container));
  min-height: var(--header-h);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem);
  font-variation-settings: "SOFT" 60;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  width: 2.25rem;
  height: 1.5rem;
  color: var(--heading);
}

@media (min-width: 64rem) {
  .brand__mark {
    width: 2.625rem;
    height: 1.75rem;
  }
}

.site-header .brand {
  margin-right: auto;
}

/* Sun shows in dark mode (switch to light), moon in light mode */
.theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.menu-toggle .icon-close,
.site-header:has(.site-nav:popover-open) .menu-toggle .icon-menu {
  display: none;
}

.site-header:has(.site-nav:popover-open) .menu-toggle .icon-close {
  display: block;
}

/* On phones the WhatsApp bar at the bottom of the screen does this job */
.site-header__cta {
  display: none;
}

@media (min-width: 48rem) {
  .site-header__cta {
    display: inline-flex;
  }
}

/* The menu panel, directly under the header */
.site-nav {
  position: fixed;
  inset: calc(var(--header-h) + 1px) 0 auto;
  width: auto;
  max-width: none;
  height: auto;
  max-height: calc(100vh - var(--header-h) - 1px);
  max-height: calc(100dvh - var(--header-h) - 1px);
  margin: 0;
  padding: 0.5rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  /* Dims the page below the panel. A tap there reaches the page, which closes the menu. */
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5);
  clip-path: inset(0 0 -100vmax 0);
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav:popover-open {
    animation: menu-in 0.2s ease-out;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

.site-nav__list {
  display: grid;
  padding: 0;
  list-style: none;
}

.site-nav__list li + li {
  border-top: 1px solid var(--line);
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 0.5rem;
  color: var(--heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--surface-1);
}

.site-nav .site-nav__cta {
  display: flex;
  width: 100%;
  margin-top: 1rem;
  color: var(--color-white);
  font-size: 1rem;
}

.site-nav .site-nav__cta:hover {
  background: var(--color-whatsapp-dark);
}

@media (min-width: 64rem) {
  .site-header .brand {
    margin-right: 0;
  }

  .menu-toggle,
  .site-nav .site-nav__cta {
    display: none;
  }

  .site-nav {
    position: static;
    display: block;
    max-height: none;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
  }

  .site-nav__list {
    display: flex;
    gap: 0.125rem;
  }

  .site-nav__list li + li {
    border-top: 0;
  }

  .site-nav a {
    min-height: 44px;
    padding: 0 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
  }
}


/* 6. Hero
   Phones: the photo sits on top, uncovered, and the text is on a panel that overlaps it,
   like a travel app. Tablets and up: the text sits over the photo.
   -------------------------------------------------------------------------- */

.property-hero {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}

.property-hero__media {
  position: relative;
  height: clamp(16rem, 52vh, 30rem);
  height: clamp(16rem, 52svh, 30rem);
  overflow: hidden;
  background: var(--surface-1);
}

/* Phones: a row of photos to swipe through, one at a time */
.hero-slides {
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hero-slides::-webkit-scrollbar {
  display: none;
}

.hero-slides:focus-visible {
  outline-offset: -4px;
}

.hero-slides__track {
  display: flex;
  height: 100%;
  padding: 0;
  list-style: none;
}

.hero-slides__track > li {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.property-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  color: transparent; /* hides alt text while the photo loads */
}

.hero-slides__track > li:first-child .property-hero__img {
  object-position: 42% 60%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slides__track > li:first-child .property-hero__img {
    animation: hero-zoom 40s ease-out both;
    transform-origin: 50% 60%;
  }
}

/* Pause/play and "1 / 5", above the edge of the text panel (shown by js/site.js) */
.hero-slides__controls {
  position: absolute;
  right: var(--gutter);
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-slides__play,
.hero-slides__count {
  height: 2rem;
  border-radius: var(--radius-pill);
  background: rgb(14 24 18 / 0.72);
  color: var(--color-white);
}

.hero-slides__play {
  display: grid;
  place-items: center;
  width: 2rem;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.hero-slides__play:focus-visible {
  outline-color: var(--color-marigold);
}

.hero-slides__play .icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
  stroke: none;
}

/* Pause icon while playing, play icon while paused */
.hero-slides__play .icon-play,
.hero-slides__play.is-paused .icon-pause {
  display: none;
}

.hero-slides__play.is-paused .icon-play {
  display: block;
}

.hero-slides__count {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

@keyframes hero-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

.property-hero__content {
  position: relative;
  margin-top: -1.75rem;
  padding: 1.75rem var(--gutter) 2.5rem;
  border-radius: 1.75rem 1.75rem 0 0;
  background: var(--bg);
  box-shadow: 0 -14px 28px -18px rgb(0 0 0 / 0.5);
}

.property-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* अमृतम्, as large as the headline, on its own line */
.property-hero__sanskrit {
  color: var(--sanskrit);
  font-family: var(--font-sanskrit);
  flex-basis: 100%; /* its own line, above the location */
  font-size: clamp(1.875rem, 8.2vw, 2.75rem); /* the same size as the headline */
  font-weight: 400;
  letter-spacing: 0; /* letter spacing breaks Devanagari shaping */
  line-height: 1.3; /* room for the marks above and below the letters */
}

.property-hero h1 {
  font-size: clamp(1.875rem, 8.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
}

/* Second line of the headline, in Fraunces italic */
.property-hero__accent {
  display: block;
  color: var(--accent-text);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
}

/* Rating strip: three figures with dividers */
.hero-stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-top: 1.5rem;
  padding: 0.875rem 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.hero-stats li {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.25rem;
  padding-inline: 0.5rem;
  text-align: center;
}

.hero-stats li + li {
  border-left: 1px solid var(--line);
}

.hero-stats__value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
}

.hero-stats__value .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.hero-stats__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.property-hero__lede {
  margin-top: 1.25rem;
}

/* Phones: full-width buttons */
.property-hero .btn-row {
  display: grid;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .property-hero {
    display: grid;
    align-items: end;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
    background: var(--color-forest);
    color: var(--color-cream);
  }

  .property-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: auto;
  }

  /* Only the first photo, so the others never load */
  .hero-slides {
    overflow: hidden;
  }

  .hero-slides__track > li:not(:first-child),
  .hero-slides__controls {
    display: none;
  }

  .hero-slides__track > li:first-child .property-hero__img {
    object-position: center 60%;
  }

  /* Shade from the bottom and from the left, behind the text */
  .property-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, rgb(14 24 18 / 0.9) 0%, rgb(14 24 18 / 0.6) 38%, rgb(14 24 18 / 0.15) 68%, rgb(14 24 18 / 0) 100%),
      linear-gradient(to right, rgb(14 24 18 / 0.55) 0%, rgb(14 24 18 / 0) 65%);
  }

  .property-hero__content {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
    /* Small top padding: the content sits at the bottom, and short laptop screens need the room */
    padding: 3rem 0 clamp(2.5rem, 1rem + 3vw, 4rem);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .property-hero__eyebrow {
    color: rgb(247 242 233 / 0.88);
  }

  .property-hero__sanskrit {
    color: var(--color-marigold);
    font-size: var(--step-4);
    line-height: 1.15;
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.3);
  }

  .property-hero h1 {
    max-width: 16ch;
    color: var(--color-white);
    font-size: var(--step-4);
    line-height: 1.04;
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.3);
  }

  .property-hero__accent {
    color: #F3D9A8;
  }

  .hero-stats {
    display: inline-grid;
    margin-top: 1.5rem;
    padding: 0.75rem 0;
    border: 1px solid rgb(247 242 233 / 0.18);
    border-radius: var(--radius);
    background: rgb(14 24 18 / 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .hero-stats li {
    padding-inline: 1.5rem;
  }

  .hero-stats li + li {
    border-left-color: rgb(247 242 233 / 0.2);
  }

  .hero-stats__value {
    color: var(--color-white);
  }

  .hero-stats__label {
    color: rgb(247 242 233 / 0.88);
  }

  .property-hero__lede {
    max-width: 42rem;
    color: var(--color-cream);
    font-size: var(--step-1);
    line-height: 1.5;
  }

  .property-hero .btn-row {
    display: flex;
    margin-top: 2rem;
  }

  .property-hero .btn--secondary {
    color: var(--color-cream);
  }

  .property-hero .btn--secondary:hover {
    background: var(--color-cream);
    border-color: var(--color-cream);
    color: var(--color-forest);
  }

  .property-hero :focus-visible {
    outline-color: var(--color-marigold);
  }
}

.icon--star {
  color: var(--color-marigold);
}

.icon.icon--pool {
  color: var(--icon-pool);
}


/* 7. Quick facts
   -------------------------------------------------------------------------- */

.fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  padding: 0;
  list-style: none;
}

.fact-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--heading);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}

.fact-list .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--icon);
}

@media (min-width: 40rem) {
  .fact-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .fact-list {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .fact-list li {
    flex-direction: column;
    text-align: center;
  }
}


/* 8. The villa
   -------------------------------------------------------------------------- */

.villa-intro {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .villa-intro {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
  }
}

.sleep-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.sleep-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sleep-list strong {
  display: block;
  color: var(--heading);
}

.sleep-card__note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.highlight-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .highlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.highlight-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  height: 100%;
}

.highlight-card h3 {
  margin-top: 0.25rem;
}


/* 9. Gallery and lightbox (popover, no JavaScript)
   Grids are built so they never leave gaps: the first grid is one lead photo plus 8,
   the "more photos" grid is 12 (fills 2, 3 or 4 columns evenly).
   -------------------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 4px;
  padding: 0 4px;
  list-style: none;
}

.gallery-item {
  aspect-ratio: 1;
}

.gallery-item--lead {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

@media (min-width: 48rem) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: clamp(11rem, 6rem + 10vw, 14rem);
    gap: 0.75rem;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    padding: 0;
  }

  .gallery-item,
  .gallery-item--lead,
  .gallery-item--wide {
    aspect-ratio: auto;
  }

  .gallery-item--lead {
    grid-row: span 2;
  }

  .gallery-item--tall {
    grid-row: span 2;
  }
}

@media (min-width: 64rem) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  cursor: zoom-in;
}

@media (min-width: 48rem) {
  .gallery-tile {
    border-radius: var(--radius);
  }
}

.gallery-tile:focus-visible {
  z-index: 1;
  outline-offset: 2px;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-tile img {
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .gallery-tile:hover img {
    transform: scale(1.04);
  }
}

.gallery-tile__caption {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--caption-bg);
  color: var(--caption-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.gallery-more > summary {
  display: flex;
  width: fit-content;
  margin: 1.5rem auto 0;
  list-style: none;
}

.gallery-more > summary::-webkit-details-marker {
  display: none;
}

.gallery-more__less,
.gallery-more[open] .gallery-more__more {
  display: none;
}

.gallery-more[open] .gallery-more__less {
  display: inline;
}

.gallery-more .gallery-grid {
  margin-top: 1.25rem;
}

.gallery-note {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  text-align: center;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(12 20 15 / 0.95);
  color: var(--color-cream);
}

.lightbox:popover-open {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: rgb(12 20 15 / 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox:popover-open {
    animation: fade-in 0.25s ease-out;
  }

  /* Stepping to the next photo (js/site.js) */
  .lightbox.lightbox--instant:popover-open {
    animation: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  max-width: 100%;
  padding: 4.5rem 0.75rem calc(1.5rem + env(safe-area-inset-bottom));
}

.lightbox__figure img {
  width: auto;
  max-width: min(100%, 1280px);
  max-height: calc(100vh - 10rem);
  max-height: calc(100svh - 10rem);
  border-radius: var(--radius-s);
  object-fit: contain;
}

.lightbox__figure figcaption {
  max-width: 60ch;
  font-size: var(--step--1);
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-forest);
  cursor: pointer;
}

.lightbox__close:focus-visible {
  outline-color: var(--color-marigold);
}

/* Added by js/site.js: previous and next buttons, a "3 / 21" counter, arrow keys and swiping.
   pan-y lets a sideways swipe reach the script while keeping pinch zoom. */
.lightbox {
  touch-action: pan-y pinch-zoom;
}

.lightbox__step {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(247 242 233 / 0.92);
  color: var(--color-forest);
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.5);
  cursor: pointer;
}

.lightbox__step--prev {
  left: calc(0.5rem + env(safe-area-inset-left));
}

.lightbox__step--next {
  right: calc(0.5rem + env(safe-area-inset-right));
}

.lightbox__step:hover {
  background: var(--color-cream);
}

.lightbox__step:focus-visible {
  outline-color: var(--color-marigold);
}

.lightbox__count {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top));
  left: calc(0.75rem + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 0.5rem;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

@media (min-width: 64rem) {
  .lightbox__step--prev {
    left: 1.5rem;
  }

  .lightbox__step--next {
    right: 1.5rem;
  }
}


/* 10. Amenities
   -------------------------------------------------------------------------- */

.amenity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .amenity-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.amenity-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 0.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  hyphens: auto;
}

.amenity-list .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--icon);
}

@media (min-width: 48rem) {
  .amenity-list li {
    gap: 0.75rem;
    padding: 1rem 0.875rem;
    font-size: 1rem;
  }

  .amenity-list .icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.amenity-note {
  margin-top: 1rem;
  font-size: var(--step--1);
}

.amenity-groups {
  padding: 0.5rem 1.25rem 1.5rem;
  columns: 1;
  column-gap: 2.5rem;
}

@media (min-width: 40rem) {
  .amenity-groups {
    columns: 2;
  }
}

@media (min-width: 64rem) {
  .amenity-groups {
    columns: 3;
  }
}

.amenity-group {
  margin-bottom: 1.5rem;
  break-inside: avoid;
}

.amenity-group h3 {
  margin-bottom: 0.4rem;
  font-size: var(--step-0);
  font-weight: 600;
}

.amenity-group ul {
  padding-left: 1.1rem;
}

.amenity-group li + li {
  margin-top: 0.2rem;
}

.amenity-group li::marker {
  color: var(--icon);
}


/* 11. Disclosure (amenities list and FAQ)
   -------------------------------------------------------------------------- */

.disclosure {
  border-radius: var(--radius);
  background: var(--surface);
}

.disclosure + .disclosure {
  margin-top: 0.75rem;
}

.amenity-note + .disclosure {
  margin-top: 1.5rem;
}

.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  color: var(--heading);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}

.disclosure[open] > summary::after {
  transform: translateY(25%) rotate(-135deg);
}

@media (prefers-reduced-motion: no-preference) {
  .disclosure > summary::after {
    transition: transform 0.2s;
  }
}

.disclosure__body {
  max-width: 65ch;
  padding: 0 1.25rem 1.25rem;
}

.disclosure__body > * + * {
  margin-top: 0.75em;
}

/* Lists inside an answer (the pet policy) */
.disclosure__body ul {
  padding-left: 1.25rem;
}

.disclosure__body li + li {
  margin-top: 0.35em;
}

.faq-list {
  max-width: 48rem;
  margin-inline: auto;
}


/* 12. Food
   -------------------------------------------------------------------------- */

.check-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.check-list .icon {
  margin-top: 0.1rem;
  color: var(--icon);
}

.split__media {
  margin-inline: calc(-1 * var(--gutter));
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
}

@media (min-width: 56rem) {
  .split__media {
    margin-inline: 0;
  }

  .split__media img {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
  }
}


/* 13. Reviews: one featured under the quick facts, and the reviews section
   -------------------------------------------------------------------------- */

/* Initials instead of guests' photos. Every colour pair is at least 4.5:1. */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  object-fit: cover; /* when it's a photo from Google */
}

.avatar--2 {
  background: var(--color-pool);
}

.avatar--3 {
  background: var(--color-moss);
}

.avatar--4 {
  background: var(--color-marigold);
  color: var(--color-ink);
}

.quote-band__figure {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.quote-band__stars {
  display: flex;
  gap: 0.125rem;
  color: var(--color-marigold);
}

.quote-band__stars .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.quote-band__text {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  line-height: 1.35;
}

.quote-band__text p::before {
  content: "\201C";
  color: var(--accent-text);
}

.quote-band__text p::after {
  content: "\201D";
  color: var(--accent-text);
}

.quote-band__cite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--1);
  line-height: 1.35;
  text-align: left;
}

.quote-band__cite strong {
  display: block;
  color: var(--heading);
  font-size: 1rem;
}

.quote-band__more {
  margin-top: 0.75rem;
  text-align: center;
}

.quote-band__more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.review-summary {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 2rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.review-summary__score {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 2.6rem + 3vw, 4.75rem);
  font-variation-settings: "SOFT" 60;
  font-weight: 500;
  line-height: 1;
}

.review-summary__count {
  font-weight: 600;
}

.stars {
  --star: 1.5rem;
  position: relative;
  display: block;
  width: calc(5 * var(--star));
  height: var(--star);
}

.stars__row {
  display: flex;
  width: calc(5 * var(--star));
}

.stars__row .icon {
  width: var(--star);
  height: var(--star);
}

.stars__base {
  color: var(--star-off);
}

.stars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--rating, 5) / 5 * 100%);
  overflow: hidden;
  color: var(--color-marigold);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.badge .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-marigold);
}

.chip-label {
  margin-top: 0.5rem;
  font-size: var(--step--1);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--section-bg);
  color: var(--heading);
  font-size: 0.9375rem;
  font-weight: 600;
}

.review-summary__google {
  font-size: var(--step--1);
}

.review-cards {
  margin-top: 2.5rem;
}

/* Mobile: a swipeable row that shows a peek of the next card */
.review-track {
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 1rem;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  list-style: none;
}

.review-track > li {
  display: flex;
  scroll-snap-align: start;
}

@media (min-width: 48rem) {
  .review-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 64rem) {
  .review-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
}

@media (min-width: 48rem) {
  .review-card {
    padding: 1.5rem;
  }
}

/* The initials circle, the name and the source pill share one line, centred on each other.
   The stars sit on their own line, on the left in line with the circle and the review,
   so the name only shares its line with the pill and fits even on small phones. */
.review-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar who badge"
    "stars stars stars";
  align-items: center;
  gap: 0.3rem 0.75rem;
}

.review-card__head > .avatar {
  grid-area: avatar;
}

.review-card__who {
  display: grid;
  grid-area: who;
  min-width: 0;
  line-height: 1.35;
}

/* Only live Google reviews have one ("2 months ago") */
.review-card__date {
  font-size: var(--step--1);
}

.review-card__rating {
  display: contents;
}

.review-card__rating .source-badge {
  grid-area: badge;
  justify-self: end;
}

.review-card__name {
  overflow-wrap: anywhere; /* a very long name wraps instead of running under the stars */
}

.review-card__stars {
  display: flex;
  grid-area: stars;
  justify-self: start;
  gap: 0.125rem;
}

.review-card__stars .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Phones: a slightly smaller circle leaves room for the name */
.review-card .avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.125rem;
}

@media (min-width: 48rem) {
  .review-card__stars .icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .review-card .avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
  }
}

.review-card__stars .is-on {
  color: var(--color-marigold);
}

.review-card__stars .is-off {
  color: var(--star-off);
}

.review-card__text {
  display: -webkit-box;
  overflow: hidden;
  white-space: pre-line; /* keeps a guest's own line breaks */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.review-card__text--short {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  line-height: 1.4;
}

.review-card__text.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

.review-card__more {
  align-self: flex-start;
  min-height: 44px;
  margin-top: -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--heading);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.review-card__name {
  color: var(--heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.source-badge {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--heading);
  font-size: 0.8125rem;
  font-weight: 600;
}

.review-cards__note {
  margin-top: 1rem;
  font-size: var(--step--1);
  text-align: center;
}

/* Google's attribution rules: the text "Google Maps", unmodified, Roboto 400, 12 to 16px,
   in white, black (#1F1F1F) or grey (#5E5E5E) with enough contrast */
.google-maps-attribution {
  color: var(--gmaps-attribution);
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.review-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}

.review-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.review-noscript {
  margin-top: 1.5rem;
  text-align: center;
}


/* 14. Location
   -------------------------------------------------------------------------- */

.location-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .location-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 3.5rem;
  }
}

.map-frame {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

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

.place-group + .place-group {
  margin-top: 2rem;
}

.place-group h3 {
  margin-bottom: 0.85rem;
}

.place-list {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
}

.place-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.place-list .icon {
  margin-top: 0.1rem;
  color: var(--icon);
}

.place-list strong {
  display: block;
  color: var(--heading);
}

/* Taller tap target (24px minimum) for a link used as a label */
.place-list strong a {
  display: inline-block;
}


/* 15. Good to know
   -------------------------------------------------------------------------- */

.house-note {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  line-height: 1.3;
  text-align: center;
}

.info-grid {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
}

.info-card h3 {
  margin-bottom: 0.25rem;
  font-size: var(--step-1);
}


/* 16. Closing call to action and footer
   -------------------------------------------------------------------------- */

/* How booking works: three numbered steps. Phones: a list. Tablets and up: three columns. */
.steps {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  position: relative;
  padding: 1.25rem 1.25rem 1.35rem 4.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  position: absolute;
  top: 1.15rem;
  left: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

.steps__item h3 {
  margin-bottom: 0.35rem;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    text-align: center;
  }

  .steps__item {
    padding: 4.5rem 1.5rem 1.75rem;
  }

  .steps__item::before {
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Bottom padding on phones leaves room for the WhatsApp bar and the back-to-top button above it,
   so neither covers the last line of the footer */
.site-footer {
  background: var(--footer-bg);
  color: var(--color-cream);
  padding-bottom: calc(var(--wa-bar-h) + var(--wa-ridge-h) + 44px + 1rem + env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
  .site-footer {
    padding-bottom: 3rem;
  }
}

.footer-ridge {
  width: 100%;
  height: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background: var(--bg);
}

.footer-ridge__front {
  fill: var(--footer-bg);
}

.footer-grid {
  display: grid;
  gap: 2rem;
  padding-top: 2.5rem;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.site-footer .brand {
  color: var(--color-cream);
  font-size: 1.5rem;
}

.site-footer .brand__mark {
  color: var(--color-cream);
}

.site-footer address {
  margin-top: 0.75rem;
  font-style: normal;
}

.site-footer a {
  color: var(--color-cream);
}

.footer-links {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}

.footer-links .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Copyright, then the credit: on the next line on phones, on the same line from tablets up */
.footer-copy {
  display: grid;
  gap: 0.35rem;
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(247 242 233 / 0.2);
  font-size: var(--step--1);
}

@media (min-width: 48rem) {
  .footer-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0;
  }

  .footer-copy p + p::before {
    content: "·";
    margin-inline: 0.75rem;
  }
}


/* 17. WhatsApp bar (phones only; tablets and up have the button in the header)
   -------------------------------------------------------------------------- */

.wa-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem calc(var(--gutter) + env(safe-area-inset-right)) calc(0.625rem + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
  background: var(--bg);
  color: var(--text);
  /* A soft shadow that follows the hill line, not a straight edge */
  filter: drop-shadow(0 -3px 6px rgb(0 0 0 / 0.14));
  transition: transform 0.3s ease;
}

/* The top edge: the footer's two hill lines (a translucent moss ridge behind, the page colour in front),
   sitting just above the bar and overlapping it by 1px so no seam shows */
.wa-bar__ridge {
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: var(--wa-ridge-h);
  pointer-events: none;
}

.wa-bar__ridge-back {
  fill: var(--color-moss);
  fill-opacity: 0.45;
}

.wa-bar__ridge-front {
  fill: var(--bg);
}

/* With JavaScript, the bar steps aside while the hero or closing WhatsApp buttons are on screen (js/site.js) */
.js .wa-bar:not(.is-shown) {
  visibility: hidden;
  transform: translateY(calc(100% + var(--wa-ridge-h)));
  transition: transform 0.3s ease, visibility 0s 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .wa-bar,
  .js .wa-bar:not(.is-shown) {
    transition: none;
  }
}

/* "Planning a getaway? / Tell us your dates": a line of copy, so the first part uses the heading serif */
.wa-bar__text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.wa-bar__title {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-variation-settings: "SOFT" 60;
  font-weight: 600;
}

.wa-bar__sub {
  font-size: 0.875rem;
}

/* The footer makes links cream and focus rings marigold; the bar uses the page colours */
.wa-bar .wa-bar__btn {
  flex: none;
  padding-inline: 1.15rem;
  color: var(--color-white);
}

.wa-bar :focus-visible {
  outline-color: var(--focus);
}

/* "Enquire" is shown; screen readers hear "Enquire on WhatsApp" */
.wa-bar__more {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The smallest phones (under about 360px): a little tighter, so the title stays on one line */
@media (max-width: 22.4rem) {
  .wa-bar {
    gap: 0.5rem;
  }

  .wa-bar__title {
    font-size: 0.9375rem;
  }

  .wa-bar .wa-bar__btn {
    padding-inline: 0.9rem;
  }
}

@media (min-width: 48rem) {
  .wa-bar {
    display: none;
  }
}

/* Back to top: a small round button, bottom right. On phones it sits above the WhatsApp bar
   (48px button + padding, plus its hill edge) and drops to the corner when the bar steps aside. */
:root {
  --wa-bar-h: calc(48px + 1.25rem); /* the bar itself */
  --wa-ridge-h: 2rem;               /* its hill edge, above it; the hills rise up to about 1.7rem */
}

.to-top {
  position: fixed;
  right: calc(var(--gutter) + env(safe-area-inset-right));
  bottom: calc(var(--wa-bar-h) + var(--wa-ridge-h) + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: opacity 0.2s, transform 0.2s, bottom 0.3s ease;
}

.site-footer .to-top {
  color: var(--heading);
}

.to-top:hover {
  background: var(--surface-1);
}

.to-top:focus-visible {
  outline-color: var(--focus);
}

.to-top .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.js .wa-bar:not(.is-shown) + .to-top {
  bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* With JavaScript, it waits until the visitor has scrolled a couple of screens (js/site.js) */
.js .to-top:not(.is-shown) {
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s, transform 0.2s, bottom 0.3s ease, visibility 0s 0.2s;
}

@media (min-width: 48rem) {
  .to-top,
  .js .wa-bar:not(.is-shown) + .to-top {
    right: calc(1.5rem + env(safe-area-inset-right));
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .js .to-top:not(.is-shown) {
    transform: none;
    transition: none;
  }
}


/* 18. Reveal on scroll (only where supported, never with reduced motion)
   -------------------------------------------------------------------------- */

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}


/* 19. Print (always light, whatever the theme on screen)
   -------------------------------------------------------------------------- */

@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
    --bg: #FFFFFF;
    --bg-alt: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #FFFFFF;
    --text: var(--color-ink);
    --heading: var(--color-forest);
    --accent-text: var(--color-terracotta-dark);
    --icon: var(--color-moss);
    --line: rgb(0 0 0 / 0.2);
    --line-strong: rgb(0 0 0 / 0.35);
  }

  .wa-bar,
  .to-top,
  .site-nav,
  .site-header__cta,
  .icon-button,
  .skip-link,
  .lightbox,
  .gallery-more,
  .map-frame,
  .footer-ridge {
    display: none !important;
  }

  .site-header {
    position: static;
  }

  .property-hero {
    min-height: 0;
    background: none;
    color: var(--color-ink);
  }

  .property-hero::after,
  .property-hero__media,
  .property-hero .btn-row {
    display: none;
  }

  .property-hero h1,
  .property-hero__accent,
  .property-hero__eyebrow,
  .property-hero__lede,
  .hero-stats__value,
  .hero-stats__label {
    color: var(--color-ink);
    text-shadow: none;
  }

  .property-hero__content {
    margin: 0;
    padding: 1rem 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .hero-stats {
    background: none;
    border-color: rgb(0 0 0 / 0.2);
  }

  .reveal {
    animation: none !important;
  }
}