/* ═══════════════════════════════════════════
   INFINITE CONCIERGE — design concept
   (SUFFO-style system: lime / ink / sage / paper)
   ═══════════════════════════════════════════ */
:root {
  --accent: #9a9a9a;      /* graphite accent (dashes, small details on light) */
  --ink: #0b0b0b;
  --sage: #a7a7a7;        /* neutral mid-gray section background */
  --paper: #efefed;
  --white: #ffffff;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: normal; }
.lime { color: var(--accent); }
/* on the gray sections the graphite dash disappears — use ink there */
.looking .lime, .beyond .lime { color: var(--ink); }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Big headings w/ line masks ── */
.big-heading {
  font-size: clamp(44px, 6.5vw, 104px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.big-heading .line { display: block; overflow: hidden; }
.big-heading .line > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.1s var(--ease);
}
.big-heading.in .line > span { transform: translateY(0); }
.big-heading.in .line:nth-child(2) > span { transition-delay: .09s; }
.big-heading.in .line:nth-child(3) > span { transition-delay: .18s; }
.big-heading--light { color: var(--white); }
.big-heading--dark  { color: var(--ink); }
.big-heading--white { color: var(--white); }
.big-heading--right { text-align: right; }
.line--indent { padding-left: .55em; }

/* ── Pills / labels / buttons ── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid rgba(11,11,11,.35);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.pill:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pill--active { background: var(--white); border-color: var(--white); }
.pill--active:hover { background: var(--ink); border-color: var(--ink); }
.pill--ghost { border-color: rgba(255,255,255,.55); color: var(--white); }
.pill--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.pill--round { padding: 9px 14px; }

.label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.label--lime { color: var(--white); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); }
.dot--dark { background: var(--ink); }
.dot--lime { background: var(--accent); }

.btn-dark {
  display: inline-block;
  background: var(--ink); color: var(--white);
  padding: 12px 26px; border-radius: 999px; font-size: 13px;
  border: none; cursor: pointer; font-family: var(--font);
  transition: background .35s, transform .35s var(--ease);
}
.btn-dark:hover { background: #2a2a2a; transform: translateY(-2px); }
.btn-light {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.7); color: var(--white);
  padding: 12px 26px; border-radius: 999px; font-size: 13px;
  transition: background .35s, color .35s, transform .35s var(--ease);
}
.btn-light:hover { background: var(--white); color: var(--ink); transform: translateY(-2px); }

/* ═══════════ PRELOADER ═══════════ */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s var(--ease);
}
.preloader.done { transform: translateY(-101%); }
.preloader__word {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  font-size: clamp(34px, 7.2vw, 118px);
  font-weight: 500; letter-spacing: -.045em; line-height: 1;
  padding: .12em 0 .18em;
  color: #e8e8e8;
  white-space: nowrap;
  clip-path: inset(100% 0 0 0);
  animation: pre-word 1.2s var(--ease) .35s forwards;
  pointer-events: none;
}
@keyframes pre-word { to { clip-path: inset(0 0 0 0); } }

/* ═══════════ HEADER (fixed, transparent → solid on scroll) ═══════════ */
.header {
  position: fixed; top: 24px; left: 0; right: 0; z-index: 60;
  padding: 14px 56px;
  transition: background .45s var(--ease), box-shadow .45s, top .45s var(--ease);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
}
.nav__group { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.nav__group--right { gap: 28px; justify-self: end; }
.nav__brand {
  justify-self: center;
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  color: var(--white); white-space: nowrap;
  transition: color .45s;
}
/* over the hero: light content */
.header .nav__link { color: var(--white); }
.header .nav__link::after { background: currentColor; }
.nav__link--active::after { transform: scaleX(1); }
/* scrolled: solid white, dark content */
.header--solid {
  top: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(11,11,11,.08);
}
.header--solid .nav__brand { color: var(--ink); }
.header--solid .nav__link { color: var(--ink); }
.nav__link { font-size: 13px; position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link--arrow span { display: inline-block; transition: transform .35s var(--ease); }
.nav__link--arrow:hover span { transform: translateX(5px); }
.nav__side { display: flex; align-items: center; gap: 26px; }

/* burger (mobile only) */
.nav__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 40px; height: 36px; padding: 0 6px;
  background: none; border: none; cursor: pointer;
  color: var(--white);
}
.header--solid .nav__burger { color: var(--ink); }
.nav__burger span { display: block; width: 24px; height: 2px; background: currentColor; }

/* slide-out drawer */
.drawer__scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(11,11,11,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.drawer__scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(340px, 86vw);
  background: var(--ink); color: var(--white);
  transform: translateX(103%);
  transition: transform .55s var(--ease);
  display: flex; flex-direction: column;
  padding: 20px 26px 30px;
}
.drawer.open { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.drawer__brand { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.drawer__close {
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1px solid rgba(255,255,255,.35);
  color: var(--white); font-size: 19px; cursor: pointer;
  display: grid; place-items: center; line-height: 1; padding: 0 0 2px;
}
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a {
  font-size: 25px; font-weight: 500; letter-spacing: -.02em;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.drawer__links a:active { color: #bdbdbd; }
.drawer__foot { margin-top: auto; font-size: 13px; color: #bdbdbd; line-height: 1.9; }

/* ═══════════ HERO ═══════════ */
.hero { padding: 24px 24px 0; }
.hero__media {
  position: relative;
  height: calc(100vh - 48px);
  min-height: 660px;
  border-radius: 6px;
  overflow: hidden;
  clip-path: inset(2% 1% round 6px);
  animation: hero-open 1.4s var(--ease) .2s forwards paused;
}
@keyframes hero-open { to { clip-path: inset(0 0 round 6px); } }

.hero__img {
  position: absolute; inset: 0;
  background: url("../images/5 3.jpg") center 68% / cover no-repeat;
  transform: scale(1.12);
  animation: hero-zoom 2.2s var(--ease) .1s forwards paused;
  will-change: transform;
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero__img--front { clip-path: inset(54% 0 0 0); z-index: 3; }

/* Wordmark between the two image layers */
.hero__wordmark {
  position: absolute; z-index: 2;
  left: 50%; top: auto; bottom: calc(46% - .1em);
  transform: translateX(-50%);
  display: flex;
  font-size: clamp(110px, 18.5vw, 310px);
  font-weight: 500; line-height: .95; letter-spacing: -.055em;
  color: var(--white);
  user-select: none;
}
.hero__wordmark span {
  display: inline-block;
  transform: translateY(60%); opacity: 0;
  animation: word-up 1.2s var(--ease) forwards paused;
}
.hero__wordmark span:nth-child(1) { animation-delay: .25s; }
.hero__wordmark span:nth-child(2) { animation-delay: .32s; }
.hero__wordmark span:nth-child(3) { animation-delay: .39s; }
.hero__wordmark span:nth-child(4) { animation-delay: .46s; }
.hero__wordmark span:nth-child(5) { animation-delay: .53s; }
.hero__wordmark span:nth-child(6) { animation-delay: .60s; }
.hero__wordmark span:nth-child(7) { animation-delay: .67s; }
.hero__wordmark span:nth-child(8) { animation-delay: .74s; }
@keyframes word-up { to { transform: translateY(0); opacity: 1; } }

/* hero sequence starts the moment the preloader lifts */
body.loaded .hero__media,
body.loaded .hero__img,
body.loaded .hero__wordmark span,
body.loaded .hotspot__card { animation-play-state: running; }

.hero__meta {
  position: absolute; z-index: 5; top: 96px;
  color: var(--white); font-size: 12.5px; line-height: 1.55;
  text-shadow: 0 0 24px rgba(0,0,0,.15);
}
.hero__meta--left { left: 30px; }
.hero__meta--right { right: 30px; text-align: right; }

.hero__socials {
  position: absolute; z-index: 5; left: 26px; bottom: 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.hero__socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white); font-size: 13px; font-weight: 600;
  transition: background .35s, transform .35s var(--ease);
}
.hero__socials a:hover { background: var(--white); color: var(--ink); transform: scale(1.08); }

.hero__tagline {
  position: absolute; z-index: 5; right: 30px; bottom: 26px;
  color: var(--white); font-size: 13px; text-align: right; line-height: 1.6;
  text-shadow: 0 1px 20px rgba(0,0,0,.25);
}

/* Hotspots */
.hotspot { position: absolute; z-index: 6; left: var(--hx); top: var(--hy); }
.hotspot__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 0 rgba(255,255,255,.5);
  animation: pulse 2.4s ease-out infinite;
  cursor: pointer;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.hotspot__card {
  position: absolute; left: 22px; top: 10px;
  width: max-content; max-width: 250px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white); font-size: 12px; line-height: 1.55;
  opacity: 0; transform: translateY(12px);
  animation: tip-in 1s var(--ease) var(--hd) forwards paused;
}
.hotspot--flip .hotspot__card { left: auto; right: 22px; }
.hotspot__card strong { display: block; font-size: 13.5px; margin-bottom: 4px; font-weight: 600; }
@keyframes tip-in { to { opacity: 1; transform: translateY(0); } }

/* ═══════════ VALUE PROP (sage) ═══════════ */
.looking {
  position: relative;
  background: var(--sage);
  margin: 22px 24px;
  border-radius: 6px;
  padding: 26px 30px 90px;
  overflow: hidden;
}
.looking__filters { display: flex; gap: 8px; margin-bottom: 70px; }
.looking__ghost-num {
  position: absolute; top: -40px; right: 30px;
  font-size: clamp(220px, 30vw, 460px);
  font-weight: 500; line-height: 1; letter-spacing: -.05em;
  color: rgba(255,255,255,.14);
  pointer-events: none;
}
.looking__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
}
.looking__left { max-width: 460px; }
/* longer words ("inaccessible") need a slightly smaller cut */
.looking .big-heading { font-size: clamp(36px, 4.7vw, 76px); }

.search {
  display: flex; align-items: center; gap: 14px;
  margin: 48px 0 56px;
  border-bottom: 1px solid rgba(255,255,255,.6);
  padding-bottom: 12px;
}
.search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--white); font-size: 14px; font-family: var(--font);
}
.search input::placeholder { color: rgba(255,255,255,.75); }
.search button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: none;
  color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .35s, color .35s;
}
.search button:hover { background: var(--white); color: var(--ink); }

.looking__copy p { color: rgba(255,255,255,.92); margin-bottom: 20px; font-size: 14px; }
.looking__copy strong { color: var(--white); }

/* Card deck */
.looking__right { position: relative; z-index: 2; }
.deck { position: relative; height: 420px; margin-bottom: 40px; }
.deck__card {
  position: absolute; top: 0; bottom: 0; right: 40px; margin: auto 0;
  width: min(430px, 100%); height: 400px;
  background: var(--white); border-radius: 18px;
  padding: 10px 10px 16px;
  box-shadow: 0 30px 60px rgba(11,11,11,.18);
  display: flex; flex-direction: column;
  transition: transform 1s var(--ease), opacity .6s;
  will-change: transform;
}
.deck__card[data-pos="0"] { z-index: 4; transform: rotate(0deg); }
.deck__card[data-pos="1"] { z-index: 3; transform: rotate(6deg) translate(26px, -14px); }
.deck__card[data-pos="2"] { z-index: 2; transform: rotate(-7deg) translate(-30px, -10px); }
.deck__card[data-pos="3"] { z-index: 1; transform: rotate(2deg) translate(6px, -22px); opacity: .9; }
.deck__card.deck__card--leaving {
  transform: rotate(-14deg) translate(-120%, 6%) !important;
  opacity: 0; z-index: 5 !important;
}
.deck__img { flex: 1; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.deck__img img { width: 100%; height: 100%; object-fit: cover; }
.deck__card h3 { font-size: 15px; font-weight: 600; line-height: 1.45; padding: 0 52px 0 8px; letter-spacing: -.01em; }
.deck__card time { font-size: 12px; color: #8a8a8a; padding: 8px 52px 0 8px; }
.deck__plus {
  position: absolute; right: 22px; bottom: 54px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  border: none; font-size: 20px; cursor: pointer;
  display: grid; place-items: center;
  line-height: 1; padding: 0 0 3px;
  transition: transform .4s var(--ease);
}
.deck__plus:hover { transform: rotate(90deg) scale(1.1); }
.big-heading--right { margin-top: 10px; }

/* ═══════════ FEATURED RESIDENCES ═══════════ */
.projects { padding: 90px 24px 80px; background: var(--paper); }
.pcards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 110px;
  perspective: 1400px;
}
.pcard { aspect-ratio: 10/13; }
.pcard__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s var(--ease);
}
.pcard:hover .pcard__inner, .pcard.flipped .pcard__inner { transform: rotateY(180deg); }
.pcard__photo, .pcard__info {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
}
/* front: photo + location caption */
.pcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.pcard__photo footer {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(11,11,11,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white); font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
}
.pcard__photo footer span:last-child { color: #dcdcdc; font-weight: 500; }
/* back: dark info side */
.pcard__info {
  transform: rotateY(180deg);
  background: #101010; color: var(--white);
  padding: 14px; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.pcard__info header {
  align-self: flex-start; text-align: left;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--white);
}
.pcard__num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(60px, 7.2vw, 118px);
  font-weight: 500; letter-spacing: -.04em;
  color: rgba(255,255,255,.12);
  pointer-events: none;
}
.pcard__area {
  margin-top: auto;
  font-size: clamp(16px, 1.6vw, 24px); font-weight: 500;
  color: #f0f0f0; letter-spacing: -.02em;
  position: relative; z-index: 1;
}
.pcard__desc {
  margin: 6px 0 auto;
  font-size: 11.5px; line-height: 1.5; color: #bdbdbd;
  position: relative; z-index: 1;
}
.pcard__info footer {
  align-self: stretch;
  display: flex; justify-content: space-between;
  font-size: 11px; color: #bdbdbd;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 10px;
}
.pcard__info footer span:first-child { color: #dcdcdc; }

.projects__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 60px; align-items: end;
  margin-bottom: 100px;
}
.projects__aside { max-width: 400px; justify-self: end; }
.projects__aside .label { margin-bottom: 18px; }
.projects__aside p { color: #4c4c4c; font-size: 14px; margin-bottom: 26px; }

.stats {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .9fr 1.3fr 1.2fr;
  gap: 30px;
  border-top: 1px solid rgba(11,11,11,.18);
  padding-top: 26px;
}
.stat__label {
  display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #7a7a7a; margin-bottom: 12px;
}
.stat__value {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.2;
}

/* ═══════════ BEYOND THE VILLA (sage) ═══════════ */
.beyond {
  position: relative;
  background: var(--sage);
  margin: 0 24px 22px;
  border-radius: 6px;
  padding: 80px 30px 60px;
  overflow: hidden;
}
.beyond__ghost-num {
  position: absolute; top: -40px; right: 30px;
  font-size: clamp(220px, 30vw, 460px);
  font-weight: 500; line-height: 1; letter-spacing: -.05em;
  color: rgba(255,255,255,.14);
  pointer-events: none;
}
.beyond__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 60px;
  margin-bottom: 70px;
}
.beyond__copy {
  color: rgba(255,255,255,.92); font-size: 14px;
  max-width: 400px; margin: 34px 0 30px;
}
.beyond__services {
  columns: 2; column-gap: 40px;
  align-self: end;
}
.beyond__services li {
  break-inside: avoid;
  color: var(--white);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500; letter-spacing: -.02em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.35);
  cursor: default;
  transition: padding-left .4s var(--ease), color .35s, opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s);
}
.beyond__services li:hover { padding-left: 14px; color: var(--accent); }
.beyond__photos {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.beyond__photos figure {
  border-radius: 12px; overflow: hidden;
  height: 380px; position: relative;
}
.beyond__photos img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.beyond__photos figure:hover img { transform: scale(1.06); }
.beyond__photos figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(11,11,11,.45); color: var(--white);
  font-size: 11.5px; letter-spacing: .03em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ═══════════ SIGNATURE MARKETS (dark) ═══════════ */
.collection {
  position: relative;
  background: var(--ink); color: var(--white);
  padding: 90px 24px 60px;
}
.collection__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 70px;
}
.collection .big-heading { font-size: clamp(56px, 8.5vw, 140px); }
.collection__head .label { margin: 0 0 8px; }

