/*
Theme Name: BenidormHomes
Text Domain: benidormhomes
Version: 0.9.0
Description: Lightweight showcase theme for BenidormHomes rentals — Editorial Luxury design system.
*/

/* ============================================================
   Design tokens — Editorial Luxury (warm cream / espresso / sage)
   ============================================================ */
:root {
  --bg: #FDFBF7;
  --bg-2: #F6F1E7;
  --surface: #FFFFFF;
  --surface-2: #FBF8F2;
  --ink: #1C1813;
  --ink-soft: #3A342B;
  --muted: #75695A;
  --line: rgba(28, 24, 19, 0.09);
  --line-2: rgba(28, 24, 19, 0.14);
  --sage: #3F5147;
  --sage-soft: #E7ECE6;
  --terra: #B0552F;
  --terra-soft: #F3E4DA;
  --navy: #1C3F6E;

  --r: 26px;
  --r-in: 19px;
  --r-sm: 14px;
  --pill: 999px;

  --shadow: 0 34px 64px -34px rgba(28, 24, 19, 0.30), 0 10px 24px -18px rgba(28, 24, 19, 0.22);
  --shadow-sm: 0 16px 34px -22px rgba(28, 24, 19, 0.26);
  --hi: inset 0 1px 1px rgba(255, 255, 255, 0.7);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140F;
    --bg-2: #1F1B15;
    --surface: #211C16;
    --surface-2: #262019;
    --ink: #F4EEE3;
    --ink-soft: #E4DCCD;
    --muted: #ABA08E;
    --line: rgba(244, 238, 227, 0.10);
    --line-2: rgba(244, 238, 227, 0.16);
    --navy: #6FA0DD;
    --sage: #A9BFA6;
    --sage-soft: rgba(169, 191, 166, 0.14);
    --terra: #E28A5E;
    --terra-soft: rgba(226, 138, 94, 0.16);
    --shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.7), 0 12px 26px -18px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 18px 36px -22px rgba(0, 0, 0, 0.6);
    --hi: inset 0 1px 1px rgba(255, 255, 255, 0.06);
  }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(60% 55% at 12% -8%, rgba(63, 81, 71, 0.10), transparent 60%),
    radial-gradient(50% 50% at 100% 0%, rgba(176, 85, 47, 0.09), transparent 55%),
    radial-gradient(70% 60% at 50% 120%, rgba(154, 123, 79, 0.08), transparent 60%);
  background-attachment: fixed;
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* film-grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; height: auto; display: block; }
/* <picture> is a transparent wrapper around <img> (WebP + JPEG fallback):
   collapse its box so the inner <img> lays out as a direct child (width:100%,
   absolute hero/contact backgrounds and `.parent img` rules all keep working). */
