/* =========================================================================
   VILLA MONPORT — Luxury One-Pager
   Design system: warm ink + ivory + champagne. Display: Syne / Body: Manrope.
   ========================================================================= */

/* ----------------------------------------------------------------- Tokens */
:root{
  --ink:        #14110D;
  --ink-2:      #1c1813;
  --ink-3:      #241f18;
  --paper:      #F4EFE6;
  --paper-2:    #EAE2D3; /* sand panel */
  --sand:       #E8E0D0;
  --muted:      #8b8170;
  --muted-ink:  #b6ab96;   /* muted text on dark */
  --gold:       #6f5325;
  --gold-2:     #8a6a35;
  --gold-soft:  #a8884f;
  --gold-band:  #130D05;   /* der EINE Regler für alle Gold-Backgrounds (Bänder, Shards, Intro, Pool-Panel).
                              Dunklere Töne werden per color-mix() automatisch abgeleitet. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --line:       rgba(20,17,13,.14);
  --line-dark:  rgba(244,239,230,.16);

  --maxw: 1440px;
  --gutter: clamp(20px, 5vw, 80px);

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid type scale */
  --t-eyebrow: clamp(.68rem, .62rem + .25vw, .8rem);
  --t-body:    clamp(1rem, .96rem + .25vw, 1.16rem);
  --t-lead:    clamp(1.15rem, 1rem + .8vw, 1.6rem);
  --t-h3:      clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  --t-h2:      clamp(2.1rem, 1.3rem + 3.6vw, 4.6rem);
  --t-h1:      clamp(3rem, 1rem + 9vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------- Reset/base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }   /* reset UA default (margin:1em 40px) — figures are full-width media here */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--gold); color:#fff; }

h1,h2,h3{ font-family:var(--f-display); font-weight:700; line-height:1.02;
  letter-spacing:-.02em; margin:0; }

/* grain overlay for richness */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- Layout helpers */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px, 9vw, 160px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,96px); }
.section--dark{ background:var(--ink); color:var(--paper); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--paper); }
.section--sand{ background:var(--sand); }

.eyebrow{
  font-family:var(--f-body);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:.8em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.6;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }

.lead{ font-size:var(--t-lead); line-height:1.45; font-weight:300;
  letter-spacing:-.01em; color:var(--ink); max-width:46ch; }
.section--dark .lead{ color:var(--paper); }
.muted{ color:var(--muted); }
.section--dark .muted{ color:var(--muted-ink); }

.h2{ font-size:var(--t-h2); }
.h3{ font-size:var(--t-h3); }

/* ====================================================================== NAV */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s;
}
.nav__brand{
  font-family:var(--f-display); font-weight:700; letter-spacing:.18em;
  font-size:.95rem; text-transform:uppercase; color:#fff;
  display:flex; align-items:center; gap:.6em; transition:color .4s;
}
.nav__brand small{ font-weight:500; letter-spacing:.3em; font-size:.6rem;
  opacity:.7; font-family:var(--f-body); }
.nav__right{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav__links{ display:flex; gap:clamp(14px,2vw,34px); align-items:center; }
.nav__links a{
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.82); position:relative; padding:6px 0; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-2); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid rgba(255,255,255,.4); color:#fff;
  padding:.7em 1.4em; border-radius:999px; font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; transition:.35s var(--ease);
}
.nav__cta:hover{ background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-1px); }

