/* =========================================================
   LOMA SERENA — Premium Real Estate (Baja California)
   Brand: Navy #143852 · Mid-Blue #416589 · Gold #b49962
   Type:  Bellefair (display) + Poppins (body)
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --navy:        #143852;
  --navy-2:      #1c4566;
  --mid:         #416589;
  --gold:        #b49962;
  --gold-soft:   #c9b482;
  --gold-deep:   #8d774a;
  --cream:       #f6f1e6;
  --cream-2:     #efe7d3;
  --bone:        #f9f6ef;
  --ink:         #0c1f2e;
  --ink-2:       #14283a;
  --line:        rgba(180,153,98,0.28);
  --line-soft:   rgba(180,153,98,0.14);

  --serif:  "Bellefair", "Cormorant Garamond", "Playfair Display", serif;
  --sans:   "Poppins", "Inter", system-ui, -apple-system, sans-serif;

  --container: 1320px;
  --gap:       clamp(16px, 2vw, 32px);
  --section:   clamp(72px, 9vw, 140px);

  --ease:      cubic-bezier(.6,.05,.05,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; transition: color .35s var(--ease-out); }
ul,ol { list-style: none; }

/* ---------- Type system ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--gold); }

h1,h2,h3,h4,.serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--navy);
  line-height: 1.1;
}
h1 { font-size: clamp(44px, 6.4vw, 96px); }
h2 { font-size: clamp(36px, 4.6vw, 68px); }
h3 { font-size: clamp(24px, 2.4vw, 36px); }
h4 { font-size: clamp(18px, 1.4vw, 22px); }

.lead {
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink-2);
  max-width: 56ch;
}
p { max-width: 65ch; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.section { padding: var(--section) 0; position: relative; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background .5s var(--ease-out), padding .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(249,246,239,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo img { height: 44px; width: auto; transition: height .4s var(--ease-out); }
.nav.is-scrolled .nav__logo img {
  height: 36px;
  filter: brightness(0) saturate(100%) invert(20%) sepia(28%) saturate(980%) hue-rotate(160deg) brightness(88%) contrast(92%);
}
.nav__menu {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px);
}
.nav__link {
  font-size: 12px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  position: relative; padding: 6px 0;
  white-space: nowrap;
}
.nav.is-scrolled .nav__link { color: var(--navy); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width .45s var(--ease-out);
}
.nav__link:hover::after { width: 100%; }
.nav__lang {
  display: flex; gap: 8px; font-size: 11px; letter-spacing: .25em;
}
.nav__lang a {
  color: rgba(255,255,255,0.55); padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 1px;
}
.nav.is-scrolled .nav__lang a {
  color: var(--mid); border-color: var(--line);
}
.nav__lang a.is-active {
  color: var(--gold);
  border-color: var(--gold);
}
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  transition: all .5s var(--ease-out);
}
.nav__cta:hover { background: var(--gold); color: var(--navy); }
.nav.is-scrolled .nav__cta:hover { color: #fff; }
.nav__toggle { display: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  background: var(--navy);
}
.hero__media img,
.hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.78) saturate(1.05);
}
/* Only image gets the ken-burns animation — video has its own motion */
.hero__media img {
  animation: kenburns 24s linear infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1.08) translate3d(-1%,-1%,0); }
  100% { transform: scale(1.18) translate3d( 1%, 1%,0); }
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20,56,82,0) 0%, rgba(12,31,46,.45) 60%, rgba(12,31,46,.85) 100%),
    linear-gradient(180deg, rgba(20,56,82,0.55) 0%, rgba(12,31,46,0.05) 30%, rgba(12,31,46,.85) 100%);
}
.hero__inner {
  padding: 0 clamp(20px, 4vw, 56px) clamp(80px, 12vh, 140px);
  width: 100%;
}
.hero__eyebrow {
  color: var(--gold-soft);
  margin-bottom: clamp(20px, 3vh, 36px);
}
.hero__eyebrow::before { background: var(--gold-soft); }
.hero h1 {
  color: #fff;
  font-weight: 400;
  max-width: none;
  font-size: clamp(44px, 5.8vw, 92px);
  line-height: 1.04;
  letter-spacing: -.005em;
}
.hero h1 .hl {
  display: block;
}
.hero h1 .hl + .hl {
  margin-top: .06em;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-soft);
  font-family: var(--serif);
}
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(40px, 9vw, 64px); line-height: 1.06; }
}
.hero__sub {
  margin-top: clamp(22px, 3vh, 34px);
  font-size: clamp(15px, 1.15vw, 19px);
  color: rgba(255,255,255,0.78);
  max-width: 46ch;
  line-height: 1.7;
  font-weight: 300;
}
.hero__cta-row {
  margin-top: clamp(32px, 5vh, 56px);
  display: flex; flex-wrap: wrap; gap: 16px;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 32px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
  transition: all .55s var(--ease-out);
  position: relative; overflow: hidden;
  cursor: pointer;
}
.btn::after {
  content: ""; width: 18px; height: 1px; background: currentColor;
  transition: width .5s var(--ease-out);
}
.btn:hover::after { width: 28px; }
.btn--gold {
  background: var(--gold); color: var(--navy); border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--outline {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.5);
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold-soft); }
.btn--dark {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.btn--dark:hover { background: var(--ink); }
.btn--ghost {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: #fff; }

/* ---------- Quick paid-traffic capture ---------- */
.quick-capture {
  background: var(--bone);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(42px, 6vw, 86px) 0;
  scroll-margin-top: 88px;
}
.quick-capture__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.quick-capture__copy h2 {
  margin: 14px 0 20px;
  max-width: 12ch;
}
.quick-capture__copy p {
  color: var(--mid);
  max-width: 54ch;
}
.quick-capture__direct {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  max-width: 440px;
}
.quick-capture__direct span {
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quick-capture__direct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quick-capture__direct-actions a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  color: var(--navy);
  background: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.quick-capture__direct-actions a:hover {
  border-color: var(--gold);
  background: #fff;
}
.quick-form {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 72px rgba(20,56,82,0.09);
  padding: clamp(24px, 3.2vw, 38px);
  display: grid;
  gap: 18px;
}
.quick-form__intro,
.quick-form__hint {
  margin: 0;
  color: var(--mid);
  font-size: 13px;
  line-height: 1.55;
}
.quick-form__intro {
  color: var(--ink);
}
.quick-form__hint {
  margin-top: -4px;
  font-size: 12px;
}
.quick-form__group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.quick-form__group--budget {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.quick-form__label {
  grid-column: 1 / -1;
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  white-space: normal;
  line-height: 1.35;
}
.quick-chip {
  min-height: 42px;
  min-width: 0;
  display: grid;
  cursor: pointer;
}
.quick-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quick-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 42px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  color: var(--mid);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.quick-chip input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.quick-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.quick-form__contact {
  display: grid;
  gap: 10px;
}
.quick-form__field {
  position: relative;
  border: 1px solid var(--line);
  min-height: 58px;
  background: var(--bone);
}
.quick-form__field label {
  position: absolute;
  left: 14px;
  top: 18px;
  color: var(--mid);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  transition: all .28s var(--ease-out);
}
.quick-form__field input,
.quick-form__field select {
  width: 100%;
  height: 58px;
  padding: 21px 14px 8px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
}
.quick-form__field select {
  appearance: none;
}
.quick-form__field input:focus + label,
.quick-form__field input:not(:placeholder-shown) + label,
.quick-form__field select:focus + label,
.quick-form__field.has-val label {
  top: 9px;
  color: var(--gold-deep);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.quick-form__field:focus-within {
  border-color: var(--gold);
}
.quick-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--mid);
  font-size: 12px;
  line-height: 1.45;
}
.quick-form__consent input {
  margin-top: 3px;
  accent-color: var(--gold);
}
.quick-form .btn {
  width: 100%;
  justify-content: center;
}
.quick-form__msg {
  min-height: 18px;
  color: var(--gold-deep);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Reveal animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"]   { transform: none; }
[data-reveal="left"]   { transform: translateX(-50px); }
[data-reveal="right"]  { transform: translateX(50px); }
[data-reveal="scale"]  { transform: scale(.96); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .15s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .25s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .35s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .45s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .55s; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: .65s; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: .75s; }

/* Split text effect — words rise */
.split-word { display: inline-block; overflow: hidden; }
.split-word > span {
  display: inline-block; transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
}
.split-word.is-in > span { transform: none; }

/* Image reveal — curtain */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.img-reveal::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bone);
  transform-origin: right;
  transition: transform 1.2s var(--ease-out);
}
.img-reveal.is-in::after { transform: scaleX(0); }
.img-reveal.is-in img { transform: scale(1); }
.img-reveal.is-in.is-cream::after { background: var(--cream); }

/* ---------- Intro section ---------- */
.intro { background: var(--bone); }
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.intro__copy h2 { margin: 16px 0 28px; }
.intro__visual { position: relative; aspect-ratio: 4/5; }
.intro__visual .img-reveal { position: absolute; inset: 0; }
.intro__visual img { width: 100%; height: 100%; object-fit: cover; }
.intro__visual::after {
  content: ""; position: absolute;
  right: -28px; bottom: -28px;
  width: 60%; aspect-ratio: 1;
  background: var(--gold); opacity: .12; z-index: -1;
}

/* ---------- Silent section videos ---------- */
.motion-card {
  position: relative;
  width: 100%;
}
.motion-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid rgba(180,153,98,0.28);
  border-radius: 6px;
  box-shadow: 0 30px 80px -52px rgba(20,56,82,0.7);
}
.motion-card--intro .motion-card__frame {
  aspect-ratio: 4 / 5;
}
.motion-card--wide .motion-card__frame {
  aspect-ratio: 4 / 5;
  max-height: 640px;
}
.motion-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy);
}
.motion-card__caption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  color: rgba(20,56,82,0.72);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.motion-card__caption span {
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.motion-card__caption strong {
  font-weight: 500;
  color: var(--navy);
  text-align: right;
}
.section-motion {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(300px, .6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin: 0 0 clamp(44px, 6vw, 76px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.42);
}
.section-motion h3 {
  margin-top: 14px;
  max-width: 15ch;
}
.section-motion p {
  margin-top: 16px;
  color: rgba(20,56,82,0.72);
}
.section-motion--amenities {
  grid-template-columns: minmax(300px, .62fr) minmax(0, .78fr);
  border-color: rgba(180,153,98,0.24);
  background: rgba(255,255,255,0.045);
}
.amenities .section-motion h3,
.amenities .section-motion .motion-card__caption strong {
  color: #fff;
}
.amenities .section-motion p,
.amenities .section-motion .motion-card__caption {
  color: rgba(255,255,255,0.7);
}
.amenities .section-motion .motion-card__caption span {
  color: var(--gold-soft);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--line);
  margin-top: clamp(48px, 6vw, 80px);
  border: 1px solid var(--line);
}
.stat {
  background: var(--bone);
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px);
  text-align: left;
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 60px);
  color: var(--navy);
  display: block;
  line-height: 1;
}
.stat__num sup { font-size: .5em; color: var(--gold); vertical-align: super; margin-left: 4px; font-family: var(--sans); font-weight: 300; }
.stat__label {
  margin-top: 14px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid);
}