picture { display: contents; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
p { margin: 0 0 1em; }

::selection { background: var(--sage); color: #fff; }

.bh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--pill);
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bh-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   Header — floating glass pill nav
   ============================================================ */
.bh-top {
  position: sticky;
  top: clamp(12px, 2vw, 22px);
  z-index: 100;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: clamp(12px, 2vw, 22px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 24px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.bh-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color .5s var(--ease);
}
.bh-brand em { font-style: normal; color: var(--terra); transition: color .5s var(--ease); }
.bh-brand__mark { width: auto; height: 38px; color: var(--navy); flex: 0 0 auto; transition: color .5s var(--ease); }
.bh-top__nav ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.bh-top__nav ul a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.bh-top__nav ul a:hover {
  color: var(--ink);
  background: var(--bg-2);
  border-color: var(--line);
}
.bh-top__nav { flex: 1; display: flex; justify-content: center; }

/* ------------------------------------------------------------
   Hamburger + mobile sheet
   ------------------------------------------------------------ */
.bh-burger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .5s var(--ease);
}
/* Lucide menu <-> x, crossfaded in place. */
.bh-burger__open, .bh-burger__close {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.bh-burger__close { opacity: 0; transform: rotate(-90deg); }
.bh-burger[aria-expanded="true"] .bh-burger__open { opacity: 0; transform: rotate(90deg); }
.bh-burger[aria-expanded="true"] .bh-burger__close { opacity: 1; transform: none; }

/* Sits under the bar (z-index 100) so the brand and the close button stay on top. */
.bh-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 8vh, 64px);
  padding: calc(var(--bh-top-h, 84px) + clamp(24px, 5vh, 44px)) var(--gutter)
           calc(clamp(24px, 4vh, 40px) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.bh-menu.is-open { opacity: 1; visibility: visible; }
.bh-menu__nav { display: flex; flex-direction: column; }
/* Same face/size/weight as the bar nav — just a taller tap target. */
.bh-menu__nav a {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bh-menu.is-open .bh-menu__nav a {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 60ms);
}
.bh-menu__foot { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 26px); }
.bh-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bh-menu__langs a {
  display: inline-flex;
  padding: 10px 17px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.bh-menu__langs .is-current a { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.bh-menu__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-menu__cta .bh-wa, .bh-menu__cta .bh-tg { margin-top: 0; flex: 1 1 44%; justify-content: center; }

/* Scroll lock while the sheet is open. */
html.bh-locked, body.bh-locked { overflow: hidden; }

/* The consent banner sits at z-index 300 and would cover the sheet's languages
   and contact buttons. Slide it away while the sheet is open — it comes back
   untouched on close, still waiting for a choice. */
body.bh-locked .bh-consent { transform: translateY(140%); opacity: 0; pointer-events: none; }

@media (max-width: 880px) {
  .bh-top__nav { display: none; }
  /* Languages move into the sheet: the bar dropdown is hover-driven, which needs
     a double tap on touch. */
  .bh-lang { display: none; }
  .bh-burger { display: inline-flex; }
  .bh-menu { display: flex; }

  /* The scroll lock removes the scrollport that position:sticky needs, so the bar
     would drop back to its place at the top of the document — off screen on a
     scrolled page. Pin it where it already sits for as long as the sheet is open. */
  body.bh-locked .bh-top {
    position: fixed;
    top: clamp(12px, 2vw, 22px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }
  /* Pinning takes the bar out of the flow. Everywhere except the front page (whose
     negative margin already lifted it) that would shrink the document by the bar's
     height, and a shrinking document clamps scrollY — the page would come back
     scrolled to a different place. Pad the body by the same height instead. */
  body.bh-locked:not(:has(.bh-top--overlay)) { padding-top: var(--bh-top-h, 84px); }
}
.bh-top--overlay .bh-burger { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.bh-top--overlay .bh-burger:hover { background: rgba(255, 255, 255, 0.12); }

/* Language dropdown */
.bh-lang { position: relative; }
.bh-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.bh-lang__btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.bh-lang:hover .bh-lang__btn, .bh-lang:focus-within .bh-lang__btn { background: var(--bg-2); border-color: var(--line-2); }
.bh-lang:hover .bh-lang__btn svg, .bh-lang:focus-within .bh-lang__btn svg { transform: rotate(180deg); }
.bh-lang__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow), var(--hi);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  z-index: 110;
}
.bh-lang:hover .bh-lang__list, .bh-lang:focus-within .bh-lang__list {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.bh-lang__list a {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.bh-lang__list a:hover { background: var(--bg-2); color: var(--ink); }
.bh-lang__list .is-current a { background: var(--sage-soft); color: var(--sage); }

/* Overlay variant — floats on the photo hero (front page).
   Stays sticky like on every other page; the negative bottom margin lifts it out
   of the flow so the hero still starts at the very top of the viewport.
   --bh-top-h is published by topbar.js; the fallback is the desktop height. */
.bh-top--overlay {
  margin-bottom: calc(-1 * var(--bh-top-h, 84px));
  background: rgba(22, 17, 12, 0.38);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.bh-top--overlay .bh-brand { color: #fff; }
.bh-top--overlay .bh-brand em { color: #F4CE9B; }
.bh-top--overlay .bh-brand__mark { color: #fff; }
.bh-top--overlay .bh-top__nav ul a { color: rgba(255, 255, 255, 0.78); }
.bh-top--overlay .bh-top__nav ul a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}
.bh-top--overlay .bh-lang__btn { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.bh-top--overlay .bh-lang:hover .bh-lang__btn,
.bh-top--overlay .bh-lang:focus-within .bh-lang__btn { background: rgba(255, 255, 255, 0.12); }

/* Past the hero — or over the open mobile sheet, which is cream — the overlay bar
   returns to the light glass pill used everywhere else. */
.bh-top--overlay:is(.is-stuck, .is-menu-open) {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow-sm), var(--hi);
}
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-brand { color: var(--ink); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-brand em { color: var(--terra); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-brand__mark { color: var(--navy); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-top__nav ul a { color: var(--muted); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-top__nav ul a:hover {
  color: var(--ink);
  background: var(--bg-2);
  border-color: var(--line);
}
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-lang__btn { color: var(--ink); border-color: var(--line-2); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-lang:hover .bh-lang__btn,
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-lang:focus-within .bh-lang__btn { background: var(--bg-2); }
.bh-top--overlay:is(.is-stuck, .is-menu-open) .bh-burger { color: var(--ink); border-color: var(--line-2); }

/* ============================================================
   Layout containers
   ============================================================ */
.bh-home, .bh-single, .bh-archive {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 110px) 0 clamp(60px, 10vw, 130px);
}

/* ============================================================
   Hero
   ============================================================ */
.bh-hero {
  margin-bottom: clamp(40px, 6vw, 84px);
}
.bh-hero h1 {
  font-size: clamp(2.9rem, 7.5vw, 5.4rem);
  margin: 22px 0 0;
  max-width: 16ch;
}
.bh-hero h1 em, .bh-hero h1 .accent { font-style: italic; color: var(--terra); }
.bh-hero p {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--muted);
}

/* ============================================================
   Grid + Card (Double-Bezel)
   ============================================================ */
.bh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.bh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  will-change: transform;
}
.bh-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.bh-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-in);
  background: var(--bg-2);
}
.bh-card__media .bh-slider__track { height: 100%; }
.bh-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bh-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 2rem;
  opacity: .5;
}
.bh-card__body {
  padding: 18px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bh-card__sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.bh-card__title {
  font-size: 1.42rem;
  margin: 2px 0 0;
}
.bh-card__meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bh-from {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 15px;
  border-radius: var(--pill);
  background: var(--terra-soft);
  color: var(--terra);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.bh-card__go {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 16px;
  transition: transform .6s var(--ease), background .4s var(--ease);
}
.bh-card:hover .bh-card__go {
  transform: translate(3px, -3px) scale(1.05);
  background: var(--sage);
}

/* ============================================================
   Single property
   ============================================================ */
.bh-single { max-width: min(1080px, calc(100% - 2 * var(--gutter))); }
.bh-single__head { max-width: none; margin-bottom: 30px; }
.bh-single__head h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  margin: 18px 0 0;
  text-wrap: balance;
}
.bh-complex {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 500;
}

/* ============================================================
   Property page gallery — stage + thumbnails + lightbox
   ============================================================ */
.bh-pdp-gallery {
  margin: 8px 0 clamp(36px, 5vw, 60px);
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
}
.bh-pdp-gallery__stage { margin: 0; position: relative; }
.bh-pdp-gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-in);
  overflow: hidden;
  position: relative;
}
.bh-pdp-gallery__open img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.bh-pdp-gallery__open:hover img { transform: scale(1.03); }
.bh-pdp-gallery__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(14, 11, 8, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}
.bh-pdp-gallery__zoom .bh-icon { width: 20px; height: 20px; }
.bh-pdp-gallery__thumbwrap {
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.bh-pdp-gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}
.bh-pdp-gallery__thumbs::-webkit-scrollbar { display: none; }
.bh-pdp-gallery__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-2);
  scroll-snap-align: start;
  transition: border-color .35s var(--ease), opacity .35s var(--ease);
  opacity: .7;
}
.bh-pdp-gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bh-pdp-gallery__thumb:hover { opacity: 1; }
.bh-pdp-gallery__thumb.is-active { border-color: var(--sage); opacity: 1; }
.bh-pdp-gallery__data { display: none; }

/* How many photos there are, stated before the visitor starts clicking. */
.bh-pdp-gallery__count {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--pill);
  background: rgba(10, 8, 6, 0.62);
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.bh-pdp-gallery__count .bh-icon { width: 16px; height: 16px; }

/* ---- Hero variant (sale page): main photo left, vertical thumbnail rail right.
   Phones keep the ordinary stage-over-strip layout below — a vertical rail has
   nowhere to live at 360px. gallery.js measures which way the strip overflows,
   so the paging arrows follow this breakpoint with nothing to keep in sync. */
@media (min-width: 900px) {
  .bh-pdp-gallery--hero.has-rail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
  }
  /* The stage keeps its own 16/10 ratio, and THAT is what gives the row a
     definite height. The first version let both columns size from content:
     five stacked thumbnails then decided the height and the main photo was
     stretched to match — measured at 699x814 for an 800x640 photo. */

  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__thumbwrap {
    /* The rail is absolutely positioned inside this box, so it contributes no
       height and cannot inflate the row. This is the whole fix: the photo sets
       the height, the rail fits into it. */
    position: relative;
    margin-top: 0;
    display: block;
  }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__thumbs {
    position: absolute;
    inset: 0;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    /* Two thumbnails fill the stage height, the rest scroll — the shape the
       reference layout uses. */
    grid-auto-rows: calc(50% - 5px);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
  }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__thumb img {
    aspect-ratio: auto;
    height: 100%;
  }
  /* Same Lucide chevron, turned to match the axis — the rail scrolls up/down. */
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__tnav {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__tnav--prev { top: 10px; }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__tnav--next { top: auto; bottom: 10px; }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__tnav:hover { transform: translateX(-50%) scale(1.06); }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__tnav .bh-icon { transform: rotate(90deg); }

  /* Upscaling guard, hero edition. Capping the figure alone would shrink it out
     of its own grid column and leave a hole, so the cap moves to the whole
     block: --bh-hero-max is the widest the gallery may get before the main
     photo would be drawn larger than it really is (the template computes it
     from the photo's own width and this grid's proportions). Without it the
     hero would quietly undo the no-upscale fix for small photos. */
  .bh-pdp-gallery--hero.has-rail { max-width: var(--bh-hero-max, none); }
  .bh-pdp-gallery--hero.has-rail .bh-pdp-gallery__stage { max-width: none; }
}

/* Thumbnail paging arrows (shown only when the strip overflows) */
.bh-pdp-gallery__tnav {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  margin: 0 -8px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  background: var(--bg);
  box-shadow: var(--shadow-sm), var(--hi);
  position: relative;
  z-index: 2;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bh-pdp-gallery.has-tnav .bh-pdp-gallery__tnav { display: grid; }
.bh-pdp-gallery__tnav:hover { transform: scale(1.06); }
.bh-pdp-gallery__tnav:disabled { opacity: .3; cursor: default; transform: none; }
.bh-pdp-gallery__tnav .bh-icon { width: 20px; height: 20px; }

.bh-pdp-video { margin-top: clamp(28px, 4vw, 44px); }
.bh-pdp-video video, .bh-pdp-video iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--r-in);
}

/* Lightbox */
.bh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(12px, 4vw, 48px);
  background: rgba(10, 8, 6, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bh-lightbox.is-open { display: flex; }
.bh-lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bh-lightbox__fig img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.bh-lightbox__count { color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.bh-lightbox__close, .bh-lightbox__nav {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.bh-lightbox__close svg, .bh-lightbox__nav svg { width: 24px; height: 24px; }
.bh-lightbox__close:hover, .bh-lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.bh-lightbox__close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
@media (max-width: 640px) {
  .bh-lightbox__nav { position: absolute; bottom: 20px; }
  .bh-lightbox__prev { left: 30%; }
  .bh-lightbox__next { right: 30%; }
}

/* Specs strip */
.bh-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.bh-spec {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  box-shadow: var(--hi);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.bh-spec__ic { display: grid; place-items: center; color: var(--sage); }
.bh-spec__ic .bh-icon { width: 20px; height: 20px; }
.bh-rates__note { color: var(--muted); margin: -6px 0 18px; max-width: 60ch; }

.bh-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}
@media (min-width: 940px) {
  .bh-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .bh-side { position: sticky; top: 100px; }
}

/* Sale page: the photo hero spans the full width ABOVE this grid, so the two
   columns hold only text — title, price and body on the left, the contact card
   on the right at the width it already had. DOM order is the phone order. */

.bh-body {
  font-size: 1.14rem;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 62ch;
}
.bh-main h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: clamp(34px, 5vw, 52px) 0 20px;
}

/* Price table */
.bh-prices {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bh-prices th, .bh-prices td {
  text-align: left;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}
.bh-prices thead th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
.bh-prices tbody tr:last-child td { border-bottom: 0; }
.bh-prices tbody tr { transition: background .35s var(--ease); }
.bh-prices tbody tr:hover { background: var(--surface-2); }
/* Every column after the period is a rate: per night, and per month for winter
   and other long stays. Only the first cell is prose. */
.bh-prices th:not(:first-child) { text-align: right; }
.bh-prices td:not(:first-child) {
  font-weight: 700;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .bh-prices th, .bh-prices td { padding: 13px 12px; }
  .bh-prices thead th { font-size: 10px; letter-spacing: 0.08em; }
}

/* Good to know — chips */
.bh-attrs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bh-attrs li {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--hi);
}
.bh-attrs li strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

/* Good to know — checkmark list (shown high on the page) */
.bh-goodtoknow { margin: 0 0 clamp(30px, 4vw, 44px); }
.bh-goodtoknow h2 { margin-top: 0 !important; }
.bh-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px 26px;
}
.bh-checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.02rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.bh-checklist .bh-icon {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  color: var(--sage);
  stroke-width: 2.4;
}

/* Neighbourhood map */
.bh-locate { margin-top: clamp(34px, 5vw, 52px); }
.bh-map {
  height: clamp(280px, 42vw, 420px);
  border-radius: var(--r-in);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm), var(--hi);
  background: var(--surface-2);
  z-index: 0;
}
.bh-map .leaflet-container { font-family: var(--sans); border-radius: var(--r-in); }
.bh-map .leaflet-control-zoom a {
  color: var(--ink);
  border-radius: 8px !important;
}

/* ============================================================
   Not found
   ============================================================ */
.bh-404 { padding: clamp(48px, 9vw, 110px) 0; }
.bh-404__inner { max-width: 56ch; }
.bh-404 h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 16px 0 0;
  text-wrap: balance;
}
.bh-404__note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}
.bh-404__actions {
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.bh-404__link { color: var(--sage); font-weight: 600; }

/* ============================================================
   Sale price block — under the title, below the photo hero
   ============================================================ */
/* The price used to be a <strong> in a paragraph with no CSS of its own, so it
   read as ordinary body text and was missed. It is the single most important
   number on the page; here it is the largest thing under the title, directly
   below the photo hero. Key figures are not repeated — the specs row follows. */
.bh-sale-card {
  margin: 22px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
}
.bh-sale-card__money { min-width: 0; }
.bh-sale-card__price {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.05;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  /* The narrow no-break space in "365 000 €" must never wrap the amount. */
  text-wrap: nowrap;
}
.bh-sale-card__per-m2 {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .98rem;
  font-weight: 500;
}

/* Reference — a buyer quotes this back in a message, so it gets its own row
   and a copy button rather than living as a <small> beside the price. */
.bh-sale-card__ref {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface-2);
}
.bh-sale-card__ref-label {
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.bh-sale-card__ref-code {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  /* A reference is a code: read it character by character, not as a word. */
  font-variant-numeric: tabular-nums;
}
.bh-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bh-copy:hover { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.bh-copy:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.bh-copy.is-copied { background: var(--sage); border-color: var(--sage); color: #fff; }
.bh-copy .bh-icon { width: 15px; height: 15px; }

/* ============================================================
   CTA card (Double-Bezel)
   ============================================================ */
.bh-cta {
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow), var(--hi);
}
.bh-cta__inner {
  background: var(--surface);
  border-radius: var(--r-in);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--hi);
}
.bh-cta h2 { font-size: 1.5rem; margin: 0 0 6px; }
.bh-cta__note { color: var(--muted); font-size: .95rem; margin: 0 0 20px; }
.bh-ok {
  background: var(--sage-soft);
  color: var(--sage);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  margin: 0 0 16px;
}
.bh-form { display: grid; gap: 12px; }
.bh-form .bh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bh-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.bh-form input {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  width: 100%;
}
.bh-form input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.bh-form input:focus {
  outline: none;
  border-color: var(--sage);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--sage-soft);
}
.bh-form button {
  margin-top: 6px;
  position: relative;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 56px;
  border: 0;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.bh-form button:hover { background: var(--sage); }
.bh-form button:active { transform: scale(0.985); }
.bh-form button .bh-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 17px;
  transition: transform .55s var(--ease);
}
.bh-form button:hover .bh-arrow { transform: translateY(-50%) translate(3px, -3px) scale(1.06); }

.bh-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 13px 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.bh-wa::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2fae5f;
  box-shadow: 0 0 0 4px rgba(47, 174, 95, 0.18);
}
.bh-wa:hover { background: var(--surface); border-color: var(--sage); transform: translateY(-2px); }

