/* ============================================================
   Orangefield — Warm-Personal Concept Sketch
   MOBILE-FIRST. Base styles target ~360–720px viewports.
   Breakpoints add complexity for larger screens:
     ≥ 720px  — tablet / large phone landscape
     ≥ 1024px — desktop
     ≥ 1280px — wide desktop
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Warm palette */
  --orange:        #E8741A;
  --orange-deep:   #C25E0F;
  --orange-soft:   #F2A671;
  --cream:         #FAF6EF;
  --cream-deep:    #F2EBDD;
  --ink:           #2A1F1A;
  --text:          #3D332C;
  --text-muted:    #7A6C60;
  --line:          #E8DFCF;
  --white:         #FFFFFF;
  --black:         #1A140F;

  /* Type */
  --font-serif:    'Playfair Display', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — these clamps cover all viewports without breakpoints. */
  --text-display:  clamp(2.5rem, 9vw, 5.5rem);
  --text-section:  clamp(1.9rem, 6vw, 3.5rem);
  --text-h3:       clamp(1.15rem, 3.5vw, 1.5rem);

  /* Spacing */
  --section-y:     clamp(56px, 12vw, 140px);
  --gutter:        clamp(18px, 5vw, 48px);

  /* Effects */
  --shadow-sm:     0 1px 2px rgba(42, 31, 26, 0.06);
  --shadow-md:     0 8px 24px rgba(42, 31, 26, 0.08);
  --shadow-lg:     0 24px 60px rgba(42, 31, 26, 0.18);
  --radius:        14px;
  --radius-lg:     24px;
  --transition:    220ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Scroll reveal ----------
   Any element with `data-reveal` starts faded down a bit, then slides
   into place the first time it intersects the viewport. Optional
   `data-delay="1..6"` staggers siblings. Respects reduced-motion. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-delay="5"] { transition-delay: 0.40s; }
[data-reveal][data-delay="6"] { transition-delay: 0.48s; }

/* Property cards in the grid get a tiny stagger from JS via inline delay. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Hash navigation (/#contact, /#about…) lands at the section heading
     instead of hiding it under the sticky navbar. */
  scroll-padding-top: clamp(72px, 9vh, 96px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol, li, h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography utilities ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-section);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}

.section-sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 14px;
  max-width: 640px;
}

.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 3.3vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 600px;
}

.body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 560px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 4px;
  transition: gap var(--transition), color var(--transition);
}
.link-arrow span { color: var(--orange); transition: transform var(--transition); }
.link-arrow:hover { gap: 14px; color: var(--orange-deep); }
.link-arrow:hover span { transform: translateX(2px); }
.link-arrow-lg { font-size: 1.05rem; padding-bottom: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
  min-height: 48px; /* mobile-first touch target */
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  border-color: #25D366;
}
.btn-whatsapp:hover {
  background: #1ebc5a;
  border-color: #1ebc5a;
}
.btn-full { width: 100%; }

/* ============================================================
   NAVBAR  (mobile-first: hamburger + slide-down drawer)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
}

.nav-logo { display: inline-flex; align-items: center; }
.nav-logo-img { height: 38px; width: auto; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  margin-left: auto;
  border-radius: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(42, 31, 26, 0.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition);
  opacity: 0;
}
.nav.is-open .nav-menu {
  max-height: 360px;
  opacity: 1;
}
.nav-link {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink);
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.nav-link:last-child { border-bottom: none; }

/* Lang switcher visible in the navbar bar at every viewport. On desktop
   it follows the (right-pushed) nav-menu; on mobile the menu is absolute
   so we re-push from here — see the @media block below. */
.nav-right {
  display: flex;
  align-items: center;
}

/* Mobile: .nav-menu is positioned absolute (drawer), so push from here
   instead. .nav-toggle then sits right next to .nav-right. */
@media (max-width: 1023px) {
  .nav-right { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
}

.lang-switcher {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: var(--white);
}
.lang-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-radius: 999px;
  transition: color var(--transition), background-color var(--transition);
}
/* languageSwitcher.js toggles `.active`; the prototype used `.is-active`.
   Style both so the v2 infrastructure keeps working. */
.lang-btn.is-active,
.lang-btn.active { background: var(--ink); color: var(--cream); }
.lang-btn:not(.is-active):not(.active):hover { color: var(--ink); }

/* Narrow phones: shrink the lang pills so logo + lang + hamburger
   fit comfortably on a single bar at ~360px. */
