/* ============================================================
   AURELIS PROPERTIES — design tokens
   ------------------------------------------------------------
   Color   bg #FAFAF9 · panel #FFFFFF · ink #1C1C1B · line rgba
           dark #15140F (contrast sections) · accent #A98F6B (bronze)
   Type    Display: Newsreader (serif, italic used for emphasis)
           Body/UI: Inter
   Layout  Wide airy sections, hairline dividers, no border-radius
           beyond 2px — this is architecture, not software chrome.
   Signature   the sketch -> render hover reveal in Residences
   ============================================================ */

:root {
  --bg: #FAFAF9;
  --panel: #FFFFFF;
  --ink: #1C1C1B;
  --ink-soft: rgba(28, 28, 27, 0.62);
  --ink-faint: rgba(28, 28, 27, 0.38);
  --line: rgba(28, 28, 27, 0.12);

  --dark: #15140F;
  --dark-ink: #F5F3EF;
  --dark-ink-soft: rgba(245, 243, 239, 0.68);
  --dark-line: rgba(245, 243, 239, 0.14);

  --accent: #A98F6B;
  --accent-dark: #8C7455;

  --radius: 2px;
  --nav-h: 84px;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

section { scroll-margin-top: var(--nav-h); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
em { font-style: italic; color: var(--accent); }

p { margin: 0; }

img { max-width: 100%; display: block; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.eyebrow--light { color: #D8C6A8; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn--light { background: var(--dark-ink); color: var(--dark); }
.btn--light:hover { background: var(--accent); color: var(--dark); }
.btn--outline-light { border-color: rgba(245,243,239,0.4); color: var(--dark-ink); }
.btn--outline-light:hover { border-color: var(--dark-ink); background: rgba(245,243,239,0.08); }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: var(--accent-dark); }

/* ============================================================
   NAV — transparent over hero, solid once scrolled
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  color: var(--dark-ink);
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(250, 250, 249, 0.92);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.nav__brand {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: inherit;
  text-decoration: none;
}
.nav__links {
  display: flex;
  gap: 34px;
  font-size: 14px;
}
.nav__links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 200ms ease;
}
.nav__links a:hover { opacity: 1; }
.nav__right { display: flex; align-items: center; gap: 26px; }
.lang-toggle { display: flex; gap: 6px; font-size: 13px; }
.lang-toggle__btn {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.6; font: inherit; padding: 2px;
}
.lang-toggle__btn.active { opacity: 1; font-weight: 600; }
.nav__cta {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  border: 1px solid currentColor;
  opacity: 0.85;
  padding: 9px 18px;
  border-radius: var(--radius);
  transition: opacity 200ms ease, background 200ms ease;
}
.nav__cta:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__burger span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  margin: 5px 0; color: inherit;
}
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--dark); color: var(--dark-ink);
  display: none; flex-direction: column; padding: 24px 32px;
  transform: translateY(-8px); opacity: 0;
  pointer-events: none;
  transition: transform 250ms ease, opacity 250ms ease;
}
.mobile-menu.open { display: flex; transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
  color: inherit; text-decoration: none; font-size: 20px;
  font-family: var(--serif); padding: 14px 0; border-bottom: 1px solid var(--dark-line);
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: block; }
}

/* ============================================================
   HERO
   Placeholder background: fine blueprint-style grid lines on
   near-black. Swap for real photo/video: replace .hero__media
   background rules with an <img>/<video> element.
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
  color: var(--dark-ink);
}
.hero__media {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,243,239,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,239,0.06) 1px, transparent 1px),
    url("../aurelis_hero_original/poster.jpg");
  background-size: 64px 64px, 64px 64px, cover;
  background-position: center, center, center top;
  opacity: 0.9;
}
/* video/canvas sit above the grid fallback; grid still shows through
   until hero.mp4 exists and playback actually starts */
.hero__video,
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero__canvas { display: none; opacity: 0; transition: opacity 400ms ease; }
.hero__canvas--visible { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  /* Real hero footage is a pale, near-white blueprint sketch that
     gradually colors in — much lighter than the dark placeholder
     this gradient was first tuned for. Strong wash on the left
     (behind the text) guarantees legibility regardless of how
     light or dark that region of the frame gets; it fades out by
     ~75% so the building composition on the right stays visible. */
  background:
    linear-gradient(100deg,
      rgba(10,10,8,0.86) 0%,
      rgba(10,10,8,0.62) 28%,
      rgba(10,10,8,0.28) 52%,
      rgba(10,10,8,0.08) 72%,
      rgba(10,10,8,0.22) 100%),
    rgba(10,10,8,0.14);
}
.hero__content {
  position: relative; z-index: 2;
  max-width: 640px;
  padding: 0 48px;
}
.hero__content h1 {
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  font-weight: 400;
}
.hero__content p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--dark-ink-soft);
  max-width: 460px;
  margin-bottom: 36px;
}
.hero__scroll-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 2; width: 1px; height: 56px;
}
.hero__scroll-hint span {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============================================================
   SHARED — section intro block
   ============================================================ */
.section-intro { max-width: 640px; margin: 0 auto 56px; padding: 0 48px; }
.section-intro h2 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-intro p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* ============================================================
   DESIGN
   ============================================================ */
.design {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 48px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.design__text h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 20px; }
.design__text p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 420px; }
.design__figure {
  border: 1px solid var(--line);
  background: var(--panel);
}
.design__figure img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .design { grid-template-columns: 1fr; gap: 40px; padding: 80px 24px; }
}