.bh-tg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 13px 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.bh-tg::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2ea6da;
  box-shadow: 0 0 0 4px rgba(46, 166, 218, 0.18);
}
.bh-tg:hover { background: var(--surface); border-color: var(--sage); transform: translateY(-2px); }

/* Property booking CTA: WhatsApp + Telegram span the full width, text centred
   (matches the Request-dates button). Scoped to .bh-cta so the hero contact
   links are untouched. */
.bh-cta .bh-wa,
.bh-cta .bh-tg { width: 100%; justify-content: center; }

/* ============================================================
   Footer
   ============================================================ */
.bh-foot {
  border-top: 1px solid var(--line);
  /* Same value as the padding below the line, so the gap above the footer
     line matches the gap from the line to the footer content. */
  margin-top: clamp(40px, 6vw, 70px);
  padding: clamp(40px, 6vw, 70px) var(--gutter);
  text-align: center;
}
.bh-foot p {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.5vw, 2.3rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
.bh-grid > .bh-card:nth-child(2) { transition-delay: .06s; }
.bh-grid > .bh-card:nth-child(3) { transition-delay: .12s; }
.bh-grid > .bh-card:nth-child(4) { transition-delay: .18s; }
.bh-grid > .bh-card:nth-child(5) { transition-delay: .24s; }
.bh-grid > .bh-card:nth-child(6) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .bh-top { padding: 10px 10px 10px 18px; }
  .bh-top > a:first-child { font-size: 18px; }
  .bh-gallery { grid-template-columns: 1fr; }
  .bh-gallery > :first-child { aspect-ratio: 4 / 3; }
  .bh-form .bh-row { grid-template-columns: 1fr; }
  .bh-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Landing sections (idea / steps / features / contact)
   ============================================================ */
.bh-home > * + * { margin-top: clamp(64px, 11vw, 140px); }
.bh-hero { margin-bottom: 0; }

.bh-section__title {
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  margin: 16px 0 clamp(28px, 4vw, 44px);
  max-width: 40ch;
  text-wrap: balance;
}

.bh-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.bh-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 24px;
  border-radius: var(--pill);
  background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: 15px;
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.bh-btn:hover { background: var(--sage); }
.bh-btn:active { transform: scale(.985); }
.bh-btn .bh-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); font-size: 17px;
  transition: transform .55s var(--ease);
}
.bh-btn:hover .bh-arrow { transform: translateY(3px) scale(1.06); }

