/* ============================================================================
   Mexico International Real Estate — "Colonial Modern"
   Design system per 10-DESIGN-DIRECTION.md

   Principles: space and air · let the photography carry the light · craft in
   small details (pasta tile) · calm, nothing bounces. Almost no gold.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root {
  /* Sampled from their own listing photography: limewash walls, warm shade,
     colonial-green joinery, terracotta, Gulf teal. */
  --paper:        #faf8f4;   /* limewash — the walls of every building they sell */
  --paper-warm:   #f4efe6;   /* sunlit plaster */
  --paper-deep:   #ebe4d8;   /* shaded plaster */
  --ink:          #1a1815;   /* warm near-black */
  --ink-soft:     #4a443c;
  --ink-mute:     #7a7266;
  --line:         #e3dcd0;
  --line-strong:  #cec4b4;

  --green:        #1e4a3c;   /* colonial door green */
  --green-deep:   #14332a;
  --green-soft:   #eef2ef;
  --terracotta:   #b4532a;
  --teal:         #2f6f72;   /* the coast half of the business */
  --gold:         #b99b5e;   /* hairlines only — never a fill */

  --wa:           #128c7e;

  /* type */
  --display: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* vertical rhythm — high ceilings translate to generous spacing */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem; --s7: 6.5rem;  --s8: 9rem;

  --wrap: 1240px;
  --wrap-narrow: 720px;   /* 65–75 characters for long-form prose */
  --radius: 3px;          /* almost square — restraint */

  --shadow-card: 0 1px 2px rgba(26,24,21,.05), 0 8px 24px -12px rgba(26,24,21,.14);
  --shadow-lift: 0 2px 4px rgba(26,24,21,.06), 0 18px 44px -16px rgba(26,24,21,.22);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Nothing may scroll the page sideways. `clip` (not `hidden`) keeps
     position:sticky working on the header. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;              /* 18px minimum — audience skews 35–64 */
  line-height: 1.65;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--paper-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.011em;
  margin: 0;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 3.5vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
p  { margin: 0 0 1.15em; }

::selection { background: var(--green); color: var(--paper); }

/* Visible focus everywhere — accessibility is not optional here. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- utilities ---------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* Same guard for every other image-bearing grid — large photographs must never
   be allowed to set a track's minimum width. */
.areas > *, .team > *, .reviews > *, .story > *, .grid-cards > *,
.ownership__grid > *, .contact > * { min-width: 0; }
.narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -140%;
  z-index: 200; background: var(--green); color: var(--paper);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; transition: translate .18s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

.eyebrow {
  font-size: .77rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-mute); margin: 0 0 var(--s2);
}
.lede { font-size: 1.28rem; line-height: 1.55; color: var(--ink-soft); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--paper { background: var(--paper-warm); }
.section-head { max-width: 46rem; margin-bottom: var(--s5); }
.section-head p { color: var(--ink-soft); margin-bottom: 0; }

/* Pasta tile — geometric craft at small scale. A divider, never wallpaper. */
.tile-rule {
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'>\
<g fill='none' stroke='%231e4a3c' stroke-opacity='.30' stroke-width='1'>\
<path d='M0 11 L11 0 L22 11 L11 22 Z M22 11 L33 0 L44 11 L33 22 Z'/>\
<circle cx='11' cy='11' r='3.1'/><circle cx='33' cy='11' r='3.1'/>\
</g></svg>");
  background-repeat: repeat-x;
  background-position: center;
  opacity: .85;
}
.tile-rule--center { width: 108px; margin-inline: auto; }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.btn--primary { background: var(--green); color: var(--paper); }
.btn--primary:hover { background: var(--green-deep); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: rgba(26,24,21,.035); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #0d7367; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; text-decoration: none;
  color: var(--green);
  border-bottom: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--green); gap: .7rem; }

