/* =====================================================================
   AGI — Anchored Grace Innovations
   Design system: dark, ivory, brass. Hairlines, not boxes. Slow motion.
   ===================================================================== */

/* ---------- Fonts (self-hosted, see assets/fonts/README.md) ---------- */
@font-face { font-family: "Boska"; src: url("../assets/fonts/boska-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../assets/fonts/boska-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../assets/fonts/boska-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../assets/fonts/boska-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Boska"; src: url("../assets/fonts/boska-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #0B0B0C;
  --ivory: #F4EFE6;
  --muted: #9A948A;
  --brass: #C9A96E;
  --brass-deep: #9E7F47;
  --teal-black: #07110F;
  --hair: rgba(255, 255, 255, 0.12);
  --hair-strong: rgba(255, 255, 255, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Boska", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --ui: "Switzer", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --gutter: 16px;
  --section-y: 96px;
  --lift: 0px;   /* how much of a full-height stage a phone's address bar and toolbar can cover (below) */
}
/* The film stage is as tall as the screen with the browser's bars tucked away, so it never leaves a gap when they
   slide away. While the bars are showing they cover its bottom edge: the captions and buttons sit that much higher. */
@supports (height: 100lvh) {
  :root { --lift: calc(100lvh - 100svh); }
}
@media (min-width: 900px) {
  :root { --gutter: 48px; --section-y: 160px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
html { overflow-x: hidden; }
body { overflow-x: clip; } /* clip, not hidden: hidden would turn the body into a scroll container and break the sticky film stage */
body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
  font-size: clamp(38px, 6.6vw, 82px);
}
.display em { font-style: italic; font-weight: 300; color: var(--brass); }
.display--m { font-size: clamp(32px, 4.7vw, 60px); }
.display--s { font-size: clamp(26px, 3vw, 38px); margin-bottom: 16px; }
.lede { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 560px; margin: 28px 0 0; }
.body { color: var(--muted); max-width: 520px; margin: 0; }

/* ---------- Top bar (shared by intro and site) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  width: 100%;
}
.topbar--site {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  /* over the page: a frosted bar, so headings never run into the logo; over the film: nothing (below) */
  background-color: rgba(11, 11, 12, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 var(--hair);
  transition: opacity 600ms var(--ease), transform 500ms var(--ease), background-color 600ms var(--ease), box-shadow 600ms var(--ease);
}
/* reading down the page the bar tucks away; scrolling back up (or tabbing into it) brings it back */
.topbar--site.is-tucked:not(:focus-within) { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory); opacity: 0.92; }
.brand__mark { width: 18px; height: 18px; color: var(--brass); }
.brand__name { font-family: var(--ui); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; }
.nav { display: none; gap: 32px; }
.nav a {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); opacity: 0.7; transition: opacity 300ms var(--ease);
}
.nav a:hover { opacity: 1; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px;
  border: 1px solid var(--hair-strong); border-radius: 999px;
  font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); white-space: nowrap;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.pill:hover { border-color: var(--brass); }
.pill--icon { padding: 0 12px; }
.pill__bars { position: relative; width: 12px; height: 1px; background: currentColor; display: inline-block; }
.pill__bars::before, .pill__bars::after { content: ""; position: absolute; left: 0; width: 12px; height: 1px; background: currentColor; }
.pill__bars::before { top: -4px; } .pill__bars::after { top: 4px; }
@media (min-width: 900px) { .nav { display: flex; } }
@media (max-width: 899px) { .pill:not(.pill--icon) { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 999px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  transition: transform 600ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.btn--solid { background: var(--brass); color: #141210; }
.btn--solid:hover { background: #D8B97E; }
.btn--ghost { border: 1px solid var(--hair-strong); color: var(--ivory); }
.btn--ghost:hover { border-color: var(--brass); }
.linkbtn { color: var(--muted); font-size: 13px; text-align: left; transition: color 300ms var(--ease); }
.linkbtn:hover { color: var(--ivory); }

/* ---------- Grain and vignette ---------- */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: grain 900ms steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 33% { transform: translate(-8px,6px); } 66% { transform: translate(6px,-8px); } 100% { transform: translate(0,0); }
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

/* =====================================================================
   THE FILM (one continuous scroll-scrubbed reel on a canvas)
   The track is tall; the stage sticks to the viewport while you scroll it.
   ===================================================================== */
.film { position: relative; }
.film__track { position: relative; height: 1000vh; }
.film__stage {
  position: sticky; top: 0; height: 100vh; height: 100lvh;
  overflow: hidden; background: #050506;
}
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(5,5,6,0.55) 0%, rgba(5,5,6,0) 38%);
}

/* progress hairlines */
.film__progress {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 12;
  display: flex; gap: 6px; padding: 0 var(--gutter);
}
.film__progress span { flex: 1; height: 1px; background: var(--hair); position: relative; overflow: hidden; }
.film__progress span i { position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; }

/* two-frame shutter */
.film__flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }

/* 2.39:1 letterbox, hidden on portrait screens */
.film__letterbox {
  position: absolute; left: 0; right: 0; z-index: 7; background: #000;
  height: calc((100vh - (100vw / 2.39)) / 2);
  max-height: 14vh; min-height: 0;
}
.film__letterbox--top { top: 0; }
.film__letterbox--bottom { bottom: 0; }
@media (max-aspect-ratio: 1/1) { .film__letterbox { display: none; } }

/* the drawn vault door, shown only until a filmed vault clip exists */
.vault {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  perspective: 1200px; visibility: hidden;
}
.vault.is-on { visibility: visible; }
.vault__door {
  position: relative; width: min(56vh, 76vw); aspect-ratio: 1;
  transform-origin: 2% 50%;
  transform: rotateY(calc(var(--door, 0) * -92deg));
  transform-style: preserve-3d; backface-visibility: hidden;
}
@media (max-aspect-ratio: 1/1) { .vault__door { width: min(62vh, 84vw); } }
.vault__door svg { width: 100%; height: auto; overflow: visible; display: block; }
.vault__door::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
  opacity: var(--door, 0); pointer-events: none;
}
.vault__wheel { transform-origin: 400px 400px; transform: rotate(calc(var(--wheel, 0) * -165deg)); }
.vault__bolt { transform-origin: 400px 400px; transform: scale(calc(1 - var(--bolt, 0) * 0.12)); opacity: calc(1 - var(--bolt, 0) * 0.3); }
.vault__fog { opacity: 0.55; }
.vault__core { transform-origin: 400px 400px; transform: scale(calc(1 + var(--core, 0) * 1.8)); opacity: calc(0.35 + var(--core, 0) * 0.65); }
.vault__bloom {
  position: absolute; left: 50%; top: 50%;
  width: 40vmax; height: 40vmax; border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(0.02 + var(--bloom, 0) * 4.6));
  background: radial-gradient(circle, #FFF6E2 0%, #F3D9A6 30%, rgba(201,169,110,0.45) 60%, rgba(201,169,110,0) 72%);
  filter: blur(16px);
  opacity: min(1, calc(var(--bloom, 0) * 3));
  pointer-events: none;
}

/* on-screen UI */
.film__ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; color: var(--ivory); }
.film__ui .caption, .film__ui .skip, .film__ui .scrollcue { pointer-events: auto; }
body.is-washed .film__ui { color: #1A1611; }
body.is-washed .skip, body.is-washed .scrollcue, body.is-washed .caption__tag, body.is-washed .caption__line, body.is-washed .hud { color: #1A1611; }
body.is-washed .scrollcue { border-color: rgba(26, 22, 17, 0.28); }
body.is-washed .film__progress span { background: rgba(26, 22, 17, 0.14); }
.film__ui .skip, .film__ui .scrollcue, .film__ui .caption__tag, .film__ui .caption__line, .film__ui .hud { transition: color 900ms var(--ease); }

/* the opening title over the first frames */
.film__title {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  text-align: center; padding: 0 var(--gutter) var(--lift); will-change: opacity, transform;
}
.film__title .eyebrow { margin-bottom: 18px; color: rgba(244,239,230,0.7); }
.film__mark {
  font-family: var(--display); font-weight: 400; font-size: clamp(88px, 16vw, 220px); line-height: 0.9;
  letter-spacing: 0.32em; text-transform: uppercase; margin: 0; padding-left: 0.32em; color: var(--ivory);
}
.film__full { font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(244,239,230,0.7); margin: 24px 0 0; padding-left: 0.32em; }
.film__title .scrollcue { position: static; transform: none; margin-top: 56px; }

/* the shot counter, bottom-left like a camera HUD */
.hud {
  position: absolute; left: var(--gutter); bottom: calc(max(15vh, 56px) + var(--lift));
  display: flex; gap: 18px; align-items: baseline;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,239,230,0.55); opacity: 0; transition: opacity 600ms var(--ease);
  transform: translateY(58px);
}
.hud.is-on { opacity: 1; }
.hud span:last-child { font-variant-numeric: tabular-nums; color: var(--ivory); opacity: 0.85; }

.caption {
  position: absolute; left: var(--gutter); bottom: calc(max(15vh, 56px) + 34px + var(--lift));
  max-width: min(720px, 70vw);
}
.caption__tag {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 14px; opacity: 0; will-change: opacity, filter;
}
.caption__line {
  font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08; letter-spacing: -0.005em; min-height: 1.08em; will-change: opacity;
}
.caption__line .cursor { display: inline-block; width: 1px; height: 0.9em; background: var(--brass); vertical-align: -0.1em; margin-left: 3px; animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.skip {
  position: absolute; right: var(--gutter); bottom: calc(max(15vh, 56px) + var(--lift));
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.8; transition: opacity 300ms var(--ease);
}
.skip:hover { opacity: 1; }
.skip span { margin-left: 4px; }

.scrollcue {
  position: absolute; left: 50%; bottom: calc(max(15vh, 56px) + var(--lift)); transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-strong);
  display: grid; place-items: center; color: inherit;
  animation: pulse 2600ms var(--ease) infinite;
}
.scrollcue svg { width: 14px; height: 14px; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,239,230,0); } 50% { box-shadow: 0 0 0 8px rgba(244,239,230,0.06); } }
@media (max-width: 760px) {
  .caption { bottom: calc(150px + var(--lift)); max-width: 86vw; }
  .caption__line { font-size: clamp(26px, 7.4vw, 34px); }
  .hud { bottom: calc(108px + var(--lift)); transform: none; }
  .skip { bottom: calc(72px + var(--lift)); }
  .film__title .scrollcue { margin-top: 40px; }
}

