:root {
  --ink: #0F0C09;
  --ink-2: #2B2218;
  --brown: #4B4035;
  --dim: #8A7A6A;
  --sand: #A88E7C;
  --sand-2: #C2A794;
  --paper: #E9E9E8;
  --pad: clamp(16px, 3.2vw, 48px);
  --sans: 'Manrope', 'Helvetica Neue', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { background: var(--ink); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- loader: the n̄ sign draws itself, a thin line shows the real loading, then the curtain lifts ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-content: center; justify-items: center; gap: 26px;
  transition: clip-path 1.2s cubic-bezier(.77,0,.18,1) .15s, visibility 0s 1.4s; clip-path: inset(0);
}
.ld-m { position: relative; width: 64px; aspect-ratio: 698.7 / 876.5; color: var(--sand-2); }
.ld-a, .ld-b { position: absolute; inset: 0; }
.ld-m svg { width: 100%; height: 100%; display: block; }
.ld-a g > g > path:nth-child(2), .ld-b g > g > path:nth-child(1) { opacity: 0; }
/* legs rise from the floor, then the bar slides in from the middle */
.ld-a { clip-path: inset(100% 0 0 0); animation: ldRise 1.1s cubic-bezier(.65,0,.35,1) .25s forwards; }
.ld-b { transform: scaleX(0); animation: ldBar .7s cubic-bezier(.16,1,.3,1) 1.15s forwards; }
@keyframes ldRise { to { clip-path: inset(0); } }
@keyframes ldBar { to { transform: none; } }
.ld-line { width: 120px; height: 1px; background: rgba(233,233,232,.14); overflow: hidden; }
.ld-line i { display: block; height: 100%; background: var(--sand-2); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .4s ease; }
.ld-pct { margin-top: -14px; font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .14em; color: rgba(233,233,232,.6); font-variant-numeric: tabular-nums; }
.ld-t { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233,233,232,.45);
  opacity: 0; animation: ldIn .8s ease 1.4s forwards; }
@keyframes ldIn { to { opacity: 1; } }
@keyframes breathe { 50% { opacity: .35; } }
.ready .loader { clip-path: inset(0 0 100% 0); visibility: hidden; }
.ready .loader .ld-m { transform: translateY(-30px); opacity: 0; transition: transform 1s cubic-bezier(.77,0,.18,1), opacity .6s; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--pad);
}
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo b { font-weight: 600; font-size: 15px; letter-spacing: .32em; }
.logo small { font-size: 9.5px; letter-spacing: .26em; color: var(--sand-2); margin-top: 6px; text-transform: uppercase; }
.nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(16px, 2.4vw, 34px); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.nav a { opacity: .78; transition: opacity .3s; }
.nav a:hover { opacity: 1; }
/* buttons: thin pill, mono label, round arrow at the end; the fill sweeps in from the left on hover.
   --c = button colour, --on = text colour on the fill. Light by default over photos/video, theme colours on the page. */
.btn {
  --c: #E9E9E8; --on: #0F0C09;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px;
  height: 50px; padding: 0 6px 0 24px; border-radius: 99px; color: var(--c); background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
  font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: color .55s cubic-bezier(.65,0,.35,1), box-shadow .55s;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.btn:hover { color: var(--on); box-shadow: inset 0 0 0 1px var(--c); }
.btn:hover::before { transform: none; }
.btn i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: var(--on); overflow: hidden;
  transition: background .55s cubic-bezier(.65,0,.35,1), color .55s; }
.btn i::before, .btn i::after { content: '\2192'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans, sans-serif); font-size: 15px; letter-spacing: 0;
  transition: transform .55s cubic-bezier(.65,0,.35,1); }