/* ============================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__bar {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 78px;
}
.brand { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; }
.brand__name {
  font-family: var(--display);
  font-size: 1.24rem; line-height: 1.05; letter-spacing: .015em;
}
.brand__sub {
  font-size: .66rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: .28rem;
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; font-size: .98rem; font-weight: 500;
  text-decoration: none; border-radius: var(--radius);
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover { background: rgba(26,24,21,.05); }
.nav__link svg { width: 11px; height: 11px; opacity: .55; transition: rotate .2s var(--ease); }
.nav__item[data-open="true"] .nav__link svg { rotate: 180deg; }

.nav__menu {
  position: absolute; top: calc(100% + .45rem); left: 0;
  min-width: 250px; padding: .55rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  display: none; flex-direction: column;
}
.nav__item[data-open="true"] .nav__menu { display: flex; }
.nav__menu a {
  padding: .55rem .7rem; font-size: .96rem; text-decoration: none;
  border-radius: 2px; display: flex; justify-content: space-between; gap: 1rem;
}
.nav__menu a:hover { background: var(--green-soft); }
.nav__menu .count { color: var(--ink-mute); font-size: .85rem; }

.header__tools { display: flex; align-items: center; gap: .7rem; }
.lang {
  display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; font-size: .82rem; font-weight: 600;
}
.lang a { padding: .3rem .6rem; text-decoration: none; color: var(--ink-mute); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; }

/* ============================================================================
   HERO — one real photograph, full bleed. No carousel.
   ========================================================================== */