@media (max-width: 480px) {
  .nav { gap: 8px; }
  .lang-switcher { padding: 2px; }
  .lang-btn { padding: 5px 8px; font-size: 0.7rem; letter-spacing: 0.04em; }
}

/* ============================================================
   HERO  (mobile-first)
   ============================================================ */
.hero {
  padding: 32px var(--gutter) 36px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 30%, rgba(232, 116, 26, 0.06), transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 10px 0 20px;
}
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}

.hero-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 3vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 28px;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin: 0 auto 36px;
  max-width: 360px;
}
.hero-ctas .btn { width: 100%; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.hero-trust strong {
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-serif);
  font-size: 1.1em;
}
.hero-trust .dot { color: var(--orange); font-weight: 700; }

/* Carousel band */
.carousel-band {
  position: relative;
  margin-top: 36px;
  padding-bottom: 8px;
}
.carousel-track {
  display: flex;
  gap: 16px;
  padding: 8px var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  flex: 0 0 78vw;
  scroll-snap-align: center;
}

.carousel-btn { display: none; } /* shown on desktop */

/* ============================================================
   PROPERTY CARD
   ============================================================ */
.prop-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.prop-card:hover, .prop-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--cream-deep);
}

.prop-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
}
.prop-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.prop-card:hover .prop-card-img { transform: scale(1.04); }

.prop-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.prop-card-badge.is-featured { background: var(--orange); color: var(--white); }
.prop-card-badge.is-sold     { background: var(--ink);    color: var(--cream); }

.prop-card.is-sold .prop-card-img { filter: grayscale(20%) brightness(0.96); }

.prop-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-card-loc {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.prop-card-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 4px 0 6px;
  /* Cap at 2 lines so cards stay even */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-card-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--orange);
  line-height: 1;
  margin: 4px 0 10px;
}
.prop-card-specs {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.prop-card-specs span { display: inline-flex; align-items: center; gap: 4px; }
.prop-card-specs strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   STORY  (mobile: single column, image first)
   ============================================================ */
.story {
  background: var(--cream);
  padding: var(--section-y) var(--gutter);
}
.story-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.story-image {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.story-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.story-image-caption {
  position: absolute;
  bottom: -14px;
  left: 20px;
  background: var(--white);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.story-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.story-text .section-title { margin-bottom: 6px; }
.story-text .link-arrow { align-self: flex-start; margin-top: 4px; }

/* ============================================================
   PROCESS — Vertical "journey" timeline
   Mobile: number column on the left + content on the right, connected
   by an orange thread that fills as each step is revealed.
   Desktop: same structure, more breathing room and bigger numbers.
   ============================================================ */
.process {
  background: var(--white);
  padding: var(--section-y) 0 calc(var(--section-y) * 0.85);
  overflow: hidden;
}
.process-header {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  text-align: center;
}
.process-header .section-sub { margin-left: auto; margin-right: auto; }

.journey {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.journey-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  position: relative;
}

.journey-marker {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* The vertical thread that connects all the steps. Starts as a quiet
   cream line and lights up to orange as each step enters the viewport.
   Trims at the first/last node so the line begins/ends at the node center
   (27px = mobile node radius; overridden to 40px at the desktop breakpoint). */
.journey-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--cream-deep);
  transform: translateX(-50%);
  transition: background-color 0.7s ease;
}
.journey-step:first-child .journey-line { top: 27px; }
.journey-step:last-child  .journey-line { top: 0; bottom: auto; height: 27px; }
.journey-step.is-visible .journey-line { background: var(--orange); }

.journey-node {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  /* Tight line-height + tabular numerals keep "01"…"05" centered inside the
     circle. Without `line-height: 1` the font's default leading drops the
     glyphs visually low; without `font-variant-numeric: tabular-nums` the
     italic numerals get inconsistent widths and shift horizontally. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  transition: border-color 0.5s ease, color 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.journey-step.is-visible .journey-node {
  border-color: var(--orange);
  color: var(--orange);
  transform: scale(1.04);
}

.journey-content {
  padding: 8px 0 36px;
  min-width: 0;
}
.journey-step:last-child .journey-content { padding-bottom: 0; }

.journey-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 6px;
}
.journey-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 540px;
}

/* ============================================================
   PROPERTIES GRID  (mobile: single column)
   ============================================================ */
.properties {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}
.properties-header {
  max-width: 1180px;
  margin: 0 auto 36px;
}
.properties-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.properties-cta-wrap {
  max-width: 1180px;
  margin: 40px auto 0;
  text-align: center;
}

/* ============================================================
   TESTIMONIALS  (homepage, between properties grid and trust strip)
   Three-card grid of customer quotes. Cream background so it reads
   as a distinct social-proof band before the founder's trust quote.
   ============================================================ */
.testimonials {
  background: var(--cream);
  padding: var(--section-y) var(--gutter);
}
.testimonials-header {
  max-width: 1180px;
  margin: 0 auto 48px;
  text-align: center;
}
.testimonials-header .section-sub { margin: 14px auto 0; }

.testimonials-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--cream-deep);
}

.testimonial-stars {
  color: var(--orange);
  letter-spacing: 2px;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
  flex: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testimonial-name {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.testimonial-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
  background: var(--cream);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.trust-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 6rem);
  line-height: 0.5;
  color: var(--orange);
  margin-bottom: 16px;
}
.trust-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 5vw, 2.5rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 680px;
}
.trust-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.trust-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.trust-meta { display: flex; flex-direction: column; text-align: left; }
.trust-name {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}
.trust-role {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trust-points {
  font-size: 0.825rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.trust-points .dot { color: var(--orange); margin: 0 4px; }

/* ============================================================
   CONTACT (mobile: stacked)
   ============================================================ */
.contact {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}
.contact-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-left .section-title { margin-bottom: 12px; }
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--transition), background-color var(--transition);
}
.contact-link:hover, .contact-link:focus-visible {
  transform: translateX(4px);
  background: var(--cream-deep);
}
.contact-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--orange);
}
.contact-link-whatsapp svg { color: #25D366; }
.contact-link-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-link-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
  margin-top: 2px;
  word-break: break-word;
}