/* ---------- Models section ---------- */
.models { background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%); }
.models__head {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(40px, 6vw, 100px);
  align-items: end; margin-bottom: clamp(48px, 6vw, 88px);
}
.models__head h2 { max-width: 14ch; }
.models__head p { padding-bottom: 14px; }

.model {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.model:last-child { border-bottom: 1px solid var(--line); }
.model--reverse { grid-template-columns: 1fr 1.3fr; }
.model--reverse .model__visual { order: 2; }
.model__visual {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
}
.model__visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2s var(--ease-out), filter .8s var(--ease-out);
}
.model:hover .model__visual img { transform: scale(1.06); }
.model__visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,56,82,0) 60%, rgba(20,56,82,.45) 100%);
}
.model__badge {
  position: absolute; top: 24px; left: 24px;
  z-index: 2;
  padding: 8px 14px;
  background: rgba(249,246,239,0.92);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-deep);
}
.model__copy h3 {
  font-size: clamp(40px, 4.6vw, 76px);
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.model__sub {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 24px;
}
.model__desc { color: var(--ink-2); margin-bottom: 32px; max-width: 50ch; }
.model__specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  margin-bottom: 36px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec__val {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--navy);
  display: block;
  line-height: 1;
}
.spec__lbl {
  margin-top: 8px;
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--mid);
}
.model__features {
  margin-bottom: 36px;
}
.model__features li {
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  font-size: 14px;
  color: var(--ink-2);
}
.model__features li::before {
  content: ""; position: absolute;
  left: 0; top: 18px;
  width: 14px; height: 1px;
  background: var(--gold);
}

/* ---------- Official listing snapshot ---------- */
.listing-snapshot {
  background: var(--bone);
  border-top: 1px solid var(--line);
}
.listing-snapshot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(38px, 5vw, 78px);
  align-items: center;
}
.listing-snapshot__media {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(150px, .88fr);
  grid-template-rows: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}