/* Idea / about split */
.bh-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
.bh-split h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.bh-split p { color: var(--muted); font-size: 1.1rem; margin: 0 0 1em; }
.bh-split p:last-child { margin-bottom: 0; }
@media (min-width: 820px) {
  .bh-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
}

/* Steps */
.bh-steps { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 760px) { .bh-steps { grid-template-columns: repeat(3, 1fr); } }
.bh-step {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm), var(--hi);
}
.bh-step__n { font-family: var(--serif); font-style: italic; font-size: 2.4rem; color: var(--terra); display: block; margin-bottom: 10px; }
.bh-step h3 { font-size: 1.3rem; margin-bottom: 8px; }
.bh-step p { color: var(--muted); margin: 0; }

/* Features */
.bh-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.bh-feature { padding: clamp(22px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hi); }
.bh-feature h3 { font-size: 1.2rem; margin-bottom: 8px; }
.bh-feature p { color: var(--muted); margin: 0; }

/* Contact */
.bh-contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 44px); }
@media (min-width: 860px) { .bh-contact__grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.bh-contact__aside p { font-size: 1.15rem; color: var(--ink-soft); max-width: 34ch; }
.bh-contact__links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bh-mail {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--pill);
  border: 1px solid var(--line-2); font-weight: 600;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.bh-mail:hover { background: var(--surface); border-color: var(--sage); transform: translateY(-2px); }
.bh-form textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 15px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  width: 100%; resize: vertical; min-height: 110px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.bh-form textarea:focus { outline: none; border-color: var(--sage); background: var(--surface); box-shadow: 0 0 0 4px var(--sage-soft); }
.bh-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }

