/* =========================================================
   Place to Stay — Elegant minimal design system
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --bg:        #FAF7F2;   /* warm ivory */
  --bg-alt:    #F2EEE5;   /* soft sand */
  --surface:   #FFFFFF;
  --ink:       #1C1C1C;
  --ink-2:     #3A3A3A;
  --muted:     #7A7468;
  --line:      #E6DFD2;
  --accent:    #2F4F4A;   /* deep eucalyptus */
  --accent-2:  #3D665F;
  --gold:      #B8934F;   /* warm brass */
  --danger:    #B44A3A;

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(28,28,28,.04), 0 2px 8px rgba(28,28,28,.04);
  --shadow:    0 6px 30px rgba(28,28,28,.08);
  --shadow-lg: 0 20px 60px rgba(28,28,28,.14);

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; }

p  { margin: 0 0 1em; color: var(--ink-2); }
p.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(64px, 10vw, 128px) 0;
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 12px;
  transform: translateY(-2px);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(250,247,242,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1;
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--accent);
  display: block;
}
.brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.brand small {
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer .brand-mark { color: var(--bg); }

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language switcher */
.lang {
  position: relative;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-2);
}
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--ink-2);
}
.lang-toggle:hover { border-color: var(--line); }
.lang-toggle svg { width: 12px; height: 12px; opacity: .6; }

.lang-menu {
  position: absolute; top: 100%; right: 0;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  margin-top: 6px;
  display: none;
}
.lang.open .lang-menu { display: block; }
.lang-menu button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--ink-2);
  text-align: left;
}
.lang-menu button:hover { background: var(--bg-alt); color: var(--ink); }
.lang-menu button.active { color: var(--accent); }
.lang-menu button small { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Mobile drawer — hidden by default, only shown via @media (max-width: 720px) */
.mobile-drawer { display: none; }
.burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

.btn-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.btn-link:hover { gap: 14px; border-color: var(--accent); color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 180px 0 80px;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.18) 100%),
    url('https://images.unsplash.com/photo-1536663815808-535e2280d2c2?auto=format&fit=crop&w=1600&q=75') center/cover no-repeat;
  z-index: -1;
}
/* Smaller hero image on phones to cut LCP weight from ~280KB to ~80KB */
@media (max-width: 720px) {
  .hero-media {
    background:
      linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.18) 100%),
      url('https://images.unsplash.com/photo-1536663815808-535e2280d2c2?auto=format&fit=crop&w=900&q=70') center/cover no-repeat;
  }
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 18%, transparent 30%, transparent 70%, var(--bg) 100%);
}

/* On hero pages (homepage), make nav text/brand white until the user scrolls.
   Once scrolled, .site-header.scrolled adds a translucent cream background and
   the standard dark text becomes legible again. */
