:root {
  --cream: #fffaf2;
  --soft: #efe2cf;
  --sage: #314f3d;
  --sage-dark: #1d2822;
  --clay: #b86f4d;
  --gold: #c69b4d;
  --ink: #242725;
  --muted: #687068;
  --line: rgba(49, 79, 61, 0.18);
  --display: "Antonio", sans-serif;
  --body: "Archivo Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body);
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  padding: 14px clamp(18px, 4vw, 58px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  background: rgba(255, 250, 242, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.brand img { width: clamp(150px, 16vw, 210px); }
.topnav { display: flex; gap: clamp(18px, 3vw, 38px); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.topnav a:hover, .topnav a:focus-visible { color: var(--clay); }
.call {
  justify-self: end;
  padding: 11px 18px;
  color: var(--cream);
  background: var(--clay);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: min(78vh, 820px);
  display: flex;
  align-items: end;
  overflow: hidden;
  background: var(--sage-dark);
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 26, 21, .9) 0%, rgba(17, 26, 21, .62) 42%, rgba(17, 26, 21, .08) 76%), linear-gradient(0deg, rgba(17, 26, 21, .58), transparent 54%); }
.hero-content { position: relative; z-index: 1; width: min(820px, 88vw); padding: clamp(52px, 8vw, 110px) clamp(22px, 6vw, 92px); color: var(--cream); }
.eyebrow { margin: 0 0 15px; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; }
h1 { max-width: 760px; font-size: clamp(4.4rem, 11vw, 10rem); line-height: .82; letter-spacing: -.035em; }
h2 { font-size: clamp(2.6rem, 5vw, 5.7rem); line-height: .92; }
.lede { max-width: 650px; margin: 24px 0 0; color: rgba(255, 250, 242, .86); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; }
.hero-actions, .film-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { min-height: 48px; padding: 14px 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; font-size: .84rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button.primary { color: var(--cream); background: var(--clay); }
.button.ghost { color: var(--cream); border-color: rgba(255, 250, 242, .62); background: rgba(17, 26, 21, .2); }
.button.outline { color: var(--sage); border-color: var(--sage); }

.film-shell, .property-band, .disclosure { padding: clamp(64px, 8vw, 116px) clamp(20px, 6vw, 92px); }
.film-shell { background: var(--soft); }
.film-heading { max-width: 1380px; margin: 0 auto 32px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 40px; }
.film-heading > p { max-width: 480px; margin: 0 0 4px; color: var(--muted); font-size: 1.18rem; line-height: 1.55; }
.video-frame { max-width: 1380px; margin: 0 auto; padding: 12px; background: var(--sage-dark); border: 1px solid rgba(198, 155, 77, .58); box-shadow: 0 34px 90px rgba(29, 40, 34, .2); }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; background: #101612; object-fit: cover; }
.film-actions { max-width: 1380px; margin-left: auto; margin-right: auto; }

.section-heading { max-width: 930px; margin-bottom: 44px; }
.section-intro { max-width: 780px; margin: 24px 0 0; color: var(--muted); font-size: 1.16rem; line-height: 1.65; }

.property-band { background: var(--cream); }
.property-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.property-grid article { position: relative; min-height: 420px; overflow: hidden; background: var(--sage-dark); }
.property-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.property-grid article:hover img { transform: scale(1.025); }
.property-grid strong { position: absolute; left: 22px; bottom: 20px; z-index: 1; color: var(--cream); font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.property-grid article::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(17, 26, 21, .72)); }

.disclosure { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 8vw, 110px); align-items: start; background: var(--soft); }
.disclosure p:last-child { margin: 0; color: var(--muted); font-size: 1.12rem; line-height: 1.62; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topnav { display: none; }
  .film-heading, .disclosure { grid-template-columns: 1fr; }
  .property-grid { grid-template-columns: 1fr; }
  .property-grid article { min-height: 340px; }
}

@media (max-width: 560px) {
  .topbar { min-height: 68px; padding-inline: 16px; }
  .brand img { width: 146px; }
  .call { padding: 10px 12px; font-size: .68rem; }
  .hero { min-height: 650px; }
  .hero-shade { background: linear-gradient(0deg, rgba(17, 26, 21, .92) 0%, rgba(17, 26, 21, .54) 68%, rgba(17, 26, 21, .14)); }
  .hero-content { width: 100%; padding: 58px 20px; }
  h1 { font-size: clamp(4.2rem, 24vw, 7rem); }
  .video-frame { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .property-grid img { transition: none; }
}