/* Footer (expanded) */
.bh-foot { text-align: left; }
.bh-foot__inner {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: end; justify-content: space-between;
}
.bh-foot__brand { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin: 0; }
.bh-foot__tag { color: var(--muted); margin: 8px 0 0; }
.bh-foot__links { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-foot__links a {
  padding: 10px 18px; border-radius: var(--pill);
  border: 1px solid var(--line-2); font-weight: 600; font-size: 14px;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.bh-foot__links a:hover { background: var(--surface); border-color: var(--sage); }
.bh-foot p.bh-foot__credit {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 34px auto 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  opacity: .8;
}
.bh-foot__legal {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 24px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13px;
}
.bh-foot__legal a { color: var(--muted); transition: color .3s var(--ease); }
.bh-foot__legal a:hover { color: var(--ink); }

/* Consent checkbox inside the enquiry form (overrides .bh-form label) */
.bh-form label.bh-consent-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
}
.bh-consent-field input {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--sage);
}
.bh-consent-field a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Cookie consent banner (floating glass card, bottom-left)
   ============================================================ */
.bh-consent {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 300;
  width: min(420px, calc(100vw - 24px));
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.bh-consent.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.bh-consent__inner {
  padding: 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(28,24,19,.35)), var(--hi);
}
.bh-consent__text { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.bh-consent__text a { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; }
.bh-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-consent__btn {
  flex: 1 1 auto;
  padding: 11px 18px;
  border-radius: var(--pill);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.bh-consent__btn:active { transform: scale(.97); }
.bh-consent__btn--solid { border: 0; background: var(--ink); color: var(--bg); }
.bh-consent__btn--solid:hover { background: var(--sage); }
.bh-consent__btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-soft); }
.bh-consent__btn--ghost:hover { border-color: var(--sage); color: var(--ink); }

