/* cinematic-site engine v2: base styles. Each site sets its own tokens in :root (theme.css or inline). */
:root { --bg: #0a0a0a; --bg2: #141414; --ink: #f6f3ee; --soft: #b9b2a6; --line: rgba(255,255,255,.12); --accent: #d9b37a; --ease: cubic-bezier(.16,1,.3,1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --display: var(--font); --pad: clamp(18px, 5vw, 64px); color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -0.035em; line-height: 1; font-weight: 700; }
p { margin: 0; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { padding: 0 var(--pad); max-width: 1400px; margin: 0 auto; }

/* Top bar */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 16px var(--pad); mix-blend-mode: difference; color: #fff; }
.brand { font-size: 13px; letter-spacing: .32em; text-decoration: none; }
.top nav { display: flex; gap: 26px; font-size: 14px; }
.top nav a { text-decoration: none; opacity: .8; }
.top__cta { color: inherit; font-size: 14px; text-decoration: none; border: 1px solid currentColor; padding: 9px 16px; border-radius: 999px; }
@media (max-width: 860px) { .top nav { display: none; } }

/* Type */
.display { font-size: clamp(48px, 9vw, 150px); letter-spacing: -0.055em; line-height: .92; }
.display--md { font-size: clamp(40px, 6.5vw, 104px); }
.h2 { font-size: clamp(36px, 5vw, 76px); letter-spacing: -0.045em; line-height: .98; }
.kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: block; }
.lead { color: var(--soft); font-size: clamp(18px, 1.6vw, 22px); max-width: 38ch; }
.muted { color: var(--soft); }

/* Kinetic */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > i { display: inline-block; font-style: normal; transform: translateY(110%) rotate(6deg); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.is-in .w > i, .intro .w > i { transform: none; }
[data-kinetic]:not([data-kinetic="words"]) { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-kinetic].is-in:not([data-kinetic="words"]) { opacity: 1; transform: none; }
.intro .w > i { animation: rise 1.4s var(--ease) both; animation-delay: calc(.25s + var(--i) * 90ms); }
@keyframes rise { from { transform: translateY(110%) rotate(6deg); } to { transform: none; } }

/* Sequence */
.seq { position: relative; height: calc(var(--len, 5) * 100svh); }
.seq__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bg) center / cover no-repeat; }
.seq__canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--z, 1)); transform-origin: 50% 55%; }
.seq__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 45%, transparent 70%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 38%); }
.seq--clean .seq__shade { background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 30%); }
.intro { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) clamp(56px, 12vh, 120px); will-change: opacity, transform; }
.intro .hint { margin-top: 26px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--soft); display: flex; align-items: center; gap: 12px; }
.intro .hint::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--ink), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.captions { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--pad); bottom: clamp(60px, 14vh, 150px); width: min(640px, 86vw); z-index: 2; }
/* No filter: blur here: iOS Safari painted a blurred ghost of hidden captions. visibility keeps hidden ones from painting at all. */
.captions li { position: absolute; bottom: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translate3d(0, 40px, 0); transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s linear .6s; }
.captions li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s; }
.step { display: block; font-size: 12px; letter-spacing: .3em; color: var(--accent); margin-bottom: 14px; }
.captions h2 { font-size: clamp(52px, 8.5vw, 136px); letter-spacing: -0.06em; }
.captions p { opacity: .88; font-size: clamp(17px, 1.5vw, 21px); margin-top: 14px; }
.progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 26px; height: 2px; background: rgba(255,255,255,.15); z-index: 2; }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Hotspots (product callouts) */
.hotspot { position: absolute; left: var(--x); top: var(--y); z-index: 2; opacity: 0; transform: scale(.6); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.hotspot.is-on { opacity: 1; transform: none; }
.hotspot::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 30px var(--accent); }
.hotspot span { position: absolute; left: 22px; top: -14px; white-space: nowrap; font-size: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,10,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); }
.hotspot span b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.hotspot--left span { left: auto; right: 22px; }