.contact-form {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  border: 1px solid var(--line);
}
.contact-form-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 20px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 116, 26, 0.18);
}
.form-field textarea { resize: vertical; min-height: 120px; }

/* ============================================================
   FOOTER (mobile: stacked)
   ============================================================ */
.footer {
  background: var(--black);
  color: var(--cream);
  padding: 56px var(--gutter) 28px;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(250, 246, 239, 0.1);
}
.footer-brand p {
  max-width: 320px;
  color: rgba(250, 246, 239, 0.7);
  margin-top: 12px;
  line-height: 1.6;
  font-size: 0.95rem;
}
.footer-logo { display: inline-flex; align-items: center; }
.footer-logo-img { height: 36px; width: auto; filter: brightness(0) invert(1); }

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 0.95rem;
  color: rgba(250, 246, 239, 0.7);
  margin-bottom: 8px;
  transition: color var(--transition);
  word-break: break-word;
}
.footer-col a:hover { color: var(--orange-soft); }

.footer-bottom {
  max-width: 1180px;
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(250, 246, 239, 0.5);
  text-align: center;
}
.footer-bottom span:last-child { font-style: italic; }

/* ============================================================
   MODAL  (mobile: full-screen, no border-radius)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  /* flex-start (not stretch) lets the dialog grow with its content and the
     modal container scroll. stretch + the dialog's overflow:hidden was
     clipping everything past the first viewport on mobile. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 31, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.25s ease;
}
.modal-dialog {
  position: relative;
  background: var(--white);
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  /* No overflow:hidden — lets the modal-hero corners do their own thing
     and lets all child content participate in the modal's scroll. */
  animation: modal-in 0.32s cubic-bezier(.2,.7,.2,1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform var(--transition), background-color var(--transition);
}
.modal-close svg { width: 22px; height: 22px; }
.modal-close:hover {
  transform: rotate(90deg);
  background: var(--ink);
  color: var(--cream);
}

.modal-content { padding-bottom: 16px; }

.modal-hero {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cream-deep);
  overflow: hidden;
}
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 22px 22px;
  background: linear-gradient(to top, rgba(42, 31, 26, 0.92), transparent);
  color: var(--cream);
}
.modal-hero-loc {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 6px;
}
.modal-hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.5vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 10px;
}
.modal-hero-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--orange-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-hero-sold {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 22px;
}

.modal-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 4px;
  padding: 20px;
  background: var(--cream);
  border-radius: var(--radius);
}
.modal-spec { text-align: center; }
.modal-spec-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1;
}
.modal-spec-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

.modal-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
}
.modal-desc::first-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

.modal-features h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.modal-features ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.modal-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text);
}
.modal-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.modal-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.modal-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  transition: opacity var(--transition);
}
.modal-gallery img:hover { opacity: 0.92; }