.plist { border-top: 1px solid rgba(255,255,255,.14); }
.plist__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr);
  gap: 20px; align-items: center;
  padding: 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  cursor: pointer;
  transition: background .3s, color .3s, padding-left .4s var(--ease);
}
.plist__row span:first-child { font-weight: 600; font-size: 15px; }
.plist__row span:nth-child(2) { color: #9a9a9a; font-size: 13px; }
.plist__row span:last-child { text-align: right; }
.plist__row:hover {
  background: var(--white); color: var(--ink);
  padding-left: 26px;
}
.plist__row:hover span:nth-child(2) { color: rgba(11,11,11,.6); }

.plist__preview {
  position: fixed; z-index: 40;
  width: 300px; height: 210px;
  pointer-events: none;
  opacity: 0; transform: rotate(8deg) scale(.85);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.plist__preview.on { opacity: 1; transform: rotate(8deg) scale(1); }
.plist__preview img { width: 100%; height: 100%; object-fit: cover; }

.collection__foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 60px; margin-top: 80px;
}
.collection__foot p { max-width: 380px; color: #a8a8a8; font-size: 13.5px; }

/* ═══════════ COLLECTIONS / TIERS ═══════════ */
.tiers { padding: 100px 24px 90px; background: var(--paper); }
.tiers__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 60px;
}
.tiers__head .label { margin-bottom: 14px; }
.tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tier {
  position: relative;
  border: 1px solid rgba(11,11,11,.22);
  border-radius: 14px;
  padding: 28px 26px 26px;
  min-height: 320px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              opacity .9s var(--ease) var(--d,0s);
}
.tier.reveal { transform: translateY(36px); }
.tier.reveal.in { transform: translateY(0); }
.tier:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(11,11,11,.12); }
.tier__num {
  position: absolute; top: -30px; right: 10px;
  font-size: 150px; font-weight: 500; letter-spacing: -.05em;
  color: rgba(11,11,11,.07);
  pointer-events: none;
}
.tier h3 {
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 500; letter-spacing: -.02em;
  margin: auto 0 14px; padding-top: 90px;
}
.tier p { font-size: 13.5px; color: #4c4c4c; margin-bottom: 26px; }
.tier__link {
  margin-top: auto;
  font-size: 13px; font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center;
}
.tier__link span { transition: transform .35s var(--ease); }
.tier:hover .tier__link span { transform: translateX(6px); }
.tier--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tier--dark .tier__num { color: rgba(255,255,255,.1); }
.tier--dark p { color: #a8a8a8; }
.tier--dark .tier__link { color: #e8e8e8; }

/* ═══════════ FAQ ═══════════ */
.faq { padding: 40px 24px 110px; background: var(--paper); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  border-top: 1px solid rgba(11,11,11,.18);
  padding-top: 60px;
}
.faq__copy { color: #4c4c4c; font-size: 14px; max-width: 320px; margin-top: 26px; }
.faq__item { border-bottom: 1px solid rgba(11,11,11,.18); }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--font); text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0;
  font-size: clamp(15px, 1.4vw, 19px); font-weight: 500; letter-spacing: -.01em;
  color: var(--ink);
  transition: padding-left .35s var(--ease);
}
.faq__q:hover { padding-left: 10px; }
.faq__icon {
  flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(11,11,11,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 400;
  transition: transform .45s var(--ease), background .35s, color .35s, border-color .35s;
}
.faq__item.open .faq__icon {
  transform: rotate(45deg);
  background: var(--ink); color: var(--white); border-color: var(--ink);
}
.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height .6s var(--ease);
}
.faq__a p {
  padding: 0 60px 22px 0;
  font-size: 14px; color: #4c4c4c; max-width: 560px;
}

/* ═══════════ TESTIMONIALS (sage) ═══════════ */
.quotes {
  position: relative;
  background: var(--sage);
  margin: 0 24px 22px;
  border-radius: 6px;
  padding: 70px 30px 80px;
  overflow: hidden;
}
.quotes__ghost-num {
  position: absolute; bottom: -80px; left: 20px;
  font-size: clamp(220px, 30vw, 460px);
  font-weight: 500; line-height: 1; letter-spacing: -.05em;
  color: rgba(255,255,255,.14);
  pointer-events: none;
}
.quotes__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}
.quote {
  padding: 26px 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  transition: transform .5s var(--ease), opacity .9s var(--ease) var(--d,0s);
}
.quote:hover { transform: translateY(-4px); }
.quote p {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500; letter-spacing: -.015em; line-height: 1.4;
  margin-bottom: 22px;
}
.quote cite {
  font-style: normal; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.8);
}

