/* ==========================================================================
   Casabella Aruba — City page styles
   Token set inherited from casabella-tower.com so the two read as one brand.
   Order: tokens → reset → primitives → header → hero → sections → footer
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Palette. Warm ink base, bone type, brass accent. */
  --ink-900: #0e0d0b;
  --ink-800: #16150f;
  --ink-700: #1f1d17;
  --ink-600: #2b281f;
  --line: rgba(233, 224, 207, 0.14);
  --line-strong: rgba(233, 224, 207, 0.28);

  --bone-100: #f6f1e7;
  --bone-300: #e9e0cf;
  --bone-500: rgba(233, 224, 207, 0.72);
  --bone-700: rgba(233, 224, 207, 0.5);

  --brass-400: #cfa863;
  --brass-500: #b98f45;
  --brass-600: #97722f;

  /* Status accents — one hue per project stage. */
  --st-complete: #8b9a7d;
  --st-selling: #cfa863;
  --st-planning: rgba(233, 224, 207, 0.45);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.15rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --step-4: clamp(2.6rem, 1.7rem + 4.4vw, 6rem);

  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  --gap-xl: 7rem;

  --shell: 1240px;
  --shell-narrow: 780px;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);

  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--bone-300);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--bone-100);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--brass-400);
  outline-offset: 3px;
}

/* --- Primitives --------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--gap-xl); }
.section--tight { padding-block: var(--gap-lg); }
.section + .section { border-top: 1px solid var(--line); }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-400);
  font-weight: 500;
  margin: 0 0 var(--gap-sm);
}

.lede {
  font-size: var(--step-1);
  color: var(--bone-500);
  font-weight: 300;
  max-width: 56ch;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--pad-x);
  top: var(--gap-xs);
  z-index: 100;
  background: var(--brass-500);
  color: var(--ink-900);
  padding: 0.6rem 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone-100);
  background: transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    color 0.35s var(--ease);
}
.btn:hover { border-color: var(--brass-400); color: var(--brass-400); }

.btn--solid {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: var(--ink-900);
}
.btn--solid:hover {
  background: var(--brass-400);
  border-color: var(--brass-400);
  color: var(--ink-900);
}

.btn--tower {
  border-color: var(--brass-500);
  color: var(--brass-400);
}
.btn--tower:hover {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: var(--ink-900);
}

/* Unresolved content. Loud on purpose — nothing ships with one of these. */
.todo {
  display: inline-block;
  background: rgba(207, 168, 99, 0.14);
  border: 1px dashed var(--brass-500);
  color: var(--brass-400);
  font-family: var(--font-body);
  font-size: 0.75em;
  letter-spacing: 0.06em;
  padding: 0 0.45em;
  border-radius: var(--radius);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(14, 13, 11, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}

.brand { display: flex; align-items: baseline; gap: 0.7rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--bone-100);
}
.brand__sub {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-700);
}

.nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: center; }
.nav a {
  white-space: nowrap;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-500);
  transition: color 0.3s var(--ease);
}
.nav a:hover { color: var(--brass-400); }

/* The one link that leaves this site — it should not look like the rest. */
.nav a.nav__cta {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--brass-500);
  border-radius: 100px;
  color: var(--brass-400);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav a.nav__cta:hover {
  background: var(--brass-500);
  color: var(--ink-900);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 18px; height: 1px;
  background: var(--bone-100);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -6px; }
.nav-toggle span::after { left: 0; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  /* Clears the fixed header: a tall headline would otherwise ride up under
     it and collide with the wordmark. */
  padding-top: calc(var(--header-h) + var(--gap-md));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The ramp has to be dark from ~55% down, where the headline, tagline and
     eyebrow all sit — the render is brightest exactly there. */
  background: linear-gradient(
    180deg,
    rgba(14, 13, 11, 0.72) 0%,
    rgba(14, 13, 11, 0.30) 26%,
    rgba(14, 13, 11, 0.68) 58%,
    rgba(14, 13, 11, 0.9) 86%,
    var(--ink-900) 100%
  );
}
/* Wide enough for the display headline to breathe — the tagline sets its own
   narrower measure below. A ch-based cap here is sized by the body font and
   throttles an 80px serif to three words a line. */
