:root {
  --sand: #f4f0e9;
  --ink: #100d09;
  --muted: rgba(244, 240, 233, 0.74);
  --gold: #c9a86a;
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

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

html { -webkit-font-smoothing: antialiased; }
body { background: var(--ink); color: var(--sand); font-family: var(--sans); font-weight: 300; overflow-x: hidden; font-optical-sizing: auto; }

/* ScrollSmoother wrapper — nav lives outside it so it can stay fixed */
#smooth-wrapper { position: relative; }
/* the SplitText line mask gets a hair of breathing room for Fraunces italics/descenders */
.ln { padding: 0 0.06em 0.1em; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
em { font-style: italic; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 46px;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  mix-blend-mode: normal;
  transition: background .5s ease, backdrop-filter .5s ease, padding .5s ease;
}
.nav--solid { background: rgba(18,15,11,.72); backdrop-filter: blur(14px) saturate(120%); padding-top: 16px; padding-bottom: 16px; }
.nav__brand { font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: .36em; }
.nav__links { display: flex; gap: 36px; }
.nav__links a { color: var(--sand); text-decoration: none; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; transition: opacity .3s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { color: var(--sand); text-decoration: none; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(244,240,233,.5); border-radius: 100px; padding: 11px 22px; transition: all .3s; }
.nav__cta:hover { background: var(--sand); color: var(--ink); }

/* ---------- THE JOURNEY ---------- */
.journey { position: relative; height: 700vh; width: 100%; background: var(--ink); }
/* GSAP ScrollTrigger pins this element; sticky is only the no-JS/reduced fallback */
.journey__pin { position: relative; top: 0; height: 100vh; width: 100%; overflow: hidden; }
html.no-motion .journey { height: 100vh; }
html.no-motion .journey__pin { position: sticky; }
.journey__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.journey__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }
.journey__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.journey__poster.is-hidden { opacity: 0; }

/* cinematic depth: vignette + film grain */
.journey__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.5) 100%),
    radial-gradient(130% 90% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%);
}
.journey__grain {
  position: absolute; inset: -50%; pointer-events: none; z-index: 5; opacity: .04; mix-blend-mode: overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 2.6s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)} 50%{transform:translate(3%,-4%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(2%,3%)} }

/* ---------- TEXT BEATS ---------- */
.beats { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.beat {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 7vw; opacity: 0; will-change: transform, opacity, filter;
}
.beat--center { align-items: center; text-align: center; }
.beat--left { align-items: flex-start; text-align: left; }
.beat--right { align-items: flex-end; text-align: right; }
/* legibility scrim: a soft dark panel hugging the text, on every beat */
.beat__inner { position: relative; max-width: 62ch; padding: 7vh 4vw; }
.beat__inner::before {
  content: ""; position: absolute; inset: -3vh -2vw; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(6,5,3,.66) 0%, rgba(6,5,3,.42) 48%, rgba(6,5,3,0) 76%);
  filter: blur(10px);
}