/* scrolled state */
.nav.is-solid{
  background:rgba(244,239,230,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 12px 40px -28px rgba(0,0,0,.5);
  padding-block:12px;
}
.nav.is-solid .nav__brand{ color:var(--ink); }
.nav.is-solid .nav__links a{ color:rgba(20,17,13,.74); }
.nav.is-solid .nav__links a:hover{ color:var(--ink); }
.nav.is-solid .nav__cta{ border-color:var(--line); color:var(--ink); }
.nav.is-solid .nav__cta:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

.nav__burger{ display:none; width:30px; height:18px; position:relative; }
.nav__burger span{ position:absolute; left:0; height:2px; width:100%; background:#fff;
  transition:.35s var(--ease); }
.nav__burger span:nth-child(1){ top:0; }
.nav__burger span:nth-child(2){ top:8px; }
.nav__burger span:nth-child(3){ top:16px; }
.nav.is-solid .nav__burger span{ background:var(--ink); }
.is-menu-open .nav__burger span:nth-child(1){ top:8px; transform:rotate(45deg); }
.is-menu-open .nav__burger span:nth-child(2){ opacity:0; }
.is-menu-open .nav__burger span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* language switch */
.lang{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.lang button{ font-size:.72rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.55);
  padding:.45em .55em; line-height:1; transition:color .3s; }
.lang button.is-active{ color:#fff; }
.lang button:hover{ color:var(--gold-2); }
.lang i{ width:1px; height:11px; background:rgba(255,255,255,.3); }
.nav.is-solid .lang button{ color:rgba(20,17,13,.45); }
.nav.is-solid .lang button.is-active{ color:var(--ink); }
.nav.is-solid .lang i{ background:var(--line); }
.lang--drawer{ margin:1.6rem 0 0; }
.lang--drawer button{ color:var(--muted-ink); font-size:1rem; padding:.4em .6em; }
.lang--drawer button.is-active{ color:var(--gold-2); }
.lang--drawer i{ height:14px; background:var(--line-dark); }

/* scroll progress */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:1100;
  background:linear-gradient(90deg,var(--gold),var(--gold-2)); }

/* ==================================================================== HERO */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden;
  display:flex; align-items:flex-end; color:#fff; }
.hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; }
.hero__video{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.hero__video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100svh; min-width:177.78svh;
  border:0; pointer-events:none;
}
.hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,8,6,.78) 0%, rgba(10,8,6,.12) 38%, rgba(10,8,6,.1) 62%, rgba(10,8,6,.42) 100%);
}
.hero__inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding:0 var(--gutter) clamp(40px,7vh,90px); }
.hero__eyebrow{ color:var(--gold-soft); }
.hero h1{ font-size:var(--t-h1); font-weight:800; letter-spacing:-.03em;
  text-transform:uppercase; line-height:.92; margin:.1em 0 .35em;
  text-shadow:0 4px 40px rgba(0,0,0,.35); }
@media (max-width:680px){
  .hero h1{ font-size:clamp(2rem, 10vw, 3.2rem); }
}
.hero__tagline{ display:flex; flex-wrap:wrap; gap:.5em 1.4em; align-items:center;
  font-family:var(--f-body); font-weight:300; letter-spacing:.05em;
  font-size:clamp(.95rem, .7rem + 1vw, 1.45rem); color:rgba(255,255,255,.92); }
.hero__tagline span{ position:relative; }
.hero__tagline span+span::before{ content:"·"; position:absolute; left:-.95em;
  color:var(--gold-2); }
.hero__scroll{ position:absolute; z-index:3; bottom:26px; left:50%;
  transform:translateX(-50%); display:flex; flex-direction:column; align-items:center;
  gap:8px; color:rgba(255,255,255,.7); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; }
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.7),transparent);
  position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%;
  height:50%; background:var(--gold-2); animation:scrolldot 2.2s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* hero word reveal */
.reveal-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.reveal-mask > span{ display:inline-block; transform:translateY(105%);
  animation:riseUp 1s var(--ease-out) forwards; }
.reveal-mask:nth-child(1) > span{ animation-delay:.15s; }
.reveal-mask:nth-child(2) > span{ animation-delay:.28s; }
@keyframes riseUp{ to{ transform:translateY(0); } }

/* ============================================================ STATEMENT/intro */
.statement{ display:grid; grid-template-columns:1fr; gap:2rem; }
.statement .big{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.5rem, 1rem + 2.6vw, 3.1rem); line-height:1.12; max-width:20ch;
}
.statement .big em{ font-style:normal; color:var(--gold); }
.statement__grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(30px,5vw,80px);
  align-items:end; }
@media (max-width:820px){ .statement__grid{ grid-template-columns:1fr; gap:28px; } }