/* ═══════════ REQUEST ACCESS ═══════════ */
.request { padding: 100px 24px; background: var(--paper); }
.request__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
}
.request__copy { color: #4c4c4c; font-size: 14px; max-width: 340px; margin-top: 26px; }
.request__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 40px;
  align-content: start;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #7a7a7a; font-weight: 600;
}
.field input, .field select {
  background: none; border: none; outline: none;
  border-bottom: 1px solid rgba(11,11,11,.35);
  padding: 6px 0 10px;
  font-family: var(--font); font-size: 15px; color: var(--ink);
  border-radius: 0;
  transition: border-color .3s;
}
.field input:focus, .field select:focus { border-bottom-color: var(--ink); }
.field input::placeholder { color: #9a9a9a; }
.request__actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 20px;
  margin-top: 6px;
}
.request__note { font-size: 13px; color: #4c4c4c; }

/* ═══════════ FOOTER ═══════════ */
.footer {
  background: var(--ink); color: var(--white);
  padding: 40px 24px 30px;
  overflow: hidden;
}
.footer__top {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: 12.5px; letter-spacing: .04em;
  margin-bottom: 90px;
}
.footer__top span:nth-child(2) { text-align: center; }
.footer__top span:last-child { text-align: right; }
.footer__contact {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 110px;
}
.footer__plus {
  color: #8a8a8a; font-size: 26px; font-weight: 300;
  transition: transform .5s var(--ease);
}
.footer__plus:hover { transform: rotate(90deg); }
.footer__center { text-align: center; }
.footer__phone {
  display: block;
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.08;
  white-space: nowrap;
  transition: color .35s;
}
.footer__phone:hover { color: #bdbdbd; }
.footer__mail {
  display: inline-block; margin-top: 10px;
  color: #e8e8e8;
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 500; letter-spacing: -.02em;
  position: relative;
}
.footer__mail::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: #e8e8e8;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.footer__mail:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__bottom {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #bdbdbd; line-height: 1.7;
  padding-bottom: 40px;
}
.footer__bottom span:nth-child(2) { text-align: center; }
.footer__bottom .footer__links { text-align: right; }
.footer__links a:hover { color: var(--white); }

.footer__wordmark {
  font-size: clamp(44px, 8.6vw, 140px);
  font-weight: 500; letter-spacing: -.05em; line-height: .74;
  color: #1d1d1d;
  white-space: nowrap;
  text-align: center;
  transform: translateY(30%);
  user-select: none;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1000px) {
  .nav__group, .nav__group--right { display: none; }
  .nav__burger { display: flex; }
  .nav__side { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav__brand { grid-column: 2; grid-row: 1; }
  .pcards { grid-template-columns: repeat(3, 1fr); }
  .looking__grid, .beyond__grid, .faq__grid, .request__grid { grid-template-columns: 1fr; padding-left: 0; }
  .looking__agents-label { display: none; }
  .projects__body { grid-template-columns: 1fr; align-items: start; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tiers__grid, .quotes__grid, .beyond__photos { grid-template-columns: 1fr; }
  .tiers__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .collection__foot { flex-direction: column; align-items: flex-start; }
  .collection__foot .big-heading { align-self: flex-end; text-align: right; }
  .plist__preview { display: none; }
  .beyond__services { columns: 1; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 70px; }

  /* header: brand aligns with "Discretion // Precision // Access",
     burger flush with the address's right edge */
  .header { padding: 14px 44px; }
  .nav__brand { grid-column: 1; justify-self: start; }
  .nav__burger { width: 28px; padding: 0; align-items: flex-end; }

  /* hero */
  .hero__media { height: calc(100svh - 48px); min-height: 540px; }
  .hero__wordmark { font-size: 20vw; }
  .hero__meta { top: 78px; font-size: 11px; }
  .hero__meta--left { left: 20px; }
  .hero__meta--right { right: 20px; }
  .hotspot { display: none; }
  .hero__tagline { font-size: 12px; right: 20px; bottom: 20px; }
  .hero__socials { left: 18px; bottom: 18px; }

  /* value prop — reflow: images, heading (w/ ghost 01), search, pills, copy, closing */
  .looking { padding: 20px 18px 70px; display: flex; flex-direction: column; }
  .looking__grid, .looking__left, .looking__right { display: contents; }
  .deck { order: 1; margin: 16px 16px 0; }
  .looking__left > .big-heading { order: 2; margin-top: 34px; }
  .search { order: 3; margin: 30px 0 0; }
  .looking__filters { order: 4; margin: 34px 0 0; }
  .looking__copy { order: 5; margin-top: 34px; }
  .big-heading--right { order: 6; margin-top: 22px; }
  .looking .looking__ghost-num { top: 400px; right: 14px; }
  .looking__ghost-num, .beyond__ghost-num, .quotes__ghost-num { font-size: 42vw; top: -20px; }
  .quotes__ghost-num { top: auto; bottom: -40px; }
  .deck { height: 380px; }
  .deck__card { right: 0; height: 352px; }
  .deck__card[data-pos="1"] { transform: rotate(3deg) translate(6px, -6px); }
  .deck__card[data-pos="2"] { transform: rotate(-3deg) translate(-6px, -5px); }
  .deck__card[data-pos="3"] { transform: rotate(1deg) translate(2px, -8px); }

  /* residences */
  .projects { padding: 70px 24px 60px; }
  .pcards { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 70px; }
  .projects__body { margin-bottom: 70px; }

  /* beyond */
  .beyond { padding: 56px 18px 36px; }
  .beyond__grid { margin-bottom: 50px; }
  .beyond__photos figure { height: 250px; }

  /* markets */
  .collection { padding: 60px 18px 40px; }
  .collection .big-heading { font-size: 40px; }
  .collection__head .label { white-space: nowrap; margin: 0 0 6px; }
  .plist__row { grid-template-columns: 1fr; gap: 4px; }
  .plist__row span:last-child { text-align: left; }

  /* tiers / faq / quotes / request */
  .tiers { padding: 70px 24px 60px; }
  .tier h3 { padding-top: 70px; }
  .faq { padding: 10px 24px 80px; }
  .faq__grid { padding-top: 44px; gap: 30px; }
  .faq__a p { padding-right: 0; }
  .quotes { padding: 50px 18px 60px; }
  .request { padding: 70px 24px; }
  .request__form { grid-template-columns: 1fr; gap: 26px; }

  /* footer */
  .footer__top, .footer__bottom { grid-template-columns: 1fr; gap: 10px; }
  .footer__top span, .footer__bottom span { text-align: center !important; }
  .footer__top { margin-bottom: 56px; }
  .footer__plus { display: none; }
  .footer__contact { justify-content: center; margin-bottom: 64px; }
  .footer__phone { font-size: clamp(26px, 8vw, 40px); }
  .footer__wordmark { font-size: 9vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}