body:has(.hero) .site-header:not(.scrolled) .brand,
body:has(.hero) .site-header:not(.scrolled) .brand small,
body:has(.hero) .site-header:not(.scrolled) .nav-links a,
body:has(.hero) .site-header:not(.scrolled) .lang-toggle,
body:has(.hero) .site-header:not(.scrolled) .lang-code,
body:has(.hero) .site-header:not(.scrolled) .burger span { color: #fff; }
body:has(.hero) .site-header:not(.scrolled) .burger span { background: #fff; }
body:has(.hero) .site-header:not(.scrolled) .brand-mark { color: #fff; }
body:has(.hero) .site-header:not(.scrolled) .nav-links a.active::after { background: #fff; }
body:has(.hero) .site-header:not(.scrolled) .nav-links a:hover { color: #EADDB7; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  min-height: calc(100vh - 260px);
}
.hero-headline { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero-headline .eyebrow { color: #EADDB7; }
.hero-headline .eyebrow::before { background: #EADDB7; }
.hero-headline h1 {
  color: #fff;
  font-weight: 300;
  max-width: 14ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
}
.hero-headline h1 em {
  font-style: italic;
  color: #EADDB7;
}
.hero-headline p {
  color: rgba(255,255,255,.92);
  font-size: 1.1rem;
  max-width: 44ch;
  margin-top: 1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hero-cta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 2rem;
}
.hero-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero-cta .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Hero search panel */
.hero-search {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.8);
}
.hero-search h4 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0;
}
.hero-search-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.hero-search-field {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.hero-search-field:focus-within { border-color: var(--accent); }
.hero-search-field label {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.hero-search-field select,
.hero-search-field input {
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: .95rem; color: var(--ink);
  padding: 2px 0;
}
.hero-search .btn { width: 100%; margin-top: 8px; padding: 16px; }

/* ---------- Cards: Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service {
  padding: 48px 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .3s var(--ease);
}
.service:last-child { border-right: 0; }
.service:hover { background: var(--bg-alt); }
.service-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: .1em;
}
.service h3 { font-size: 1.4rem; margin: 0 0 6px; }
.service p { font-size: .92rem; color: var(--muted); margin: 0; }
.service-link {
  font-size: .85rem;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 20px;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: gap .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.service-link:hover { color: var(--accent); gap: 12px; border-color: var(--accent); }

/* ---------- Flat Sections (grouped properties) ---------- */
.flat-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  /* Render-perf: skip layout/paint for off-screen sections. Native browser
     intersection observer; no JS, SEO-safe (content stays in DOM). */
  content-visibility: auto;
  /* Reserve approximate height so scrollbar is stable while sections are
     not yet rendered. ~520px is the collapsed flat-header height; expanded
     sections grow naturally once they enter the viewport. */
  contain-intrinsic-size: 1px 520px;
}
.flat-section.expanded {
  margin-top: 48px;
  padding-top: 48px;
}
.flat-section:first-of-type { margin-top: 24px; padding-top: 0; border-top: 0; }

.flat-header {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s var(--ease);
}
.flat-header:hover { opacity: 0.92; }
.flat-section.expanded .flat-header { margin-bottom: 36px; }
.flat-header-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.flat-header-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.flat-section:hover .flat-header-media img { transform: scale(1.03); }

.flat-header-info { padding-top: 4px; position: relative; padding-right: 56px; }
.flat-toggle-btn {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
  flex-shrink: 0;
  padding: 0;
}
.flat-toggle-btn svg {
  width: 16px; height: 16px;
  transition: transform 0.35s var(--ease);
}
.flat-section.expanded .flat-toggle-btn svg { transform: rotate(180deg); }
.flat-header:hover .flat-toggle-btn {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.flat-eyebrow {
  display: inline-block;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  margin-bottom: 10px;
}
.flat-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--ink);
}
.flat-location {
  font-size: .95rem;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
}
.flat-location svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.flat-location strong { color: var(--ink); font-weight: 600; }

.flat-desc {
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 56ch;
}
.flat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.flat-price-range {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--accent);
  font-weight: 500;
}
.flat-price-range small {
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--muted);
  margin-left: 2px;
  font-weight: 400;
}
.flat-features {
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .02em;
}

.flat-rooms {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.flat-section.expanded .flat-rooms {
  display: grid;
  animation: flatExpand 0.35s var(--ease);
}
@keyframes flatExpand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.flats-load-more { text-align: center; margin-top: 64px; }

@media (max-width: 1024px) {
  .flat-header { grid-template-columns: 280px 1fr; gap: 28px; }
  .flat-rooms { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 720px) {
  .flat-header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .flat-header-media { aspect-ratio: 16 / 9; }
  .flat-rooms { grid-template-columns: 1fr; gap: 28px; }
  .flat-section { margin-top: 48px; padding-top: 40px; }
  /* Tighter property cards on phones: 16:11 instead of 4:5 cuts ~30% vertical space */
  .property-media { aspect-ratio: 16 / 11; border-radius: 14px; }
  .property-title-link h3,
  .property h3 { font-size: 1.15rem; line-height: 1.25; margin-top: 14px; }
  .property-meta { font-size: .82rem; }
  /* Page hero gets a bit more breathing room and smaller h1 */
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.05; }
  .page-hero .lead { font-size: 1rem; }
  /* Sticky filters bar gets horizontal scroll instead of wrapping into multiple lines */
  .filters {
    flex-wrap: nowrap; overflow-x: auto;
    margin: 0 -20px 28px; padding: 4px 20px 12px;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; flex: 0 0 auto; padding: 8px 16px; font-size: .82rem; }
}
@media (max-width: 480px) {
  /* Phone-tight container padding */
  .container { padding-left: 18px; padding-right: 18px; }
  /* Bring the flat hero image down a notch on tiny phones */
  .flat-header-media { aspect-ratio: 16 / 10; }
  .property-media { aspect-ratio: 4 / 3; }
  /* Stat grid on properties hero stacks 2 columns on tiny phones */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ---------- Property Cards ---------- */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.property {
  background: transparent;
  overflow: hidden;
  transition: transform .4s var(--ease);
  cursor: pointer; /* whole card is clickable — see properties.html card-click handler */
}
.property:hover { transform: translateY(-4px); }
.property-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.property-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.property:hover .property-media img { transform: scale(1.05); }
/* Photo + title clickable, navigate to per-room page; URL becomes /rooms/<sid>/ */
.property-photo-link {
  display: block; width: 100%; height: 100%;
  text-decoration: none; color: inherit;
}
.property-photo-link img { display: block; }
.property-title-link {
  text-decoration: none; color: inherit;
  transition: color .2s var(--ease);
}
.property-title-link:hover { color: var(--accent); }
.property-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.property-like {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.property-like:hover { background: var(--accent); color: #fff; }
.property-like svg { width: 16px; height: 16px; }

.property-body { padding: 20px 2px 0; }
.property-location {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.property-location svg { width: 12px; height: 12px; }
.property h3 {
  font-size: 1.35rem;
  margin: 0 0 10px;
  line-height: 1.25;
}
.property-desc {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 14px;
}
.property-specs {
  display: flex; gap: 18px; flex-wrap: wrap;
  color: var(--muted);
  font-size: .88rem;
  margin-bottom: 12px;
}
.property-specs span { display: inline-flex; align-items: center; gap: 6px; }
.property-specs svg { width: 14px; height: 14px; opacity: .7; }
.property-footer {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.property-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
}
.property-price small {
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.property-cta {
  font-size: .82rem; font-weight: 500;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .25s var(--ease);
}
.property-cta:hover { gap: 10px; }

/* ---------- Neighborhoods ---------- */
.neighborhoods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.neighborhood {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  display: block;
  cursor: pointer;
}
.neighborhood img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.neighborhood::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,0) 40%, rgba(28,28,28,.85) 100%);
  transition: background .35s var(--ease);
}
.neighborhood:hover img { transform: scale(1.06); }
.neighborhood:hover::after {
  background: linear-gradient(180deg, rgba(28,28,28,.1) 20%, rgba(47,79,74,.85) 100%);
}
.neighborhood-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px;
  z-index: 2;
  color: #fff;
}
.neighborhood-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 4px;
  font-weight: 500;
}
.neighborhood-body p {
  margin: 0;
  font-size: .82rem;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 6px;
}
.neighborhood-body p::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
@media (max-width: 1024px) {
  .neighborhoods-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .neighborhoods-grid { grid-template-columns: 1fr; }
}

/* Filter chips */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 40px;
  justify-content: center;
}
.chip {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media .badge {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  background: rgba(255,255,255,.95);
  padding: 16px 20px;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px;
  font-size: .92rem;
  box-shadow: var(--shadow-sm);
}
.split-media .badge strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
.split-body ul {
  list-style: none; padding: 0; margin: 24px 0;
}
.split-body li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
  color: var(--ink-2);
}
.split-body li:last-child { border-bottom: 0; }
.split-body li svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--accent); margin-top: 3px;
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--ink);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat-num em { color: var(--accent); font-style: normal; }
.stat-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Testimonials ---------- */
.testimonials-bg { background: var(--bg-alt); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.google-reviews {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  margin: 0 auto 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-body);
  box-shadow: 0 2px 12px rgba(36, 46, 43, 0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  width: fit-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.google-reviews:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 6px 22px rgba(36, 46, 43, 0.08);
  border-color: var(--accent);
}
.google-reviews .g-mark { width: 20px; height: 20px; flex-shrink: 0; }
.google-reviews .g-rate { font-size: 1.2rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.google-reviews .g-stars { display: inline-flex; gap: 2px; }
.google-reviews .g-stars svg { width: 16px; height: 16px; }
.google-reviews .g-count { font-size: .92rem; color: var(--ink-2); }
.google-reviews .g-arrow { color: var(--accent); font-size: 1.05rem; transition: transform .25s ease; }
.google-reviews:hover .g-arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .google-reviews { gap: 10px; padding: 12px 18px; flex-wrap: wrap; justify-content: center; }
  .google-reviews .g-count { font-size: .85rem; }
}
.testimonial {
  background: var(--surface);
  padding: 36px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.testimonial-stars {
  display: flex; gap: 3px;
  color: var(--gold);
  margin-bottom: 16px;
}
.testimonial-stars svg { width: 15px; height: 15px; }
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 500;
}
.testimonial blockquote::before {
  content: "\201C";
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 0;
  vertical-align: -0.25em;
  margin-right: 2px;
}
.testimonial-person {
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testimonial-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .05em;
}
.testimonial-name { font-weight: 600; color: var(--ink); font-size: .95rem; }
.testimonial-role { font-size: .8rem; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 8vw, 96px);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: radial-gradient(closest-side, rgba(47,79,74,.5), transparent);
}
.cta-band h2 { color: var(--bg); position: relative; max-width: 16ch; }
.cta-band p { color: rgba(250,247,242,.7); position: relative; max-width: 52ch; margin-bottom: 28px; }
.cta-band .btn-accent { position: relative; }
.cta-band-inner { position: relative; }

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field {
  display: flex; flex-direction: column;
  grid-column: span 1;
}
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 0 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s var(--ease);
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.form-feedback {
  background: var(--accent);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: .92rem;
  margin-top: 18px;
  display: none;
}
.form-feedback.show { display: block; animation: fadeUp .4s var(--ease); }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}
.contact-info {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 40px;
  align-self: start;
}
.contact-info h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 24px; }
.contact-info dl { margin: 0; }
.contact-info dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin: 22px 0 6px;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}
.contact-info dd a:hover { color: var(--accent); }