.modal-side { position: static; }
.modal-agent {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.modal-agent-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.modal-agent-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.modal-agent-meta { display: flex; flex-direction: column; }
.modal-agent-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: 1rem; }
.modal-agent-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.modal-agent-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.35;
}
.modal-agent-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-agent-actions .btn { width: 100%; }
.btn-share svg { flex-shrink: 0; }
.btn-share.is-copied {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  padding: 13px 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   BREAKPOINT — ≥ 720px (tablet / large phone landscape)
   ============================================================ */
@media (min-width: 720px) {
  .hero {
    padding: 56px var(--gutter) 60px;
  }
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    margin-bottom: 48px;
    gap: 14px;
  }
  .hero-ctas .btn { width: auto; }
  .hero-trust { font-size: 0.9rem; gap: 10px 16px; }

  .carousel-band { margin-top: 48px; }
  .carousel-slide { flex-basis: 46vw; }

  .properties-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .contact-inner {
    flex-direction: row;
    align-items: start;
    gap: clamp(36px, 5vw, 60px);
  }
  .contact-left, .contact-form { flex: 1; }

  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 36px;
  }
  .footer-brand { flex: 1 0 100%; }
  .footer-col { flex: 1; min-width: 160px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }

  /* Modal becomes a floating dialog */
  .modal {
    align-items: flex-start;
    padding: 24px;
  }
  .modal-dialog {
    max-width: 920px;
    margin: 24px auto;
    border-radius: var(--radius-lg);
    /* On desktop the dialog is a floating card — clip rounded corners. */
    overflow: hidden;
  }
  .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
  }
  .modal-hero { aspect-ratio: 16 / 9; }
  .modal-hero-overlay { padding: 80px 36px 28px; }
  .modal-body { padding: 40px 36px; }
  .modal-specs { grid-template-columns: repeat(4, 1fr); }
  .modal-features ul { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .modal-gallery { grid-template-columns: 1fr 1fr; }

  .journey {
    max-width: 820px;
  }
  .journey-step { grid-template-columns: 80px 1fr; gap: 32px; }
  .journey-node { width: 80px; height: 80px; font-size: 1.9rem; }
  .journey-step:first-child .journey-line { top: 40px; }
  .journey-step:last-child  .journey-line { height: 40px; }
  .journey-content { padding: 18px 0 56px; }

  .nav { padding: 16px var(--gutter); }
  .nav-logo-img { height: 42px; }
}

/* ============================================================
   BREAKPOINT — ≥ 1024px (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  .nav {
    gap: 32px;
    padding: 18px var(--gutter);
  }
  .nav-logo-img { height: 44px; }
  .nav-toggle { display: none; }
  .nav-menu {
    position: static;
    flex-direction: row;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    gap: 28px;
    margin-left: auto;
  }
  .nav-link {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    padding: 4px 0;
    border-bottom: none;
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--orange);
    transition: right var(--transition);
  }
  .nav-link:hover { color: var(--ink); }
  .nav-link:hover::after { right: 0; }
  .nav-right { display: flex; align-items: center; }

  .hero { padding: 80px var(--gutter) 80px; }

  .carousel-band { margin-top: 56px; }
  .carousel-slide { flex-basis: clamp(280px, 28vw, 360px); }
  .carousel-track {
    gap: 24px;
    /* Center the row when content fits — 5 cards × 360 + 4 × 24 = 1896px */
    padding-inline: max(var(--gutter), calc((100% - 1896px) / 2));
  }
  .carousel-btn {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transform: translateY(-50%);
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
    z-index: 2;
  }
  .carousel-btn svg { width: 22px; height: 22px; }
  .carousel-btn:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateY(-50%) scale(1.08);
  }
  .carousel-prev { left: clamp(8px, 2vw, 24px); }
  .carousel-next { right: clamp(8px, 2vw, 24px); }

  .properties-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }

  .story-inner {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .story-image { margin: clamp(20px, 5vw, 80px) 0 0 0; max-width: none; }
  .story-text { padding-top: clamp(0px, 2vw, 20px); }

  .journey { max-width: 880px; }
  .journey-content { padding: 22px 0 72px; }

  .footer { padding: 80px var(--gutter) 32px; }
  .footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom { margin-top: 32px; }

  .modal-body { grid-template-columns: 1.6fr 1fr; display: grid; gap: 48px; padding: 48px 40px; }
  .modal-main { display: contents; }
  .modal-main > * { grid-column: 1; }
  .modal-specs   { grid-column: 1; }
  .modal-desc    { grid-column: 1; }
  .modal-features { grid-column: 1; }
  .modal-gallery  { grid-column: 1; grid-template-columns: 1fr 1fr; }
  .modal-side    { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 24px; align-self: start; }
  .modal-gallery-tall { grid-row: span 2; }
  .modal-gallery-tall img { aspect-ratio: 4 / 6; }

  .modal-spec-value { font-size: 1.75rem; }
}