/* ================================================================= FACTS */
.facts{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border-block:1px solid var(--line); }
.section--dark .facts{ background:var(--line-dark); border-color:var(--line-dark); }
.fact{ background:var(--paper); padding:clamp(20px,3vw,40px) clamp(12px,2vw,26px);
  text-align:center; }
.section--dark .fact{ background:var(--ink); }
.fact b{ display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.8rem, 1rem + 2.6vw, 3.4rem); letter-spacing:-.03em; color:var(--ink); line-height:1; }
.section--dark .fact b{ color:var(--paper); }
.fact b .u{ color:var(--gold); }
.fact > span{ display:block; margin-top:.7em; font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
@media (max-width:780px){ .facts{ grid-template-columns:repeat(2,1fr); }
  .fact{ padding:26px 12px; } }

/* ============================================================ FULL-BLEED img */
.bleed{ position:relative; height:clamp(420px,80vh,860px); overflow:hidden;
  display:flex; align-items:flex-end; color:#fff; }
.bleed__img{ position:absolute; inset:-12% 0; width:100%; height:124%;
  object-fit:cover; will-change:transform; z-index:0; }
.bleed__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,8,6,.7), rgba(10,8,6,.05) 55%, rgba(10,8,6,.3)); }
.bleed__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding:0 var(--gutter) clamp(36px,6vw,72px); }
.bleed h2{ color:#fff; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.4); }
.bleed .lead{ color:rgba(255,255,255,.92); }

/* ============================================================ EDITORIAL grids */
.head{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  margin-bottom:clamp(34px,4vw,64px); }
.head .h2{ max-width:18ch; }
.head__row{ display:flex; flex-direction:column; gap:clamp(16px,2vw,26px); }
.head__row .lead{ max-width:none; }

/* offset two-column with images */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px);
  align-items:center; }
.split--reverse .split__media{ order:2; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:26px; }
  .split--reverse .split__media{ order:0; } }
.split__text{ padding:clamp(8px,2vw,40px) 0; }
.split__text .h3{ margin:.4em 0 .7em; }

/* asymmetric trio */
.trio{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,26px); }
.trio .t-a{ grid-column:1 / 8; }
.trio .t-b{ grid-column:8 / 13; align-self:end; }
.trio .t-c{ grid-column:1 / 6; }
.trio .t-d{ grid-column:6 / 13; }
@media (max-width:760px){ .trio{ grid-template-columns:1fr; }
  .trio>*{ grid-column:1 / -1 !important; } }

/* generic figure with hover-zoom + reveal */
.fig{ position:relative; overflow:hidden; background:var(--sand);
  border-radius:2px; }
.fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out);
  display:block; }
.fig--ar32{ aspect-ratio:3/2; }
.fig--ar43{ aspect-ratio:4/3; }
.fig--ar11{ aspect-ratio:1/1; }
.fig--ar34{ aspect-ratio:3/4; }
.fig--ar45{ aspect-ratio:4/5; }
.fig--ar169{ aspect-ratio:16/9; }
.fig--tall{ aspect-ratio:3/4.4; }
.fig--full{ aspect-ratio:16/10; }
@media (hover:hover){ .fig:hover img{ transform:scale(1.05); } }
.fig__cap{ position:absolute; left:0; bottom:0; z-index:2; padding:14px 18px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.fig::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.36), transparent 42%); opacity:0;
  transition:opacity .5s; }
.fig.has-cap::after{ opacity:1; }

/* feature columns */
.features{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,56px) clamp(28px,4vw,72px); }
@media (max-width:880px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feat{ border-top:1px solid var(--line-dark); padding-top:22px; }
.feat__icon{ width:30px; height:30px; color:var(--gold-2); margin-bottom:16px; }
.feat__icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; }
.feat h3{ font-size:1.15rem; letter-spacing:-.01em; margin-bottom:.7em; color:var(--paper); }
.feat ul{ list-style:none; margin:0; padding:0; }
.feat li{ font-size:.96rem; color:var(--muted-ink); padding:5px 0 5px 18px; position:relative;
  line-height:1.45; }
.feat li::before{ content:""; position:absolute; left:0; top:.85em; width:6px; height:1px;
  background:var(--gold); }

