/* ============================================================
   SOLIS ESTATE — cinematic fullscreen demo
   Deep-green / cream palette · oversized serif · split-screen
   transitions · pinned scroll deck (GSAP + ScrollTrigger + Lenis)
   ============================================================ */

:root {
  --green-deep: #0b2b26;
  --green-deep-rgb: 11, 43, 38;
  --green: #163a35;
  --green-rgb: 22, 58, 53;
  --green-soft: #1e4a43;
  --cream: #f4f1ea;
  --cream-rgb: 244, 241, 234;
  --gold: #c9b18c;

  --font-serif: "Cormorant Garamond", "Instrument Serif", Georgia, serif;
  --font-sans: "Hanken Grotesk", Helvetica, Arial, sans-serif;

  --fs-display: clamp(3.75rem, 9.5vw, 10.5rem);
  --fs-h2: clamp(2.25rem, 4.6vw, 4.75rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.5rem);
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);
  --fs-caption: clamp(0.6875rem, 0.85vw, 0.78rem);

  --gutter: clamp(1.5rem, 4vw, 4.5rem);

  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);   /* ~power3.inOut */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* ~power4.out  */
}

/* ---------------------------------------------------------- */
/* base                                                        */
/* ---------------------------------------------------------- */

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

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--cream);
  background: var(--green-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--cream);
  color: var(--green-deep);
}

/* film grain */
.grain {
  position: fixed;
  inset: -100px;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- */
/* typography                                                  */
/* ---------------------------------------------------------- */

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: 0;
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.12;
}

.caption {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.caption--dim { opacity: 0.55; }

.text-dim { opacity: 0.72; }

/* manual line reveal wrapper */
.line {
  display: block;
  overflow: hidden;
}

.line > span {
  display: block;
  will-change: transform;
}

/* ---------------------------------------------------------- */
/* buttons                                                     */
/* ---------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  height: clamp(2.75rem, 3.6vw, 3.25rem);
  padding: 0 clamp(1.6rem, 2.4vw, 2.4rem);
  border: 1px solid rgba(var(--cream-rgb), 0.35);
  border-radius: 100rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  overflow: hidden;
  white-space: nowrap;
  transition: color 0.45s var(--ease-io), border-color 0.45s var(--ease-io);
}

.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--cream);
  transform: translateY(103%);
  transition: transform 0.55s var(--ease-io);
}

.btn > * { position: relative; z-index: 1; }

.btn:hover { color: var(--green-deep); border-color: var(--cream); }
.btn:hover::before { transform: translateY(0); }

.btn--dark {
  border-color: rgba(var(--green-deep-rgb), 0.4);
  color: var(--green-deep);
}
.btn--dark::before { background: var(--green-deep); }
.btn--dark:hover { color: var(--cream); border-color: var(--green-deep); }

.link-line {
  position: relative;
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 0.4em;
}

.link-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-io);
}

.link-line:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* ---------------------------------------------------------- */
/* header                                                      */
/* ---------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--gutter);
  color: var(--cream);
}

/* glass panel materializes after the first scroll */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 25, 22, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 1s var(--ease-io);
}

.header.is-glass::before { opacity: 1; }

.btn--small {
  height: 2.5rem;
  padding: 0 1.4rem;
}

.header__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.header__icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.4s var(--ease-io), transform 0.4s var(--ease-io);
}

.header__icon:hover { opacity: 1; transform: scale(1.12); }
.header__icon svg { width: 100%; height: 100%; }

.header__logo svg {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.3em;
  vertical-align: -0.08em;
}

.header__left {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* .link-line carries padding-bottom for its underline, so centring the
   whole box lifts the label above its neighbours by half that padding.
   Pulling the margin box back in centres it on the text itself. */
.header__left .link-line,
.header__right .link-line,
.menu__bar-side .link-line {
  margin-bottom: -0.4em;
}

.header__right { justify-self: end; }

.header__logo {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.header__logo sup {
  font-family: var(--font-sans);
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  vertical-align: super;
  margin-left: 0.45em;
  opacity: 0.7;
}

/* burger */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.burger i {
  position: relative;
  display: block;
  width: 1.6rem;
  height: 0.7rem;
}

.burger i::before,
.burger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--ease-io), top 0.45s var(--ease-io), bottom 0.45s var(--ease-io);
}