/* ============================================================
   Photo hero — Benidorm bay (full-bleed, nav floats on top)
   ============================================================ */
body.home .bh-home { padding-top: 0; padding-bottom: 0; }
.bh-hero--photo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.bh-hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 clamp(34px, 6vw, 60px) clamp(34px, 6vw, 60px);
  min-height: clamp(600px, 96svh, 920px);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.bh-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.bh-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s var(--ease);
  will-change: opacity, transform;
}
.bh-hero__slide.is-active {
  opacity: 1;
  /* Slow Ken Burns drift while the slide is on screen. */
  animation: bh-kenburns 8s ease-out forwards;
}
@keyframes bh-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bh-hero__slide {
    transition: none;
    transform: none;
  }
  .bh-hero__slide.is-active { animation: none; transform: none; }
}
.bh-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two layers: a vertical wash for overall depth, plus a left-side scrim so
     the left-aligned white text keeps contrast on any slide (including the
     lighter-topped dusk shots) without darkening the whole image. */
  background:
    linear-gradient(to top, rgba(14, 11, 8, 0.62) 0%, rgba(14, 11, 8, 0.26) 46%, rgba(14, 11, 8, 0.06) 76%, rgba(14, 11, 8, 0.22) 100%),
    linear-gradient(105deg, rgba(14, 11, 8, 0.36) 0%, rgba(14, 11, 8, 0.12) 48%, rgba(14, 11, 8, 0) 80%);
}
.bh-hero__content {
  position: relative;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  /* Top padding equals the floating nav zone, so the text block sits
     centred between the nav and the bottom edge. */
  padding: 104px 0 16px;
  color: #fff;
}
.bh-hero__content > p { max-width: 52ch; }
.bh-hero--photo h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.bh-hero--photo h1 em { color: #F4CE9B; }
.bh-hero--photo p { color: rgba(255, 255, 255, 0.85); }
.bh-eyebrow--glass {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.bh-hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
}
.bh-hero__facts li {
  padding: 8px 15px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bh-btn--light { background: #fff; color: #1C1813; }
.bh-btn--light .bh-arrow { background: rgba(28, 24, 19, 0.08); }
.bh-btn--light:hover { background: var(--sage); color: #fff; }
.bh-btn--light:hover .bh-arrow { background: rgba(255, 255, 255, 0.16); }
.bh-wa--onphoto { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.bh-wa--onphoto:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }
.bh-mail--onphoto { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.bh-mail--onphoto:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   Split with photo (idea / about)
   ============================================================ */
.bh-split--media { align-items: center; }
.bh-split--media .bh-split__text h2 { margin: 16px 0 18px; }
.bh-split__media {
  margin: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
}
.bh-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-in);
}
@media (min-width: 820px) {
  .bh-split--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .bh-split--rev .bh-split__text { order: 2; }
  .bh-split--rev .bh-split__media { order: 1; transform: rotate(-1.2deg); }
  .bh-split--media:not(.bh-split--rev) .bh-split__media { transform: rotate(1.2deg); }
}

/* ============================================================
   Property showcase — large full-width cards
   ============================================================ */
.bh-shows { display: grid; gap: clamp(24px, 3.4vw, 44px); }
.bh-show {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--hi);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.bh-show:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.bh-show__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-in);
  background: var(--bg-2);
}
.bh-show__media .bh-slider__track { height: 100%; }
.bh-slider__slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.bh-show__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bh-show__body {
  padding: clamp(20px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.bh-show__title { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.bh-show__title a { transition: color .4s var(--ease); }
.bh-show__title a:hover { color: var(--terra); }
.bh-show__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.bh-show__chips li {
  padding: 7px 13px;
  border-radius: var(--pill);
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 12.5px;
  font-weight: 600;
}
.bh-show__excerpt { color: var(--muted); margin: 0; max-width: 56ch; }
.bh-show__highlights {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  width: 100%;
}
.bh-show__highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  color: var(--ink-soft);
}
.bh-show__highlights .bh-icon {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--sage);
  stroke-width: 2.4;
}
.bh-show__more span { color: var(--muted); font-weight: 600; font-size: .92rem; padding-left: 28px; }
.bh-show__foot {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 16px 20px; margin-top: auto; padding-top: 8px;
}
.bh-from--lg { padding: 11px 20px; font-size: 1.05rem; }
.bh-from--lg small { font-size: .82em; }
.bh-from small { font-weight: 600; opacity: .75; }
@media (min-width: 920px) {
  .bh-show { grid-template-columns: 1.05fr 1fr; }
  .bh-show:nth-child(even) .bh-show__media { order: 2; }
}

/* ============================================================
   Shared slider primitives (places, property photos)
   ============================================================ */
.bh-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}
.bh-slider__track::-webkit-scrollbar { display: none; }
.bh-slider__track.is-dragging,
.bh-slider__track.is-animating {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.bh-slider__track.is-dragging { cursor: grabbing; user-select: none; }
.bh-slider__track.is-dragging img { pointer-events: none; }
.bh-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(14, 11, 8, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.bh-slider__btn .bh-icon { width: 22px; height: 22px; }
.bh-slider__btn:hover { background: rgba(14, 11, 8, 0.68); }
.bh-slider__btn:active { transform: translateY(-50%) scale(.94); }
.bh-slider__btn--prev { left: 14px; }
.bh-slider__btn--next { right: 14px; }
.bh-slider--single .bh-slider__btn,
.bh-slider--single .bh-slider__count,
.bh-slider--single .bh-slider__dots { display: none; }
.bh-slider__count {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: rgba(14, 11, 8, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.bh-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.bh-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: var(--line-2);
  cursor: pointer;
  transition: width .45s var(--ease), background .45s var(--ease);
}
.bh-slider__dot.is-active { width: 26px; background: var(--sage); }

/* Dots overlaid on the photo (property media sliders) */
.bh-slider__dots--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}
.bh-slider__dots--overlay .bh-slider__dot {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.bh-slider__dots--overlay .bh-slider__dot.is-active { background: #fff; }

/* ============================================================
   Best of Benidorm — full-width photo slider
   ============================================================ */
.bh-places__stage { position: relative; border-radius: var(--r); }
.bh-places__track { border-radius: var(--r); }
.bh-place {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.bh-place + .bh-place { margin-left: 16px; }
.bh-place img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r);
}
.bh-place figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 4vw, 36px);
  background: linear-gradient(to top, rgba(14, 11, 8, 0.78), rgba(14, 11, 8, 0.35) 60%, transparent);
  color: #fff;
}
.bh-place h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 6px;
}
.bh-place p { color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 56ch; }
@media (max-width: 720px) {
  .bh-place img { aspect-ratio: 4 / 5; }
}

/* Front-page collection: rich cards grid + view-all */
.bh-grid--cards {
  margin-top: clamp(24px, 3.4vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
}
.bh-more { margin-top: clamp(28px, 4vw, 44px); text-align: center; }

/* About — agent portrait & languages */
.bh-split__media--portrait { position: relative; }
.bh-split__media--portrait img { aspect-ratio: 3 / 4; object-position: 50% 18%; }
.bh-split__media--portrait figcaption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: rgba(14, 11, 8, 0.55);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.bh-about__langs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.bh-about__langs li {
  padding: 8px 15px;
  border-radius: var(--pill);
  background: var(--terra-soft);
  color: var(--terra);
  font-size: 13px;
  font-weight: 600;
}
.bh-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink);
  margin-top: 6px;
}
.bh-contact--photo .bh-signature { color: #F4CE9B; }

/* SEO copy before the footer */
.bh-seo h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 22px;
  text-wrap: balance;
}
.bh-seo__body { max-width: none; }
.bh-seo__body p {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.75;
  margin: 0 0 1em;
  text-align: justify;
  text-wrap: pretty;
}
.bh-seo__body p:last-child { margin-bottom: 0; }