/* distribution / floors */
.floors{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
@media (max-width:820px){ .floors{ grid-template-columns:1fr; } }
.floor{ background:var(--paper); padding:clamp(26px,3vw,46px); }
.floor__no{ font-family:var(--f-display); font-weight:700; font-size:.85rem;
  letter-spacing:.2em; color:var(--gold); text-transform:uppercase; }
.floor h3{ font-size:1.5rem; margin:.5em 0 .9em; }
.floor p{ margin:0; color:var(--muted); font-size:1rem; }

/* filmstrip (horizontal scroll-snap) — bounded to content width, 2 tiles per view,
   first tile flush left, second flush right. Can auto-advance (data-auto + initStrips). */
.strip{ display:flex; gap:var(--strip-gap,clamp(14px,1.5vw,22px)); overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:18px;
  -ms-overflow-style:none; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.strip::-webkit-scrollbar{ height:4px; }
.strip::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:9px; }
.strip > .fig{ flex:0 0 calc((100% - var(--strip-gap,clamp(14px,1.5vw,22px))) / 2);
  scroll-snap-align:start; aspect-ratio:3/2; }
@media (max-width:640px){ .strip > .fig{ flex-basis:86%; } }

/* ================================================================= GALLERY */
.gallery{ columns:4 260px; column-gap:clamp(12px,1.4vw,20px); }
.gallery .gitem{ break-inside:avoid; margin-bottom:clamp(12px,1.4vw,20px);
  position:relative; overflow:hidden; cursor:pointer; background:var(--sand); border-radius:2px; }
.gallery .gitem img{ width:100%; transition:transform 1s var(--ease-out), filter .5s; }
.gallery .gitem::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.12)); opacity:0;
  transition:opacity .4s; }
@media (hover:hover){
  .gallery .gitem:hover img{ transform:scale(1.06); }
  .gallery .gitem:hover::after{ opacity:1; }
}
.gallery .gitem .plus{ position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .4s; z-index:2; }
.gallery .gitem .plus span{ width:46px; height:46px; border:1px solid rgba(255,255,255,.8);
  border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:300; font-size:1.4rem;
  backdrop-filter:blur(3px); }
@media (hover:hover){ .gallery .gitem:hover .plus{ opacity:1; } }

/* ================================================================= LIGHTBOX */
.lb{ position:fixed; inset:0; z-index:2000; background:rgba(12,9,6,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.lb.is-open{ opacity:1; visibility:visible; }
.lb img{ max-width:92vw; max-height:86vh; object-fit:contain; border-radius:2px;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8); transform:scale(.97); transition:transform .4s var(--ease-out); }
.lb.is-open img{ transform:scale(1); }
.lb__close,.lb__nav{ position:absolute; color:#fff; display:grid; place-items:center;
  width:54px; height:54px; border:1px solid rgba(255,255,255,.22); border-radius:50%;
  transition:.3s var(--ease); background:rgba(255,255,255,.04); }
.lb__close:hover,.lb__nav:hover{ background:var(--gold); border-color:var(--gold); }
.lb__close{ top:24px; right:24px; font-size:1.4rem; font-weight:300; }
.lb__nav{ top:50%; transform:translateY(-50%); }
.lb__prev{ left:clamp(10px,3vw,40px); }
.lb__next{ right:clamp(10px,3vw,40px); }
.lb__count{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.78rem; letter-spacing:.2em; }
@media (max-width:640px){ .lb__nav{ width:44px; height:44px; } }

/* ================================================================= CONTACT */
.contact{ position:relative; overflow:hidden; color:#fff; }
.contact__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.contact__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(12,9,6,.9) 0%, rgba(12,9,6,.55) 55%, rgba(12,9,6,.35) 100%); }
.contact__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,90px); align-items:center; }
@media (max-width:900px){ .contact__inner{ grid-template-columns:1fr; } }
.contact h2{ color:#fff; }
.contact .lead{ color:rgba(255,255,255,.9); }
.contact__meta{ margin-top:2rem; display:grid; gap:1.1rem; }
.contact__meta div{ border-top:1px solid var(--line-dark); padding-top:.9rem; }
.contact__meta dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:.3em; }
.contact__meta dd{ margin:0; font-size:1.05rem; }