.listing-snapshot__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(20,56,82,0.12);
  box-shadow: 0 28px 70px -50px rgba(20,56,82,0.55);
}
.listing-snapshot__image--main {
  grid-row: 1 / 3;
  aspect-ratio: 4 / 5;
}
.listing-snapshot__copy h2 {
  max-width: 13ch;
  margin-top: 14px;
}
.listing-snapshot__copy .lead {
  margin-top: 22px;
  color: rgba(12,31,46,0.72);
}
.listing-snapshot__price {
  margin-top: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.listing-snapshot__price span,
.listing-snapshot__facts dt {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.listing-snapshot__price strong {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(52px, 5.6vw, 82px);
  font-weight: 400;
  line-height: .9;
  color: var(--navy);
}
.listing-snapshot__price small {
  display: block;
  margin-top: 14px;
  color: var(--mid);
  font-size: 13px;
  line-height: 1.6;
}
.listing-snapshot__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  border: 1px solid var(--line);
  background: var(--line);
}
.listing-snapshot__facts div {
  min-height: 92px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 18px;
  background: rgba(255,255,255,0.56);
}
.listing-snapshot__facts dd {
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1;
  color: var(--navy);
}
.listing-snapshot__note {
  margin-top: 18px;
  color: rgba(12,31,46,0.66);
  font-size: 13px;
  line-height: 1.7;
}
.listing-snapshot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- Buyer decision ---------- */
.decision {
  background: linear-gradient(180deg, var(--bone), var(--cream));
  overflow: hidden;
}
.decision__head,
.buyer-guides__head {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.decision__head h2,
.buyer-guides__head h2 {
  margin-top: 14px;
  max-width: 13ch;
}
.decision__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.decision-card {
  min-height: 330px;
  padding: clamp(26px, 3vw, 42px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(255,255,255,.24);
}
.decision-card span,
.guide-card span {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.decision-card h3 {
  font-size: clamp(28px, 2.8vw, 42px);
}
.decision-card p,
.guide-card p {
  color: var(--mid);
  font-size: 14px;
}
.decision-card a,
.guide-card::after {
  margin-top: auto;
  color: var(--navy);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.decision-card a::after,
.guide-card::after {
  content: attr(data-link-label) " →";
  color: var(--gold-deep);
}

/* ---------- Brochures ---------- */
.brochures {
  background:
    linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
}
.brochures__head {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(42px, 6vw, 76px);
}
.brochures__head h2 {
  margin-top: 14px;
  max-width: 14ch;
}
.brochures__head p {
  padding-bottom: 10px;
  color: rgba(20,56,82,0.72);
}
.brochures__layout {
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}
.brochures__layout--compact {
  display: block;
}
.brochures__list {
  display: grid;
  gap: 14px;
}
.brochures__list--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.brochures__list--compact .brochure-card {
  align-content: space-between;
  min-height: 100%;
}
.brochures__list--compact .brochure-card h3 {
  font-size: clamp(24px, 2vw, 32px);
}
.brochures__list--compact .brochure-card p {
  font-size: 13px;
}
.brochure-card {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 2.2vw, 30px);
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(20,56,82,0.12);
  border-radius: 6px;
  box-shadow: 0 18px 42px -34px rgba(20,56,82,0.36);
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.brochure-card:hover,
.brochure-card.is-active {
  background: rgba(255,255,255,0.88);
  border-color: rgba(180,153,98,0.72);
  box-shadow: 0 24px 54px -36px rgba(20,56,82,0.48);
}
.brochure-card.is-active {
  transform: translateY(-2px);
}
.brochure-card__eyebrow {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.brochure-card h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
  color: var(--navy);
}
.brochure-card p {
  margin-top: 12px;
  color: rgba(12,31,46,0.68);
  font-size: 14px;
  line-height: 1.65;
  max-width: 52ch;
}
.brochure-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.brochure-card__actions button,
.brochure-card__actions a,
.brochure-viewer__bar a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(20,56,82,0.16);
  border-radius: 4px;
  color: var(--navy);
  background: rgba(255,255,255,0.58);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.brochure-card__actions button[aria-pressed="true"],
.brochure-card__actions button:hover,
.brochure-card__actions a:hover,
.brochure-viewer__bar a:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.brochure-card__actions a {
  border-color: rgba(180,153,98,0.42);
  color: var(--gold-deep);
}
.brochure-viewer {
  overflow: hidden;
  border: 1px solid rgba(20,56,82,0.14);
  border-radius: 6px;
  background: var(--navy);
  box-shadow: 0 32px 80px -46px rgba(20,56,82,0.55);
}
.brochure-viewer__bar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}
.brochure-viewer__bar span {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
}
.brochure-viewer__bar a {
  flex: 0 0 auto;
  border-color: rgba(180,153,98,0.44);
  background: rgba(255,255,255,0.08);
  color: var(--gold-soft);
}
.brochure-preview {
  display: grid;
  gap: 18px;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 560px;
  overflow: auto;
  padding: clamp(14px, 1.6vw, 22px);
  background: #ece6d8;
}
.brochure-preview img {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(20,56,82,0.12);
  box-shadow: 0 18px 48px -34px rgba(20,56,82,0.42);
}

/* ---------- Amenities ---------- */
.amenities { background: var(--navy); color: var(--cream); position: relative; overflow: hidden; }
.amenities::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/marble.webp") center/cover;
  opacity: .04;
  mix-blend-mode: screen;
  pointer-events: none;
}
.amenities .eyebrow { color: var(--gold-soft); }
.amenities .eyebrow::before { background: var(--gold-soft); }
.amenities h2 { color: #fff; margin-top: 14px; max-width: 18ch; }
.amenities__head { margin-bottom: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.amenities__head p { color: rgba(255,255,255,0.72); padding-bottom: 8px; }

.amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(180,153,98,0.22);
  border: 1px solid rgba(180,153,98,0.22);
}
.amenity {
  background: var(--navy);
  padding: clamp(32px, 3vw, 48px) clamp(20px, 2vw, 28px);
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  transition: background .6s var(--ease-out);
}
.amenity:hover { background: var(--navy-2); }
.amenity--photo {
  background-image:
    linear-gradient(180deg, rgba(7,28,42,.22) 0%, rgba(7,28,42,.68) 55%, rgba(20,56,82,.95) 100%),
    var(--photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 280px;
}
.amenity--photo:hover {
  background-image:
    linear-gradient(180deg, rgba(7,28,42,.12) 0%, rgba(7,28,42,.55) 55%, rgba(20,56,82,.88) 100%),
    var(--photo);
}
.amenity--photo .amenity__txt { color: rgba(255,255,255,0.82); }
.amenity--photo .amenity__icon { color: var(--cream); }
.amenity__icon {
  width: 40px; height: 40px;
  color: var(--gold-soft);
  margin-bottom: 24px;
}
.amenity__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1; fill: none; }
.amenity__name {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
}
.amenity__txt {
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
}
.amenity__num {
  position: absolute; right: 20px; top: 20px;
  font-family: var(--serif); font-size: 13px;
  color: var(--gold-soft); opacity: .5;
}

/* ---------- Gallery ---------- */
.gallery { background: var(--cream); }
.gallery__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(34px, 4vw, 56px);
  align-items: center;
}
.gallery-filter {
  border: 1px solid rgba(20,56,82,0.18);
  color: var(--navy);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.42);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.gallery-filter[aria-pressed="true"],
.gallery-filter:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.gallery-filter--full {
  margin-left: auto;
  border-color: rgba(180,153,98,0.55);
  color: var(--gold);
  background: rgba(255,255,255,0.58);
}
.gallery-filter--full[aria-pressed="true"],
.gallery-filter--full:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.gallery__grid {
  display: block;
  margin-top: clamp(48px, 6vw, 80px);
}
.gallery__story {
  display: grid;
  grid-template-columns: minmax(180px, 270px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(34px, 5vw, 62px) 0;
  border-top: 1px solid rgba(20,56,82,0.12);
}
.gallery__story:first-child { padding-top: 0; border-top: 0; }
.gallery__story-head {
  display: grid;
  align-content: start;
  gap: 14px;
}
.gallery__story-head span {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}
.gallery__story-head h3 {
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: .92;
}
.gallery__story-head p {
  max-width: 26ch;
  color: rgba(20,56,82,0.68);
  font-size: 14px;
  line-height: 1.8;
}
.gallery__story-grid,
.gallery__flat-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 122px;
  gap: 16px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--navy);
  color: #fff;
  min-height: 0;
  text-align: left;
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.8s var(--ease-out), filter .8s var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,31,46,0.04) 18%, rgba(12,31,46,0.76) 100%);
  opacity: .76;
  transition: opacity .35s var(--ease-out);
}
.gallery__item:hover .gallery-card__shade { opacity: .48; }
.gallery-card__meta {
  position: absolute;
  left: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: start;
  color: rgba(255,255,255,0.78);
}
.gallery-card__meta span {
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
}
.gallery-card__meta strong {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
}
.gallery-card--lead { grid-column: span 6; grid-row: span 3; }
.gallery-card--support { grid-column: span 3; grid-row: span 2; }
.gallery-card--lead .gallery-card__meta strong { font-size: clamp(26px, 3vw, 38px); }
.gallery__grid--curated .gallery__flat-grid .gallery-card--lead { grid-column: span 6; grid-row: span 3; }
.gallery__grid--curated .gallery__flat-grid .gallery-card--support { grid-column: span 3; grid-row: span 2; }
.gallery__grid--library .gallery__flat-grid .gallery-card--support {
  grid-column: span 3;
  grid-row: span 2;
}
.gallery-lead-cta {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px;
  background: #0c1f2e;
  border: 1px solid rgba(180,153,98,0.42);
  color: #fff;
}
.gallery-lead-cta__copy {
  display: grid;
  gap: 7px;
}
.gallery-lead-cta__copy span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}
.gallery-lead-cta__copy strong {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.02;
}
.gallery-lead-cta__copy p {
  max-width: 66ch;
  color: rgba(255,255,255,0.74);
  font-size: 14px;
  line-height: 1.7;
}
.gallery-lead-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.gallery-lead-cta__actions .btn {
  min-width: 176px;
  justify-content: center;
}
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 38px);
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,20,30,0.88);
  backdrop-filter: blur(10px);
}
.gallery-lightbox__panel {
  position: relative;
  width: min(1180px, 100%);
  height: min(82vh, 780px);
  display: grid;
  place-items: center;
}
.gallery-lightbox__figure {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
}
.gallery-lightbox__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0,0,0,0.22);
}
.gallery-lightbox__figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,0.74);
  font-size: 13px;
}
.gallery-lightbox__figure strong {
  color: var(--gold-soft);
  font-weight: 500;
  white-space: nowrap;
}
.gallery-lightbox__close,
.gallery-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(12,31,46,0.72);
  color: #fff;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover {
  background: rgba(180,153,98,0.88);
  border-color: rgba(180,153,98,0.9);
}
.gallery-lightbox__close {
  top: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}
.gallery-lightbox__nav {
  top: 50%;
  width: 48px;
  height: 64px;
  transform: translateY(-50%);
  font-size: 44px;
  font-family: var(--serif);
}
.gallery-lightbox__nav--prev { left: -70px; }
.gallery-lightbox__nav--next { right: -70px; }
body.gallery-is-open { overflow: hidden; }

/* ---------- Reel (luxury editorial film embed) ---------- */
.reel {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.reel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 800px 600px at 75% 40%, rgba(180,153,98,0.14), transparent 60%),
    radial-gradient(ellipse 600px 800px at 20% 80%, rgba(65,101,137,0.22), transparent 55%);
  pointer-events: none;
}
.reel::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/marble.webp") center/cover;
  opacity: 0.025;
  mix-blend-mode: screen;
  pointer-events: none;
}
.reel .container { position: relative; z-index: 1; }