.hero__inner { max-width: min(700px, 100%); }
.hero h1 {
  font-size: var(--step-4);
  margin-bottom: var(--gap-sm);
  text-wrap: balance;
}
.hero__tagline {
  font-size: var(--step-1);
  color: var(--bone-300);
  font-weight: 300;
  margin-bottom: var(--gap-md);
  max-width: 34ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }

/* --- Stat strip --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats > div {
  padding: var(--gap-md) var(--gap-sm);
  text-align: center;
}
.stats > div + div { border-left: 1px solid var(--line); }
.stats dt {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-700);
  margin-bottom: 0.4rem;
}
.stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--bone-100);
  line-height: 1;
}

/* --- Split (image + prose) ---------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.split h2 { font-size: var(--step-3); margin-bottom: var(--gap-sm); }
.split__body { color: var(--bone-500); }

/* --- Mission ------------------------------------------------------------ */

.mission__head { max-width: var(--shell-narrow); }
.mission__head h2 { font-size: var(--step-3); margin-bottom: var(--gap-sm); }

.eco {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--gap-lg);
}
.eco__item {
  background: var(--ink-900);
  padding: var(--gap-md);
}
.eco__item h3 {
  font-size: var(--step-1);
  margin-bottom: 0.7rem;
  padding-top: var(--gap-sm);
  border-top: 2px solid var(--brass-500);
  display: inline-block;
}
.eco__item p { color: var(--bone-500); font-size: 0.95em; }

/* --- Portfolio ---------------------------------------------------------- */

.portfolio__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}
.portfolio__head h2 { font-size: var(--step-3); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}
.filter {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--bone-500);
  font-family: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter:hover { border-color: var(--line-strong); color: var(--bone-100); }
.filter[aria-pressed="true"] {
  background: var(--bone-100);
  border-color: var(--bone-100);
  color: var(--ink-900);
}
.filter__count { opacity: 0.55; margin-left: 0.35em; }

.projects {
  display: grid;
  /* auto-FIT, not auto-fill: with two projects the empty third track collapses
     and the cards fill the row, instead of leaving a hole on the right. A third
     project re-forms the three-column row on its own. */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap-md);
}

.project {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.project:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.project[hidden] { display: none; }

.project__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(140deg, var(--ink-700), var(--ink-600));
  overflow: hidden;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; }

/* Cards with no photography yet get a drawn placeholder, not a broken box. */
.project__media--empty {
  display: grid;
  place-items: center;
}
.project__media--empty::after {
  content: "Imagery to come";
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-700);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone-500);
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--st-planning));
  flex: none;
}
.project__media .status {
  position: absolute;
  left: var(--gap-sm);
  top: var(--gap-sm);
  background: rgba(14, 13, 11, 0.82);
  backdrop-filter: blur(8px);
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  border: 1px solid var(--line);
}

.project[data-status="complete"] { --dot: var(--st-complete); }
.project[data-status="selling"] { --dot: var(--st-selling); }
.project[data-status="planning"] { --dot: var(--st-planning); }

.project__body {
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gap-sm);
}
.project__name { font-size: var(--step-2); }
.project__place {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-400);
  margin-top: 0.35rem;
}
.project__blurb { color: var(--bone-500); font-size: 0.95em; flex: 1; }

.project__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-md);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--line);
  margin: 0;
}
.project__facts div { min-width: 0; }
.project__facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-700);
  margin-bottom: 0.2rem;
}
.project__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--bone-100);
  line-height: 1.1;
}

.project__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brass-400);
  border-top: 1px solid var(--line);
  padding-top: var(--gap-sm);
  transition: gap 0.3s var(--ease);
}
.project__link:hover { gap: 0.9rem; }
.project__link--muted {
  color: var(--bone-700);
  cursor: default;
  pointer-events: none;
}

.project--soon {
  background: linear-gradient(155deg, var(--ink-800) 0%, var(--ink-700) 100%);
  min-height: 300px;
}
.project--soon .project__body { justify-content: space-between; }
.project--soon .status { color: var(--bone-700); }