.map-frame {
  margin-top: 40px;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 30% 40%, rgba(47,79,74,.15), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(184,147,79,.18), transparent 60%),
    linear-gradient(135deg, #E8E2D5, #DDD5C2);
  display: grid; place-items: center;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.4rem;
  border: 1px solid var(--line);
}
.map-frame svg { width: 38px; height: 38px; margin-bottom: 10px; display: block; margin-inline: auto; color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(250,247,242,.7);
  padding: 80px 0 30px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250,247,242,.1);
}
.site-footer .brand { color: var(--bg); font-size: 1.8rem; }
.site-footer .brand small { color: var(--gold); }
.site-footer p { color: rgba(250,247,242,.6); font-size: .95rem; max-width: 34ch; }
.footer-col h4 {
  color: var(--bg);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(250,247,242,.65); font-size: .95rem; }
.footer-col a:hover { color: var(--bg); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 30px;
  font-size: .82rem;
  color: rgba(250,247,242,.45);
  gap: 20px;
  flex-wrap: wrap;
}
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(250,247,242,.2);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(250,247,242,.7);
  transition: all .25s var(--ease);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-social svg { width: 16px; height: 16px; }

/* ---------- Page hero (non-home pages) ---------- */
.page-hero {
  padding: 180px 0 80px;
  background: var(--bg-alt);
  position: relative;
}
.page-hero h1 { max-width: 18ch; }
.page-hero p.lead { margin-top: 12px; }