/* the wash and the wordmark, driven by --reveal on the stage */
.reveal {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; align-content: center; gap: 0;
  text-align: center; padding-bottom: var(--lift);
  background: radial-gradient(circle at 50% 50%, #FFF8E8 0%, #F5E2BC 45%, #E9CD98 100%);
  opacity: var(--reveal, 0); pointer-events: none;
}
.reveal__word {
  font-family: var(--display); font-size: clamp(64px, 9vw, 132px); font-weight: 400; line-height: 1;
  letter-spacing: 0.42em; text-transform: uppercase; color: #1A1611; padding-left: 0.42em;
  opacity: var(--word, 0); transform: translateY(calc((1 - var(--word, 0)) * 10px));
}
.reveal__full {
  font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: #7A5E33; margin-top: 22px; padding-left: 0.32em;
  opacity: var(--full, 0);
}
.reveal__sub {
  font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.7vw, 24px);
  color: #5B4B2E; margin-top: 14px;
  opacity: var(--sub, 0);
}

/* the fixed site bar over the film: no dark band on the film, dark text on the wash */
body.in-film .topbar--site, body.is-washed .topbar--site {
  background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.is-washed .topbar--site .brand, body.is-washed .topbar--site .nav a, body.is-washed .topbar--site .pill { color: #1A1611; }
body.is-washed .topbar--site .brand__mark { color: #7A5E33; }
body.is-washed .topbar--site .pill { border-color: rgba(26, 22, 17, 0.28); }
.topbar--site .brand, .topbar--site .nav a, .topbar--site .pill, .topbar--site .brand__mark { transition: color 900ms var(--ease), border-color 900ms var(--ease), opacity 300ms var(--ease); }

/* loading curtain: the first shot decodes behind it */
.loader {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: grid; place-items: center; align-content: center; gap: 22px; text-align: center;
  transition: opacity 900ms var(--ease), visibility 0s linear 900ms;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 0.42em; padding-left: 0.42em; color: var(--ivory); }
.loader__track { width: 160px; height: 1px; background: var(--hair); overflow: hidden; }
.loader__fill { height: 100%; width: 0; background: var(--brass); transition: width 200ms linear; }
.loader__label { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

/* =====================================================================
   SITE
   ===================================================================== */
.site { position: relative; }

.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 160px 0 var(--section-y); overflow: hidden;
}
.hero__bg {
  position: absolute; inset: -10% 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.62; will-change: transform;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-top: 1px solid var(--hair); padding: 14px 0; overflow: hidden; background: linear-gradient(to top, rgba(11,11,12,0.7), rgba(11,11,12,0)); }
.marquee { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: marquee 48s linear infinite; }
.marquee span { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); opacity: 0.85; padding: 0 28px; }
.marquee span::after { content: "·"; margin-left: 56px; opacity: 0.5; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 10%, rgba(11,11,12,0.6) 50%, rgba(11,11,12,0.3) 100%),
    linear-gradient(to right, rgba(11,11,12,0.7) 0%, rgba(11,11,12,0.3) 55%, rgba(11,11,12,0) 100%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.section { padding: var(--section-y) 0; }
.section--hairline { border-top: 1px solid var(--hair); }
.section__head { margin-bottom: 56px; max-width: 760px; }
.section__head--split { display: grid; gap: 24px; max-width: none; }
@media (min-width: 900px) {
  .section__head--split { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.section__note { color: var(--muted); max-width: 380px; margin: 0; }

/* Pillars */
.pillars__grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars__grid { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px;
  display: flex; align-items: flex-end; padding: 22px;
  background: #0f0f10;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 700ms var(--ease), box-shadow 900ms var(--ease);
}
.pillar__media, .pillar__video { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; background-size: cover; background-position: center; transition: transform 1400ms var(--ease), opacity 700ms var(--ease); }
.pillar__video { opacity: 0; }
.pillar.is-playing .pillar__video { opacity: 1; }
.pillar:hover .pillar__media, .pillar:hover .pillar__video { transform: scale(1.04); }
.pillar::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.08) 55%);
}
.pillar__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(244,239,230,0.14), transparent 60%); transition: opacity 600ms var(--ease); }
.pillar:hover .pillar__sheen { opacity: 1; }
.pillar__text { position: relative; z-index: 3; transform: translateZ(24px); }
.pillar .eyebrow { margin-bottom: 8px; color: rgba(244,239,230,0.6); }
.pillar__line { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--ivory); margin: 0; }
.pillar:hover { box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9); }