.hero { position: relative; isolation: isolate; background: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two scrims: one lifts the whole frame, one anchors the text column. Their
   photography is bright limewash, so body copy needs the horizontal one to
   clear AA — without it the sub-headline sits on sunlit plaster. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,9,7,.74) 0%, rgba(10,9,7,.52) 34%, rgba(10,9,7,.12) 66%, rgba(10,9,7,0) 100%),
    linear-gradient(to top, rgba(10,9,7,.80) 0%, rgba(10,9,7,.34) 40%, rgba(10,9,7,.14) 70%, rgba(10,9,7,.30) 100%);
}
.hero__inner {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(86vh, 820px);
  padding-block: var(--s7) var(--s5);
  color: var(--paper);
}
.hero h1 { color: #fff; max-width: 17ch; text-shadow: 0 1px 30px rgba(0,0,0,.28); }
.hero__sub {
  max-width: 46ch; margin-top: var(--s3);
  font-size: 1.22rem; line-height: 1.55; color: rgba(255,255,255,.9);
}
.hero__credit {
  position: absolute; right: 1.5rem; bottom: 1rem; z-index: 2;
  font-size: .74rem; color: rgba(255,255,255,.62); text-decoration: none;
}
.hero__credit:hover { color: #fff; }

/* search — the entry point, sitting on the fold line */
.search {
  margin-top: var(--s5);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  display: grid;
  /* minmax(0,1fr): a <select> is as wide as its longest <option>, and that
     intrinsic width was setting each track's minimum — enough to push the whole
     page wider than a 390px phone. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0;
  overflow: hidden;
  color: var(--ink);
}
.search__field { display: flex; flex-direction: column; min-width: 0; padding: .85rem 1.15rem; border-right: 1px solid var(--line); }
.search__field:nth-of-type(3) { border-right: 0; }
.search__field label {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute);
}
.search__field select {
  border: 0; background: transparent; padding: .2rem 1.2rem 0 0; margin: 0;
  width: 100%; max-width: 100%; text-overflow: ellipsis;
  font-size: 1.02rem; font-weight: 500; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237a7266' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right .2rem center;
}
.search__submit { border: 0; border-radius: 0; padding-inline: 2rem; }

/* ============================================================================
   TRUST BAR
   ========================================================================== */
.trust { background: var(--ink); color: var(--paper); }
.trust__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s5);
  padding-block: 1.5rem;
  font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.trust__row span { display: inline-flex; align-items: center; gap: .6rem; color: rgba(250,248,244,.72); }
.trust__row .star { color: var(--gold); }
/* The strongest trust signal they own — give it real estate. */
.trust__row .trust--key {
  color: #fff; text-transform: none; letter-spacing: .01em;
  font-size: .98rem; font-weight: 600;
  padding-left: var(--s3); border-left: 1px solid rgba(250,248,244,.22);
  margin-left: auto;
}

/* ============================================================================
   PROPERTY CARD — repeated 242 times, does most of the selling.
   ========================================================================== */
.grid-cards {
  display: grid; gap: var(--s4) var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Deliberately no hover zoom — nothing bounces, and cropping hides architecture. */

.card__flags { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.flag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
/* Never status by colour alone — each flag carries a glyph too. */
.flag--reduced { background: var(--terracotta); color: #fff; }
.flag--exclusive { background: var(--green); color: #fff; }
.flag--motivated { background: var(--teal); color: #fff; }
.flag--sold { background: var(--ink); color: #fff; }

.fav {
  position: absolute; top: .55rem; right: .55rem;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.fav svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.7; }
.fav[aria-pressed="true"] svg { fill: var(--terracotta); stroke: var(--terracotta); }

.card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__price {
  font-family: var(--display); font-size: 1.62rem; line-height: 1;
  display: flex; align-items: baseline; gap: .45rem;
}
.card__price .cur { font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--ink-mute); letter-spacing: .08em; }
.card__price .ask { font-size: 1.15rem; color: var(--ink-soft); }
.card__title {
  font-family: var(--display); font-size: 1.12rem; line-height: 1.3;
  margin: .55rem 0 .1rem;
}
.card__title a { text-decoration: none; }
/* Whole card clickable, but the link text stays the accessible name. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__place { font-size: .93rem; color: var(--ink-soft); }
.card__specs {
  display: flex; flex-wrap: wrap; gap: .35rem .95rem;
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-soft);
}
.card__specs b { font-weight: 600; color: var(--ink); }
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: auto; padding-top: .9rem;
  font-size: .84rem; color: var(--ink-mute);
}
.card__agent { display: inline-flex; align-items: center; gap: .5rem; }
.card__agent .avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: var(--paper-deep);
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; color: var(--ink-soft);
  font-family: var(--sans);
}
.card__code { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ============================================================================
   "Can a foreigner buy?" — the block that separates them from competitors
   ========================================================================== */
.ownership { background: var(--green); color: var(--paper); }
.ownership__grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s6);
  align-items: start;
}
.ownership h2 { color: #fff; max-width: 15ch; }
.ownership p { color: rgba(250,248,244,.84); }
.ownership strong { color: #fff; font-weight: 600; }
.ownership .link-arrow {
  color: #fff; border-bottom-color: rgba(255,255,255,.45);
  margin-top: var(--s2);
}
.ownership .link-arrow:hover { border-bottom-color: #fff; }
.ownership__facts {
  border: 1px solid rgba(250,248,244,.22);
  border-radius: var(--radius);
  padding: var(--s4);
  background: rgba(0,0,0,.13);
}
.ownership__facts dt {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: rgba(250,248,244,.6);
}
.ownership__facts dd { margin: .25rem 0 1.15rem; color: #fff; }
.ownership__facts dd:last-child { margin-bottom: 0; }

/* ============================================================================
   AREAS
   ========================================================================== */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.area {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius);
  background: var(--ink);
}
.area img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s var(--ease); }
.area:hover img { opacity: .95; }
.area::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,11,9,.85), rgba(12,11,9,.05) 60%);
}
.area__label { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.05rem; z-index: 1; color: #fff; }
.area__label h3 { font-size: 1.28rem; color: #fff; }
.area__label span { font-size: .86rem; color: rgba(255,255,255,.78); }

/* ============================================================================
   VIDEO — click-to-load YouTube facade (see build/build_site.py video_facade)
   The poster is ours, served as WebP; the player only arrives on click.
   ========================================================================== */
.video {
  position: relative; display: block; max-width: 780px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; background: var(--ink);
  box-shadow: var(--shadow-card); text-decoration: none; color: #fff;
}
.video__img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
/* Scrim so the title stays legible over whatever frame YouTube gives us. */
.video::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 52%;
  background: linear-gradient(to top, rgba(12,11,9,.86), rgba(12,11,9,0));
  pointer-events: none;
}
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 248, 244, .94); color: var(--ink);
  box-shadow: var(--shadow-lift);
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.video__play svg { margin-left: 3px; }   /* optical centring of the triangle */
.video:hover .video__play, .video:focus-visible .video__play {
  background: var(--paper); color: var(--terracotta);
}
.video__label { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 1; }
.video__label b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.24rem; line-height: 1.3; color: #fff;
}
.video__meta {
  display: block; margin-top: .35rem; font-size: .84rem;
  letter-spacing: .04em; color: rgba(255, 255, 255, .74);
}
/* After the swap the element is a plain box holding the player. */
.video.is-playing { aspect-ratio: 16/9; background: #000; }
.video.is-playing::after { content: none; }
.video.is-playing iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 620px) {
  .video__play { width: 58px; height: 58px; }
  .video__label b { font-size: 1.02rem; }
  .video__label { left: var(--s2); right: var(--s2); bottom: var(--s2); }
}

/* ============================================================================
   STORY
   ========================================================================== */
.story { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s6); align-items: center; }
.story__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pull {
  font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.34; color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: var(--s3); margin: var(--s4) 0;
}
.pull cite { display: block; font-family: var(--sans); font-size: .88rem; font-style: normal; color: var(--ink-mute); margin-top: .8rem; letter-spacing: .04em; }

/* ============================================================================
   REVIEWS
   ========================================================================== */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.review {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
  display: flex; flex-direction: column;
}
.review__stars { color: var(--gold); letter-spacing: .12em; font-size: .95rem; margin-bottom: .8rem; }
.review p { font-size: 1.02rem; color: var(--ink-soft); }
.review__meta { margin-top: auto; padding-top: var(--s2); font-size: .86rem; color: var(--ink-mute); border-top: 1px solid var(--line); }
.review__meta b { color: var(--ink); font-weight: 600; }

/* ============================================================================
   TEAM
   ========================================================================== */
.team { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); }
.member { text-align: center; text-decoration: none; }
.member img, .member .ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  background: var(--paper-deep); margin-bottom: .7rem;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.5rem; color: var(--ink-mute);
}
.member b { display: block; font-size: .95rem; font-weight: 600; }
.member span { font-size: .82rem; color: var(--ink-mute); }

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--s3); }
.field label { font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  padding: .8rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); font-size: 1rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.field--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.field { min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.form-sent {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--green);
  border-radius: var(--radius); background: var(--green-soft);
  padding: var(--s4);
}
.form-sent h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.form-sent p { margin-bottom: .6rem; }
.form-sent__demo {
  font-size: .88rem; color: var(--ink-mute);
  border-top: 1px solid var(--line-strong); padding-top: .7rem; margin: .9rem 0 0;
}
.contact__details { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); font-size: 1rem; }
.contact__details a { color: var(--green); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: rgba(250,248,244,.72); padding-block: var(--s6) var(--s4); font-size: .95rem; }
.footer a { color: rgba(250,248,244,.72); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s4); }
.footer h4 { font-family: var(--sans); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,248,244,.45); margin-bottom: var(--s2); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer__brand .brand__name { color: #fff; }
.footer__social { display: flex; gap: .7rem; margin-top: var(--s3); }
.footer__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(250,248,244,.22); border-radius: 50%;
}
.footer__social a:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__base {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgba(250,248,244,.14);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  font-size: .86rem; color: rgba(250,248,244,.5);
}