/* ---------- Simplified filter bar (sticky, auto-hide) ---------- */
.filter-bar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  /* Stick to the top once scrolled, just under the site header (which is ~70px) */
  position: sticky;
  top: 72px;
  z-index: 30;
  /* Smooth slide for auto-hide on scroll-down */
  transition: transform .28s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
/* Visual ledge when stuck — subtle shadow appears once it's actually sticky */
.filter-bar.is-stuck {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* Auto-hide: slides above the header when scrolling down. Releases on scroll-up.
   !important needed because .reveal.in (page-load fade-in) sets transform: translateY(0). */
.filter-bar.is-hidden {
  transform: translateY(calc(-100% - 80px)) !important;
  box-shadow: none;
}
/* Override inside the filter-bar: shrink chips so the whole row stays one line */
.filter-bar .chip {
  padding: 6px 13px;
  font-size: .8rem;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.filter-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 56px;
  flex-shrink: 0;
}
.filter-more {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-more[hidden] { display: none; }
.filters-more-btn {
  margin-left: auto;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 11px !important;
  font-size: .76rem !important;
  border: 1px dashed var(--line) !important;
  background: transparent !important;
  color: var(--muted) !important;
}
.filters-more-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.filters-more-btn.is-open { border-color: var(--accent) !important; color: var(--accent) !important; }
.filters-more-btn svg { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.filters-more-btn.is-open svg { transform: rotate(180deg); }
@media (max-width: 720px) {
  .filter-bar { padding: 7px 12px; gap: 5px; }
  .filter-bar .chip { padding: 5px 11px; font-size: .76rem; }
  .filter-label { min-width: 0; flex-basis: 100%; margin-bottom: -3px; font-size: .6rem; }
  .filters-more-btn { margin-left: 0; }
}

/* ---------- Segmented view toggle (List / Map) ---------- */
.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  align-items: center;
}
.view-toggle a,
.view-toggle button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.view-toggle a:hover,
.view-toggle button:hover { color: var(--ink); }
.view-toggle a.active,
.view-toggle button.active {
  background: var(--ink);
  color: var(--bg);
}
.view-toggle svg {
  width: 14px; height: 14px;
  stroke-width: 1.8;
  flex-shrink: 0;
}

/* ---------- Map page layout ---------- */
:root {
  --map-header-clearance: 86px;     /* fixed header (~74px) + breathing room */
  --map-toolbar-h: 56px;
  --map-filters-h: 54px;
}
body.map-page { background: var(--bg-alt); overflow: hidden; }

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  margin-top: var(--map-header-clearance);
  min-height: var(--map-toolbar-h);
}
.map-toolbar .crumbs { margin-bottom: 0; }
.map-toolbar .stats {
  margin-left: auto;
  font-size: .9rem;
  color: var(--muted);
  font-weight: 500;
}
.map-toolbar .map-toolbar-actions {
  display: inline-flex; align-items: center; gap: 10px;
}
.map-hide-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.map-hide-btn:hover { border-color: var(--ink); color: var(--ink); }
.map-hide-btn svg { width: 14px; height: 14px; }

.map-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 11px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  min-height: var(--map-filters-h);
  align-items: center;
}
.map-filters::-webkit-scrollbar { display: none; }
.map-filters .chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.map-filters .chip:hover { border-color: var(--gold); color: var(--ink); }
.map-filters .chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.map-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: calc(100vh - var(--map-header-clearance) - var(--map-toolbar-h) - var(--map-filters-h));
  min-height: 540px;
  transition: grid-template-columns .35s var(--ease);
}
.map-search.map-hidden { grid-template-columns: minmax(0, 1fr) 0; }
.map-search.map-hidden .map-pane { display: none; }
.map-list-pane {
  overflow-y: auto;
  padding: 22px var(--gutter) 60px;
  background: var(--bg-alt);
}
.map-list-pane::-webkit-scrollbar { width: 8px; }
.map-list-pane::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.map-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.map-search.map-hidden .map-cards {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.map-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.map-card:hover,
.map-card.is-active {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.map-card-photo {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt) center/cover no-repeat;
  background-image: var(--bg);
  position: relative;
}
.map-card-photo .price-badge,
.map-card-photo .avail-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.map-card-photo .avail-badge {
  background: rgba(28,28,28,.92);
  color: #fff;
}
.map-card-body { padding: 14px 16px 16px; }
.map-card-body .parish {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 600;
  margin-bottom: 6px;
}
.map-card-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 4px;
}
.map-card-body .meta {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
.map-card-body .card-price {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}
.map-card-body .card-price small { font-family: var(--font-body); color: var(--muted); font-size: .76rem; }

.map-pane {
  position: relative;
  height: 100%;
  background: var(--bg-alt);
}
#pts-map { width: 100%; height: 100%; }

/* Price pin */
.pts-price-pin {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 10px 5px 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s var(--ease), background .12s var(--ease), color .12s var(--ease);
  display: inline-block;
}
.pts-price-pin:hover,
.pts-price-pin.is-active {
  background: var(--ink);
  color: var(--bg);
  transform: scale(1.18);
  z-index: 1000 !important;
}
.pts-price-pin.is-empty { opacity: .55; font-size: .7rem; padding: 3px 7px; }
.leaflet-marker-icon.pts-marker { background: none; border: none; }

/* Popup */
.leaflet-popup-content-wrapper { border-radius: var(--radius); padding: 0; }
.leaflet-popup-content { margin: 0; min-width: 240px; }
.map-popup {
  font-family: var(--font-body);
  overflow: hidden;
  border-radius: var(--radius);
}
.map-popup-photo {
  aspect-ratio: 16 / 10;
  background: var(--bg-alt) center/cover no-repeat;
  background-image: var(--bg);
}
.map-popup-body { padding: 14px 16px 16px; }
.map-popup-body .parish {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 600; margin-bottom: 4px;
}
.map-popup-body h4 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--ink); margin: 0 0 6px;
}
.map-popup-body .meta { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.map-popup-body .price { color: var(--ink); font-weight: 600; font-size: .95rem; margin-bottom: 12px; }
.map-popup-body a.go {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: background .25s var(--ease);
}
.map-popup-body a.go:hover { background: var(--accent); }

@media (max-width: 900px) {
  /* Mobile map page: stack map ON TOP (sticky) + cards below, instead of the
     desktop side-by-side. Users see the map without scrolling, and the cards
     remain a vertical feed below it. */
  body.map-page { overflow: auto; }
  .map-search {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .map-pane {
    order: 0;
    position: sticky;
    top: 0;
    height: 42vh;
    min-height: 280px;
    z-index: 5;
  }
  .map-list-pane {
    order: 1;
    padding-top: 16px;
  }
  .map-search.map-hidden .map-pane { display: none; }
}
@media (max-width: 540px) {
  /* Single-column cards on phones — the 2-column auto-fill gets too cramped. */
  .map-cards { grid-template-columns: 1fr; gap: 14px; }
  .map-card-photo { aspect-ratio: 16/10; }
}
.crumbs {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-bottom: 20px;
}
.crumbs a { color: var(--muted); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--accent); border-color: currentColor; }
.crumbs span { margin: 0 10px; opacity: .5; }

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service { border-right: 0; border-bottom: 1px solid var(--line); }
  .service:nth-child(2n) { border-right: 0; }
  .service:nth-child(odd) { border-right: 1px solid var(--line); }
  .properties-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .hero { padding: 140px 0 60px; }
  .hero-search { margin-top: 20px; }
}