/* Residences cards */
.cards { display: grid; gap: 24px; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  transition: transform 1000ms var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card__media {
  position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
  background: #0f0f10;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9);
  transition: box-shadow 1200ms var(--ease);
}
.card__img { position: absolute; left: 0; right: 0; top: -8%; height: 116%; width: 100%; object-fit: cover; will-change: transform; transition: transform 1400ms var(--ease); }
.card:hover .card__img { transform: scale(1.03) translateY(var(--py, 0)); }
.card:hover .card__media { box-shadow: 0 46px 70px -30px rgba(0,0,0,0.95); }
.card__body { padding-top: 20px; display: grid; gap: 6px; }
.card__name { font-family: var(--display); font-size: 27px; font-weight: 400; margin: 0; }
.card__loc { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.card__desc { color: var(--muted); margin: 6px 0 0; }
.card__price { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ivory); }
.card__price span:last-child { color: var(--brass); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }

/* Turntable: scrolling with the pointer on the picture, or dragging it, turns the residence. */
.turntable { margin-top: 96px; }
.turntable[hidden] { display: none; }
/* as wide as the column allows while the whole picture fits on the screen */
.turntable__frame { width: min(100%, calc((100vh - 140px) * 16 / 9)); width: min(100%, calc((100svh - 140px) * 16 / 9)); margin: 0 auto; }
.turntable__head { display: grid; gap: 8px; margin-bottom: 24px; }
.turntable__hint { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 8px 0 0; }
.turntable__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: #0f0f10; cursor: grab; touch-action: pan-y; user-select: none; }
.turntable__stage.is-dragging { cursor: grabbing; }
.turntable__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.turntable__cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,239,230,0.75); padding: 8px 16px; border: 1px solid var(--hair-strong); border-radius: 999px; background: rgba(11,11,12,0.35); backdrop-filter: blur(6px); transition: opacity 600ms var(--ease); pointer-events: none; }
.turntable__stage.is-used .turntable__cue { opacity: 0; }
@media (max-width: 760px) {
  .turntable__stage { aspect-ratio: 4 / 3; }   /* a bigger residence to turn on a phone */
  .turntable__frame { width: min(100%, calc((100vh - 140px) * 4 / 3)); width: min(100%, calc((100svh - 140px) * 4 / 3)); }
}