.reel__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
}

/* LEFT COLUMN — editorial copy + chapters */
.reel__copy .eyebrow {
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.reel__copy .eyebrow::before { background: var(--gold-soft); }
.reel__copy h2 {
  color: #fff;
  margin: 18px 0 26px;
  max-width: 14ch;
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: 1.04;
  letter-spacing: -.005em;
}
.reel__copy h2 em {
  color: var(--gold-soft);
  font-style: italic;
}
.reel__lead {
  color: rgba(255,255,255,0.72);
  max-width: 44ch;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  margin-bottom: clamp(36px, 4vw, 52px);
}

/* Numbered interactive chapter list */
.reel__chapters {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(36px, 4vw, 52px);
  border-top: 1px solid rgba(180,153,98,0.18);
}
.reel__chapter {
  display: grid;
  grid-template-columns: 56px 60px 1fr 18px;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(180,153,98,0.12);
  cursor: pointer;
  transition: padding .4s var(--ease-out);
  position: relative;
}
.reel__chapter::before {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 1px;
  width: 0;
  background: var(--gold);
  transition: width .55s var(--ease-out);
}
.reel__chapter:hover::before,
.reel__chapter.is-active::before {
  width: 100%;
}
.reel__chapter:hover {
  padding-left: 8px;
}
.ch__num {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease-out);
}
.reel__chapter.is-active .ch__num { color: var(--gold-soft); }
.ch__time {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(255,255,255,0.42);
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease-out);
}
.reel__chapter.is-active .ch__time { color: var(--gold-soft); }
.ch__title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 22px);
  color: rgba(255,255,255,0.78);
  transition: color .4s var(--ease-out);
  font-style: italic;
}
.reel__chapter:hover .ch__title,
.reel__chapter.is-active .ch__title { color: #fff; }
.ch__caret {
  color: rgba(255,255,255,0.25);
  font-size: 14px;
  transition: transform .4s var(--ease-out), color .4s var(--ease-out);
}
.reel__chapter:hover .ch__caret,
.reel__chapter.is-active .ch__caret {
  color: var(--gold-soft);
  transform: translateX(6px);
}

.reel__cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
}
.reel__share {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: all .45s var(--ease-out);
  display: inline-flex; align-items: center; gap: 10px;
}
.reel__share::after {
  content: ""; width: 16px; height: 1px; background: currentColor;
  transition: width .4s var(--ease-out);
}
.reel__share:hover {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}
.reel__share:hover::after { width: 24px; }

/* RIGHT COLUMN — cinematic video card */
.reel__media {
  position: relative;
  width: 405px;
  max-width: 100%;
}
.reel__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  background: var(--navy);
  overflow: hidden;
  box-shadow:
    0 50px 100px -20px rgba(0,0,0,0.7),
    0 30px 60px -15px rgba(20,56,82,0.5),
    0 0 0 1px rgba(180,153,98,0.16);
}
.reel__frame video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  cursor: pointer;
}

/* Gold cinematic corner brackets (viewfinder marks) */
.reel__corner {
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 3;
}
.reel__corner::before,
.reel__corner::after {
  content: "";
  position: absolute;
  background: var(--gold-soft);
}
.reel__corner::before {
  width: 22px; height: 1px;
}
.reel__corner::after {
  width: 1px; height: 22px;
}
.reel__corner--tl { top: 12px; left: 12px; }
.reel__corner--tl::before { top: 0; left: 0; }
.reel__corner--tl::after { top: 0; left: 0; }
.reel__corner--tr { top: 12px; right: 12px; }
.reel__corner--tr::before { top: 0; right: 0; }
.reel__corner--tr::after { top: 0; right: 0; }
.reel__corner--bl { bottom: 12px; left: 12px; }
.reel__corner--bl::before { bottom: 0; left: 0; }
.reel__corner--bl::after { bottom: 0; left: 0; }
.reel__corner--br { bottom: 12px; right: 12px; }
.reel__corner--br::before { bottom: 0; right: 0; }
.reel__corner--br::after { bottom: 0; right: 0; }

/* Mute button — subtle, top-right corner of frame */
.reel__mute {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(12,31,46,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(180,153,98,0.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
  z-index: 4;
}
.reel__mute:hover {
  background: rgba(20,56,82,0.85);
  border-color: var(--gold);
  transform: scale(1.05);
}
.reel__mute svg { width: 16px; height: 16px; stroke: var(--gold-soft); stroke-width: 1.5; fill: none; }
.reel__mute .icon-unmute { display: none; }
.reel__mute.is-unmuted .icon-mute { display: none; }
.reel__mute.is-unmuted .icon-unmute { display: block; }

/* Audio hint below frame — pulses subtly when muted */
.reel__hint {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  cursor: pointer;
  transition: color .4s var(--ease-out), opacity .4s var(--ease-out);
}
.reel__hint:hover { color: #fff; }
.reel__hint.is-hidden { opacity: 0; pointer-events: none; height: 0; margin-top: 0; }
.reel__hint .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Soft reflection mirror beneath video frame */
.reel__reflection {
  margin-top: 1px;
  width: 100%;
  aspect-ratio: 9/4;
  background: inherit;
  position: relative;
  overflow: hidden;
  opacity: 0.18;
  mask: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 80%);
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 80%);
  filter: blur(3px);
  pointer-events: none;
}
.reel__reflection video {
  width: 100%; height: auto;
  transform: scaleY(-1);
  display: block;
  margin-top: -100%;
}

@media (max-width: 1024px) {
  .reel__grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 60px); }
  .reel__media { margin: 0 auto; }
  .reel__copy h2 { max-width: 18ch; }
}
@media (max-width: 600px) {
  .reel__media { width: 320px; }
  .reel__chapter {
    grid-template-columns: 40px 50px 1fr 14px;
    gap: 12px;
  }
  .ch__num { font-size: 18px; }
}

/* ---------- Location ---------- */
.location { background: var(--bone); }
.location__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.location__map {
  aspect-ratio: 5/4;
  position: relative; overflow: hidden;
  background: var(--cream);
}
.location__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05); }
.location__points li {
  padding: 18px 0;
  display: grid; grid-template-columns: 80px 1fr auto;
  align-items: baseline; gap: 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.location__points li:first-child { border-top: 1px solid var(--line-soft); }
.point__name { color: var(--ink); font-weight: 400; }
.point__type { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.point__dist { color: var(--mid); font-variant-numeric: tabular-nums; }

/* ---------- Buyer guides + FAQ ---------- */
.buyer-guides { background: var(--cream); }
.buyer-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.guide-card {
  min-height: 310px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--bone);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.guide-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 24px 60px rgba(20,56,82,.12);
}
.guide-card h3 {
  font-size: clamp(25px, 2.2vw, 34px);
  max-width: 14ch;
}
.trust-faq { background: var(--bone); }
.trust-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: start;
}
.trust-faq h2 {
  margin-top: 14px;
  margin-bottom: 24px;
  max-width: 13ch;
}
.faq-list {
  display: grid;
  gap: 12px;
}
.faq-list details {
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.42);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--navy);
  font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  color: var(--gold-deep);
  font-size: 22px;
  line-height: 1;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list p {
  padding: 0 24px 24px;
  color: var(--mid);
  font-size: 14px;
}

/* ---------- SEO guide pages ---------- */
.guide-hero {
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
  padding-top: 120px;
}
.guide-hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  background: var(--navy);
}
.guide-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.72) saturate(1.04);
}
.guide-hero__veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(20,56,82,.08), rgba(12,31,46,.68) 64%, rgba(12,31,46,.92) 100%),
    linear-gradient(180deg, rgba(12,31,46,.25), rgba(12,31,46,.82));
}
.guide-hero .container { padding-bottom: clamp(70px, 10vh, 120px); }
.guide-hero__crumbs {
  margin-bottom: 18px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.guide-hero h1 {
  color: #fff;
  font-size: clamp(44px, 5.1vw, 82px);
  max-width: 15ch;
}
.guide-hero__sub {
  margin-top: 24px;
  color: rgba(255,255,255,.78);
  max-width: 58ch;
}
.guide-body { background: var(--bone); }
.guide-body__grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.15fr);
  gap: clamp(38px, 6vw, 96px);
  align-items: start;
}
.guide-toc {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line-soft);
  background: var(--cream);
  padding: 28px;
}
.guide-toc h2 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.guide-toc a {
  display: block;
  padding: 12px 0;
  color: var(--mid);
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.guide-article { display: grid; gap: clamp(34px, 4vw, 52px); }
.guide-article section {
  padding-bottom: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--line-soft);
}
.guide-article h2 {
  font-size: clamp(30px, 3vw, 48px);
  margin-bottom: 18px;
}
.guide-article p,
.guide-article li { color: var(--ink-2); }
.guide-article ul {
  display: grid;
  gap: 12px;
  list-style: disc;
  padding-left: 22px;
}
.guide-note {
  padding: 24px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  color: var(--mid);
}
.guide-cta {
  background: var(--navy);
  color: #fff;
  padding: clamp(42px, 5vw, 72px);
  display: grid;
  gap: 20px;
}
.guide-cta h2 {
  color: #fff;
  max-width: 14ch;
}
.guide-cta p { color: rgba(255,255,255,.76); }
.guide-cta .btn { width: fit-content; }