@media (max-width: 720px) {
  .nav-links,
  .nav-actions .btn-link,
  .nav-actions .btn { display: none; }
  .burger { display: flex; }
  .nav-actions .lang { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .service { border-right: 0 !important; }
  .properties-grid,
  .testimonials-grid,
  .form-grid,
  .footer-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .section { padding: 64px 0; }

  /* Mobile nav drawer — bulletproof full-screen overlay.
     Explicit top/left/right/bottom (not just inset) for older iOS Safari.
     Hardcoded opaque colour so theme overrides can't make it translucent.
     Very high z-index so it sits above the reamaze widget + cookies banner. */
  .mobile-drawer {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* iOS Safari URL-bar-aware */
    background: #FAF7F2;
    z-index: 9999;
    padding: 88px 28px 40px;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-drawer.open { transform: translateY(0) !important; }
  .mobile-drawer a {
    font-family: var(--font-display);
    font-size: 1.85rem;
    color: var(--ink);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    background: #FAF7F2; /* belt-and-braces against any anchor background bleed */
  }
  /* Keep the burger above the drawer so it stays clickable to close. */
  .burger { position: relative; z-index: 10000; }
  /* Lock body scroll when drawer is open (JS also sets this; CSS as fallback). */
  body:has(.mobile-drawer.open) { overflow: hidden; }
}

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  left: 24px;
  /* env(safe-area-inset-bottom) keeps the button above the iOS home indicator. */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 3px 8px rgba(0,0,0,.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, .45), 0 3px 8px rgba(0,0,0,.1); }
.wa-float svg { width: 22px; height: 22px; flex-shrink: 0; }
.wa-float .wa-label { white-space: nowrap; }
@media (max-width: 640px) {
  .wa-float {
    padding: 12px;
    /* On phones, tuck it into the bottom-left corner with a smaller offset. */
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .wa-float .wa-label { display: none; }
}

/* ---------- Cookie banner ---------- */
.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9998;
  max-width: min(620px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  animation: cookiein .4s var(--ease);
}
@keyframes cookiein { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cookie-bar.hide { opacity: 0; transform: translate(-50%, 20px); transition: .3s var(--ease); }
.cookie-bar-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cookie-bar p { margin: 0; font-size: .9rem; color: var(--ink-2); flex: 1 1 260px; line-height: 1.5; }
.cookie-bar a { color: var(--accent); text-decoration: underline; }
.cookie-bar .btn { padding: 8px 18px; font-size: .88rem; flex-shrink: 0; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 720px) {
  /* On phones the cookie banner needs to share the bottom strip with the
     WhatsApp button (left) and the Reamaze widget (right). Slide it ABOVE
     those instead of overlapping, shrink the copy, keep the action compact.
     Safe-area-inset keeps it above the iOS home indicator. */
  .cookie-bar {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    padding: 10px 14px;
    max-width: calc(100vw - 24px);
    border-radius: 14px;
  }
  .cookie-bar p { font-size: .8rem; flex: 1 1 200px; }
  .cookie-bar .btn { padding: 7px 14px; font-size: .8rem; }
  /* Full-width on phones (was shrink-to-fit and only ~230px wide once the
     second consent button was added). */
  .cookie-bar { left: 12px; right: 12px; max-width: none; transform: none; animation: none; }
  .cookie-bar.hide { transform: translateY(20px); }
  .cookie-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- Per-room photo gallery (lightbox) ---------- */
.pts-photo-count {
  position: absolute;
  bottom: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20,20,20,.78);
  color: #fff;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pts-photo-count svg { width: 13px; height: 13px; }
.property-media { cursor: pointer; }

.pts-gallery-overlay {
  position: fixed; inset: 0;
  background: rgba(8,8,8,.92);
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: stretch;
  animation: ptsglOverlay .25s var(--ease);
}
.pts-gallery-overlay.is-open { display: flex; }
@keyframes ptsglOverlay { from { opacity: 0; } to { opacity: 1; } }

.pts-gallery-close,
.pts-gallery-nav {
  position: absolute;
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.pts-gallery-close:hover,
.pts-gallery-nav:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }
.pts-gallery-close svg,
.pts-gallery-nav svg { width: 20px; height: 20px; }
.pts-gallery-close { top: 18px; right: 18px; }
.pts-gallery-prev  { top: 50%; left: 24px; transform: translateY(-50%); }
.pts-gallery-prev:hover { transform: translateY(-50%) scale(1.05); }
.pts-gallery-next  { top: 50%; right: 24px; transform: translateY(-50%); }
.pts-gallery-next:hover { transform: translateY(-50%) scale(1.05); }

.pts-gallery-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 70px 80px 130px;
  position: relative;
}
.pts-gallery-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  user-select: none;
}
.pts-gallery-overlay.is-loading .pts-gallery-img,
.pts-gallery-overlay.is-img-loading .pts-gallery-img { opacity: 0; }

/* Spinner — shown while the gallery JSON is fetching (is-loading)
   or while a specific photo is downloading (is-img-loading). */
.pts-gallery-spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
}
.pts-gallery-overlay.is-loading .pts-gallery-spinner,
.pts-gallery-overlay.is-img-loading .pts-gallery-spinner { display: flex; }

.pts-gallery-spinner-ring {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: #EADDB7;
  border-radius: 50%;
  animation: pts-gallery-spin .9s linear infinite;
}
.pts-gallery-spinner-text {
  color: rgba(255,255,255,.78);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@keyframes pts-gallery-spin {
  to { transform: rotate(360deg); }
}

/* "Pulse" the spinner if the user clicks a nav arrow while still loading,
   so the side-button click doesn't feel ignored. */
@keyframes pts-gallery-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  35%      { transform: translate(-50%, -50%) scale(1.18); }
}
.pts-gallery-overlay.pts-pulse .pts-gallery-spinner {
  animation: pts-gallery-pulse .45s ease-out;
}

/* During the JSON load the prev/next arrows should still be visible but
   visually dimmed so users see "they exist, just not ready". */
.pts-gallery-overlay.is-loading .pts-gallery-nav {
  opacity: .35;
  cursor: progress;
}

.pts-gallery-counter {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.pts-gallery-thumbs {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 110px;
  display: flex;
  gap: 6px;
  padding: 12px 24px;
  overflow-x: auto;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 100%);
  scrollbar-width: none;
}
.pts-gallery-thumbs::-webkit-scrollbar { display: none; }
.pts-gallery-thumbs button {
  flex-shrink: 0;
  width: 110px; height: 80px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #2a2a2a center/cover no-repeat;
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
  opacity: .75;
}
.pts-gallery-thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.pts-gallery-thumbs button.is-active {
  border-color: #EADDB7;
  opacity: 1;
}

@media (max-width: 720px) {
  .pts-gallery-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .pts-gallery-prev, .pts-gallery-next { display: none; } /* swipe instead */
  .pts-gallery-stage { padding: 60px 12px 120px; }
  .pts-gallery-thumbs { height: 88px; padding: 8px 12px; }
  .pts-gallery-thumbs button { width: 90px; height: 64px; }
}

/* ---------- Reserve booking modal ---------- */
.pts-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  animation: ptsmodalIn .25s var(--ease);
}
.pts-modal-overlay.is-open { display: flex; }
@keyframes ptsmodalIn { from { opacity: 0; } to { opacity: 1; } }