.burger i::before { top: 0; }
.burger i::after { bottom: 0; }

.burger:hover i::before { transform: translateX(0.2rem); }
.burger:hover i::after { transform: translateX(-0.2rem); }

/* ---------------------------------------------------------- */
/* loader                                                      */
/* ---------------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 60%, #071e1a 100%);
}

.loader__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  line-height: 1;
  color: var(--cream);
  opacity: 0;
  transform: scale(0.95);
}

.loader__logo svg {
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.16em;
  align-self: flex-start;
  margin-top: 0.1em;
}

.loader__studio {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.5);
  opacity: 0;
}

.loader__studio a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 177, 140, 0.4);
  padding-bottom: 0.15em;
  transition: color 0.4s var(--ease-io), border-color 0.4s var(--ease-io);
}

.loader__studio a:hover {
  color: var(--cream);
  border-color: var(--cream);
}

/* loading progress — also tells the user assets are being fetched */
.loader__bar {
  position: absolute;
  bottom: clamp(2.5rem, 8vh, 5rem);
  left: 50%;
  width: min(14rem, 36vw);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(var(--cream-rgb), 0.15);
  overflow: hidden;
}

.loader__bar i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

/* page-transition curtain (flat) */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: var(--green-deep);
  transform: translateY(103%);
  pointer-events: none;
  visibility: hidden;
}

/* ---------------------------------------------------------- */
/* deck / stage / slides                                       */
/* ---------------------------------------------------------- */

.deck {
  position: relative;
  height: 960vh; /* 100vh stage + 860vh of scrubbed timeline, kept at a
                    constant ~78vh per timeline unit. The wheel drives the
                    scenes directly, so this needs real travel: too short
                    and every scene flashes past in two clicks. */
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
}

.slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.slide--hero { visibility: visible; }

.half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  will-change: transform;
}

.half--left { left: 0; }
.half--right { right: 0; }

.half__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
}

/* ---------------------------------------------------------- */
/* slide 1 — hero collage                                      */
/* ---------------------------------------------------------- */

.s-hero {
  background: radial-gradient(120% 120% at 70% 20%, var(--green) 0%, var(--green-deep) 55%, #071e1a 100%);
}

/* full-bleed tilted mosaic in three horizontal bands;
   the middle band drifts right, the outer bands drift left.
   Big square-ish tiles, wide even gaps, steep diagonal. */
.hero__plane {
  position: absolute;
  inset: -38% -30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 2.4vw, 46px);
  transform: rotate(-15deg);
  will-change: transform, opacity;
}

.hero__row {
  display: flex;
  gap: clamp(26px, 2.4vw, 46px);
  flex: none;
  height: 58vh;
  will-change: transform;
}

/* no permanent will-change here: sixty promoted layers (thirty tiles
   plus their images) stay resident for the whole session and starve
   later scenes of GPU memory. GSAP promotes them while tweening. */
.tile {
  position: relative;
  flex: none;
  width: 30vw;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 26px);
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--green-deep-rgb), 0.42);
}

.tile img {
  transform: scale(1.1);
  filter: saturate(0.8);
}

.hero__text {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero__card {
  position: absolute;
  left: clamp(2rem, 17vw, 22rem);
  top: 44vh;
  max-width: 26rem;
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: rgba(var(--cream-rgb), 0.95);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.hero__title {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 6vh, 4rem);
  text-align: right;
  color: #efe6d4;
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.35);
}

/* circled arrow, bottom-left */
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2rem, 6vh, 3.5rem);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--cream-rgb), 0.35);
  border-radius: 50%;
  color: rgba(var(--cream-rgb), 0.85);
  overflow: hidden;
}