/* ---------- CTA / Contact ---------- */
.contact {
  background: var(--ink);
  color: var(--cream);
  position: relative; overflow: hidden;
}
.contact::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(180,153,98,0.18), transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(65,101,137,0.32), transparent 55%);
  pointer-events: none;
}
.contact .container { position: relative; z-index: 1; }
.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}
.contact__grid--single {
  grid-template-columns: minmax(0, 900px);
}
.contact h2 { color: #fff; margin: 16px 0 22px; max-width: 14ch; }
.contact .eyebrow { color: var(--gold-soft); }
.contact .eyebrow::before { background: var(--gold-soft); }
.contact__lead { color: rgba(255,255,255,0.74); margin-bottom: 40px; }
.contact__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 36px;
}
.contact__actions .btn {
  justify-content: center;
  text-align: center;
  padding: 14px 16px;
  font-size: 10px;
  letter-spacing: .14em;
}
.contact__items { margin-top: 40px; display: grid; gap: 22px; }
.contact__item {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 24px; align-items: baseline;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
}
.contact__item label {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
}
.contact__item a, .contact__item span { color: #fff; }
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}
.social-links a {
  color: #fff;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.social-links a:hover { color: var(--gold-soft); }

.form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: clamp(32px, 4vw, 56px);
}
.form__intro {
  display: grid;
  gap: 8px;
  padding-bottom: 26px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.form__intro span {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.form__intro strong {
  max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: .95;
  font-weight: 400;
  color: #fff;
}
.form__row { display: grid; gap: 22px; }
.form__field {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-top: 18px;
}
.form__field label {
  position: absolute; top: 22px; left: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: .04em;
  transition: all .35s var(--ease-out);
  pointer-events: none;
}
.form__field input,
.form__field textarea,
.form__field select {
  width: 100%; background: transparent; border: 0; outline: 0;
  color: #fff; font-family: var(--sans); font-size: 15px;
  padding: 14px 0 10px;
  font-weight: 300;
}
.form__field select { color: rgba(255,255,255,0.85); }
.form__field select option { background: var(--ink); color: #fff; }
.form__field textarea { resize: vertical; min-height: 80px; }
.form__field input:focus + label,
.form__field input:not(:placeholder-shown) + label,
.form__field textarea:focus + label,
.form__field textarea:not(:placeholder-shown) + label,
.form__field select:focus + label,
.form__field.has-val label {
  transform: translateY(-22px);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.form__field input:focus,
.form__field textarea:focus { border-bottom-color: var(--gold); }
.form__consent {
  margin-top: 24px;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,0.55);
  line-height: 1.55;
}
.form__consent input { margin-top: 4px; accent-color: var(--gold); }
.form__submit { margin-top: 28px; }
.form__submit .btn {
  width: 100%; justify-content: center;
}
.form__msg {
  margin-top: 18px; font-size: 13px;
  color: var(--gold-soft); min-height: 1em;
}
.form__fallback-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.form__fallback-actions a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border: 1px solid rgba(180,153,98,0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.form__fallback-actions a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.sticky-leadbar {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 80;
  display: none;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 8px;
  width: min(540px, calc(100vw - 48px));
  padding: 8px;
  background: rgba(12,31,46,0.94);
  border: 1px solid rgba(246,241,230,0.18);
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s var(--ease-out);
}
.sticky-leadbar.is-suppressed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(120%);
  visibility: hidden;
}
.sticky-leadbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 8px;
  border: 1px solid rgba(246,241,230,0.14);
  color: #fff;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.sticky-leadbar a:first-child {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.whatsapp-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 220;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  width: 58px;
  padding: 0;
  background: #128c4a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
  transition: opacity .28s var(--ease-out), transform .35s var(--ease-out), visibility .28s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
.whatsapp-widget:hover {
  transform: translateY(-2px);
  background: #0f7f43;
  box-shadow: 0 22px 54px rgba(0,0,0,0.34);
}
.whatsapp-widget.is-suppressed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(120%);
  visibility: hidden;
}
.whatsapp-widget__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  flex: 0 0 auto;
}
.whatsapp-widget__icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}
.whatsapp-widget__copy {
  display: none;
  gap: 2px;
  line-height: 1.1;
}
.whatsapp-widget__copy strong {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.whatsapp-widget__copy span {
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}

/* ---------- Footer ---------- */
.foot {
  background: var(--ink-2);
  color: rgba(255,255,255,0.62);
  padding: 60px 0 32px;
  font-size: 13px;
}
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.foot__brand img { height: 70px; margin-bottom: 20px; }
.foot__brand p { font-size: 13px; line-height: 1.6; max-width: 36ch; }
.foot h5 {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 18px;
}
.foot ul li { padding: 6px 0; }
.foot a:hover { color: var(--gold-soft); }
.foot__bottom {
  margin-top: 30px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 12px; color: rgba(255,255,255,0.4); flex-wrap: wrap;
}
.foot__bottom .by {
  display: inline-flex; gap: 10px; align-items: center;
}

/* ---------- Floating ambient music control ---------- */
.audio-toggle {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 200;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(12,31,46,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(180,153,98,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease-out), background .45s var(--ease-out), box-shadow .45s var(--ease-out);
  box-shadow: 0 10px 36px rgba(0,0,0,0.32);
  padding: 0;
}
.audio-toggle:hover {
  transform: scale(1.06);
  border-color: var(--gold);
  background: rgba(20,56,82,0.92);
  box-shadow: 0 14px 42px rgba(0,0,0,0.45);
}
.audio-toggle__icon,
.audio-toggle__pause {
  width: 18px; height: 18px;
  stroke: var(--gold-soft);
  stroke-width: 1.6;
  fill: none;
  pointer-events: none;
}
.audio-toggle__pause { display: none; }
.audio-toggle__eq {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  pointer-events: none;
}
.audio-toggle__eq span {
  display: block;
  width: 3px;
  background: var(--gold-soft);
  border-radius: 1.5px;
  animation: audioEq 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.audio-toggle__eq span:nth-child(1) { animation-delay: 0s;    height: 70%; }
.audio-toggle__eq span:nth-child(2) { animation-delay: .18s;  height: 100%; }
.audio-toggle__eq span:nth-child(3) { animation-delay: .36s;  height: 55%; }
@keyframes audioEq {
  0%,100% { transform: scaleY(0.35); }
  50%     { transform: scaleY(1); }
}
/* States */
.audio-toggle.is-playing .audio-toggle__icon { display: none; }
.audio-toggle.is-playing .audio-toggle__eq   { display: flex; }
.audio-toggle.is-playing:hover .audio-toggle__eq    { display: none; }
.audio-toggle.is-playing:hover .audio-toggle__pause { display: block; }

/* Tooltip hint on first load */
.audio-toggle__tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(12,31,46,0.92);
  border: 1px solid rgba(180,153,98,0.32);
  color: var(--gold-soft);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  padding: 9px 16px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.audio-toggle.show-tip .audio-toggle__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.audio-toggle__tip::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(12,31,46,0.92);
  border-right: 1px solid rgba(180,153,98,0.32);
  border-top: 1px solid rgba(180,153,98,0.32);
}

/* Soft pulse ring when paused, drawing attention pre-interaction */
.audio-toggle:not(.is-playing):not(.has-interacted)::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  animation: audioPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes audioPulse {
  0%   { opacity: 0.8; transform: scale(0.9); }
  60%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

@media (max-width: 600px) {
  .audio-toggle { bottom: 18px; right: 18px; width: 48px; height: 48px; }
}

/* ---------- Cursor (desktop only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed; left: 0; top: 0; z-index: 9999;
    pointer-events: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    transform: translate3d(-50%,-50%,0);
    mix-blend-mode: difference;
    transition: transform .15s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out);
  }
  .cursor.is-hover { width: 44px; height: 44px; background: transparent; border: 1px solid var(--gold); }
}
@media (hover: none) { .cursor { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav__menu .nav__link { display: none; }
  .nav__menu { gap: 12px; }
  .nav__cta { padding: 10px 16px; font-size: 10px; letter-spacing: .18em; }
  .intro__grid,
  .quick-capture__inner,
  .brochures__head,
  .brochures__layout,
  .amenities__head,
  .location__grid,
  .decision__head,
  .decision__grid,
  .buyer-guides__head,
  .buyer-guides__grid,
  .trust-faq__grid,
  .guide-body__grid,
  .contact__grid,
  .listing-snapshot__grid,
  .models__head { grid-template-columns: 1fr; }
  .decision__grid { border-left: 0; }
  .decision-card {
    border-left: 1px solid var(--line);
    min-height: auto;
  }
  .guide-toc { position: static; }
  .model, .model--reverse { grid-template-columns: 1fr; }
  .model--reverse .model__visual { order: 0; }
  .listing-snapshot__copy h2 { max-width: 16ch; }
  .section-motion,
  .section-motion--amenities {
    grid-template-columns: 1fr;
  }
  .brochures__list--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats { grid-template-columns: repeat(2,1fr); }
  .amenities__grid { grid-template-columns: repeat(2,1fr); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .gallery-filter--full { margin-left: 0; }
  .gallery__story { grid-template-columns: 1fr; }
  .gallery__story-head p { max-width: 54ch; }
  .gallery__story-grid,
  .gallery__flat-grid { grid-auto-rows: 108px; }
  .gallery-card--lead,
  .gallery__grid--curated .gallery__flat-grid .gallery-card--lead { grid-column: span 8; grid-row: span 3; }
  .gallery-card--support,
  .gallery__grid--curated .gallery__flat-grid .gallery-card--support,
  .gallery__grid--library .gallery__flat-grid .gallery-card--support { grid-column: span 4; grid-row: span 2; }
  .gallery-lead-cta {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .gallery-lead-cta__actions {
    justify-content: flex-start;
  }
  .gallery-lightbox__nav--prev { left: 0; }
  .gallery-lightbox__nav--next { right: 0; }
}
@media (max-width: 640px) {
  .nav {
    padding: 18px 0;
  }
  .nav__logo img {
    height: 38px;
  }
  .nav__menu .nav__link { display: none; }
  .nav__menu .nav__lang { display: none; }
  .nav__menu { margin-left: auto; }
  .nav__cta { display: none; }
  .hero {
    align-items: flex-start;
    min-height: max(100svh, 760px);
  }
  .hero__inner {
    padding-top: 112px;
    padding-bottom: 112px;
  }
  .hero__cta-row { flex-direction: column; align-items: stretch; }
  .hero__cta-row .btn { justify-content: center; }
  .hero__cta-row {
    max-width: 350px;
  }
  .hero h1 {
    max-width: 10ch;
    font-size: clamp(36px, 10vw, 46px);
  }
  .hero__sub {
    max-width: min(330px, 100%);
  }
  .hero__eyebrow {
    display: block;
    max-width: 330px;
    letter-spacing: .16em;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }
  .hero__eyebrow::before {
    display: block;
    margin-bottom: 10px;
  }
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(40px);
  }
  .cursor { display: none !important; }
  .stats { grid-template-columns: 1fr; }
  .section-motion { padding: 18px; }
  .motion-card__caption {
    display: grid;
    gap: 6px;
  }
  .motion-card__caption strong {
    text-align: left;
  }
  .brochures__list--compact {
    grid-template-columns: 1fr;
  }
  .listing-snapshot__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 220px 160px;
  }
  .listing-snapshot__image--main {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: auto;
  }
  .listing-snapshot__facts { grid-template-columns: 1fr; }
  .listing-snapshot__facts div { min-height: 82px; }
  .listing-snapshot__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .amenities__grid { grid-template-columns: 1fr; }
  .gallery__toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gallery-filter { width: 100%; padding: 9px 8px; font-size: 10px; }
  .gallery-filter--full { grid-column: 1 / -1; }
  .gallery__story { padding: 34px 0; }
  .gallery__story-head { gap: 10px; }
  .gallery__story-head h3 { font-size: 36px; }
  .gallery__story-head p { font-size: 13px; }
  .gallery__story-grid,
  .gallery__flat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 148px;
    gap: 10px;
  }
  .gallery-card--lead,
  .gallery__grid--curated .gallery__flat-grid .gallery-card--lead {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gallery-card--support,
  .gallery__grid--curated .gallery__flat-grid .gallery-card--support,
  .gallery__grid--library .gallery__flat-grid .gallery-card--support {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gallery-lead-cta {
    padding: 18px;
  }
  .gallery-lead-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
  .gallery-card__meta { left: 12px; right: 12px; bottom: 12px; gap: 5px; }
  .gallery-card__meta span { font-size: 9px; letter-spacing: .1em; }
  .gallery-card__meta strong { font-size: 16px; }
  .gallery-card--lead .gallery-card__meta strong { font-size: 25px; }
  .gallery-lightbox { padding: 12px; }
  .gallery-lightbox__panel { height: 82vh; }
  .gallery-lightbox__close { right: 0; top: 0; }
  .gallery-lightbox__nav {
    top: auto;
    bottom: 54px;
    width: 44px;
    height: 44px;
    font-size: 32px;
  }
  .gallery-lightbox__nav--prev { left: 0; }
  .gallery-lightbox__nav--next { right: 0; }
  .gallery-lightbox__figure figcaption {
    padding: 0 52px;
    min-height: 44px;
    align-items: center;
  }
  .amenities-detail__strip {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .brochure-card { padding: 22px; }
  .brochure-card__actions { display: grid; grid-template-columns: 1fr; }
  .brochure-viewer__bar {
    align-items: start;
    flex-direction: column;
  }
  .brochure-viewer__bar a { width: 100%; }
  .brochure-preview {
    height: 68vh;
    min-height: 430px;
  }
  .decision-card,
  .guide-card { min-height: auto; }
  .guide-hero { min-height: 70vh; }
  .guide-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .contact__actions { grid-template-columns: 1fr; }
  .quick-form__group,
  .quick-form__fields { grid-template-columns: 1fr; }
  .quick-form__label { margin-bottom: 2px; }
  .quick-capture__direct-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quick-capture__direct-actions a {
    min-width: 0;
    padding-inline: 10px;
  }
  .social-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .foot__top { grid-template-columns: 1fr; }
  .contact__item { grid-template-columns: 1fr; gap: 6px; }
  body { padding-bottom: 74px; }
  .sticky-leadbar {
    display: grid;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sticky-leadbar a {
    min-width: 0;
    min-height: 44px;
    padding: 9px 4px;
    font-size: 9px;
    letter-spacing: .04em;
  }
  .whatsapp-widget {
    right: 12px;
    bottom: 86px;
    min-height: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .whatsapp-widget__copy { display: none; }
  .whatsapp-widget__icon {
    width: 56px;
    height: 56px;
    background: transparent;
  }
  .whatsapp-widget__icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ---------- Modelos detail page ---------- */
.model-hero {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
  /* The nav is position:fixed (70px tall on a phone) and this hero is bottom-aligned with no
     top offset. On desktop the content is shorter than min-height so it never reaches the top —
     but on mobile the h1 wraps to 4 lines, the content grows past min-height, and it overflows
     UPWARD straight under the logo. Measured 2026-08-01 on /la-mision-159 at 375px: nav bottom
     y=70, eyebrow top y=8, h1 top y=45 — the logo sat on the headline on all 16 listing pages,
     for the 89% of traffic that is on a phone. padding-top clears the nav; it costs nothing on
     desktop, where the hero is bottom-aligned and this padding is never the binding constraint. */
  padding-top: 86px;
  padding-bottom: clamp(60px, 8vw, 100px);
}
/* `.btn--ghost` is navy-on-transparent — correct on the bone/cream sections it was designed for,
   invisible over this dark hero photo. Same measurement pass: "See the photos" rendered
   rgb(20,56,82) on a dark image on all 16 listing pages. Scoped to the hero so the light-section
   ghost buttons keep their navy treatment. */
.model-hero .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.72);
}
.model-hero .btn--ghost:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.model-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.model-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
/* Autoplay hero background video layered over the still (poster = the golden hero). If the
   clip is missing or autoplay is blocked, the poster/still shows through — graceful either way. */
.model-hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
/* "You might also like" — cross-listing browse loop at the bottom of every listing page. */
.more-listings { background: var(--cream); border-top: 1px solid var(--line); padding: clamp(50px,7vw,90px) 0; }
.more-listings .eyebrow { color: var(--gold-deep); }
.more-listings h2 { color: var(--navy); }
.more-sub { color: var(--mid); margin-bottom: 30px; max-width: 52ch; }
.more-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
/* 2-up on phones since 2026-08-25: the row carries 6 cards now, and 6 full-width stacked
   cards buried the "View all listings" link under a screen and a half of scrolling.
   Deliberately NO 1-column fallback — an earlier 380px breakpoint here caught iPhone SE (375)
   and most Androids (360-412), i.e. the phones it was meant to spare. 2-up holds to 320px. */
@media (max-width: 820px) { .more-row { grid-template-columns: repeat(2,1fr); gap: 14px; } }
.more-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.more-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(20,56,82,.5); }
.more-card__img { aspect-ratio: 3/2; overflow: hidden; }
.more-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.more-card:hover .more-card__img img { transform: scale(1.05); }
.more-card__name { display: block; color: var(--navy); font-weight: 500; padding: 14px 16px 0; font-size: 15px; }
.more-card__price { display: block; color: var(--gold-deep); font-family: var(--serif); font-size: 20px; padding: 2px 16px 16px; }
.more-all { display: inline-block; margin-top: 28px; color: var(--navy); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 4px; }
.more-all:hover { color: var(--gold-deep); }
.model-hero__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,31,46,0.4) 0%, rgba(12,31,46,0.7) 100%); }
.model-hero__crumbs {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 28px;
}
.model-hero__crumbs a { color: var(--gold-soft); }
.model-hero h1 { color: #fff; max-width: 26ch; line-height: 1.06; }
.model-hero h1 em { color: var(--gold-soft); font-style: italic; }
.model-hero__sub { margin-top: 22px; max-width: 50ch; color: rgba(255,255,255,0.78); }

.model-quick {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--cream); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.model-quick > div {
  padding: 30px 24px;
  border-right: 1px solid var(--line-soft);
  text-align: center;
}
.model-quick > div:last-child { border-right: 0; }
.model-quick .v {
  font-family: var(--serif); font-size: clamp(28px,2.6vw,38px);
  color: var(--navy); display: block; line-height: 1;
}
.model-quick .l {
  margin-top: 8px; font-size: 10px; letter-spacing: .25em;
  text-transform: uppercase; color: var(--mid);
}

.detail { padding: clamp(60px, 8vw, 100px) 0; background: var(--bone); }
.detail__intro {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.detail__features { display: grid; gap: 14px; }
.detail__features h4 {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-deep); font-family: var(--sans); font-weight: 500;
  margin-bottom: 8px;
}
.detail__features li {
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--line-soft);
  position: relative; font-size: 14px;
}
.detail__features li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 14px; height: 1px; background: var(--gold);
}

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: clamp(40px, 5vw, 60px) 0;
}
.gallery-strip img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
@media (max-width: 1024px) {
  .detail__intro { grid-template-columns: 1fr; }
  .model-quick { grid-template-columns: repeat(2, 1fr); }
  .model-quick > div { border-bottom: 1px solid var(--line-soft); }
  .gallery-strip { grid-template-columns: repeat(2,1fr); }
}