/* ============================================================
   Line icons (steps / features)
   ============================================================ */
.bh-ic {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--sage-soft);
  color: var(--sage);
  box-shadow: var(--hi);
}
.bh-ic svg { width: 23px; height: 23px; }
.bh-arrow .bh-icon { width: 18px; height: 18px; }
.bh-card__go .bh-icon { width: 18px; height: 18px; }
.bh-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bh-step__n { margin-bottom: 0; font-size: 1.9rem; opacity: .85; }
.bh-feature .bh-ic { margin-bottom: 16px; background: var(--terra-soft); color: var(--terra); }
.bh-feature:nth-child(even) .bh-ic { background: var(--sage-soft); color: var(--sage); }

/* ============================================================
   Contact — dark photo section
   ============================================================ */
.bh-contact__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.bh-contact__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bh-contact__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(16, 13, 10, 0.93) 0%, rgba(16, 13, 10, 0.78) 55%, rgba(16, 13, 10, 0.55) 100%);
}
.bh-contact__inner {
  position: relative;
  padding: clamp(28px, 5vw, 64px);
}
.bh-contact--photo .bh-section__title { color: #fff; }
.bh-contact--photo .bh-contact__aside p { color: rgba(255, 255, 255, 0.86); }

/* ============================================================
   Legal / standalone pages — narrow reading column
   ============================================================ */
.bh-page {
  padding-bottom: clamp(64px, 9vw, 128px);
}
.bh-doc {
  width: min(720px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding-top: clamp(48px, 8vw, 96px);
}
.bh-doc__head {
  padding-bottom: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(32px, 5vw, 52px);
  border-bottom: 1px solid var(--line);
}
.bh-doc__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: clamp(22px, 3vw, 34px);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.bh-doc__back:hover { color: var(--terra); gap: 10px; }
.bh-doc__back .bh-icon { width: 17px; height: 17px; }
.bh-doc__title {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.02;
}
.bh-doc__meta {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Editor content typography */
.bh-doc__body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.bh-doc__body > *:first-child { margin-top: 0; }
.bh-doc__body > *:last-child { margin-bottom: 0; }
.bh-doc__body h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.12;
  color: var(--ink);
  margin: clamp(40px, 5vw, 60px) 0 0.6em;
}
.bh-doc__body h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
  margin: clamp(30px, 4vw, 44px) 0 0.5em;
}
.bh-doc__body h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2em 0 0.6em;
}
.bh-doc__body p { margin: 0 0 1.35em; }
.bh-doc__body a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--terra) 42%, transparent);
  transition: text-decoration-color .25s var(--ease);
}
.bh-doc__body a:hover { text-decoration-color: var(--terra); }
.bh-doc__body strong { color: var(--ink); font-weight: 700; }
.bh-doc__body ul,
.bh-doc__body ol {
  margin: 0 0 1.5em;
  padding-left: 1.35em;
  display: grid;
  gap: 0.55em;
}
.bh-doc__body li { padding-left: 0.3em; }
.bh-doc__body ul li::marker { color: var(--terra); }
.bh-doc__body ol li::marker { color: var(--muted); font-weight: 600; }
.bh-doc__body blockquote {
  margin: 1.8em 0;
  padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 30px);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.bh-doc__body blockquote p:last-child { margin-bottom: 0; }
.bh-doc__body hr {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: clamp(38px, 5vw, 56px) 0;
}
.bh-doc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 15.5px;
}
.bh-doc__body th,
.bh-doc__body td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.bh-doc__body th {
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
}
.bh-doc__body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}