.form{ background:rgba(255,255,255,.06); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:clamp(24px,3vw,44px); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form .row{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:.55em; }
.field input,.field textarea{ width:100%; background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.28); border-radius:0; padding:.7em .1em; color:#fff;
  font-family:var(--f-body); font-size:.98rem; transition:border-color .3s, background .3s; }
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--gold-2);
  background:rgba(255,255,255,.03); }
.field textarea{ resize:vertical; min-height:92px; }
.btn{ display:inline-flex; align-items:center; gap:.7em; background:var(--gold);
  color:#fff; padding:1em 2em; border-radius:999px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.78rem; transition:.35s var(--ease); width:100%;
  justify-content:center; }
.btn:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }

/* ================================================================= FOOTER */
.foot{ background:var(--ink); color:var(--muted-ink); padding:clamp(40px,5vw,72px) 0 40px; }
.foot__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px;
  flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--line-dark); }
.foot__brand{ font-family:var(--f-display); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper); font-size:1.3rem; }
.foot__brand span{ display:block; font-family:var(--f-body); font-weight:400; font-size:.7rem;
  letter-spacing:.3em; color:var(--gold-2); margin-top:.6em; }
.foot__links{ display:flex; gap:26px; flex-wrap:wrap; }
.foot__links a{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-ink);
  transition:color .3s; }
.foot__links a:hover{ color:var(--paper); }
.foot__bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:26px; font-size:.74rem; letter-spacing:.04em; }
.foot__bottom a{ color:inherit; text-decoration:none; }

/* =============================================================== Mobile nav */
.drawer{ position:fixed; inset:0; z-index:990; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--gutter);
  visibility:hidden;
  transform:translateY(-100%); transition:transform .6s var(--ease-out), visibility .6s; }
.is-menu-open .drawer{ transform:translateY(0); visibility:visible; }
.drawer a{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,8vw,3rem);
  color:var(--paper); letter-spacing:-.02em; padding:.18em 0; border-bottom:1px solid var(--line-dark); }
.drawer a:hover{ color:var(--gold-2); }
.drawer .meta{ margin-top:2rem; color:var(--muted-ink); font-size:.85rem; letter-spacing:.1em; }

/* ============================================================ Reveal anim */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out),
  transform 1s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="img"]{ clip-path:inset(0 0 100% 0); transform:none; opacity:1;
  transition:clip-path 1.2s var(--ease-out); }
[data-reveal="img"].is-in{ clip-path:inset(0 0 0 0); }
[data-delay="1"]{ transition-delay:.1s; }
[data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal="img"]{ opacity:1 !important; transform:none !important;
    clip-path:none !important; }
  .reveal-mask>span{ animation:none !important; transform:none !important; }
  .hero__video{ display:none; }
  .hero__scroll i::after,.hero__scroll{ animation:none; }
}

/* ----------------------------------------------------------- Responsive nav */
@media (max-width:880px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__cta{ display:none; }
}
@media (max-width:560px){
  .hero{ align-items:flex-end; }
}

/* =============================================== Feature banner + Level rows */
/* Equipment section opens with a full-bleed cinematic banner */
.section--feature{ padding-top:0; }
.bleed--feature{ height:clamp(440px,84vh,900px); }
.features-wrap{ margin-top:clamp(48px,7vw,116px); }

/* Distribution as three oversized, alternating "descend the levels" rows */
.levels{ display:grid; gap:clamp(46px,7vw,120px); }
.split--xl{ grid-template-columns:1.18fr .82fr; align-items:center; }
/* keep the image on the larger track regardless of source order */
.split--xl.split--reverse{ grid-template-columns:.82fr 1.18fr; }
@media (max-width:880px){
  .split--xl,
  .split--xl.split--reverse{ grid-template-columns:1fr; }
}
.level .floor__no{ display:block; margin-bottom:1.1rem; font-size:.92rem; }
.level .split__text .h3{ margin:.05em 0 .55em; }
.level .split__text .lead{ max-width:42ch; }

/* ============================================= Big-image system (content-width,
   flush equal-height rows, full-width horizontal-parallax) */