/* ---------- Amenities — detail strip (horizontal scroll) ---------- */
.amenities-detail {
  background: var(--cream);
  padding: clamp(80px, 10vw, 130px) 0;
  overflow: hidden;
}
.amenities-detail__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.amenities-detail__head .eyebrow::before { background: var(--gold); }
.amenities-detail__head h2 { color: var(--navy); margin-top: 14px; }
.amenities-detail__head p { color: rgba(20,56,82,0.7); margin-top: 16px; max-width: 56ch; }

.amenities-detail__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 4vw, 40px);
  padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,56,82,0.25) transparent;
}
.amenities-detail__strip::-webkit-scrollbar { height: 6px; }
.amenities-detail__strip::-webkit-scrollbar-thumb { background: rgba(20,56,82,0.25); }
.amenities-detail__strip::-webkit-scrollbar-track { background: transparent; }

.amenities-detail__tile {
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.amenities-detail__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.amenities-detail__photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.amenities-detail__tile:hover .amenities-detail__photo img { transform: scale(1.04); }
.amenities-detail__cap {
  padding: 18px 4px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.amenities-detail__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.amenities-detail__title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--navy);
  line-height: 1.25;
}
@media (max-width: 640px) {
  .amenities-detail__strip {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
}

/* ---------- Walkthrough (long-form video, lazy YouTube) ---------- */
.walkthrough {
  background: var(--navy);
  color: #fff;
  padding: clamp(80px, 10vw, 140px) 0;
}
.walkthrough__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.walkthrough__head .eyebrow::before { background: var(--gold-soft); }
.walkthrough__head h2 { color: #fff; margin-top: 14px; }
.walkthrough__head p { color: rgba(255,255,255,0.72); margin-top: 20px; max-width: 56ch; }
.walkthrough__player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid rgba(180,153,98,0.32);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  transition: transform .6s var(--ease-out);
}
.walkthrough__player:hover { transform: translateY(-2px); }
.walkthrough__player:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.walkthrough__player img,
.walkthrough__player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.walkthrough__player::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,28,42,.15) 0%, rgba(7,28,42,.55) 100%);
  z-index: 1; pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.walkthrough__player:hover::before { opacity: .55; }