.hero__scroll i {
  font-style: normal;
  animation: scrollhint 2.4s var(--ease-io) infinite;
}

@keyframes scrollhint {
  0% { transform: translateY(-160%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(160%); }
}

/* ---------------------------------------------------------- */
/* slide 2 — residence (green left / photo right)              */
/* ---------------------------------------------------------- */

/* full-bleed render rising from below, cream text overlay on the left */
.s-residence {
  will-change: clip-path;
}

.s-residence__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.s-residence__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(var(--green-deep-rgb), 0.55) 0%, rgba(var(--green-deep-rgb), 0.12) 55%, transparent 100%);
}

.s-residence__bg img {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.s-residence__bg img + img { opacity: 0; }

.residence__content {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-54%);
  width: min(46rem, calc(100vw - 2 * var(--gutter)));
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.residence__title {
  color: #f2ecdd;
  font-size: clamp(2rem, 4vw, 4.25rem);
}

.residence__caption {
  margin-top: clamp(1.75rem, 4.5vh, 3rem);
  margin-left: clamp(0rem, 6vw, 7rem);
  max-width: 30rem;
  color: rgba(var(--cream-rgb), 0.85);
  line-height: 2;
}

/* ---------------------------------------------------------- */
/* slide 3 — lifestyle                                         */
/* ---------------------------------------------------------- */

/* identical gradient to the residence panel → the content swap
   reads as "the left column rebuilt itself", not a new section */
.s-lifestyle .half--left {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 80%);
  box-shadow: 30px 0 80px rgba(0, 0, 0, 0.35);
}

/* The render is uncovered by a mask rising from the bottom while the
   column itself stays pinned. Built from transforms, not clip-path:
   clip-path repaints the whole clipped surface every frame (here half
   the viewport), which is exactly what made this transition stutter.
   The mask slides up, the inner layer slides down by the same amount,
   so the picture appears to stand still while being revealed. */
/* No start offset here on purpose: GSAP establishes it. A transform in
   CSS would be parsed and then ADDED to GSAP's yPercent, doubling the
   travel, and it would leave the render permanently hidden on mobile,
   where the deck is never built. */
.lifestyle__render {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.lifestyle__render-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.s-lifestyle .half--right img {
  transform: scale(1.08);
  will-change: transform;
}

/* Composition per reference: title indented to the right and drawn
   OVER the portrait, which sits at the left gutter; paragraph rests
   at the bottom with generous air between. */
.s-lifestyle .half__inner {
  justify-content: flex-start;
  padding-top: clamp(8rem, 24vh, 15rem);
  will-change: transform;
}

.lifestyle__caption { margin-left: clamp(0rem, 13vw, 15rem); }

.lifestyle__title {
  position: relative;
  z-index: 2;
  color: var(--cream);
  max-width: 16ch;
  margin-left: clamp(0rem, 13vw, 15rem);
}

/* same transform-only curtain as the render, three layers deep:
   the figure is the fixed window, the mask rises, the inner layer
   counter-slides so the photo holds its place while it appears */
.lifestyle__photo {
  position: relative;
  z-index: 1;
  width: clamp(12rem, 21vw, 19rem);
  aspect-ratio: 1;
  margin-top: clamp(-6rem, -9vh, -2.5rem);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.lifestyle__photo-mask,
.lifestyle__photo-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.lifestyle__text {
  margin-top: clamp(2.5rem, 9vh, 6rem);
  max-width: 30rem;
  color: rgba(var(--cream-rgb), 0.75);
}

/* ---------------------------------------------------------- */
/* slide 4 — wellness (fullscreen portrait)                    */
/* ---------------------------------------------------------- */

/* transparent slide: the previous scene stays visible until the
   portrait mask rises over it (fixes the green-flash bug) */
.s-wellness { background: transparent; }

.wellness__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
}

.wellness__media img {
  transform: scale(1.15);
  filter: brightness(0.9);
  will-change: transform, filter;
}

.wellness__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(var(--green-deep-rgb), 0.15) 40%, rgba(var(--green-deep-rgb), 0.75) 100%),
              linear-gradient(rgba(var(--green-deep-rgb), 0.25), transparent 30%, rgba(var(--green-deep-rgb), 0.55));
}