/* single content-width showcase image — large + flush */
.showcase{ position:relative; }
.showcase .fig{ width:100%; height:clamp(320px,48vw,640px); }
.showcase .fig img{ width:100%; height:100%; object-fit:cover; }
.showcase + .showcase{ margin-top:clamp(12px,1.5vw,22px); }
@media (max-width:760px){ .showcase .fig{ height:clamp(240px,72vw,440px); } }

/* equal-height image row — guarantees flush top AND bottom edges
   regardless of each source image's native aspect ratio */
.imgrow{ display:grid; gap:clamp(12px,1.4vw,22px); }
.imgrow .fig{ height:clamp(300px,42vw,580px); }
.imgrow .fig img{ width:100%; height:100%; object-fit:cover; }
.imgrow--2{ grid-template-columns:1fr 1fr; }
.imgrow--asym{ grid-template-columns:1.5fr 1fr; }
@media (max-width:760px){
  .imgrow--2,.imgrow--asym{ grid-template-columns:1fr; }
  .imgrow .fig{ height:clamp(240px,68vw,420px); }
}

/* full-width horizontal-parallax panorama band — an oversized <img> (140% wide)
   is panned sideways on scroll, so there is always horizontal overflow to travel.
   Supports an overlaid eyebrow/headline (text ON the image). */
.pano{ position:relative; width:100%; height:clamp(440px,70vh,840px); overflow:hidden;
  background:var(--ink); display:flex; align-items:flex-end; color:#fff; }
.pano__img{ position:absolute; top:0; left:50%; width:140%; max-width:none; height:100%;
  transform:translateX(-50%); object-fit:cover; will-change:transform; }
.pano__scrim{ position:absolute; inset:0; z-index:1;
  /* keep the image clear & radiant — only a soft wash at the very bottom for text legibility */
  background:linear-gradient(to top, rgba(10,8,6,.55), rgba(10,8,6,.08) 26%, transparent 46%); }
.pano__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding:0 var(--gutter) clamp(36px,5vw,74px); }
.pano .eyebrow{ color:var(--gold-soft); text-shadow:0 1px 18px rgba(0,0,0,.55); }
.pano h2{ color:#fff; max-width:18ch; text-shadow:0 2px 24px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4); }
.pano .lead{ color:rgba(255,255,255,.92); max-width:46ch; }

/* floating caption card — big image with an offset card overlapping into it
   (adapted from LB snippet #41 "Floating Caption Card") */
.floatcard{ position:relative; }
.floatcard__media{ width:100%; height:clamp(360px,48vw,640px); overflow:hidden; border-radius:2px;
  background:var(--sand); }
.floatcard__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* row below the image: key-message LEFT (in the white area, vertically centred),
   floating card RIGHT (overlaps up into the image via negative margin) */
.floatcard__row{ display:grid; grid-template-columns:1fr min(520px,46%);
  gap:clamp(28px,4vw,72px); align-items:center; }
.floatcard__lead{ display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,4vw,72px) clamp(10px,3vw,56px); }
.floatcard__lead .big{ margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem, 1.05rem + 3vw, 3.6rem); line-height:1.1; color:var(--ink); max-width:15ch; }
.floatcard__lead .big em{ font-style:normal; color:var(--gold); }
.floatcard__card{ position:relative; z-index:2; align-self:start;
  margin-top:clamp(-170px,-15vw,-100px); margin-right:clamp(0px,3vw,48px);
  background:var(--paper); border-top:3px solid var(--gold);
  box-shadow:0 50px 100px -45px rgba(20,17,13,.55); padding:clamp(28px,3.2vw,48px); }
.floatcard__card .eyebrow{ margin-bottom:.9rem; }
.floatcard__card .lead{ max-width:none; }
@media (max-width:760px){
  .floatcard__row{ grid-template-columns:1fr; gap:0; }
  .floatcard__lead{ display:none; }
  .floatcard__card{ margin-top:-54px; margin-right:0; }
}

/* image stack — big image with a smaller detail image overhanging bottom-right
   (adapted from LB snippet #44 "Image Stack / Detail Overlay") */