/* ============================================================================
   /properties/ — filter bar and results
   ========================================================================== */
.filters {
  position: sticky; top: 78px; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block: 1px solid var(--line);
}
.filters__row {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) auto;
  gap: var(--s2);
  align-items: end;
  padding-block: 1rem;
}
.filters__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.filters__field label {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute);
}
.filters__field select, .filters__field input {
  width: 100%; max-width: 100%; min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); font-size: .97rem;
  text-overflow: ellipsis;
}
.filters__field select {
  appearance: none; padding-right: 1.7rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237a7266' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right .6rem center;
}
.filters__field select:focus, .filters__field input:focus { border-color: var(--green); }
#f-clear { padding: .55rem 1.1rem; font-size: .92rem; }

.results__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}
.results__bar b { font-family: var(--display); font-size: 1.35rem; }
.card[hidden] { display: none; }
.empty { text-align: center; padding: var(--s7) var(--s3); max-width: 46ch; margin-inline: auto; }
.empty .lede { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }

@media (max-width: 1080px) {
  .filters__row { grid-template-columns: 1fr 1fr 1fr; }
  .filters__row > .filters__field:first-child { grid-column: 1 / -1; }
  #f-clear { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .filters { position: static; }
  .filters__row { grid-template-columns: 1fr 1fr; }
  .results__bar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   LISTING PAGE
   ========================================================================== */
/* minmax(0,…), not 2fr 1fr: a grid track's automatic minimum is its content
   size, so the 2560px-wide photograph pushed the main track to 2160px and
   collapsed the thumbnail column to zero. */
.gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6px; background: var(--ink); }
.gallery > * { min-width: 0; }
.gallery__main { position: relative; aspect-ratio: 3 / 2; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
/* The thumbnails are absolutely positioned so they contribute no intrinsic
   height: the row is then sized by .gallery__main's 3:2 box alone. Otherwise
   two 1920px-tall photographs stretch the whole gallery to 1440px. */
.gallery__side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.gallery__side button {
  position: relative; flex: 1 1 0; min-height: 0;
  padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--ink);
}
.gallery__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(12,11,9,.58); color: #fff; font-weight: 600; letter-spacing: .04em;
}
.gallery__nav {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 .8rem; pointer-events: none;
}
.gallery__nav button {
  pointer-events: auto; width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.gallery__nav svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; }