/* ============================================================
   RESIDENCES — tabs + sketch/color hover reveal
   ============================================================ */
.residences {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 48px 140px;
}
.residences .section-intro { margin-left: 0; padding: 0; }

.model-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
  overflow-x: auto;
}
.model-tabs__btn {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink-soft);
  padding: 14px 22px; white-space: nowrap; position: relative;
  transition: color 200ms ease;
}
.model-tabs__btn::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px;
  height: 2px; background: var(--ink); transform: scaleX(0);
  transform-origin: left; transition: transform 250ms ease;
}
.model-tabs__btn:hover { color: var(--ink); }
.model-tabs__btn.active { color: var(--ink); font-weight: 600; }
.model-tabs__btn.active::after { transform: scaleX(1); }

.model-panel { display: none; }
.model-panel.active { display: block; }

.model-panel__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 0;
}

/* ---------- sub-navigation: Gallery / Availability / Amenities ---------- */
.model-detail { margin-top: 40px; }
.model-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.model-subnav__btn {
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 9px 16px;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.model-subnav__btn:hover { color: var(--ink); }
.model-subnav__btn.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.subpanel { display: none; }
.subpanel.active { display: block; }
.subpanel__pending {
  font-size: 13px;
  color: var(--ink-faint);
  padding: 32px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  text-align: center;
}

/* ---------- gallery grid (reuses .model-hover crossfade) ----------
   Lives in the narrow right-hand column now, so 2-up by default. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gallery-item { aspect-ratio: 1 / 1; }

/* ---------- availability table (per-model, narrow column) ---------- */
.avail-table { border-top: 1px solid var(--line); }
.avail-row {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 0.6fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.avail-row--head {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.avail-row--status {
  grid-template-columns: 1fr auto;
  border-bottom: none;
  padding-top: 16px;
}
.avail-plan-btn {
  justify-self: end;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-dark);
  text-decoration: none;
  display: inline-block;
  padding: 0;
  text-align: right;
  transition: color 200ms ease;
}
.avail-plan-btn:hover { color: var(--ink); }
.avail-plan-note { font-size: 12px; color: var(--ink-faint); }

/* ---------- floor plan view ---------- */
.avail-view { display: none; }
.avail-view.active { display: block; }
.avail-back {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-soft);
  padding: 0 0 24px; transition: color 200ms ease;
}
.avail-back:hover { color: var(--ink); }

.floorplan {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.floorplan__info h4 {
  font-size: 22px;
  margin: 4px 0 16px;
}
.floorplan__specs {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.9;
}
.floorplan__specs li { border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 5px; }
.floorplan__disclaimer {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

/* Download button for the client-supplied floor plan PDF.
   Points at floorplans/<model>.pdf — drop the real file there
   and this just works, no code changes needed. */
.floorplan__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius);
  transition: background 200ms ease;
}
.floorplan__download:hover { background: var(--accent-dark); }

.model-hover {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: zoom-in;
}
.model-hover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.model-hover__color { z-index: 1; transform: scale(1.02); transition: transform 700ms ease; }
.model-hover__sketch { z-index: 2; transition: opacity 550ms ease, transform 700ms ease; }
.model-hover:hover .model-hover__sketch,
.model-hover:focus-within .model-hover__sketch { opacity: 0; }
.model-hover:hover .model-hover__color,
.model-hover:focus-within .model-hover__color { transform: scale(1); }
.model-hover::after {
  content: ""; position: absolute; z-index: 3; bottom: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(28,28,27,0.25); background: rgba(255,255,255,0.75);
  backdrop-filter: blur(4px); transition: opacity 300ms ease; pointer-events: none;
}
.model-hover:hover::after { opacity: 0; }
.model-hover--placeholder {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); cursor: default;
}
.model-hover__pending { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; }