.stack{ position:relative; margin-bottom:clamp(46px,6vw,84px); }
.stack__main{ position:relative; width:100%; height:clamp(340px,48vw,640px);
  overflow:hidden; border-radius:2px; background:var(--sand); }
.stack__main > img{ width:100%; height:100%; object-fit:cover; }
.stack__detail{ position:absolute; z-index:3; right:clamp(-10px,-1vw,4px);
  bottom:clamp(-36px,-3.6vw,-54px); width:clamp(200px,30vw,380px); aspect-ratio:1/1;
  overflow:hidden; border:6px solid var(--paper); border-radius:3px;
  box-shadow:0 36px 80px -28px rgba(0,0,0,.66); }
.stack__detail img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){ .stack__detail{ width:44%; bottom:-22px; border-width:4px; } }
/* detail image overhangs the TOP edge (reaches up into the text) instead of the bottom */
.stack--top{ margin-top:0; margin-bottom:0; }
.stack--top .stack__detail{ top:clamp(-100px,-8vw,-66px); bottom:auto; }
@media (max-width:560px){ .stack--top .stack__detail{ top:-22px; bottom:auto; } }

/* section starts flush with its first child (no top padding before a full-bleed band) */
.section--flush-top{ padding-top:0; }

/* spacing for stacked big media inside a section — equal gap above & below the lead */
.media-stack{ margin-top:clamp(40px,5vw,72px); display:grid; gap:clamp(40px,5vw,72px); }

/* ---- gold accent for a part of a headline ---- */
.accent{ color:var(--gold); }

/* facts headline fits on one line on desktop */
#facts .head .h2{ max-width:none; font-size:clamp(1.7rem, .9rem + 2.4vw, 3rem); }
@media (min-width:781px){ #facts .head .h2{ white-space:nowrap; } }

/* ---- pull a section up to tighten the gap to the previous one ---- */
.section--pull-up{ padding-top:0; margin-top:clamp(-90px,-7vw,-36px); }

/* ====================================================== Crossfade slideshow (bleed) */
.bleed[data-slideshow] .bleed__img{ opacity:0; transition:opacity 1.6s ease; }
.bleed[data-slideshow] .bleed__img.is-active{ opacity:1; }
.bleed[data-slideshow] .bleed__img:not(.is-active){ pointer-events:none; }

/* ============================================================ Filmstrip slider */
.slider{ position:relative; }
.slider__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:clamp(40px,3.4vw,52px); height:clamp(40px,3.4vw,52px); border-radius:50%;
  display:grid; place-items:center; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); box-shadow:0 12px 34px -14px rgba(20,17,13,.45);
  font-size:1.6rem; line-height:1; padding-bottom:3px; transition:.3s var(--ease); }
.slider__arrow:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.slider__arrow--prev{ left:calc(-1 * clamp(12px,2.6vw,58px)); }
.slider__arrow--next{ right:calc(-1 * clamp(12px,2.6vw,58px)); }
.section--sand .slider__arrow{ background:var(--paper); }
/* auto strips scroll continuously — no snap, no scrollbar */
.strip[data-auto]{ scroll-snap-type:none; scrollbar-width:none; }
.strip[data-auto]::-webkit-scrollbar{ display:none; }
@media (max-width:560px){ .slider__arrow{ display:none; } }

/* ================================================================= Mosaic */
/* editorial image mosaic — wide "totale" shots big, detail shots small.
   Placement is set per-figure via inline grid-column/grid-row. */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,15vw,232px); gap:clamp(10px,1.1vw,16px); }
.mosaic .fig{ height:100%; }
@media (max-width:760px){
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(150px,42vw,210px); }
  .mosaic .fig{ grid-column:auto !important; grid-row:auto !important; }
  .mosaic .fig:first-child{ grid-column:1 / -1 !important; }
}

/* ===================================== Full-width slider band (transparent — sits on the gold section) */
.slider-band{ position:relative; width:100%; margin:0;
  padding-top:clamp(46px,5.6vw,92px); padding-bottom:clamp(23px,2.8vw,46px); }