/* ============================================================
   BREAKPOINT — ≥ 1280px (wide desktop polish)
   ============================================================ */
@media (min-width: 1280px) {
  .modal-dialog { max-width: 1080px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PROPERTY DETAIL PAGE (static-generated /property/*.html)
   Full-bleed hero, specs strip, two-column body, sticky agent CTA.
   ============================================================ */
.prop-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 360px;
  max-height: 720px;
  background: var(--cream-deep);
  overflow: hidden;
}
.prop-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prop-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--gutter);
  background: linear-gradient(to top, rgba(42, 31, 26, 0.85) 0%, rgba(42, 31, 26, 0.25) 50%, transparent 100%);
  color: var(--cream);
}
.prop-hero-content {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: clamp(16px, 4vw, 36px);
}
.prop-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(250, 246, 239, 0.9);
  margin-bottom: 14px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.prop-back:hover { background: rgba(0, 0, 0, 0.4); }
.prop-hero-loc {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 8px;
}
.prop-hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 900px;
}
.prop-hero-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  color: var(--orange-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.prop-hero-sold {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.prop-specs-strip {
  background: var(--cream);
  padding: 28px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.prop-specs-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.prop-spec {
  text-align: center;
  padding: 0 6px;
  border-right: 1px solid var(--line);
}
.prop-spec:last-child,
.prop-spec:nth-child(2):last-child { border-right: none; }
.prop-spec-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: var(--ink);
  line-height: 1;
}
.prop-spec-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

.prop-main {
  background: var(--white);
  padding: var(--section-y) 0;
}
.prop-main-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Generous gap between description / features / gallery — at 40px the
   sections felt cramped on mobile where the gallery starts immediately
   under the last feature checkmark. */
.prop-content { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 72px); }

.prop-description {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 65ch;
  white-space: pre-line;
}
.prop-description::first-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
}

.prop-features h2,
.prop-section-h {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.prop-features ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
}
.prop-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
}
.prop-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.property-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.property-gallery .gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-deep);
  cursor: zoom-in;
}
.property-gallery .gallery-item img,
.property-gallery .gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.property-gallery .gallery-item:hover img,
.property-gallery .gallery-item:hover video {
  transform: scale(1.04);
}

.prop-agent {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line);
}
.prop-agent-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.prop-agent-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.prop-agent-meta { display: flex; flex-direction: column; }
.prop-agent-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.prop-agent-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.prop-agent-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.4;
}
.prop-agent-actions { display: flex; flex-direction: column; gap: 10px; }
.prop-agent-actions .btn { width: 100%; }

/* ============================================================
   PROPERTIES LISTING PAGE
   ============================================================ */
.listings-hero {
  background: var(--cream);
  padding: 80px var(--gutter) 56px;
  text-align: center;
}
.listings-hero-inner { max-width: 800px; margin: 0 auto; }
.listings-hero .section-title { font-size: clamp(2rem, 5.5vw, 3.5rem); }
.listings-hero .section-sub { margin: 16px auto 0; }

.filters-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--gutter);
  position: sticky;
  top: 64px; /* sits under sticky nav */
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.92);
}
.filters-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.filters-inner select,
.filters-inner input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filters-inner select:focus,
.filters-inner input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 116, 26, 0.16);
}
.filters-reset {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filters-reset:hover {
  background: var(--orange);
  color: var(--white);
}

.feature-pills {
  background: var(--white);
  padding: 18px var(--gutter) 0;
}
.feature-pills-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.feature-pill:hover {
  border-color: var(--orange-soft);
  color: var(--ink);
}
.feature-pill.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.listings-results {
  background: var(--white);
  padding: 36px var(--gutter) var(--section-y);
}
.results-header {
  max-width: 1180px;
  margin: 0 auto 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.results-count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-muted);
}
.results-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.no-results {
  max-width: 600px;
  margin: 48px auto;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
}