.gallery__count {
  position: absolute; right: .9rem; bottom: .9rem;
  background: rgba(12,11,9,.66); color: #fff; font-size: .82rem;
  padding: .3rem .7rem; border-radius: 100px; font-variant-numeric: tabular-nums;
}
.gallery__expand {
  position: absolute; left: .9rem; bottom: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 0; border-radius: 100px; cursor: pointer;
  padding: .45rem .95rem; font-size: .88rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.gallery__expand:hover { background: #fff; }
.gallery__expand svg { width: 15px; height: 15px; }

/* ---- lightbox --------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(12,11,9,.95);
  display: flex; align-items: center; justify-content: center;
}
.lb img {
  max-width: 92vw; max-height: 86vh; width: auto; height: auto;
  object-fit: contain; background: transparent;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}
.lb button {
  position: absolute; display: grid; place-items: center;
  background: rgba(250,248,244,.1); color: var(--paper);
  border: 1px solid rgba(250,248,244,.25); border-radius: 50%;
  cursor: pointer;
}
.lb button:hover { background: rgba(250,248,244,.22); }
.lb__close { top: 1.1rem; right: 1.1rem; width: 46px; height: 46px; font-size: 1.05rem; }
.lb__prev, .lb__next { top: 50%; translate: 0 -50%; width: 52px; height: 52px; }
.lb__prev { left: 1.1rem; }
.lb__next { right: 1.1rem; }
.lb__prev svg, .lb__next svg { width: 20px; height: 20px; }
.lb__count {
  position: absolute; bottom: 1.2rem; left: 50%; translate: -50% 0;
  color: rgba(250,248,244,.85); font-size: .9rem; font-variant-numeric: tabular-nums;
  background: rgba(12,11,9,.5); padding: .3rem .85rem; border-radius: 100px;
}

.listing { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--s6); align-items: start; }
.listing__body > * + * { margin-top: var(--s5); }
.listing__body h2 { font-size: 1.75rem; margin-bottom: var(--s2); }
.prose { max-width: 68ch; }
.prose p { font-size: 1.14rem; line-height: 1.72; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .45rem; line-height: 1.6; }

/* The opening paragraph carries the story — set it like one. */
.prose-lede {
  font-family: var(--display);
  font-size: 1.42rem !important; line-height: 1.55 !important;
  color: var(--ink);
}
/* A breath every few paragraphs in long descriptions. */
.prose-break {
  border: 0; height: 1px; width: 72px;
  background: var(--line-strong);
  margin: 2.4rem 0;
}

/* Key-facts chips under the headline — scannable before a word is read. */
.chiprow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: .35rem;
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: .34rem .85rem;
  font-size: .92rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--ink); font-weight: 600; }

/* The feature bullets, promoted out of the wall of text. */
.highlights {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
}
.highlights h2 { font-size: 1.45rem; margin-bottom: var(--s3); }
.hl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 2.2rem;
}
.hl-grid li { position: relative; padding-left: 1.35rem; font-size: 1.02rem; line-height: 1.5; }
.hl-grid li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; background: var(--green);
  rotate: 45deg;   /* the pasta-tile diamond, again */
}