.project__year {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--bone-100);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.projects__empty {
  color: var(--bone-700);
  padding: var(--gap-lg) 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* --- Contact ------------------------------------------------------------ */

.contact { background: var(--ink-800); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
}
.contact h2 { font-size: var(--step-3); margin-bottom: var(--gap-sm); }

.contact__routes { margin-top: var(--gap-md); display: grid; gap: var(--gap-sm); }
.contact__routes li {
  display: flex;
  gap: var(--gap-sm);
  align-items: baseline;
  color: var(--bone-500);
  font-size: 0.95em;
}
.contact__routes strong {
  color: var(--bone-100);
  font-weight: 500;
  min-width: 7.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field { display: grid; gap: 0.45rem; margin-bottom: var(--gap-sm); }
.field label {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--bone-100);
  font-family: inherit;
  font-size: var(--step-0);
}
.field textarea { min-height: 120px; resize: vertical; }

.field__opt {
  color: var(--bone-700);
  letter-spacing: 0.08em;
  text-transform: none;
  font-style: italic;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass-500);
}
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }

.form__note {
  font-size: var(--step--1);
  color: var(--bone-700);
  margin-top: var(--gap-sm);
}
.hp { position: absolute; left: -9999px; }

.form__status {
  margin-top: var(--gap-sm);
  padding: var(--gap-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--bone-100);
  font-size: 0.95em;
}
.form__status[hidden] { display: none; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--gap-lg) var(--gap-md);
  font-size: var(--step--1);
  color: var(--bone-700);
}
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-500);
  margin-bottom: var(--gap-sm);
  font-weight: 500;
}
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a:hover { color: var(--brass-400); }
.site-footer__base {
  border-top: 1px solid var(--line);
  padding-top: var(--gap-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-sm);
}

/* --- Media -------------------------------------------------------------- */

@media (max-width: 900px) {
  .split,
  .eco,
  .contact__grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media img { aspect-ratio: 3 / 2; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { border-left: none; }
  .stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    background: rgba(14, 13, 11, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    transition: transform 0.4s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--gap-sm) var(--pad-x) var(--gap-md);
  }
  .nav a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
  }
  .brand__sub { display: none; }
  .field--pair { grid-template-columns: 1fr; }
  .projects { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .stats > div + div { border-left: none; border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Casabella City — page-specific blocks.
   Everything above is the shared Casabella system, copied so this page is
   self-contained (same convention as /tower and /suites).
   ========================================================================== */

/* The brochure sets the second half of each headline in italic brass. */
h1 em,
h2 em {
  font-style: italic;
  color: var(--brass-400);
}

.section-head { max-width: var(--shell-narrow); }
.section-head h2 { font-size: var(--step-3); margin-bottom: var(--gap-sm); }

/* Every image of the building is a render, and says so where it sits. */
.render-note {
  font-size: var(--step--1);
  color: var(--bone-700);
  margin-top: var(--gap-sm);
}
.hero__note {
  position: absolute;
  right: var(--pad-x);
  bottom: var(--gap-sm);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-700);
}

/* --- Key facts (definition list) --------------------------------------- */

.facts {
  margin: var(--gap-md) 0 0;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--gap-sm);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-700);
  padding-top: 0.15em;
}
.facts dd { margin: 0; color: var(--bone-100); }

/* --- Wide image -------------------------------------------------------- */

.wide { margin: var(--gap-lg) 0 0; }
.wide img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Courtyard trio: pool large, two views stacked beside it ------------ */

.trio {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}
.trio figure { margin: 0; }
.trio figure:first-child { grid-row: span 2; }
.trio img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Pergola section: a darker band, wide image then a pair ------------- */

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}
.pair figure { margin: 0; }
.pair img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.pair img.pair__aerial { object-position: 50% 70%; }

/* --- Architect's drawings ------------------------------------------------
   Line drawings on white, so they sit on a bone card rather than the ink
   background. Each links to the full-size file. */

.plan-card {
  margin: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(0.75rem, 2vw, 1.5rem);
}
.plan-card a { display: block; cursor: zoom-in; }
.plan-card img { width: 100%; height: auto; margin-inline: auto; }
.plan-card figcaption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  color: #5e5869;
  line-height: 1.5;
}
.unit .plan-card img { max-width: 420px; }
.plan-card--wide { margin-top: var(--gap-lg); }