.pagination {
  max-width: 1180px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination button {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 40px;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}
.pagination button.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   BLOG INDEX + POSTS
   ============================================================ */
.page-hero {
  background: var(--cream);
  padding: 100px var(--gutter) 64px;
  text-align: center;
}
.page-hero-inner { max-width: 800px; margin: 0 auto; }
.page-hero .eyebrow { color: var(--orange); }
.page-hero .section-title { font-size: clamp(2rem, 6vw, 4rem); }

.blog-list {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}
.blog-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--cream-deep);
}
.blog-card-media {
  aspect-ratio: 16 / 9;
  background: var(--cream-deep);
  overflow: hidden;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body { padding: 24px 22px 28px; }
.blog-card-meta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.blog-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.blog-card-excerpt {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog post (markdown content) */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text);
}
.prose h1, .prose h2, .prose h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.prose h1 { font-size: clamp(1.8rem, 5vw, 2.75rem); margin: 0 0 18px; line-height: 1.1; }
.prose h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 40px 0 14px; }
.prose h3 { font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin: 28px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 18px;
  margin: 24px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
}
.prose img {
  max-width: 100%;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-deep); }

/* ============================================================
   PAGE-LEVEL TYPOGRAPHY (legal, barrios — prose pages)
   ============================================================ */
.page-body {
  background: var(--white);
  padding: 0 var(--gutter) var(--section-y);
}
.page-body-inner { max-width: 760px; margin: 0 auto; padding-top: 48px; }

/* ============================================================
   BREAKPOINT — ≥ 720px overrides for detail/listings/blog
   ============================================================ */
@media (min-width: 720px) {
  .prop-specs-strip { padding: 36px var(--gutter); }
  .prop-specs-inner { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .prop-spec:nth-child(2):last-child { border-right: none; }

  .property-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }

  .filters-inner { grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; gap: 12px; }
  .filters-reset { grid-column: auto; padding: 10px 18px; }

  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ============================================================
   BREAKPOINT — ≥ 1024px (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  .prop-main-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .prop-side {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .property-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  .results-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }

  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .prop-features ul { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LIGHTBOX  (gallery zoom on static property pages)
   The v3 property template loads only this stylesheet, not the old
   property-detail.css. Without these rules the lightbox div appended
   to <body> by lightbox.js renders inline at page end instead of as a
   fixed overlay.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-img {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 92vh;
  max-height: 92dvh;
  object-fit: contain;
  cursor: zoom-in;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.lightbox[data-zoomed="true"] .lightbox-prev,
.lightbox[data-zoomed="true"] .lightbox-next,
.lightbox[data-zoomed="true"] .lightbox-counter {
  display: none !important;
}
.lightbox[data-zoomed="true"] .lightbox-img {
  cursor: grab;
}
.lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: background 0.15s ease;
}
.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
}
@media (max-width: 600px) {
  .lightbox-btn { width: 40px; height: 40px; font-size: 20px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev  { left: 8px; }
  .lightbox-next  { right: 8px; }
}

/* Lightbox loading spinner — shown while the next/prev image streams in.
   Delayed appearance so cached images don't flash a spinner. */
.lightbox-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
  z-index: 1;
}
.lightbox.is-loading .lightbox-loading { opacity: 1; }
.lightbox.is-loading .lightbox-img { opacity: 0.35; }
.lightbox-img { transition: opacity 0.2s ease; }
.lightbox-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: lightbox-spin 0.9s linear infinite;
}
@keyframes lightbox-spin { to { transform: rotate(360deg); } }

/* Floating "back to top" button — appears after scrolling past ~300px. */
.scroll-to-top {
  position: fixed;
  bottom: clamp(16px, 4vw, 28px);
  right: clamp(16px, 4vw, 28px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
  box-shadow: 0 6px 16px rgba(232, 116, 26, 0.35);
  z-index: 90;
}
.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
}

/* Contact form per-field validation states. */
.form-field input.is-valid,
.form-field textarea.is-valid {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.form-field input.is-invalid,
.form-field textarea.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form-error {
  display: block;
  min-height: 1.1em;
  margin-top: 6px;
  font-size: 0.82rem;
  color: #dc2626;
  font-weight: 500;
}
.form-error:empty { min-height: 0; margin-top: 0; }
.form-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
.form-meta .form-error { margin-top: 0; flex: 1; }
.form-counter {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.form-counter.is-over { color: #dc2626; font-weight: 600; }
.form-contact-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: -4px 0 18px;
  line-height: 1.4;
}