.eyebrow { font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase; color: #e7c98e; margin-bottom: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 16px rgba(0,0,0,.75); }
.display { font-family: var(--serif); font-weight: 380; line-height: 1.02; letter-spacing: -.02em; font-size: clamp(52px, 7vw, 120px); text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 3px 40px rgba(0,0,0,.78); }
.display em { font-weight: 400; font-style: italic; }
#b-hero .display { font-size: clamp(66px, 11vw, 176px); letter-spacing: -.028em; }
.lead { margin-top: 18px; font-size: clamp(17px,1.6vw,21px); letter-spacing: .02em; color: #fbf8f2; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 18px rgba(0,0,0,.75); }
.body { margin-top: 22px; font-size: 18px; line-height: 1.7; max-width: 36ch; color: #ffffff; font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.85); }
.beat--right .body { margin-left: auto; }
.cue { margin-top: 36px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
#b-hero .cue { animation: float 2.6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(8px);opacity:1} }

.statement { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; font-size: clamp(34px,5.4vw,86px); line-height: 1.16; text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 3px 44px rgba(0,0,0,.82); }
.statement em { color: var(--gold); }

/* specs */
.specs { display: flex; justify-content: center; gap: clamp(26px,6vw,80px); flex-wrap: wrap; margin-top: 44px; }
.spec { display: flex; flex-direction: column; gap: 8px; }
.spec__num { font-family: var(--serif); font-weight: 500; font-size: clamp(40px,5vw,70px); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 2px 28px rgba(0,0,0,.7); }
.spec__unit { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #ece6da; text-shadow: 0 1px 2px rgba(0,0,0,.8); }

/* buttons */
.btn { display: inline-block; margin-top: 34px; color: var(--ink); background: var(--sand); text-decoration: none; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 17px 36px; border-radius: 100px; transition: all .3s; pointer-events: auto; }
.btn:hover { background: var(--gold); }
.btn--ghost { color: var(--sand); background: transparent; border: 1px solid rgba(244,240,233,.5); }
.btn--ghost:hover { background: var(--sand); color: var(--ink); }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); text-align: center; padding: 14vh 24px 8vh; display: flex; flex-direction: column; align-items: center; }
.footer__brand { font-family: var(--serif); letter-spacing: .4em; font-size: 26px; margin-bottom: 24px; }
.footer__line { font-size: clamp(18px,2.4vw,30px); font-family: var(--serif); color: var(--sand); max-width: 22ch; line-height: 1.3; }
.footer__fine { margin-top: 40px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 768px) {
  .nav { padding: 16px 20px; }
  .nav__links { display: none; }
  .beat { padding: 0 24px; }
  .body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey__grain, #b-hero .cue { animation: none; }
}

/* ============================================================
   FULL SITE SECTIONS
   ============================================================ */
.wrap { width: min(1200px, 90vw); margin: 0 auto; }
.sec { position: relative; padding: clamp(90px, 13vh, 170px) 0; background: var(--ink); color: var(--sand); }
.sec--statement, .sec--life, .sec--offer { text-align: center; }
.sec__eyebrow { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.sec__display { font-family: var(--serif); font-weight: 420; line-height: 1.05; letter-spacing: -.018em; font-size: clamp(38px, 5.5vw, 78px); }
.sec__display em { font-style: italic; font-weight: 400; color: var(--gold); }
.sec__lede { margin: 26px auto 0; max-width: 46ch; font-size: clamp(16px,1.5vw,20px); line-height: 1.75; color: var(--muted); }
.sec__head { margin-bottom: 54px; }

/* ---- tilt ---- */
.tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* ---- reveal system (a distinct animation per section) ---- */
.reveal { will-change: transform, opacity, clip-path, filter; }
/* default fade-up (any .reveal without a specific type) */
.reveal:not([data-reveal]) { opacity: 0; transform: translateY(42px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal:not([data-reveal]).is-in { opacity: 1; transform: none; }

/* rise — clip-path curtain up + lift (headlines, statement, contact text) */
[data-reveal="rise"] { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); transition: opacity .9s ease, transform 1.05s cubic-bezier(.2,.7,.2,1), clip-path 1.05s cubic-bezier(.2,.7,.2,1); }
[data-reveal="rise"].is-in { opacity: 1; transform: none; clip-path: inset(0 0 -6% 0); }

/* stagger-scale — gallery tiles uncover bottom→top, staggered */
[data-reveal="stagger-scale"] .bento__item { opacity: 0; transform: translateY(44px) scale(.94); clip-path: inset(0 0 100% 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
[data-reveal="stagger-scale"].is-in .bento__item { opacity: 1; transform: none; clip-path: inset(0); transition-delay: calc(var(--i, 0) * 90ms); }

/* stagger-3d — feature cards tilt up into place, staggered */
[data-reveal="stagger-3d"] { perspective: 1300px; }
[data-reveal="stagger-3d"] .feature { opacity: 0; transform: translateY(54px) rotateX(22deg); transform-origin: 50% 100%; transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal="stagger-3d"].is-in .feature { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 100ms); }

/* count — block fades; numbers count up (JS) */
[data-reveal="count"] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal="count"].is-in { opacity: 1; transform: none; }

/* wipe-x — location image wipes in left→right with a slow zoom */
[data-reveal="wipe-x"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(.6,0,.2,1); }
[data-reveal="wipe-x"] img { transform: scale(1.14); transition: transform 1.5s cubic-bezier(.2,.7,.2,1); }
[data-reveal="wipe-x"].is-in { clip-path: inset(0); }
[data-reveal="wipe-x"].is-in img { transform: scale(1); }

/* stagger-lines — location text slides in from the right, line by line */
[data-reveal="stagger-lines"] > * { opacity: 0; transform: translateX(46px); transition: opacity .8s ease, transform .95s cubic-bezier(.2,.7,.2,1); }
[data-reveal="stagger-lines"].is-in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 110ms); }

/* words — quote reveals word by word */
[data-reveal="words"] .w { display: inline-block; opacity: 0; transform: translateY(26px) rotate(3deg); transition: opacity .6s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
[data-reveal="words"].is-in .w { opacity: 1; transform: none; transition-delay: calc(var(--wi, 0) * 42ms); }

/* blur-scale — offer resolves from blurred + scaled, stack items cascade */
[data-reveal="blur-scale"] { opacity: 0; transform: scale(1.06); filter: blur(12px); transition: opacity 1s ease, transform 1.25s cubic-bezier(.2,.7,.2,1), filter 1s ease; }
[data-reveal="blur-scale"].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal="blur-scale"] .offer__stack li { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal="blur-scale"].is-in .offer__stack li { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * 120ms); }

/* stagger-fields — contact form fields rise one after another */
[data-reveal="stagger-fields"] > * { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
[data-reveal="stagger-fields"].is-in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); }

/* GALLERY — bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 16px; perspective: 1400px; }
.bento__item { position: relative; margin: 0; overflow: hidden; border-radius: 4px; }
.bento__item--wide { grid-column: span 2; }
.bento__item--tall { grid-row: span 2; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.bento__item:hover img { transform: scale(1.06); }
.bento__item figcaption { position: absolute; left: 20px; bottom: 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.8); opacity: 0; transform: translateY(8px); transition: all .5s ease; }
.bento__item:hover figcaption { opacity: 1; transform: none; }
.bento__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 45%); opacity: .5; transition: opacity .5s; }
.bento__item:hover::after { opacity: .9; }

/* FEATURES */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1400px; }
.feature { padding: 40px 34px; border: 1px solid rgba(244,240,233,.12); border-radius: 6px; background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.feature__no { font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .1em; }
.feature h3 { font-family: var(--serif); font-weight: 500; font-size: 27px; margin: 14px 0 12px; }
.feature p { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.feature:hover { border-color: rgba(201,168,106,.4); }

/* FACTS */
.sec--facts { padding: 70px 0; border-top: 1px solid rgba(244,240,233,.1); border-bottom: 1px solid rgba(244,240,233,.1); }
.facts { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.fact { display: flex; flex-direction: column; gap: 8px; text-align: center; flex: 1; min-width: 140px; }
.fact__num { font-family: var(--serif); font-weight: 500; font-size: clamp(40px,4.5vw,64px); line-height: 1; }
.fact__lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* LOCATION */
.location { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.location__media { overflow: hidden; border-radius: 6px; height: 460px; perspective: 1200px; }
.location__media img { width: 100%; height: 100%; object-fit: cover; }
.location__p { margin: 24px 0 30px; font-size: 17px; line-height: 1.8; color: var(--muted); max-width: 42ch; }
.location__list { list-style: none; }
.location__list li { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid rgba(244,240,233,.12); font-size: 15px; }
.location__list li span:last-child { color: var(--gold); }

/* LIFESTYLE */
.sec--life { background: #0b0906; }
.life__quote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(26px,3.6vw,52px); line-height: 1.3; max-width: 22ch; margin: 26px auto 0; }
.life__quote em { color: var(--gold); }

/* OFFER */
.sec--offer { background: radial-gradient(120% 90% at 50% 0%, #17120b, var(--ink)); }
.offer { max-width: 640px; }
.offer__lede { margin: 24px auto 34px; font-size: 18px; line-height: 1.75; color: var(--muted); }
.offer__stack { list-style: none; display: inline-flex; flex-direction: column; gap: 14px; text-align: left; margin-bottom: 40px; }
.offer__stack li { position: relative; padding-left: 30px; font-size: 16px; color: var(--sand); }
.offer__stack li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
.offer__scarcity { margin-top: 26px; font-size: 13px; letter-spacing: .06em; color: var(--muted); }

/* CONTACT */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact__p { margin: 22px 0 24px; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 34ch; }
.contact__direct { font-size: 15px; line-height: 1.9; letter-spacing: .04em; color: var(--sand); }
.contact__form { display: flex; flex-direction: column; gap: 18px; }
.contact__form label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.contact__form input, .contact__form textarea { background: transparent; border: none; border-bottom: 1px solid rgba(244,240,233,.28); padding: 12px 2px; color: var(--sand); font-family: var(--sans); font-size: 16px; transition: border-color .3s; }
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--gold); }
.contact__form textarea { resize: vertical; }
.contact__form .btn { margin-top: 14px; align-self: flex-start; }
.contact__note { font-size: 12px; letter-spacing: .12em; color: var(--muted); }

.btn--lg { padding: 20px 46px; font-size: 13px; }

/* FOOTER (site) */
.footer { background: #0b0906; text-align: center; padding: 70px 24px 54px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.footer__brand { font-family: var(--serif); letter-spacing: .4em; font-size: 26px; }
.footer__nav { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.footer__nav a { color: var(--muted); text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: color .3s; }
.footer__nav a:hover { color: var(--sand); }
.footer__fine { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,240,233,.4); }

@media (max-width: 860px) {
  .bento, .features { grid-template-columns: 1fr 1fr; }
  .bento__item--wide { grid-column: span 2; }
  .location, .contact { grid-template-columns: 1fr; gap: 36px; }
  .location__media { height: 300px; }
  .facts { gap: 24px; }
  .fact { min-width: 40%; }
}
@media (max-width: 560px) {
  .bento, .features { grid-template-columns: 1fr; }
  .bento__item--wide, .bento__item--tall { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal], [data-reveal] .bento__item, [data-reveal] .feature, [data-reveal] > *, [data-reveal] .w, [data-reveal] .offer__stack li {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
  }
  .tilt { transition: none; }
}