.model-panel__info h3 { font-size: 28px; margin-bottom: 12px; }
.model-panel__info p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 860px) {
  .residences { padding: 20px 24px 90px; }
  .model-panel__top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
}

/* ============================================================
   PENTHOUSES — dark contrast section
   ============================================================ */
.penthouses {
  position: relative;
  background: var(--dark);
  color: var(--dark-ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}
.penthouses__figure {
  background-image:
    repeating-linear-gradient(135deg, rgba(245,243,239,0.05) 0 1px, transparent 1px 26px);
}
.penthouses__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 64px;
  max-width: 520px;
}
.penthouses__text h2 { font-size: clamp(28px, 3.6vw, 40px); color: var(--dark-ink); margin-bottom: 20px; }
.penthouses__text p { font-size: 16px; line-height: 1.7; color: var(--dark-ink-soft); margin-bottom: 32px; }

@media (max-width: 900px) {
  .penthouses { grid-template-columns: 1fr; }
  .penthouses__figure { min-height: 280px; }
  .penthouses__text { padding: 56px 28px; }
}

/* ============================================================
   BESPOKE COLLECTION
   (reuses .residences / .model-tabs / .model-panel for layout —
   see RESIDENCES block above; these rules only cover the parts
   unique to this section: description line + photo grid)
   ============================================================ */
.bespoke-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 32px;
}
.bespoke-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bespoke-item {
  aspect-ratio: 4 / 3;
  background-color: var(--panel);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  position: relative;
}
.bespoke-item span {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: rgba(250,250,249,0.85);
  padding: 3px 7px;
  border: 1px solid var(--line);
}

@media (max-width: 760px) {
  .bespoke-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   NEIGHBORHOOD
   ============================================================ */
.neighborhood {
  max-width: 1280px; margin: 0 auto; padding: 40px 48px 140px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.neighborhood__text h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 18px; }
.neighborhood__text p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 420px; }
.neighborhood__map {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--panel);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}

@media (max-width: 900px) {
  .neighborhood { grid-template-columns: 1fr; padding: 20px 24px 90px; gap: 32px; }
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery { max-width: 1280px; margin: 0 auto; padding: 40px 48px 140px; }
.gallery .section-intro { margin: 0 0 40px; padding: 0; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
.gallery__cell {
  background: var(--panel);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  position: relative;
}
.gallery__cell--photo {
  background-size: cover;
  background-position: center;
  border-style: solid;
  align-items: flex-end;
  justify-content: flex-start;
}
.gallery__cell--photo span {
  margin: 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  background: rgba(250,250,249,0.88);
  padding: 5px 10px;
  border: 1px solid var(--line);
}
.gallery__cell--tall { grid-row: span 2; }
.gallery__cell--wide { grid-column: span 2; }

@media (max-width: 900px) {
  .gallery { padding: 20px 24px 90px; }
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .gallery__cell--wide { grid-column: span 2; }
}

/* ============================================================
   AVAILABILITY
   ============================================================ */
.availability { max-width: 900px; margin: 0 auto; padding: 40px 48px 160px; text-align: center; }
.availability .section-intro { margin: 0 auto 48px; }
.availability__list { margin-bottom: 48px; border-top: 1px solid var(--line); }
.availability__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding: 18px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 15px;
}
.availability__row--head {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.status { font-size: 13px; font-weight: 500; }
.status--open { color: #4C7A5B; }
.status--pending { color: var(--ink-faint); }

@media (max-width: 640px) {
  .availability { padding: 20px 20px 100px; }
  .availability__row { grid-template-columns: 1.2fr 1fr 0.8fr 1fr; font-size: 13px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--dark);
  color: var(--dark-ink-soft);
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
@media (max-width: 640px) {
  .footer { flex-direction: column; gap: 8px; padding: 28px 24px; }
}

/* ============================================================
   LIGHTBOX — enlarged photo view for Bespoke Collection
   ============================================================ */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(21,20,15,0.94);
  align-items: center; justify-content: center;
  padding: 60px;
}
.lightbox.open { display: flex; }
.lightbox__img {
  max-width: 100%; max-height: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox__close {
  position: absolute; top: 24px; right: 28px;
  background: none; border: none; cursor: pointer;
  color: var(--dark-ink); font-size: 22px; line-height: 1;
  padding: 8px; opacity: 0.8; transition: opacity 200ms ease;
}
.lightbox__close:hover { opacity: 1; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--dark-ink); font-size: 40px; line-height: 1;
  padding: 12px 18px; opacity: 0.7; transition: opacity 200ms ease;
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

.bespoke-item { cursor: zoom-in; }

@media (max-width: 640px) {
  .lightbox { padding: 20px; }
  .lightbox__nav { font-size: 30px; padding: 8px 10px; }
}