.btn i::after { transform: translateX(-120%); }
.btn:hover i { background: var(--on); color: var(--c); }
.btn:hover i::before { transform: translateX(120%); }
.btn:hover i::after { transform: none; }
.btn:not(:has(i)) { padding: 0 26px; }
/* solid = filled from the start; hover flips the arrow only */
.btn.solid { color: var(--on); box-shadow: inset 0 0 0 1px var(--c); }
.btn.solid::before { transform: none; }
.btn.solid i { background: var(--on); color: var(--c); }

/* ---------- walk ---------- */
.walk { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.frames { position: absolute; inset: 0; }
.frame {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  will-change: transform, opacity; visibility: hidden; user-select: none; pointer-events: none;
  backface-visibility: hidden;
}
.walk-video, .walk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dip { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; }
.shade { position: absolute; inset: 0; pointer-events: none; z-index: 41;
  background:
    linear-gradient(180deg, rgba(15,12,9,.62) 0%, rgba(15,12,9,0) 22%),
    linear-gradient(0deg, rgba(15,12,9,.78) 0%, rgba(15,12,9,.2) 34%, rgba(15,12,9,0) 52%),
    radial-gradient(120% 90% at 50% 45%, rgba(15,12,9,0) 55%, rgba(15,12,9,.45) 100%);
}
/* dark backing under the opening headline, buttons and copy (fades out with them as the walk starts) */
.intro-shade { position: absolute; inset: 0; z-index: 42; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,12,9,.86) 0%, rgba(15,12,9,.7) 30%, rgba(15,12,9,.35) 55%, rgba(15,12,9,0) 75%),
              linear-gradient(0deg, rgba(15,12,9,.55) 0%, rgba(15,12,9,0) 45%); }
@media (max-width: 900px) {
  .intro-shade { background: linear-gradient(0deg, rgba(15,12,9,.92) 0%, rgba(15,12,9,.78) 38%, rgba(15,12,9,.35) 62%, rgba(15,12,9,0) 80%); }
}
.shade::after { /* left-side readability for the headline */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,12,9,.55) 0%, rgba(15,12,9,0) 48%);
}

/* ---------- intro ---------- */
.intro {
  position: absolute; z-index: 50; left: var(--pad); bottom: clamp(96px, 15vh, 150px);
  max-width: min(760px, 88vw); will-change: transform, opacity;
}
.eyebrow { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sand-2); }
.eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.intro h1 {
  margin-top: 22px; font-weight: 300; font-size: clamp(40px, 6.2vw, 96px); line-height: .98; letter-spacing: -.035em;
}
.intro h1 em { font-style: normal; color: var(--sand-2); }
.intro p { margin-top: 26px; max-width: 470px; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: rgba(233,233,232,.78); }
.intro .actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