.walkthrough__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px);
  border-radius: 50%;
  background: rgba(20, 56, 82, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--gold-soft);
  display: grid; place-items: center;
  z-index: 2;
  transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
.walkthrough__player:hover .walkthrough__play {
  background: rgba(180, 153, 98, 0.85);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}
.walkthrough__play svg { width: 38%; height: 38%; fill: currentColor; margin-left: 8%; }
.walkthrough__meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 20px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.walkthrough__meta span::before {
  content: "·"; margin-right: 12px; color: var(--gold-soft);
}
.walkthrough__meta span:first-child::before { content: none; margin-right: 0; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mb-sm { margin-bottom: 16px; } .mb-md { margin-bottom: 32px; } .mb-lg { margin-bottom: 48px; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Calendly booking section (replaces the old lead form) ---------- */
.quick-capture--booking { text-align: center; }
.quick-capture__copy--center {
  max-width: 760px;
  margin: 0 auto;
}
.quick-capture__copy--center h2 { max-width: none; }
.quick-capture__copy--center p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
.calendly-booking {
  margin: clamp(28px, 4vw, 46px) auto 0;
  max-width: 840px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 72px rgba(20,56,82,0.09);
  overflow: hidden;
  text-align: left;
}
.calendly-booking .calendly-embed {
  width: 100%;
  min-width: 320px;
  height: 760px;
}
.calendly-booking__fallback {
  display: block;
  padding: 22px;
  text-align: center;
}
@media (max-width: 600px) {
  .calendly-booking .calendly-embed { height: 1040px; }
}

/* ---------- Listing film (the tour videos we cut for a listing, above its photo gallery) ----------
   Poster-first by design: the markup ships preload="none", so a visitor downloads nothing until
   they press the gold disc. Landscape films fill the column; vertical (9:16) films are capped so a
   phone-shot tour never becomes a skyscraper on desktop. tour-video.js adds the overlay behaviour. */
.film-head { scroll-margin-top: 90px; }
.filmstrip {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  margin: clamp(28px, 3.4vw, 44px) 0 clamp(40px, 5vw, 60px);
}
.filmstrip--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.film { margin: 0; }
.film__frame {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
}
.film__frame video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--ink);
}
.film--portrait .film__frame { max-width: 400px; margin: 0 auto; }
.film--portrait .film__frame video { aspect-ratio: 9 / 16; }
/* The caption tracks the frame, not the column, or the duration drifts off to the far edge. */
.film--portrait .film__cap { max-width: 400px; margin-left: auto; margin-right: auto; }
.film__play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: var(--cream);
  background: linear-gradient(180deg, rgba(12,31,46,0.10), rgba(12,31,46,0.44));
  transition: opacity .3s var(--ease-out);
}
.film__play > span {
  width: clamp(60px, 5.6vw, 82px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding-left: 4px;
  background: rgba(180,153,98,0.94); color: var(--ink);
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1;
  box-shadow: 0 18px 44px rgba(12,31,46,0.42);
  transition: transform .35s var(--ease-out), background .2s;
}
.film__play:hover > span { transform: scale(1.07); background: var(--gold-soft); }
.film.is-playing .film__play { opacity: 0; pointer-events: none; }
.film__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep);
}
.film__cap time { color: rgba(20,56,82,0.55); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .filmstrip--two { grid-template-columns: 1fr; }
  .film--portrait .film__frame,
  .film--portrait .film__cap { max-width: 340px; }
}