.wellness__content {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(2.5rem, 9vh, 5.5rem);
  text-align: right;
  will-change: transform;
}

.wellness__title {
  font-size: clamp(4.5rem, 12vw, 12.5rem);
  line-height: 0.9;
  color: var(--cream);
}

.wellness__badge {
  margin-bottom: 1.5rem;
  color: rgba(var(--cream-rgb), 0.75);
}

.wellness__text {
  margin-top: 1.75rem;
  margin-left: auto;
  max-width: 24rem;
  color: rgba(var(--cream-rgb), 0.8);
}

/* ---------------------------------------------------------- */
/* slide 5 — amenities (photo left / dark list right)          */
/* ---------------------------------------------------------- */

.s-amenities .half--right {
  background: linear-gradient(200deg, var(--green) 0%, var(--green-deep) 85%);
}

.amenities__figures {
  position: absolute;
  inset: 0;
}

.amenities__figures figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
}

.amenities__figures figure img {
  transform: scale(1.06);
  will-change: transform;
}

.amenities__figures figure:not(:first-child) {
  clip-path: inset(100% 0 0 0); /* incoming photo pushes up from below */
}

.amenities__list {
  list-style: none;
  counter-reset: amen;
}

.amenities__list li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.3;
  color: var(--cream);
  opacity: 0.3;
  transform: translateX(0);
  transition: none; /* driven by GSAP */
  will-change: opacity, transform;
}

.amenities__list li::before {
  counter-increment: amen;
  content: "0" counter(amen);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

.amenities__texts {
  position: relative;
  margin-top: clamp(2rem, 5vh, 3rem);
  min-height: 5.5em;
  max-width: 24rem;
}

.amenities__texts p {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  color: rgba(var(--cream-rgb), 0.75);
  opacity: 0;
  will-change: opacity, transform;
}

.amenities__texts p:first-child { opacity: 1; }

.amenities__index {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2rem, 6vh, 3.5rem);
  z-index: 3;
  color: var(--cream);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.25em;
}

/* ---------------------------------------------------------- */
/* slide 6 — contact                                           */
/* ---------------------------------------------------------- */

.s-contact .half--left {
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-contact .half--right {
  background: var(--green-deep);
}

.contact__art {
  position: relative;
  width: min(30vw, 46vh);
  aspect-ratio: 1;
  animation: artspin 26s linear infinite alternate;
  will-change: transform;
}

@keyframes artspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(12deg); }
}

/* glass ribbon: translucent rings with inner highlights */
.contact__art i {
  position: absolute;
  inset: 0;
  border-radius: 44% 56% 58% 42% / 50% 44% 56% 50%;
  border: clamp(14px, 1.8vw, 26px) solid transparent;
  background:
    linear-gradient(rgba(22, 58, 53, 0.15), rgba(22, 58, 53, 0.15)) padding-box,
    linear-gradient(135deg, rgba(120, 190, 165, 0.85) 0%, rgba(34, 80, 68, 0.4) 45%, rgba(160, 220, 195, 0.7) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 30px 80px rgba(0, 0, 0, 0.35);
  filter: blur(0.4px);
}

.contact__art i:nth-child(2) {
  inset: 14%;
  border-radius: 58% 42% 46% 54% / 44% 58% 42% 56%;
  border-width: clamp(10px, 1.3vw, 18px);
  background:
    linear-gradient(rgba(22, 58, 53, 0.05), rgba(22, 58, 53, 0.05)) padding-box,
    linear-gradient(300deg, rgba(150, 215, 188, 0.75) 0%, rgba(30, 74, 67, 0.35) 55%, rgba(201, 177, 140, 0.45) 100%) border-box;
  animation: artspin 21s linear infinite alternate-reverse;
  filter: blur(0.6px);
}

.contact__art i:nth-child(3) {
  inset: 32%;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 38% 32%, rgba(201, 177, 140, 0.35), rgba(120, 190, 165, 0.12) 55%, transparent 75%);
  box-shadow: none;
  filter: blur(8px);
}