.siteplan {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.siteplan h2 { font-size: var(--step-3); margin-bottom: var(--gap-sm); }
.siteplan .plan-card img { max-height: 1100px; width: auto; }

.areas { margin: var(--gap-md) 0 0; border-top: 1px solid var(--line); }
.areas > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.areas dt {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-700);
}
.areas dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--bone-100);
}

.location__img { margin: var(--gap-md) 0 0; }
.location__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Amenities (four, two by two) --------------------------------------- */

.amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--gap-md);
}
.amenity {
  background: var(--ink-900);
  padding: var(--gap-md);
  display: flex;
  gap: var(--gap-md);
  align-items: baseline;
}
.amenity__key {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-400);
  white-space: nowrap;
  min-width: 8.5rem;
}
.amenity p { color: var(--bone-500); font-size: 0.95em; margin: 0; }

/* --- Interiors gallery ---------------------------------------------------
   Living room large on the left, bedroom and bathroom stacked on the right.
   All three renders are 16:9, so a 2fr column spanning two rows lines up
   with the two 1fr images beside it. */

.interiors {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}
.interiors figure { margin: 0; position: relative; }
.interiors figure:first-child { grid-row: span 2; }
.interiors img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.interiors figcaption {
  position: absolute;
  left: var(--gap-sm);
  bottom: var(--gap-sm);
  background: rgba(44, 42, 71, 0.8);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #efeae4;
}

/* --- Specification columns --------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
.spec h3 {
  font-size: var(--step-1);
  padding-top: var(--gap-sm);
  border-top: 2px solid var(--brass-500);
  display: inline-block;
  margin-bottom: var(--gap-sm);
}
.spec li {
  color: var(--bone-500);
  font-size: 0.95em;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

/* --- Typical apartment card -------------------------------------------- */

.unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: var(--gap-lg);
  padding: var(--gap-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.unit h3 { font-size: var(--step-2); margin-bottom: var(--gap-sm); }
.unit p { color: var(--bone-500); }
.unit { align-items: center; }
.unit p { max-width: 46ch; }

/* --- Payment milestones ------------------------------------------------ */

.milestones {
  margin: var(--gap-md) 0 0;
  border-top: 1px solid var(--line);
  counter-reset: step;
}
.milestones li {
  display: grid;
  grid-template-columns: 2.5rem 9rem minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}
.milestones li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--bone-700);
}
.milestones strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.1;
  color: var(--brass-400);
}
.milestones span { color: var(--bone-100); }

.stats--spaced { margin-top: var(--gap-lg); }
.actions--spaced { margin-top: var(--gap-md); }

.price-from {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--bone-100);
  margin: var(--gap-sm) 0;
}
.price-from small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-700);
  margin-bottom: 0.6rem;
}

/* --- Drive times ------------------------------------------------------- */

.drives { border-top: 1px solid var(--line); }
.drives li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--gap-sm);
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.drives strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  color: var(--brass-400);
  white-space: nowrap;
}
.drives span { color: var(--bone-100); }
.drives em {
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-700);
}

.address {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--bone-100);
  margin-top: var(--gap-md);
}
.address a { border-bottom: 1px solid var(--line-strong); }
.address a:hover { color: var(--brass-400); border-color: var(--brass-400); }