/* ---------- Floating WhatsApp — Buy Baja ---------- */
/* The base .whatsapp-widget above is Loma's bare green circle. Cold Facebook traffic
   doesn't read a green circle as "ask a question", so on desktop this opens into a
   labelled pill. On phones there's no room for the label, so it stays a circle — but
   Buy Baja pages have no sticky lead bar, so the bottom:86px offset the base rule uses
   to clear that bar would leave it floating in mid-air. Pinned back down here. */
.whatsapp-widget--bb {
  width: auto;
  padding: 10px 18px 10px 12px;
  gap: 10px;
  border-radius: 100px;
  font-family: var(--sans);
  text-decoration: none;
}
.whatsapp-widget--bb .whatsapp-widget__copy { display: grid; }
.whatsapp-widget--bb .whatsapp-widget__icon { width: 34px; height: 34px; }
.whatsapp-widget--bb .whatsapp-widget__icon svg { width: 20px; height: 20px; }
/* One slow pulse on load, then it stops — a permanently animating button reads as an ad. */
.whatsapp-widget--bb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #128c4a;
  animation: waPulse 2.4s ease-out 3;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-widget--bb::after { animation: none; }
}
@media (max-width: 760px) {
  .whatsapp-widget--bb {
    right: 16px;
    bottom: 18px;
    width: 56px;
    padding: 0;
    border-radius: 50%;
  }
  .whatsapp-widget--bb .whatsapp-widget__copy { display: none; }
  .whatsapp-widget--bb .whatsapp-widget__icon { width: 56px; height: 56px; background: transparent; }
  .whatsapp-widget--bb .whatsapp-widget__icon svg { width: 28px; height: 28px; }
}

/* ---------- Listing location map (site/<slug>.html) ----------
   Sits between the gallery (.detail, bone) and the booking block (.book, cream): cream
   with a top rule, so the seam reads the same way .book's does. The base .location
   rules above are Loma's; these only add what a listing pin needs. */
.location--listing {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: clamp(60px, 8vw, 100px) 0;
}
.location--listing .location__grid {
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;          /* map matches the fact column's height instead of floating */
}
.location--listing .location__points li { grid-template-columns: 120px 1fr auto; }
.location--listing h2 { color: var(--navy); }
.location--listing .lead { max-width: 54ch; }
/* Badge — a filled dot for a pin that IS the property, a hollow ring for a shared
   community pin. Same honesty split the map videos use. */
.location__badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); background: rgba(180,153,98,.12);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 7px 15px; margin: 0 0 22px;
}
.location__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.location__badge--area::before {
  background: transparent; border: 2px solid var(--gold);
  width: 10px; height: 10px;
}
.location--listing .location__map {
  aspect-ratio: auto; min-height: 480px;
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(20,56,82,.35);
}
.location--listing .location__map iframe { filter: none; }
.location__note { font-size: 12.5px; line-height: 1.6; color: var(--mid); margin: 16px 0 0; }
.location__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
/* Zoom controls. The keyless embed ships no visible +/- of its own, and scroll-wheel
   zoom is undiscoverable, so the buttons are ours. They sit above the tap shield so zoom
   never depends on unlocking the map first. */
.location__zoom {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: flex; flex-direction: column; gap: 1px;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 22px -8px rgba(12,31,46,.55);
}
.location__zoom button {
  width: 42px; height: 42px; border: 0; padding: 0; cursor: pointer;
  background: #fff; color: var(--navy);
  font-family: var(--sans); font-size: 21px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease-out);
}
.location__zoom button:hover { background: var(--cream); }
.location__zoom button:disabled { opacity: .38; cursor: default; background: #fff; }
.location__map-tap { display: none; }
@media (max-width: 1024px) {
  /* The generic 1-column rule up top is out-specified by .location--listing, so the
     listing variant has to collapse itself or the map lands off-screen on phones. */
  .location--listing .location__grid { grid-template-columns: 1fr; align-items: start; }
  .location--listing .location__map { aspect-ratio: 4/3; min-height: 0; margin-top: 34px; }
  /* A live embed inside a scrolling page swallows touch-scroll, and most Buy Baja
     traffic is phones. Below this breakpoint the map is a picture and the tap hands
     the visitor the real Google Maps app — which is what they wanted anyway. */
  .location--listing .location__map iframe { pointer-events: none; }
  .location--listing .location__map.is-live iframe { pointer-events: auto; }
  .location__map-tap {
    display: flex; position: absolute; inset: 0; z-index: 2;
    align-items: flex-end; justify-content: center;
    /* clear of Google's attribution strip — it has to stay visible */
    padding: 16px 16px 58px; text-decoration: none;
    background: none; border: 0; cursor: pointer; font: inherit;
  }
  .location--listing .location__map.is-live .location__map-tap { display: none; }
  .location__map-tap span {
    background: rgba(20,56,82,.92); color: #fff;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    padding: 11px 20px; border-radius: 100px;
    box-shadow: 0 10px 24px -10px rgba(12,31,46,.6);
  }
}
@media (max-width: 640px) {
  .location--listing .location__map { aspect-ratio: 1/1; }
  .location--listing .location__points li,
  .location__points li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .location__points .point__type { grid-column: 1 / -1; }
  .location__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Mobile sticky booking bar — Buy Baja (2026-08-25) ----------
   91.6% of paid traffic is on a phone, the booking calendar sits ~9 screens down,
   and the nav's "Book a call" is display:none under 640px — so once a visitor
   scrolled past the hero there was NO booking affordance until the very bottom.
   This bar appears after the hero is scrolled away (the hero has its own gold CTA),
   opens the Calendly POPUP via [data-calendly-popup] (js/calendly-booking.js binds
   it, keeping a1/salesforce_uuid/UTM attribution in one place), and hides while the
   #book section is on screen so it never covers the inline calendar's confirm button. */
.bb-bookbar { display: none; }
@media (max-width: 760px) {
  .bb-bookbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    display: block;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(12,31,46,.96);
    border-top: 1px solid rgba(246,241,230,.16);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .3s var(--ease-out), visibility .3s var(--ease-out);
  }
  .bb-bookbar.is-on { transform: translateY(0); visibility: visible; }
  .bb-bookbar.is-on.is-suppressed { transform: translateY(110%); visibility: hidden; }
  .bb-bookbar__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px;
    background: var(--gold); color: var(--ink);
    border-radius: 100px;
    font-family: var(--sans); font-weight: 600; font-size: 13px;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  }
  .bb-bookbar__btn:active { background: var(--gold-soft); }
  /* While the bar is up, lift the WhatsApp bubble above it (the bar is inserted
     immediately before the widget in the DOM, so the sibling selector holds). */
  .bb-bookbar.is-on:not(.is-suppressed) ~ .whatsapp-widget--bb {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
  /* Keep the last footer lines reachable under the fixed bar. */
  body:has(.bb-bookbar) { padding-bottom: 84px; }
}
/* On a phone the #book section stacked FORM first, calendar second — so the hero's
   "Book a free 15-minute call" anchor landed on a details form with the actual
   calendar another screen down. Calendar first keeps the button's promise; the
   form is right below it (and the top-of-page form already exists for info-seekers). */
@media (max-width: 900px) {
  .book .book__cols > div:last-child { order: -1; }
}