.contact__art figcaption {
  position: absolute;
  left: 50%;
  bottom: -18%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.4);
}

.contact__form-wrap {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

.contact__title { color: var(--cream); margin: 1.25rem 0 clamp(1.75rem, 4.5vh, 3rem); }

.field { margin-bottom: clamp(1.25rem, 3.2vh, 2rem); will-change: transform, opacity; }

.field label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.45);
  margin-bottom: 0.5rem;
}

.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--cream-rgb), 0.25);
  border-radius: 0;
  padding: 0.7rem 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  color: var(--cream);
  transition: border-color 0.45s var(--ease-io);
  resize: none;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(var(--cream-rgb), 0.85);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(var(--cream-rgb), 0.3); }

.contact__submit {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
  will-change: transform, opacity;
}

.contact__note {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.4);
  line-height: 1.8;
}

.contact__legal {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.25rem, 3vh, 2rem);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.35);
}

.form-success { display: none; color: var(--cream); }

/* studio credit — present, never loud */
.credit {
  position: relative;
  color: rgba(var(--cream-rgb), 0.55);
  transition: color 0.45s var(--ease-io);
}

.credit::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-io);
}

.credit:hover { color: var(--cream); }

.credit:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* ---------------------------------------------------------- */
/* fullscreen menu overlay                                     */
/* ---------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  visibility: hidden;
}

.menu__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  will-change: transform;
}

.menu__half--left {
  left: 0;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 75%);
  display: flex;
  align-items: center;
  padding: var(--gutter);
  transform: translateX(-100%);
}

.menu__half--right {
  right: 0;
  background: var(--green-deep);
  transform: translateX(100%);
}

.menu__imgs { position: absolute; inset: 0; }

.menu__imgs figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  will-change: clip-path;
}

.menu__imgs figure:first-child { clip-path: inset(0); }

.menu__imgs figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--green-deep-rgb), 0.25);
}

.menu__imgs img { transform: scale(1.08); will-change: transform; }

.menu__nav { list-style: none; }

.menu__nav li { overflow: hidden; }

.menu__nav a {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.25;
  color: rgba(var(--cream-rgb), 0.55);
  transform: translateY(110%);
  transition: color 0.45s var(--ease-io), translate 0.45s var(--ease-io);
  will-change: transform;
}

.menu__nav a:hover,
.menu__nav a.is-hover {
  color: var(--cream);
  translate: 0.4rem 0;
}

/* menu keeps the site header layout: close ✕ and Residences on the
   left, logo centred, Contact us on the right */
.menu__bar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--gutter);
  color: var(--cream);
}

.menu__bar-side {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.menu__bar-side--end { justify-self: end; }

.menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--cream);
  transition: transform 0.6s var(--ease-io), opacity 0.45s var(--ease-io);
}

.menu__close svg { width: 100%; height: 100%; }

.menu__close:hover { transform: rotate(90deg); opacity: 0.7; }

/* ---------------------------------------------------------- */
/* contact modal                                               */
/* ---------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  background: rgba(var(--green-deep-rgb), 0.55);
  backdrop-filter: blur(10px);
}

.modal__panel {
  position: relative;
  width: min(64rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(46rem, 90vh);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  background: var(--green-deep);
  border: 1px solid rgba(var(--cream-rgb), 0.1);
  overflow: hidden;
  transform: translateY(-40px);
}

.modal__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 80%);
  overflow: hidden;
}

.modal__art .contact__art { width: 60%; }

.modal__body {
  padding: clamp(2rem, 4.5vw, 3.5rem);
  overflow-y: auto;
}

.modal__tabs {
  display: flex;
  gap: 0.6rem;
  margin: 1.25rem 0 clamp(1.5rem, 3.5vh, 2.5rem);
}

.modal__tabs .btn.is-active {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--green-deep);
}

.modal__tabs .btn.is-active::before { display: none; }

.modal__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--cream-rgb), 0.3);
  border-radius: 50%;
  color: var(--cream);
  transition: transform 0.6s var(--ease-io), background 0.45s var(--ease-io), color 0.45s var(--ease-io);
}

.modal__close:hover {
  transform: rotate(90deg);
  background: var(--cream);
  color: var(--green-deep);
}

[data-mode="callback"] .only-request { display: none; }
[data-mode="request"] .only-callback { display: none; }

/* ---------------------------------------------------------- */
/* residences page                                             */
/* ---------------------------------------------------------- */