.pts-modal {
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 640px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: ptsmodalSlide .35s var(--ease);
  position: relative;
}
@keyframes ptsmodalSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pts-modal-header {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.pts-modal-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.pts-modal-subtitle {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 6px;
  display: block;
}
.pts-modal-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pts-modal-close:hover { background: var(--ink); color: var(--bg); }
.pts-modal-close svg { width: 16px; height: 16px; }

.pts-modal-context {
  margin: 14px 28px -4px;
  padding: 12px 14px;
  background: #FBF5E8;
  border: 1px solid #EADDB7;
  border-radius: 12px;
  font-size: .9rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pts-modal-context strong { color: var(--ink); font-weight: 600; }
.pts-modal-context[hidden] { display: none; }
.pts-modal-field[hidden] { display: none; }
.pts-modal-context-thumb {
  width: 56px; height: 44px;
  border-radius: 8px;
  background: var(--bg-alt) center/cover no-repeat;
  flex-shrink: 0;
}

.pts-modal-body {
  padding: 22px 28px 8px;
}
.pts-modal-section {
  margin-bottom: 22px;
}
.pts-modal-section h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.pts-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pts-modal-grid > .pts-modal-field-full { grid-column: 1 / -1; }
.pts-modal-field {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.pts-modal-field:focus-within { border-color: var(--accent); background: var(--surface); }
.pts-modal-field label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pts-modal-field label .req { color: var(--accent); margin-left: 2px; }
.pts-modal-field input,
.pts-modal-field select,
.pts-modal-field textarea {
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: .95rem; color: var(--ink);
  padding: 2px 0;
  width: 100%;
  resize: vertical;
}
.pts-modal-field textarea { min-height: 80px; line-height: 1.5; }

.pts-modal-footer {
  padding: 18px 28px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pts-modal-submit {
  width: 100%;
  padding: 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.pts-modal-submit:hover:not([disabled]) { background: var(--accent); transform: translateY(-1px); }
.pts-modal-submit[disabled] { opacity: .55; cursor: wait; }
.pts-modal-submit svg { width: 16px; height: 16px; }
.pts-modal-fineprint {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.pts-modal-fineprint a { color: var(--accent); text-decoration: underline; }

.pts-modal-feedback {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .9rem;
  display: none;
}
.pts-modal-feedback.show { display: block; }
.pts-modal-feedback.is-error {
  background: rgba(180,74,58,.08);
  border: 1px solid rgba(180,74,58,.3);
  color: var(--danger);
}

/* Success state */
.pts-modal[data-state="success"] .pts-modal-body,
.pts-modal[data-state="success"] .pts-modal-footer,
.pts-modal[data-state="success"] .pts-modal-context { display: none; }
.pts-modal-success {
  display: none;
  padding: 48px 28px 40px;
  text-align: center;
}
.pts-modal[data-state="success"] .pts-modal-success { display: block; }
.pts-modal-success-icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(47,79,74,.1);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.pts-modal-success-icon svg { width: 28px; height: 28px; }
.pts-modal-success h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.pts-modal-success p { color: var(--muted); margin: 0 auto 22px; max-width: 36ch; }
.pts-modal-success .btn { display: inline-flex; }

@media (max-width: 640px) {
  .pts-modal-overlay { padding: 0; align-items: stretch; }
  .pts-modal { border-radius: 0; max-width: none; min-height: 100vh; }
  .pts-modal-grid { grid-template-columns: 1fr; }
  .pts-modal-header { padding: 18px 20px 14px; }
  .pts-modal-context { margin: 14px 20px -4px; }
  .pts-modal-body { padding: 18px 20px 8px; }
  .pts-modal-footer { padding: 16px 20px 22px; }
}

/* ---------- Hide manual language switcher (auto-translate now) ---------- */
.lang,
.mobile-drawer-lang,
#pts-gt-host,
.skiptranslate { display: none !important; }
.nav-actions { gap: 12px; }

/* ---------- Hide Google Translate UI artifacts ---------- */
.goog-te-banner-frame.skiptranslate, body { top: 0 !important; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; }
font[style*="background-color"] { background: transparent !important; box-shadow: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }


/* Per-flat parish cross-links — boosts internal SEO */
.flat-cross-section { max-width: 1180px; margin: 60px auto; padding: 0 24px; }
.flat-cross-section h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 18px; }
.flat-cross-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.flat-cross-link { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .25s var(--ease); }
.flat-cross-link:hover { border-color: var(--gold); }
.flat-cross-thumb { aspect-ratio: 4/3; border-radius: 10px; background: var(--bg-alt) center/cover no-repeat; }
.flat-cross-meta strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.flat-cross-meta small { color: var(--muted); font-size: .78rem; }
.flat-cross-more { color: var(--accent); text-decoration: underline; font-size: .9rem; }

/* Hero search v2 (arrival-date funnel, 2026-06-12) */
.hero-search-hint { margin: 10px 2px 0; font-size: .8rem; color: var(--muted, #7a7468); }
.hero-search-hint a { color: inherit; text-decoration: underline; }