@media (max-width: 900px) {
  .amenities,
  .unit,
  .siteplan { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .trio figure:first-child { grid-row: auto; }
  .siteplan .plan-card { max-width: 520px; }
  .specs { grid-template-columns: 1fr; gap: var(--gap-sm); }
  .interiors { grid-template-columns: 1fr; }
  .interiors figure:first-child { grid-row: auto; }
  .wide img { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .amenity { flex-direction: column; gap: 0.4rem; }
  .facts > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .pair { grid-template-columns: 1fr; }
  .milestones li { grid-template-columns: 2rem minmax(0, 1fr); }
  .milestones span { grid-column: 2; }
}

/* ==========================================================================
   Casabella City palette — taken from the City brochure.
   The type, header and spacing stay Casabella; the colours are the
   building's own: dusk sky for the dark bands, limestone render and
   sandstone cladding for the light ones, the teal of the palm on the
   entrance sign for accents, and the rose of the herringbone pavers for the
   italic half of each headline.

   Everything above reads its colours from tokens, so each tone just
   redefines them. The page default is dusk; light sections opt in with
   .tone-paper or .tone-stone.
   ========================================================================== */

:root {
  /* Dusk — the default: hero, header, pergola band, enquiry, footer. */
  --ink-900: #2c2a47;
  --ink-800: #252340;
  --ink-700: #34325a;
  --ink-600: #3d3b66;
  --line: rgba(239, 234, 228, 0.16);
  --line-strong: rgba(239, 234, 228, 0.32);

  --bone-100: #f5f2ee;
  --bone-300: #e6e0d9;
  --bone-500: #c3bdcd;
  --bone-700: #a09aae;

  /* Accent slots keep their old names so the shared rules need no edits. */
  --brass-400: #8fdcd7;   /* accent text, button hover */
  --brass-500: #6fcfc9;   /* buttons, rules */
  --brass-600: #17807e;
  --em: #e0aa9e;          /* italic half of headlines */
}

.tone-paper,
.tone-stone {
  --ink-900: #f5f2ee;     /* limestone render */
  --ink-800: #ece6de;
  --ink-700: #e3dbd0;
  --ink-600: #d5cabd;
  --line: rgba(39, 34, 54, 0.13);
  --line-strong: rgba(39, 34, 54, 0.3);

  --bone-100: #272236;
  --bone-300: #272236;
  --bone-500: #4f4a5c;
  --bone-700: #625c6c;

  --brass-400: #136c6a;
  --brass-500: #17807e;
  --brass-600: #0f5958;
  --em: #a35f54;
}

.tone-stone {
  --ink-900: #e9e1d6;     /* sandstone cladding */
  --ink-800: #f5f2ee;     /* cards sit lighter, as in the brochure */
  --line: rgba(39, 34, 54, 0.15);
}

.tone-dusk { --ink-800: #232141; }

/* A token change does not recolour inherited text, so each tone sets its
   own background and colour. */
.tone-paper,
.tone-stone,
.tone-dusk {
  background: var(--ink-900);
  color: var(--bone-300);
}
.contact.tone-dusk { background: var(--ink-800); }

/* Tones meet edge to edge; a hairline only between two of the same. */
.section[class*="tone-"] { border-top: 0; }
.tone-paper + .tone-paper,
.tone-stone + .tone-stone { border-top: 1px solid var(--line); }

h1 em,
h2 em { color: var(--em); }

/* Solid buttons: white on teal in light sections, ink on aqua in dusk. */
.btn--solid { color: var(--ink-900); }
.tone-paper .btn--solid,
.tone-stone .btn--solid { color: #fff; }
.tone-paper .btn--solid:hover,
.tone-stone .btn--solid:hover {
  background: var(--brass-600);
  border-color: var(--brass-600);
  color: #fff;
}

/* Hard-coded ink in the shared header, hero and mobile menu, in dusk. */
.site-header.is-stuck { background: rgba(44, 42, 71, 0.92); }
.hero::after {
  background: linear-gradient(
    180deg,
    rgba(44, 42, 71, 0.7) 0%,
    rgba(44, 42, 71, 0.22) 26%,
    rgba(44, 42, 71, 0.62) 58%,
    rgba(44, 42, 71, 0.9) 86%,
    var(--ink-900) 100%
  );
}
@media (max-width: 760px) {
  .nav { background: rgba(44, 42, 71, 0.97); }
}

/* Drawings: white cards with a hairline, so they hold their edge on
   limestone. */
.plan-card { border: 1px solid var(--line); }
.tone-paper .plan-card figcaption,
.tone-stone .plan-card figcaption { color: var(--bone-700); }

/* The milestone numbers and drive minutes take the rose, like the
   brochure's figures; labels stay teal. */
.tone-paper .milestones strong,
.tone-stone .drives strong { color: var(--em); }