.page {
  min-height: 100vh;
  background: var(--green-deep);
  padding: clamp(8rem, 20vh, 12rem) var(--gutter) clamp(4rem, 8vh, 6rem);
}

.page .container { max-width: 90rem; margin: 0 auto; }

.res-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: clamp(2rem, 5vh, 3.5rem) 0;
}

.res-filter .btn.is-active {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--green-deep);
}

.res-filter .btn.is-active::before { display: none; }

.units {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.unit {
  border: 1px solid rgba(var(--cream-rgb), 0.14);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: border-color 0.5s var(--ease-io), background 0.5s var(--ease-io);
}

.unit:hover {
  border-color: rgba(var(--cream-rgb), 0.45);
  background: rgba(var(--cream-rgb), 0.03);
}

.unit.is-filtered-out { display: none; }

.unit__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.unit__plan {
  aspect-ratio: 1 / 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: rgba(var(--cream-rgb), 0.85);
}

.unit__plan svg { width: 100%; height: 100%; transition: transform 0.9s var(--ease-io); }
.unit:hover .unit__plan svg { transform: scale(1.06); }

.unit__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
  border-top: 1px solid rgba(var(--cream-rgb), 0.14);
  padding-top: 1.1rem;
}

.unit__specs dt {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.45);
}

.unit__specs dd {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  color: var(--cream);
}

.page-foot {
  margin-top: clamp(4rem, 9vh, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--cream-rgb), 0.12);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.35);
}

[data-reveal] { opacity: 0; transform: translateY(30px); }

/* ---------------------------------------------------------- */
/* mobile / no-deck fallback                                   */
/* ---------------------------------------------------------- */

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .deck { height: auto; }
  .stage { position: static; height: auto; overflow: visible; }

  .slide {
    position: relative;
    inset: auto;
    visibility: visible;
    min-height: 100svh;
  }

  .half {
    position: relative;
    width: 100%;
    min-height: 60svh;
    transform: none !important;
  }

  .half__inner { position: relative; padding: var(--gutter); }

  .s-residence .half--right,
  .s-lifestyle .half--right,
  .s-amenities .half--left { min-height: 50svh; }

  .slide { display: flex; flex-direction: column; }
  .s-amenities { flex-direction: column-reverse; }

  .hero__plane { inset: -30% -40%; }
  .tile { width: 44vw; }

  .s-hero { min-height: 100svh; }
  .hero__card { display: none; }

  .residence__content {
    position: relative;
    inset: auto;
    transform: none;
    padding: var(--gutter);
  }

  .s-residence__bg { position: absolute; }
  .s-residence { min-height: 100svh; }

  .wellness__media { position: absolute; }
  .s-wellness { min-height: 100svh; }

  .amenities__figures { position: relative; height: 50svh; }
  .amenities__figures figure { clip-path: none !important; opacity: 0; transition: opacity 0.8s var(--ease-io); }
  .amenities__figures figure.is-active { opacity: 1; }

  .amenities__list li { cursor: pointer; }

  .contact__legal { position: relative; inset: auto; margin-top: 3rem; flex-direction: column; gap: 0.5rem; }

  .menu__half { width: 100%; }
  .menu__half--right { display: none; }

  .modal__panel { grid-template-columns: 1fr; }
  .modal__art { display: none; }

  .header__left .link-line { display: none; }
}