/* Privileges */
.privs { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 900px) { .privs { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
.privs li {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--hair);
}
.privs li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair); }
@media (max-width: 899px) { .privs li:last-child { border-bottom: 1px solid var(--hair); } .privs li:nth-last-child(2) { border-bottom: 0; } }
.privs__n { font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--brass); line-height: 1.2; }
.privs__t { font-size: 17px; margin: 0 0 6px; }
.privs__d { color: var(--muted); margin: 0; }

/* Interludes: full-bleed looping clips with copy */
.interlude { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: #050506; }
.interlude__video { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; opacity: 0; transition: opacity 1200ms var(--ease); will-change: transform; }
.interlude__video.is-ready { opacity: 1; }
.interlude__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,5,6,0.82) 0%, rgba(5,5,6,0.45) 45%, rgba(5,5,6,0.08) 100%); }
.interlude--right .interlude__scrim { background: linear-gradient(to left, rgba(5,5,6,0.82) 0%, rgba(5,5,6,0.45) 45%, rgba(5,5,6,0.08) 100%); }
.interlude__copy { position: relative; padding-top: var(--section-y); padding-bottom: var(--section-y); }
.interlude__copy .body { max-width: 460px; margin-top: 24px; color: rgba(244,239,230,0.78); }
.interlude--right .interlude__copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.interlude--right .interlude__copy .body { text-align: right; }
@media (max-width: 760px) {
  /* on a phone the copy spans the whole width: darken from the bottom, where it sits, not from one side */
  .interlude { align-items: flex-end; }
  .interlude__scrim, .interlude--right .interlude__scrim { background: linear-gradient(to top, rgba(5,5,6,0.9) 0%, rgba(5,5,6,0.6) 45%, rgba(5,5,6,0.12) 100%); }
}