.intro h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.intro h1 .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.ready .intro h1 .ln > span { transform: none; }
.ready .intro h1 .ln:nth-child(2) > span { transition-delay: .12s; }
.ready .intro h1 .ln:nth-child(3) > span { transition-delay: .24s; }
.intro .eyebrow, .intro p, .intro .actions { opacity: 0; transform: translateY(18px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.ready .intro .eyebrow { opacity: 1; transform: none; transition-delay: .1s; }
.ready .intro p { opacity: 1; transform: none; transition-delay: .45s; }
.ready .intro .actions { opacity: 1; transform: none; transition-delay: .6s; }

.hint {
  position: absolute; z-index: 50; right: var(--pad); bottom: 70px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(233,233,232,.7);
}
.hint i { width: 1px; height: 44px; background: rgba(233,233,232,.25); position: relative; overflow: hidden; }
.hint i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--paper); animation: drip 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes drip { to { top: 100%; } }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; }
.room { position: absolute; left: var(--pad); bottom: clamp(92px, 13vh, 130px); max-width: min(520px, 80vw); }
.room-num { font-size: 11px; letter-spacing: .24em; color: var(--sand-2); display: flex; align-items: center; gap: 14px; }
.room-num::after { content: ''; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.room-name { margin-top: 16px; font-weight: 300; font-size: clamp(34px, 4.4vw, 68px); line-height: 1; letter-spacing: -.03em; }
.room-text { margin-top: 18px; font-size: 14px; line-height: 1.65; color: rgba(233,233,232,.74); max-width: 420px; }
.room > * { opacity: 0; transform: translateY(22px); }
.room.in > * { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.room.in .room-name { transition-delay: .08s; }
.room.in .room-text { transition-delay: .18s; }

.side { position: absolute; right: var(--pad); top: clamp(92px, 13vh, 120px); width: min(260px, 40vw); text-align: right; }
.chip { display: inline-block; padding: 6px 12px; border: 1px solid rgba(233,233,232,.35); border-radius: 99px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; }
.caption { margin-top: 14px; font-size: 12px; line-height: 1.6; color: rgba(233,233,232,.72); }
.caption.in { animation: fadeUp 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

/* floor plan */
.plan { position: absolute; right: var(--pad); bottom: clamp(70px, 10vh, 96px); width: clamp(170px, 17vw, 250px); pointer-events: none; }
.plan-head { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(233,233,232,.6); margin-bottom: 10px; }
.plan svg { width: 100%; height: auto; display: block; overflow: visible; }
.pr rect { fill: rgba(15,12,9,.42); stroke: rgba(233,233,232,.32); stroke-width: .5; transition: fill .8s, stroke .8s; }
.pr text { font-size: 4.2px; fill: rgba(233,233,232,.5); letter-spacing: .04em; transition: fill .8s; }
.pr.on rect { fill: rgba(194,167,148,.22); stroke: var(--sand-2); }
.pr.on text { fill: var(--paper); }
.route { display: none; }
.route-done { fill: none; stroke: var(--sand-2); stroke-width: .8; stroke-dasharray: none; }
.cam .fov { fill: rgba(194,167,148,.28); }
.cam .dot { fill: var(--paper); }

/* progress rail */
.rail { position: absolute; z-index: 50; left: var(--pad); right: var(--pad); bottom: 34px; height: 14px; }
.rail-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(233,233,232,.18); }
.rail-fill { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--sand-2); transform-origin: 0 0; transform: scaleX(0); }
.rail-ticks button {
  position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; pointer-events: auto;
}
.rail-ticks button::before { content: ''; position: absolute; left: 5px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: rgba(233,233,232,.45); transition: background .4s, transform .4s; }
.rail-ticks button.on::before { background: var(--sand-2); transform: scale(1.4); }
.rail-ticks button::after {
  content: attr(data-label); position: absolute; bottom: 18px; left: 50%; transform: translate(-50%, 4px);
  white-space: nowrap; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .3s, transform .3s;
}
.rail-ticks button:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* outro */
.outro {
  position: absolute; z-index: 52; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 var(--pad);
  opacity: 0; visibility: hidden; background: radial-gradient(70% 65% at 50% 50%, rgba(15,12,9,.78), rgba(15,12,9,.4));
}
.outro h2 { font-weight: 300; font-size: clamp(34px, 5vw, 76px); line-height: 1.02; letter-spacing: -.03em; }
.outro h2 em { font-style: normal; color: var(--sand-2); }
.outro p { margin: 22px auto 0; max-width: 460px; font-size: 14px; line-height: 1.65; color: rgba(233,233,232,.78); }
.outro .actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.at-end .outro { pointer-events: auto; }

/* variant switcher (for comparing the hero options) */
.variants {
  position: fixed; z-index: 60; left: 50%; top: 82px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(15,12,9,.55); border: 1px solid rgba(233,233,232,.14);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.variants a { padding: 7px 13px; border-radius: 99px; white-space: nowrap; color: rgba(233,233,232,.7); transition: background .3s, color .3s; }
.variants a:hover { color: var(--paper); }
.variants a.on { background: var(--paper); color: var(--ink); }

.after { min-height: 60vh; display: grid; place-content: center; text-align: center; color: rgba(233,233,232,.4); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .top .btn { height: 40px; padding: 0 18px; font-size: 10px; }
  .top .btn i { display: none; }
  .variants { top: 72px; max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; }
  .variants a { padding: 6px 10px; white-space: nowrap; }
  .intro { bottom: 110px; }
  .intro p { font-size: 14px; }
  .side { top: 124px; width: 62vw; }
  .caption { display: none; }
  .room { bottom: 168px; }
  .room-text { font-size: 13px; }
  .plan { left: auto; right: var(--pad); bottom: 54px; width: 128px; }
  .plan-head { display: none; }
  .room { max-width: calc(100vw - 2 * var(--pad)); }
  .rail { bottom: 22px; }
  .rail-ticks button::after { display: none; }
  .hint { bottom: 54px; }
  .shade::after { background: linear-gradient(0deg, rgba(15,12,9,.5) 0%, rgba(15,12,9,0) 60%); }
}

/* ---------- video hero: chapter label + tracked callouts ---------- */
.chapter-wrap { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; }
.chapter { position: absolute; left: var(--pad); bottom: clamp(70px, 10vh, 100px); }
.ch-chip { display: inline-block; padding: 6px 12px; border: 1px solid rgba(233,233,232,.35); border-radius: 99px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; }
.ch-num { margin-top: 18px; font-size: 11px; letter-spacing: .24em; color: var(--sand-2); }
.ch-name { margin-top: 10px; font-weight: 300; font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -.02em; line-height: 1; }
.chapter .ch-num, .chapter .ch-name { opacity: 0; transform: translateY(14px); }
.chapter.in .ch-num, .chapter.in .ch-name { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.chapter.in .ch-name { transition-delay: .08s; }

.spots { position: absolute; inset: 0; z-index: 48; pointer-events: none; overflow: hidden; }
/* scene title: big uppercase grotesk at the side, as in the reference */
.scene { position: absolute; top: 50%; transform: translateY(-46%); max-width: min(760px, 56vw); visibility: hidden; }
.scene.left { left: var(--pad); }
.scene.right { right: var(--pad); text-align: right; }
.scene .m { display: block; overflow: hidden; }
.scene .m > span { display: inline-block; transform: translateY(110%); will-change: transform, opacity; }
.scene > .m:first-child { font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sand-2); }
.scene h3 { margin: 22px 0 24px; font-weight: 300; font-size: clamp(48px, 6.6vw, 118px); line-height: .9; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--paper); }
.scene h3 .m { padding-bottom: .04em; }
.scene .sub { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(233,233,232,.78); }
.side-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
/* shade behind the room titles: dense at the text edge, fading out past the middle of the screen */
.side-shade.l { background: linear-gradient(90deg, rgba(15,12,9,.88) 0%, rgba(15,12,9,.72) 28%, rgba(15,12,9,.4) 50%, rgba(15,12,9,0) 72%); }
.side-shade.r { background: linear-gradient(270deg, rgba(15,12,9,.88) 0%, rgba(15,12,9,.72) 28%, rgba(15,12,9,.4) 50%, rgba(15,12,9,0) 72%); }
@media (max-width: 700px) {   /* on phones the titles sit at the bottom, so the shade rises from there */
  .side-shade.l, .side-shade.r { background: linear-gradient(0deg, rgba(15,12,9,.92) 0%, rgba(15,12,9,.7) 35%, rgba(15,12,9,0) 65%); }
}
.chapter-wrap { display: none; }

@media (max-width: 900px) {
  .chapter { bottom: 64px; }
  .ch-name { font-size: 32px; }
}
@media (max-width: 700px) {
  .scene { max-width: calc(100vw - 2 * var(--pad)); top: auto; bottom: 120px; transform: none; }
  .scene h3 { font-size: 40px; margin: 14px 0 16px; }
  .scene .sub { font-size: 10px; letter-spacing: .14em; }
}

/* video dimming: light even layer, the picture stays bright like the reference; side shades sit under the titles */
.darken { position: absolute; inset: 0; background: rgba(15,12,9,.3); pointer-events: none; }