/* Variants */
.variants { position: absolute; right: var(--pad); bottom: clamp(60px, 14vh, 150px); text-align: right; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; z-index: 3; }
.variants.is-on { opacity: 1; transform: none; pointer-events: auto; }
.variants__name { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-bottom: 18px; }
.sw { font: 600 14px/1 var(--font); color: var(--ink); background: rgba(10,10,10,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 9px 15px 9px 9px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color .3s, transform .3s var(--ease); }
.sw:hover { transform: translateY(-2px); }
.sw::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.sw.is-on { border-color: var(--accent); }
.price { font-size: clamp(15px, 1.3vw, 19px); color: var(--soft); }
.price b { display: block; font-size: clamp(44px, 6vw, 88px); color: var(--ink); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.variant-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.variant-layer.is-on { opacity: 1; }

/* Sections */
.sec { padding: clamp(90px, 16vh, 180px) 0; position: relative; }
.sec--alt { background: var(--bg2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats > div { padding: 30px 20px 0 0; }
.stats b { display: block; font-size: clamp(40px, 5vw, 80px); letter-spacing: -0.045em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { color: var(--soft); font-size: 14px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; row-gap: 30px; } }
.frame { border-radius: 18px; overflow: hidden; position: relative; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }

/* Horizontal gallery */
.h { position: relative; height: 300svh; }
.h__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.h__head { padding: 0 var(--pad); margin-bottom: 4vh; }
.h__track { display: flex; gap: 3vw; padding: 0 var(--pad); will-change: transform; }
.h__card { flex: 0 0 min(64vw, 900px); }
.h__card .frame { aspect-ratio: 16 / 10; }
.h__card img { transform: scale(1.15); }
.h__card h3 { font-size: clamp(22px, 2.2vw, 32px); margin-top: 18px; }
.h__card p { color: var(--soft); margin-top: 6px; }
@media (max-width: 700px) { .h__card { flex-basis: 82vw; } }

/* Timeline */
.tl { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.tl li { padding-top: 34px; position: relative; }
.tl li::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg); }
.tl li.done::before { background: var(--accent); }
.tl b { display: block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tl h3 { font-size: 22px; margin: 10px 0 6px; letter-spacing: -0.02em; }
.tl p { color: var(--soft); font-size: 15px; }
@media (max-width: 860px) { .tl { grid-template-columns: 1fr; } .tl::before { left: 7px; right: auto; width: 1px; height: auto; top: 0; bottom: 0; } .tl li { padding: 0 0 0 36px; } }

/* Floor plan */
.plan svg { width: 100%; height: auto; }
.plan path, .plan line, .plan rect { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.plan .thin { stroke-width: 1; stroke: var(--soft); }
.plan .room { fill: var(--soft); stroke: none; font: 500 12px var(--font); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .8s var(--ease) .2s; }
.plan.is-drawn .room { opacity: 1; }

/* Forms and buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); text-decoration: none; font: 600 16px/1 var(--font); padding: 17px 26px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--soft); letter-spacing: .04em; }
.form input, .form select, .form textarea { font: 400 17px var(--font); color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.foot { padding: 40px var(--pad); border-top: 1px solid var(--line); color: var(--soft); font-size: 13px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .seq__shade { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 55%, transparent 80%); }
  .variants { left: 18px; right: 18px; text-align: left; bottom: 64px; }
  .swatches { justify-content: flex-start; }
  .captions { bottom: 64px; }
  .seq--variants .captions { bottom: 250px; }
  .hotspot span { font-size: 12px; white-space: normal; width: max-content; max-width: 42vw; }
}
@media (prefers-reduced-motion: reduce) { .w > i, .captions li, [data-kinetic], .intro .w > i { transition: none !important; animation: none !important; transform: none !important; opacity: 1; } }