/* Membership */
.membership { position: relative; overflow: hidden; }
.membership__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1200ms var(--ease); }
.membership__video.is-ready { opacity: 0.55; }
.membership__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,11,12,0.6) 0%, rgba(11,11,12,0.92) 60%, rgba(11,11,12,0.97) 100%); }
.membership__inner { position: relative; display: grid; gap: 56px; }
.membership__inner .body { margin-top: 24px; }
@media (min-width: 900px) { .membership__inner { grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; } }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field span { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong);
  color: var(--ivory); font: inherit; font-size: 16px; padding: 10px 0; border-radius: 0; resize: vertical;
  transition: border-color 300ms var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); }
.field.is-invalid input { border-color: #B3634E; }
.field.is-invalid span { color: #C9856F; }
.form__fine { font-size: 12px; color: var(--muted); margin: 0; }
.form__fine--demo { color: var(--brass); opacity: 0.8; }
.form__done { font-family: var(--display); font-size: 27px; font-weight: 400; line-height: 1.3; }
.form__done em { color: var(--brass); font-style: italic; }

/* Footer */
.footer { border-top: 1px solid var(--hair); padding: 72px 0 32px; }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__tag { color: var(--muted); margin: 14px 0 0; font-size: 13px; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col a { color: var(--muted); font-size: 13px; transition: color 300ms var(--ease); }
.footer__col a:hover { color: var(--ivory); }
.footer__col .eyebrow { margin-bottom: 6px; }
.footer__demo { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hair); }
.footer__demo p { margin: 0; font-size: 12px; color: var(--brass); opacity: 0.85; max-width: 720px; }
.footer__demo p[hidden] { display: none; }
.footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; color: var(--muted); font-size: 12px; }

/* Menu */
.menu {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 11, 12, 0.97);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 var(--gutter) 40px;
  overflow-y: auto; overscroll-behavior: contain;   /* short screens (a phone on its side) scroll the menu itself */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 600ms var(--ease), visibility 0s linear 600ms;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 600ms var(--ease), visibility 0s; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
@media (max-width: 760px) { .topbar, .menu__bar { padding-top: 14px; padding-bottom: 14px; } }
.menu__nav { display: grid; gap: 4px; align-content: center; flex: 1; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 20px;
  font-family: var(--display); font-weight: 300; font-size: clamp(32px, 5vw, 60px); line-height: 1.12;
  color: var(--ivory); padding: 8px 0; border-bottom: 1px solid var(--hair);
  opacity: 0; transform: translateY(14px);
  transition: color 300ms var(--ease), opacity 800ms var(--ease), transform 800ms var(--ease);
}
.menu__nav a:hover { color: var(--brass); }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: 60ms; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: 120ms; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: 180ms; }
.menu.is-open .menu__nav a:nth-child(5) { transition-delay: 240ms; }
.menu__n { font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; color: var(--brass); min-width: 28px; }
.menu__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 32px; }
.menu__tag { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; text-align: right; }
@media (max-width: 699px) { .menu__tag { text-align: left; } }

/* Scroll reveals */
.reveal-up { opacity: 0; transform: translateY(18px); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); }
.reveal-up.is-in { opacity: 1; transform: none; }
.reveal-lines .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.reveal-lines .w > span { display: inline-block; transform: translateY(110%); transition: transform 1100ms var(--ease); transition-delay: var(--d, 0ms); }
.reveal-lines.is-in .w > span { transform: none; }
.tilt { transition: transform 700ms var(--ease); }
.tilt.is-tilting { transition: transform 120ms linear; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal-up { opacity: 1; transform: none; }
  .grain { animation: none; }
  .menu__nav a { opacity: 1; transform: none; }
  .marquee { animation: none; }
  .reveal-lines .w > span { transform: none; }
}