/* full-section gold background for the interior chapter (Living, Kitchen, Dolce Vita) + grain */
.section--gold{ background-color:var(--gold-band); background-image:var(--noise);
  background-blend-mode:soft-light; color:var(--paper); }
.section--gold .eyebrow{ color:var(--gold-soft); }
.section--gold .h2, .section--gold .h3{ color:#fff; }
.section--gold .lead, .section--gold .lead.muted{ color:rgba(255,255,255,.9); }
/* tighter spacing between consecutive gold interior sections (half the normal section top) */
.section--gold + .section--gold{ padding-top:clamp(36px,4.5vw,80px); }

/* intro (Residence) full-width dark-gold backdrop — behind the content,
   ending ~3/4 down the big residence image. Head text goes light to stay readable. */
#residence{ position:relative; }
#residence::before{ content:""; position:absolute; top:0; left:0; right:0;
  height:clamp(520px,46vw,860px); z-index:-1; pointer-events:none;
  background:
    var(--noise),
    linear-gradient(in oklch to bottom,
      color-mix(in srgb, var(--gold-band) 20%, #000), var(--gold-band));
  background-blend-mode:soft-light, normal; }
#residence .head .eyebrow{ color:var(--gold-soft); }
#residence .head .h2{ color:#fff; }
.slider-band .strip{ --strip-gap:clamp(18px,2vw,32px); padding-inline:0; }
.slider-band .strip > .fig{ flex:0 0 clamp(320px,34vw,560px); }
/* section whose last element is a flush gold band: no bottom padding (band → next section) */
.section--has-band{ padding-bottom:0; }
.slider-band .slider__arrow{ background:var(--paper); color:var(--ink); border-color:transparent;
  box-shadow:0 14px 36px -14px rgba(0,0,0,.6); z-index:1510; }
.slider-band .slider__arrow--prev{ left:clamp(10px,1.6vw,30px); }
.slider-band .slider__arrow--next{ right:clamp(10px,1.6vw,30px); }

/* ============================================================ Scroll to top */
.to-top{ position:fixed; right:clamp(16px,2vw,30px); bottom:clamp(16px,2vw,30px); z-index:1400;
  width:clamp(44px,3.4vw,54px); height:clamp(44px,3.4vw,54px); border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:var(--paper);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.6); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s, color .3s; }
.to-top.is-shown{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--gold); color:#fff; }
.to-top svg{ width:42%; height:42%; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity .25s; transform:none; } }

/* ============================================= Pool — fixed vertical parallax */
/* the pool image is a fixed backdrop; the heading, text and gallery scroll over it */
.poolfixed{ position:relative; background-color:var(--ink); color:var(--paper);
  background-size:cover; background-position:center 60%; background-repeat:no-repeat;
  background-attachment:fixed; }
.poolfixed__hero{ position:relative; min-height:clamp(580px,92vh,1000px);
  display:flex; align-items:flex-end; padding-bottom:clamp(44px,6vw,96px); }
.poolfixed__scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,8,6,.74) 0%, rgba(10,8,6,.05) 48%, rgba(10,8,6,.22) 100%); }
.poolfixed__hero .wrap{ position:relative; z-index:1; }
.poolfixed__hero .eyebrow{ color:var(--gold-soft); text-shadow:0 1px 18px rgba(0,0,0,.5); }
.poolfixed__hero h2{ color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
/* no solid panel background — the lead + gallery scroll directly over the fixed pool image */
.poolfixed__panel{ position:relative; z-index:1; padding-block:clamp(48px,7vw,112px); }
/* mirrored scrim (same gradient as the hero overlay, flipped to-bottom = dark at the top)
   so the lead stays readable; fades out before the gallery so the photo shows through */
.poolfixed__panel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,8,6,.74) 0%, rgba(10,8,6,.05) 48%, rgba(10,8,6,.22) 100%); }
.poolfixed__panel .lead{ color:#fff; max-width:46ch;
  margin-bottom:clamp(30px,4.5vw,58px); text-shadow:0 1px 20px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); }
.poolfixed .mosaic .fig{ border-radius:2px; }
@media (max-width:760px){ .poolfixed{ background-attachment:scroll; } } /* mobile: avoid janky fixed bg */