.rail { position: sticky; top: 100px; }
.rail__box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card); overflow: hidden; }
.rail__head { padding: var(--s3); border-bottom: 1px solid var(--line); }
.rail__price { font-family: var(--display); font-size: 2.5rem; line-height: 1; display: flex; align-items: baseline; gap: .5rem; }
.rail__price .cur { font-family: var(--sans); font-size: .8rem; font-weight: 700; color: var(--ink-mute); letter-spacing: .08em; }
.cur-toggle {
  background: none; border: 1px solid var(--line-strong); border-radius: 100px;
  font-size: .76rem; font-weight: 600; padding: .18rem .6rem; cursor: pointer; color: var(--ink-soft);
}
.cur-toggle:hover { border-color: var(--ink); color: var(--ink); }
.rail__rate { font-size: .76rem; color: var(--ink-mute); margin-top: .5rem; }
.rail__specs { list-style: none; margin: 0; padding: var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); border-bottom: 1px solid var(--line); }
.rail__specs li { display: flex; flex-direction: column; }
.rail__specs .k { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--ink-mute); }
.rail__specs .v { font-size: 1.06rem; font-weight: 600; }
.rail__agent { padding: var(--s3); display: flex; align-items: center; gap: .85rem; border-bottom: 1px solid var(--line); }
.rail__agent .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--paper-deep); display: grid; place-items: center; font-family: var(--display); font-size: 1.15rem; color: var(--ink-soft); flex: none; }
.rail__agent b { display: block; font-size: 1rem; }
.rail__agent span { font-size: .85rem; color: var(--ink-mute); }
.rail__actions { padding: var(--s3); display: flex; flex-direction: column; gap: .6rem; }

.specs-table { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.specs-table th, .specs-table td { text-align: left; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.specs-table th { font-weight: 600; color: var(--ink-soft); width: 45%; font-size: .95rem; }
.specs-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.specs-table .sub { font-weight: 400; color: var(--ink-mute); font-size: .88rem; }

/* "What owning this actually involves" — text only, never a claim in an image. */
.note {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--green);
  border-radius: var(--radius); padding: var(--s4); background: var(--green-soft);
}
.note h3 { font-size: 1.28rem; margin-bottom: .6rem; }
.note p:last-of-type { margin-bottom: .8rem; }

/* ---- generic content pages --------------------------------------------- */
.page-hero { height: clamp(220px, 34vh, 380px); background: var(--ink); }
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-head { max-width: 42rem; margin-bottom: var(--s4); }
.page-head h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.page-head .lede { margin-top: var(--s2); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); align-items: start; }
.page-aside { position: sticky; top: 100px; }
.prose h2 { font-size: 1.7rem; margin: var(--s5) 0 var(--s2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: var(--s4) 0 var(--s2); }
.prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose ol li { margin-bottom: .8rem; line-height: 1.6; }
.agent-portrait {
  width: 190px; height: 190px; object-fit: cover; border-radius: 50%;
  margin-bottom: var(--s3);
}
@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-aside { position: static; }
}

.crumbs { font-size: .88rem; color: var(--ink-mute); padding-block: var(--s3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin-inline: .45rem; opacity: .5; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .team { grid-template-columns: repeat(4, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .listing { grid-template-columns: 1fr; }
  .rail { position: static; }
}
@media (max-width: 900px) {
  :root { --s7: 4.5rem; --s6: 3.25rem; }
  .nav, .lang { display: none; }
  .nav-toggle { display: block; }
  .ownership__grid, .story, .contact { grid-template-columns: 1fr; gap: var(--s4); }
  .reviews { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search__field:nth-of-type(2) { border-right: 0; }
  .search__field:nth-of-type(3) { border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
  .search__submit { grid-column: 2; border-top: 1px solid var(--line); }
  .gallery { grid-template-columns: 1fr; }
  .gallery__side { display: none; }
  .trust__row .trust--key { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
  body { font-size: 1.06rem; }
  .hl-grid { grid-template-columns: 1fr; }
  .lb__prev { left: .4rem; } .lb__next { right: .4rem; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Brand + WhatsApp + menu will not fit at 390px with a label on the button. */
  .btn--wa .wa-label { display: none; }
  .header .btn--wa { padding-inline: .95rem; }
  .brand__name { font-size: 1.08rem; }
  .header__bar { gap: var(--s2); }
  /* Two fields side by side do not fit a 390px screen. */
  .field--row { grid-template-columns: 1fr; gap: 0; }
  .team { grid-template-columns: repeat(3, 1fr); }
  .grid-cards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__inner { min-height: 78vh; }
  .rail__specs { grid-template-columns: 1fr 1fr; }
}

/* ---------- motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- print -------------------------------------------------------- */
@media print {
  .header, .footer, .rail__actions, .fav, .gallery__nav, .search { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .listing { grid-template-columns: 1fr; }
}