:root {
  --paper: #eee9e0;
  --paper-2: #e5ded3;
  --ink: #24211d;
  --muted: #706b64;
  --line: rgba(36, 33, 29, 0.18);
  --dark: #191817;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: #34302b; color: #f5f0e8; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 3.2vw;
  z-index: 80;
  color: var(--ink);
  transition: color .35s ease, background .35s ease, transform .35s ease;
}
.site-header.scrolled { background: rgba(238,233,224,.72); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  letter-spacing: -.03em;
}
.brand-copy, .desktop-nav, .header-cta { font-size: 11px; letter-spacing: .16em; font-weight: 600; }
.desktop-nav { display: flex; gap: 34px; }
.desktop-nav a, .header-cta { position: relative; }
.desktop-nav a::after, .header-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 1px;
  background: currentColor;
  transition: right .3s var(--ease);
}
.desktop-nav a:hover::after, .header-cta:hover::after { right: 0; }
.header-cta { justify-self: end; display: flex; gap: 9px; align-items: center; }


.scroll-story { height: 560vh; position: relative; }
.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
  background: var(--paper);
}
.story-copy {
  position: absolute;
  top: 19vh;
  left: 6vw;
  width: 49vw;
  z-index: 8;
  pointer-events: none;
}
.chapter {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .5s var(--ease), transform .65s var(--ease);
}
.chapter.is-active { opacity: 1; transform: translateY(0); }
.eyebrow {
  margin: 0 0 19px;
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 600;
  text-transform: uppercase;
}
.chapter h1, .chapter h2,
.section-heading h2, .process-sticky h2, .studio-copy h2, .contact h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .98;
}
.chapter h1 { font-size: clamp(48px, 5.4vw, 88px); }
.chapter h2 { font-size: clamp(44px, 4.9vw, 76px); }
em { font-weight: 500; }

.room-wrap {
  position: absolute;
  right: -1vw;
  bottom: -1.5vh;
  width: min(79vw, 1260px);
  height: min(79vh, 800px);
  z-index: 2;
  transform-origin: 60% 70%;
}
.room { width: 100%; height: 100%; overflow: visible; }
.layer { will-change: transform, opacity; transform-box: fill-box; transform-origin: center; }
.layer-window, .layer-panel, .layer-art, .layer-rug, .layer-sofa,
.layer-table, .layer-lamp, .layer-plant, .layer-lighting { opacity: 0; }
.room-label {
  position: absolute;
  right: 3.2vw;
  bottom: 5vh;
  display: flex;
  gap: 28px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  z-index: 4;
}
.story-progress {
  position: absolute;
  left: 6vw;
  bottom: 8vh;
  z-index: 7;
  display: grid;
  grid-template-columns: 180px 28px 36px;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 600;
}
.progress-track { height: 1px; background: var(--line); }
.progress-track span { display: block; height: 1px; width: 0%; background: var(--ink); }
.scroll-cue {
  position: absolute;
  right: 3.2vw;
  top: 16vh;
  display: flex;
  align-items: center;
  gap: 16px;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: .2em;
  font-weight: 600;
  z-index: 9;
}
.scroll-line { width: 1px; height: 58px; background: var(--ink); transform-origin: top; animation: pulseLine 1.7s ease-in-out infinite; }
@keyframes pulseLine { 0%,100%{transform:scaleY(.35);opacity:.25} 50%{transform:scaleY(1);opacity:1} }

.intro-band {
  min-height: 72vh;
  padding: 11vh 6vw 9vh;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: .45fr 1.9fr .65fr;
  align-items: center;
  gap: 5vw;
}
.intro-number { font-family: Georgia, "Times New Roman", serif; font-size: clamp(76px, 10vw, 160px); color: #a89d8f; line-height: 1; }
.intro-band > p { margin: 0; max-width: 900px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 4.1vw, 68px); line-height: 1.08; letter-spacing: -.028em; }
.intro-meta { display: flex; flex-direction: column; gap: 15px; align-self: end; padding-bottom: 12px; font-size: 9px; letter-spacing: .18em; font-weight: 600; }

.projects { padding: 14vh 5vw 18vh; }
.section-heading { margin: 0 0 10vh 1vw; }
.section-heading h2 { font-size: clamp(58px, 7vw, 112px); }
.project { margin-bottom: 11vh; }
.project-visual { position: relative; overflow: hidden; background: #cfc4b6; min-height: 420px; }
.project-one .project-visual { height: 74vh; min-height: 620px; }
.project-caption { display: flex; justify-content: space-between; gap: 30px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 14px; }
.project-caption > div { display: flex; align-items: center; gap: 18px; }
.project-caption h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; }
.project-caption span { font-size: 9px; letter-spacing: .16em; font-weight: 600; }
.project-caption.compact h3 { font-size: 25px; }
.project-grid { display: grid; grid-template-columns: 1.05fr .75fr; gap: 9vw; align-items: start; }
.project-grid .project-visual { height: 62vh; }
.project-offset { margin-top: 24vh; }

.visual-limestone { background: linear-gradient(145deg, #d8cec0 0 54%, #b4a28d 54%); }
.arch-window { position:absolute; width:38%; height:67%; left:10%; top:11%; border-radius: 180px 180px 0 0; background:linear-gradient(#b7c4c1,#d9d5c8); box-shadow: inset 0 0 0 18px #aa9b87; }
.low-sofa { position:absolute; width:42%; height:22%; right:12%; bottom:17%; border-radius: 48px 48px 16px 16px; background:#d6cbbc; box-shadow:0 32px 45px rgba(62,49,38,.14); }
.low-sofa::before { content:""; position:absolute; left:5%; right:5%; height:44%; top:-20%; background:#e3dacd; border-radius:36px 36px 8px 8px; }
.stone-table { position:absolute; width:22%; height:8%; left:43%; bottom:16%; border-radius:50%; background:#836d58; box-shadow:0 24px 35px rgba(57,46,36,.22); }
.stone-table::after { content:""; position:absolute; width:16%; height:150%; left:42%; top:70%; background:#685646; }
.project-shadow { position:absolute; width:74%; height:20%; left:14%; bottom:3%; border-radius:50%; background:rgba(79,59,43,.12); filter:blur(20px); }

.visual-nocturne { background: #282623; }
.nocturne-wall { position:absolute; left:8%; top:7%; width:84%; height:71%; background:linear-gradient(110deg,#292825,#49433c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.nocturne-sofa { position:absolute; width:70%; height:26%; left:15%; bottom:12%; border-radius:42px 42px 10px 10px; background:#57534e; box-shadow:0 34px 50px rgba(0,0,0,.33); }
.nocturne-sofa::before { content:""; position:absolute; width:36%; height:72%; left:8%; top:-46%; background:#66605a; border-radius:28px 28px 3px 3px; }
.nocturne-glow { position:absolute; width:3px; height:50%; top:16%; right:23%; background:#ddc494; box-shadow:0 0 38px #ddc494; opacity:.75; }

.visual-courtyard { background:linear-gradient(#d9d0c3 0 67%, #b7a48e 67%); }
.courtyard-sun { position:absolute; width:210px; height:210px; border-radius:50%; background:#dfc590; right:-35px; top:-45px; opacity:.72; }
.courtyard-wall { position:absolute; width:58%; height:68%; left:5%; top:7%; background:#e6dfd4; box-shadow:inset -1px 0 rgba(0,0,0,.08); }
.courtyard-chair { position:absolute; width:34%; height:22%; left:22%; bottom:13%; border-radius:100% 20% 25% 28%; background:#816e5c; transform:skewX(-5deg); }
.courtyard-tree { position:absolute; width:11px; height:48%; right:21%; bottom:11%; background:#625543; }
.courtyard-tree::before, .courtyard-tree::after { content:""; position:absolute; border-radius:50%; background:#6c7b67; }
.courtyard-tree::before { width:120px; height:180px; left:-52px; top:-55px; transform:rotate(21deg); }
.courtyard-tree::after { width:102px; height:138px; left:-12px; top:-19px; background:#7f8b72; transform:rotate(-20deg); }

.process { background: var(--dark); color: #e9e3da; padding: 15vh 6vw 17vh; display: grid; grid-template-columns: .95fr 1fr; gap: 10vw; }
.process-sticky { position: sticky; top: 18vh; align-self: start; }
.process-sticky h2 { font-size: clamp(48px, 5.8vw, 92px); }
.process-list article { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 8vh 0; border-top: 1px solid rgba(255,255,255,.16); }
.process-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.process-list article > span { font-size: 10px; letter-spacing: .16em; color:#918b83; }
.process-list h3 { margin: 0 0 18px; font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:42px; }
.process-list p { margin:0; max-width:520px; color:#aaa49b; line-height:1.75; font-size:14px; }

.studio { padding: 18vh 6vw; }
.studio-quote { min-height: 68vh; display:grid; grid-template-columns: 1fr .25fr; gap:6vw; align-items:center; border-bottom:1px solid var(--line); }
.studio-quote p { margin:0; max-width:1120px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(48px,6vw,98px); line-height:1.04; letter-spacing:-.03em; }
.studio-quote span { align-self:end; padding-bottom:7vh; font-size:9px; letter-spacing:.18em; font-weight:600; }
.studio-card { display:grid; grid-template-columns:1.1fr .9fr; gap:9vw; padding-top:14vh; align-items:center; }
.studio-portrait { height:74vh; min-height:560px; position:relative; overflow:hidden; background:#b9ab99; }
.portrait-arch { position:absolute; left:12%; top:8%; width:76%; height:75%; border-radius:48% 48% 0 0; background:linear-gradient(#d9d0c1,#c7b9a8); box-shadow:inset 0 0 0 18px rgba(78,62,48,.14); }
.portrait-seat { position:absolute; width:44%; height:24%; left:22%; bottom:12%; background:#6c5d4d; border-radius:50% 50% 18% 20%; transform:rotate(-4deg); box-shadow:0 28px 30px rgba(52,41,32,.18); }
.portrait-vase { position:absolute; right:18%; bottom:12%; width:8%; height:24%; border-radius:48% 48% 34% 34%; background:#d5c3a7; }
.portrait-vase::before { content:""; position:absolute; width:5px; height:180%; left:50%; bottom:74%; background:#544f42; transform:rotate(-9deg); transform-origin:bottom; box-shadow:18px 7px 0 #6c705a,-17px 10px 0 #73765f; }
.studio-copy h2 { font-size:clamp(48px,5vw,78px); margin-bottom:34px; }
.studio-copy > p:not(.eyebrow) { color:var(--muted); max-width:540px; line-height:1.8; font-size:14px; }
.studio-copy a { display:inline-flex; gap:12px; margin-top:35px; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:10px; letter-spacing:.16em; font-weight:600; }

.contact { min-height:100vh; background:#b9aa95; padding:15vh 6vw 5vh; display:grid; grid-template-columns:1.1fr .6fr; grid-template-rows:1fr auto; gap:7vw; align-items:center; }
.contact h2 { font-size:clamp(68px,8vw,132px); }
.contact-button { justify-self:end; width:250px; height:250px; border:1px solid rgba(36,33,29,.65); border-radius:50%; display:flex; align-items:center; justify-content:center; gap:20px; font-size:10px; letter-spacing:.15em; font-weight:600; transition:transform .45s var(--ease), background .35s ease, color .35s ease; }
.contact-button:hover { transform:scale(1.05) rotate(-4deg); background:var(--ink); color:#ede7dd; }
.contact-footer { grid-column:1/-1; border-top:1px solid rgba(36,33,29,.28); padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:9px; letter-spacing:.15em; font-weight:600; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .85s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity:1; transform:none; }

@media (max-width: 1024px) {
  .site-header { height:76px; padding:0 24px; grid-template-columns:1fr 1fr; }
  .desktop-nav { display:none; }
  .brand-copy { display:none; }
      .story-copy { left:24px; top:15vh; width:80vw; }
  .room-wrap { width:100vw; right:-14vw; bottom:4vh; height:64vh; }
  .story-progress { left:24px; bottom:4vh; }
  .scroll-cue { right:18px; }
  .intro-band { padding-left:24px; padding-right:24px; grid-template-columns:.4fr 1.6fr; }
  .intro-meta { display:none; }
  .projects { padding-left:24px; padding-right:24px; }
  .process { padding-left:24px; padding-right:24px; grid-template-columns:1fr; }
  .process-sticky { position:relative; top:0; }
  .studio { padding-left:24px; padding-right:24px; }
  .studio-quote { grid-template-columns:1fr; }
  .studio-quote span { padding-bottom:5vh; }
  .contact { padding-left:24px; padding-right:24px; }
}

@media (max-width: 720px) {
  .showroom-float { left: 16px; bottom: 16px; padding: 10px 14px; font-size: 10px; }
  .site-header { height:68px; }
  .header-cta { font-size:9px; letter-spacing:.12em; }
  .scroll-story { height:510vh; }
  .story-sticky { min-height:600px; }
  .story-copy { top:13vh; width:88vw; }
  .eyebrow { font-size:8px; margin-bottom:12px; }
  .chapter h1 { font-size:clamp(42px,12vw,64px); }
  .chapter h2 { font-size:clamp(40px,11.4vw,60px); }
  .room-wrap { width:123vw; right:-38vw; bottom:8vh; height:56vh; }
  .room-label { display:none; }
  .story-progress { grid-template-columns:120px 24px 30px; bottom:3.2vh; }
  .scroll-cue { display:none; }
  .intro-band { min-height:68vh; display:block; padding-top:12vh; }
  .intro-number { margin-bottom:40px; }
  .intro-band > p { font-size:clamp(34px,10vw,52px); }
  .section-heading h2 { font-size:clamp(52px,15vw,78px); }
  .projects { padding-top:11vh; padding-bottom:10vh; }
  .project-one .project-visual { height:58vh; min-height:430px; }
  .project-grid { grid-template-columns:1fr; gap:0; }
  .project-grid .project-visual { height:56vh; }
  .project-offset { margin-top:0; }
  .project-caption { align-items:flex-start; }
  .project-caption > div:last-child { flex-direction:column; align-items:flex-end; gap:7px; }
  .project-caption h3 { font-size:24px; }
  .process { padding-top:11vh; padding-bottom:11vh; }
  .process-sticky h2 { font-size:clamp(50px,14vw,74px); }
  .process-list article { grid-template-columns:44px 1fr; padding:6vh 0; }
  .process-list h3 { font-size:34px; }
  .studio { padding-top:12vh; padding-bottom:12vh; }
  .studio-quote { min-height:58vh; }
  .studio-quote p { font-size:clamp(42px,12vw,65px); }
  .studio-card { grid-template-columns:1fr; padding-top:10vh; }
  .studio-portrait { height:58vh; min-height:430px; }
  .studio-copy h2 { font-size:clamp(46px,13vw,68px); }
  .contact { min-height:92vh; grid-template-columns:1fr; grid-template-rows:auto auto auto; align-content:center; }
  .contact h2 { font-size:clamp(60px,17vw,90px); }
  .contact-button { justify-self:start; width:185px; height:185px; }
  .contact-footer { grid-column:1; flex-direction:column; gap:10px; margin-top:5vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* V4 responsive hardening */
img,svg,video,canvas{max-width:100%;height:auto}body{min-width:0}.site-header>*{min-width:0}
@media (min-width:721px) and (max-width:1180px){.story-copy{left:4vw;width:48vw}.room-wrap{right:-8vw;width:84vw}.projects{padding-left:4vw;padding-right:4vw}.project-grid{gap:5vw}.process{gap:6vw;padding-left:5vw;padding-right:5vw}}
@media (max-width:720px){.story-sticky{min-height:100svh;height:100svh}.scroll-story{height:480vh}.room-wrap{max-width:none}.project-one .project-visual{min-height:460px}.project-grid .project-visual{min-height:390px}.site-header{padding-left:18px;padding-right:18px}.brand-copy{max-width:130px;white-space:normal;line-height:1.3}}
@media (max-width:430px){.site-header{height:68px}.brand-copy{display:none}.project-caption{gap:12px}.project-caption h3{font-size:22px}.project-caption span{font-size:8px}.process-list article{grid-template-columns:42px 1fr}.process-list h3{font-size:32px}.intro-band>p{font-size:32px}}

.photo-visual img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.project:hover .photo-visual img { transform:scale(1.03); }
.studio-photo-wrap { background:#d4c8b9; }
.studio-photo { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.footer-showroom { font-size:9px; letter-spacing:.15em; font-weight:600; }


.showroom-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 95;
  padding: 12px 16px;
  border: 1px solid rgba(36,33,29,.18);
  background: rgba(238,233,224,.86);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(25,24,23,.08);
}
.showroom-float:hover { transform: translateY(-1px); }

@media (max-width: 720px) {
  .room-wrap { width: 100vw; right: -10vw; bottom: 8vh; height: 58vh; }
  .hero-photo-overlay { background: linear-gradient(180deg, rgba(238,233,224,.24), rgba(238,233,224,0) 24%), linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.10)); }
}


/* V16 hero redesign */
.scroll-story.scroll-story-v16 {
  height: 520vh;
  position: relative;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 232, 216, .56), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255, 244, 227, .72), transparent 26%),
    linear-gradient(180deg, #f7f2ea 0%, #efe8de 52%, #ebe2d7 100%);
}
.story-sticky.story-sticky-v16 {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 78%, rgba(212, 193, 167, .18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)),
    linear-gradient(180deg, #f7f2ea 0%, #efe8de 52%, #ebe2d7 100%);
}
.hero-blur {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: .55;
  pointer-events: none;
}
.blur-a { width: 320px; height: 320px; left: 7vw; top: 16vh; background: rgba(244, 218, 198, .68); }
.blur-b { width: 420px; height: 420px; right: 4vw; top: 14vh; background: rgba(255, 243, 222, .82); }
.blur-c { width: 520px; height: 180px; left: 50%; bottom: 7vh; transform: translateX(-50%); background: rgba(201, 174, 148, .24); filter: blur(70px); }
.hero-pill {
  position: absolute;
  left: 50%;
  top: 98px;
  transform: translateX(-50%);
  z-index: 8;
  padding: 10px 18px;
  border: 1px solid rgba(42, 34, 28, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(42,34,28,.08);
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 700;
  white-space: nowrap;
}
.story-copy.story-copy-v16 {
  position: absolute;
  left: 6vw;
  bottom: 10vh;
  top: auto;
  width: min(34vw, 520px);
  z-index: 9;
  pointer-events: none;
}
.story-copy-v16 .chapter {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .45s var(--ease), transform .65s var(--ease);
}
.story-copy-v16 .chapter.is-active { opacity: 1; transform: translateY(0); }
.story-copy-v16 .eyebrow { margin: 0 0 14px; }
.story-copy-v16 h1, .story-copy-v16 h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
  max-width: 12ch;
}
.story-copy-v16 h1 { font-size: clamp(54px, 5.4vw, 92px); }
.story-copy-v16 h2 { font-size: clamp(48px, 4.8vw, 78px); }
.story-copy-v16 .lead {
  margin: 20px 0 0;
  max-width: 440px;
  color: rgba(36,33,29,.72);
  font-size: 14px;
  line-height: 1.75;
}
.scene-stage {
  position: absolute;
  left: 58%;
  top: 52%;
  width: min(82vw, 1120px);
  height: min(64vw, 720px);
  max-height: 74vh;
  transform: translate(-50%, -50%) perspective(1800px) rotateX(6deg) rotateY(-8deg) scale(.94);
  transform-style: preserve-3d;
  transform-origin: 50% 62%;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(244,238,231,.92));
  border: 1px solid rgba(42,34,28,.10);
  z-index: 4;
  overflow: hidden;
}
.scene-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%);
  pointer-events: none;
  z-index: 5;
}
.scene-stage-chrome {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 24px;
  pointer-events: none;
  z-index: 2;
}
.scene-shadow {
  position: absolute;
  inset: auto 6% 2%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,71,57,.22), rgba(94,71,57,0) 70%);
  filter: blur(22px);
  z-index: 1;
}
.room-model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
}
.scene-base {
  opacity: .92;
  filter: drop-shadow(0 24px 24px rgba(38,31,25,.08));
}
.scene-layer {
  opacity: 0;
  will-change: transform, opacity;
  transform-box: fill-box;
  transform-origin: center;
}
.scene-caption {
  position: absolute;
  right: 28px;
  bottom: 22px;
  display: flex;
  gap: 18px;
  z-index: 6;
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 700;
}
.story-progress { left: 6vw; bottom: 5vh; z-index: 10; }
.scroll-cue { right: 2.8vw; top: 50%; transform: translateY(-50%); z-index: 10; }

@media (max-width: 1180px) {
  .scene-stage { left: 60%; width: min(88vw, 980px); }
  .story-copy.story-copy-v16 { width: min(38vw, 430px); left: 4vw; }
  .story-copy-v16 .lead { max-width: 360px; }
}
@media (max-width: 1024px) {
  .scroll-story.scroll-story-v16 { height: 500vh; }
  .hero-pill { top: 88px; font-size: 9px; }
  .story-copy.story-copy-v16 {
    left: 24px;
    width: min(44vw, 360px);
    bottom: 8vh;
  }
  .scene-stage {
    left: 62%;
    width: min(92vw, 860px);
    height: min(76vw, 620px);
    max-height: 64vh;
  }
}
@media (max-width: 720px) {
  .scroll-story.scroll-story-v16 { height: 480vh; }
  .story-sticky.story-sticky-v16 { min-height: 100svh; height: 100svh; }
  .hero-pill {
    top: 76px;
    max-width: calc(100vw - 34px);
    padding: 9px 14px;
    font-size: 8px;
    letter-spacing: .16em;
  }
  .scene-stage {
    left: 50%;
    top: 42%;
    width: calc(100vw - 24px);
    height: min(72vw, 360px);
    max-height: none;
    border-radius: 24px;
  }
  .scene-stage-chrome { inset: 10px; border-radius: 18px; }
  .scene-caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    gap: 10px;
    justify-content: space-between;
    font-size: 7px;
  }
  .story-copy.story-copy-v16 {
    left: 18px;
    right: 18px;
    width: auto;
    bottom: 8.5vh;
  }
  .story-copy-v16 h1 { font-size: clamp(42px, 12vw, 62px); }
  .story-copy-v16 h2 { font-size: clamp(38px, 10.8vw, 58px); }
  .story-copy-v16 .lead { margin-top: 14px; font-size: 13px; line-height: 1.6; max-width: 92%; }
  .story-progress { left: 18px; bottom: 3vh; grid-template-columns: 110px 24px 30px; }
  .scroll-cue { display: none; }
}


/* V17 realistic cinematic hero */
.scroll-story.cinematic-story {
  height: 500vh;
  position: relative;
  background: #f3ece3;
}
.cinematic-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 24%, rgba(255,231,210,.76), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(255,245,229,.78), transparent 30%),
    linear-gradient(180deg, #f7f2ea 0%, #efe7dc 100%);
}
.ambient { position:absolute; border-radius:50%; pointer-events:none; filter:blur(90px); }
.ambient-one { width:360px; height:360px; left:-80px; top:18%; background:rgba(240,203,180,.34); }
.ambient-two { width:460px; height:460px; right:-80px; top:8%; background:rgba(255,236,205,.38); }
.ambient-three { width:560px; height:180px; left:48%; bottom:4%; transform:translateX(-50%); background:rgba(171,135,105,.18); filter:blur(70px); }
.cinema-badge {
  position:absolute;
  top:96px;
  left:50%;
  transform:translateX(-50%);
  z-index:12;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(44,36,30,.12);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(40,31,24,.07);
  font-size:9px;
  letter-spacing:.2em;
  font-weight:700;
  white-space:nowrap;
}
.cinema-scene {
  position:absolute;
  left:61%;
  top:51%;
  width:min(78vw,1150px);
  height:min(62vw,690px);
  max-height:72vh;
  transform:translate(-50%,-50%) perspective(1800px) rotateX(3.5deg) rotateY(-5.5deg) scale(.965);
  transform-style:preserve-3d;
  transform-origin:50% 60%;
  z-index:5;
  border-radius:36px;
  box-shadow:0 36px 90px rgba(47,35,27,.15), inset 0 1px 0 rgba(255,255,255,.78);
  transition:box-shadow .2s linear;
}
.cinema-image-wrap {
  --scene-scale:1.035;
  --base-blur:12px;
  --base-sat:.68;
  --base-bright:1.08;
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:36px;
  background:#d8c3ad;
  border:1px solid rgba(65,47,34,.10);
  isolation:isolate;
}
.cinema-image-wrap::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  box-shadow:inset 0 0 0 14px rgba(255,255,255,.08), inset 0 0 70px rgba(54,38,28,.07);
  border-radius:inherit;
}
.cinema-base,
.cinema-focus,
.cinema-final {
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  object-fit:cover;
  object-position:center;
  transform:scale(var(--scene-scale));
  will-change:opacity,filter,transform;
}
.cinema-base {
  z-index:1;
  filter:blur(var(--base-blur)) saturate(var(--base-sat)) brightness(var(--base-bright));
}
.cinema-focus { z-index:2; opacity:0; filter:saturate(.98) contrast(1.02); }
.focus-window {
  -webkit-mask-image:radial-gradient(ellipse 42% 78% at 18% 50%, #000 0 55%, transparent 82%);
  mask-image:radial-gradient(ellipse 42% 78% at 18% 50%, #000 0 55%, transparent 82%);
}
.focus-living {
  -webkit-mask-image:radial-gradient(ellipse 62% 48% at 53% 69%, #000 0 48%, transparent 79%);
  mask-image:radial-gradient(ellipse 62% 48% at 53% 69%, #000 0 48%, transparent 79%);
}
.focus-stone {
  -webkit-mask-image:radial-gradient(ellipse 45% 72% at 78% 48%, #000 0 51%, transparent 81%);
  mask-image:radial-gradient(ellipse 45% 72% at 78% 48%, #000 0 51%, transparent 81%);
}
.cinema-final { z-index:4; opacity:0; }
.cinema-glass {
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 110%,rgba(255,244,229,.20),transparent 44%);
}
.cinema-meta {
  position:absolute;
  right:26px;
  bottom:20px;
  z-index:10;
  display:flex;
  gap:18px;
  color:#2e2721;
  font-size:8px;
  letter-spacing:.16em;
  font-weight:700;
}
.cinema-copy {
  position:absolute;
  left:6vw;
  bottom:11vh;
  width:min(31vw,500px);
  z-index:11;
}
.cinema-copy .chapter {
  position:absolute;
  left:0;
  bottom:0;
  top:auto;
  opacity:0;
  width:100%;
  transform:translateY(32px);
  transition:opacity .45s var(--ease), transform .65s var(--ease);
}
.cinema-copy .chapter.is-active { opacity:1; transform:translateY(0); }
.cinema-copy .eyebrow { margin-bottom:14px; }
.cinema-copy h1,
.cinema-copy h2 {
  margin:0;
  max-width:11ch;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.94;
}
.cinema-copy h1 { font-size:clamp(58px,5.6vw,96px); }
.cinema-copy h2 { font-size:clamp(50px,4.8vw,78px); }
.cinema-lead {
  margin:20px 0 0;
  max-width:420px;
  color:rgba(39,33,28,.68);
  font-size:14px;
  line-height:1.75;
}
.cinema-progress { left:6vw; bottom:5vh; z-index:12; }
.cinema-scroll-cue { right:2.6vw; top:50%; transform:translateY(-50%); z-index:12; }

@media (max-width:1180px) {
  .cinema-scene { left:63%; width:min(83vw,980px); }
  .cinema-copy { left:4vw; width:min(35vw,430px); }
}
@media (max-width:1024px) {
  .cinematic-sticky { min-height:100svh; height:100svh; }
  .cinema-badge { top:84px; font-size:8px; }
  .cinema-scene { left:61%; top:48%; width:88vw; height:min(65vw,600px); max-height:63vh; }
  .cinema-copy { left:24px; bottom:8.5vh; width:min(42vw,390px); }
  .cinema-copy h1 { font-size:clamp(50px,6vw,76px); }
  .cinema-copy h2 { font-size:clamp(44px,5.4vw,68px); }
  .cinema-lead { max-width:340px; }
}
@media (max-width:720px) {
  .scroll-story.cinematic-story { height:450vh; }
  .cinema-badge { top:74px; max-width:calc(100vw - 34px); padding:9px 13px; font-size:7.5px; letter-spacing:.14em; }
  .cinema-scene { left:50%; top:39%; width:calc(100vw - 22px); height:58vw; max-height:none; border-radius:24px; }
  .cinema-image-wrap { border-radius:24px; }
  .cinema-meta { left:14px; right:14px; bottom:13px; gap:8px; justify-content:space-between; font-size:6.5px; }
  .cinema-copy { left:18px; right:18px; bottom:8.3vh; width:auto; }
  .cinema-copy h1 { font-size:clamp(42px,12vw,60px); }
  .cinema-copy h2 { font-size:clamp(38px,10.8vw,56px); }
  .cinema-lead { margin-top:13px; max-width:92%; font-size:12.5px; line-height:1.55; }
  .cinema-progress { left:18px; bottom:2.6vh; grid-template-columns:105px 24px 30px; }
  .cinema-scroll-cue { display:none; }
}


/* V18 — photorealistic hero only. No SVG hero. */
.realistic-story { height: 510vh !important; }
.realistic-sticky {
  background:
    radial-gradient(circle at 14% 26%, rgba(255,231,211,.72), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(255,244,226,.82), transparent 32%),
    linear-gradient(180deg, #f7f2ea 0%, #efe7dc 100%) !important;
}
.realistic-scene {
  left: 62%;
  top: 51%;
  width: min(80vw, 1180px);
  height: min(59vw, 700px);
  max-height: 73vh;
}
.realistic-image-wrap {
  --scene-scale: 1.045;
  --base-blur: 15px;
  --base-sat: .30;
  --base-bright: 1.20;
  --base-opacity: .18;
  background: #ddd0c1;
}
.realistic-base,
.cinema-reveal,
.realistic-final {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center center;
  transform: scale(var(--scene-scale));
  will-change: opacity, transform, filter;
}
.realistic-base {
  z-index: 1;
  opacity: var(--base-opacity);
  filter: blur(var(--base-blur)) saturate(var(--base-sat)) brightness(var(--base-bright)) contrast(.92);
}
.cinema-reveal {
  z-index: 3;
  opacity: 0;
  filter: blur(7px) saturate(.86) contrast(.95);
}
.reveal-architecture {
  -webkit-mask-image: radial-gradient(ellipse 42% 92% at 15% 51%, #000 0 56%, rgba(0,0,0,.86) 68%, transparent 88%);
  mask-image: radial-gradient(ellipse 42% 92% at 15% 51%, #000 0 56%, rgba(0,0,0,.86) 68%, transparent 88%);
}
.reveal-material {
  -webkit-mask-image: radial-gradient(ellipse 62% 74% at 64% 38%, #000 0 46%, rgba(0,0,0,.84) 63%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 74% at 64% 38%, #000 0 46%, rgba(0,0,0,.84) 63%, transparent 88%);
}
.reveal-seating {
  -webkit-mask-image: radial-gradient(ellipse 74% 48% at 54% 68%, #000 0 48%, rgba(0,0,0,.86) 64%, transparent 89%);
  mask-image: radial-gradient(ellipse 74% 48% at 54% 68%, #000 0 48%, rgba(0,0,0,.86) 64%, transparent 89%);
}
.reveal-table {
  -webkit-mask-image: radial-gradient(ellipse 34% 34% at 53% 75%, #000 0 46%, rgba(0,0,0,.86) 66%, transparent 92%);
  mask-image: radial-gradient(ellipse 34% 34% at 53% 75%, #000 0 46%, rgba(0,0,0,.86) 66%, transparent 92%);
}
.reveal-decor {
  -webkit-mask-image: radial-gradient(ellipse 46% 80% at 79% 48%, #000 0 44%, rgba(0,0,0,.84) 62%, transparent 90%);
  mask-image: radial-gradient(ellipse 46% 80% at 79% 48%, #000 0 44%, rgba(0,0,0,.84) 62%, transparent 90%);
}
.realistic-final {
  z-index: 5;
  opacity: 0;
  filter: saturate(1.02) contrast(1.01);
}
.cinema-wash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .62;
  background:
    linear-gradient(180deg, rgba(248,241,232,.32), rgba(248,241,232,.08)),
    radial-gradient(circle at 54% 52%, rgba(248,240,229,.16), rgba(248,240,229,.56));
  mix-blend-mode: screen;
}
.realistic-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,248,239,.12), transparent 24%, transparent 76%, rgba(39,27,19,.04));
}

@media (max-width: 1180px) {
  .realistic-scene { left: 63%; width: min(84vw, 1020px); }
}
@media (max-width: 1024px) {
  .realistic-scene { left: 61%; top: 48%; width: 90vw; height: min(66vw, 620px); max-height: 64vh; }
}
@media (max-width: 720px) {
  .realistic-story { height: 470vh !important; }
  .realistic-scene {
    left: 50%;
    top: 39%;
    width: calc(100vw - 20px);
    height: 60vw;
    max-height: none;
  }
  .realistic-image-wrap { border-radius: 22px; }
  .reveal-architecture { -webkit-mask-image: radial-gradient(ellipse 52% 95% at 16% 52%, #000 0 55%, transparent 90%); mask-image: radial-gradient(ellipse 52% 95% at 16% 52%, #000 0 55%, transparent 90%); }
  .reveal-material { -webkit-mask-image: radial-gradient(ellipse 68% 78% at 64% 38%, #000 0 48%, transparent 90%); mask-image: radial-gradient(ellipse 68% 78% at 64% 38%, #000 0 48%, transparent 90%); }
  .reveal-seating { -webkit-mask-image: radial-gradient(ellipse 82% 56% at 54% 69%, #000 0 50%, transparent 92%); mask-image: radial-gradient(ellipse 82% 56% at 54% 69%, #000 0 50%, transparent 92%); }
}


/* V19 — true batch-by-batch interior assembly. No sweep / no moving reveal window. */
.batch-story { height: 540vh; position: relative; }
.batch-sticky {
  position: sticky; top: 0; height: 100vh; min-height: 690px; overflow: hidden;
  background:
    radial-gradient(circle at 12% 28%, rgba(255,232,216,.55), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,245,224,.72), transparent 30%),
    linear-gradient(180deg,#f7f2ea 0%,#eee6dc 100%);
}
.batch-ambient { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.52; }
.ambient-a { width:340px;height:340px;left:2vw;top:16vh;background:rgba(244,218,198,.66); }
.ambient-b { width:460px;height:460px;right:2vw;top:13vh;background:rgba(255,243,222,.78); }
.batch-badge {
  position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:11;
  padding:10px 18px;border:1px solid rgba(42,34,28,.12);border-radius:999px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(42,34,28,.07);
  font-size:9px;letter-spacing:.2em;font-weight:700;white-space:nowrap;
}
.batch-scene {
  position:absolute;left:62%;top:49%;width:min(73vw,1120px);aspect-ratio:3/2;
  transform:translate(-50%,-50%);transform-origin:50% 60%;z-index:4;
  border-radius:34px;overflow:hidden;border:1px solid rgba(42,34,28,.10);
  background:#e7ddd0;box-shadow:0 42px 90px rgba(57,42,32,.16),inset 0 1px 0 rgba(255,255,255,.62);
  will-change:transform;
}
.batch-image-wrap { position:absolute;inset:0;overflow:hidden;background:#e3d8ca; }
.empty-room,.batch-final { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.empty-room { z-index:1; filter:saturate(.94) contrast(.98) brightness(1.02); }
.batch-svg { position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible; }
.batch-layer { opacity:0;will-change:opacity,transform,filter;transform-box:fill-box;transform-origin:center; }
.batch-final { z-index:7;opacity:0;will-change:opacity,transform; }
.batch-glass { position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.05),transparent 35%); }
.batch-meta { position:absolute;right:26px;bottom:20px;z-index:10;display:flex;gap:18px;font-size:8px;letter-spacing:.15em;font-weight:700;color:#2d2823;text-shadow:0 1px 5px rgba(255,255,255,.9); }
.batch-copy { position:absolute;left:6vw;bottom:11vh;width:min(31vw,470px);z-index:12;pointer-events:none; }
.batch-copy .chapter { position:absolute;left:0;bottom:0;top:auto;width:100%;opacity:0;transform:translateY(30px);transition:opacity .42s var(--ease),transform .62s var(--ease); }
.batch-copy .chapter.is-active { opacity:1;transform:none; }
.batch-copy h1,.batch-copy h2 { margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.045em;line-height:.94;max-width:10ch; }
.batch-copy h1 { font-size:clamp(54px,5.1vw,88px); }
.batch-copy h2 { font-size:clamp(48px,4.6vw,76px); }
.batch-lead { margin:20px 0 0;max-width:410px;color:rgba(36,33,29,.68);font-size:13px;line-height:1.72; }
.batch-progress { left:6vw;bottom:5vh;z-index:13; }
.batch-scroll-cue { right:2.5vw;top:50%;transform:translateY(-50%);z-index:13; }

@media (max-width:1180px){
  .batch-scene{left:64%;width:min(78vw,980px)}
  .batch-copy{left:4vw;width:min(34vw,400px)}
}
@media (max-width:1024px){
  .batch-story{height:510vh}
  .batch-badge{top:82px;font-size:8px}
  .batch-scene{left:61%;top:47%;width:88vw}
  .batch-copy{left:24px;width:min(42vw,360px);bottom:9vh}
}
@media (max-width:720px){
  .batch-story{height:480vh}
  .batch-sticky{height:100svh;min-height:100svh}
  .batch-badge{top:74px;max-width:calc(100vw - 34px);padding:9px 13px;font-size:7px;letter-spacing:.15em}
  .batch-scene{left:50%;top:40%;width:calc(100vw - 22px);aspect-ratio:3/2;border-radius:22px}
  .batch-meta{left:14px;right:14px;bottom:12px;justify-content:space-between;gap:8px;font-size:6px}
  .batch-copy{left:18px;right:18px;width:auto;bottom:8.5vh}
  .batch-copy h1{font-size:clamp(42px,12vw,60px)}
  .batch-copy h2{font-size:clamp(38px,10.8vw,56px)}
  .batch-lead{margin-top:13px;font-size:12px;line-height:1.55;max-width:92%}
  .batch-progress{left:18px;bottom:3vh;grid-template-columns:110px 24px 30px}
  .batch-scroll-cue{display:none}
}


/* V20 — fixed realistic room, built stage by stage with full-scene transitions */
.stage-story {
  height: 500vh;
  position: relative;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,244,230,.85), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(255,241,225,.72), transparent 24%),
    linear-gradient(180deg, #f6f1e9 0%, #eee7de 55%, #e8dfd3 100%);
}
.stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 76%, rgba(188,160,128,.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)),
    linear-gradient(180deg, #f6f1e9 0%, #eee7de 55%, #e8dfd3 100%);
}
.stage-ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  pointer-events: none;
}
.stage-ambient.ambient-a { width: 360px; height: 360px; left: 6vw; top: 16vh; background: rgba(247, 224, 200, .8); }
.stage-ambient.ambient-b { width: 420px; height: 420px; right: 5vw; top: 18vh; background: rgba(250, 242, 228, .9); }
.stage-badge {
  position: absolute;
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
  z-index: 8;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(36,33,29,.10);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px rgba(41,33,26,.07);
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 700;
  white-space: nowrap;
}
.stage-scene {
  position: absolute;
  left: 60%;
  top: 49%;
  width: min(78vw, 1040px);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%) perspective(1900px) rotateX(1.6deg) rotateY(-2.4deg) scale(.985);
  transform-style: preserve-3d;
  transform-origin: 50% 58%;
  z-index: 4;
}
.stage-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(36,33,29,.08);
  box-shadow: 0 34px 90px rgba(53,40,31,.12), inset 0 1px 0 rgba(255,255,255,.65);
  background: #e7ddd0;
}
.stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: opacity, transform, filter;
}
.stage-base { opacity: 1; z-index: 1; }
.stage-materials { opacity: 0; z-index: 2; }
.stage-furnish { opacity: 0; z-index: 3; }
.stage-finished { opacity: 0; z-index: 4; }
.stage-softlight {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 32%),
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 28%, transparent 74%, rgba(255,255,255,.04));
}
.stage-meta {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 7;
  display: flex;
  gap: 18px;
  font-size: 8px;
  letter-spacing: .16em;
  font-weight: 700;
  color: #2b2620;
  text-shadow: 0 1px 5px rgba(255,255,255,.92);
}
.stage-rail {
  position: absolute;
  right: -98px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 8;
}
.stage-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px auto;
  gap: 10px;
  align-items: center;
  opacity: .35;
  color: rgba(36,33,29,.85);
  transition: opacity .35s ease, transform .35s ease;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.stage-rail-item::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.stage-rail-item.is-active { opacity: 1; transform: translateX(-8px); }
.stage-copy {
  position: absolute;
  left: 6vw;
  bottom: 11vh;
  width: min(31vw, 450px);
  z-index: 12;
  pointer-events: none;
}
.stage-copy .chapter {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .42s var(--ease), transform .62s var(--ease);
}
.stage-copy .chapter.is-active { opacity: 1; transform: none; }
.stage-copy h1, .stage-copy h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
  max-width: 10ch;
}
.stage-copy h1 { font-size: clamp(54px, 5.1vw, 88px); }
.stage-copy h2 { font-size: clamp(48px, 4.5vw, 72px); }
.stage-lead {
  margin: 18px 0 0;
  max-width: 400px;
  color: rgba(36,33,29,.70);
  font-size: 13px;
  line-height: 1.72;
}
.stage-progress { left: 6vw; bottom: 5vh; z-index: 13; }
.stage-scroll-cue { right: 2.5vw; top: 50%; transform: translateY(-50%); z-index: 13; }

@media (max-width: 1180px) {
  .stage-scene { left: 62%; width: min(80vw, 940px); }
  .stage-copy { left: 4vw; width: min(34vw, 380px); }
  .stage-rail { right: -84px; }
}
@media (max-width: 1024px) {
  .stage-story { height: 480vh; }
  .stage-badge { top: 82px; font-size: 8px; }
  .stage-scene { left: 61%; top: 47%; width: 88vw; }
  .stage-copy { left: 24px; width: min(40vw, 340px); bottom: 9vh; }
  .stage-copy h1 { font-size: clamp(48px, 6vw, 74px); }
  .stage-copy h2 { font-size: clamp(42px, 5.1vw, 64px); }
  .stage-rail { right: -70px; gap: 14px; }
}
@media (max-width: 720px) {
  .stage-story { height: 430vh; }
  .stage-sticky { height: 100svh; min-height: 100svh; }
  .stage-badge { top: 74px; max-width: calc(100vw - 34px); padding: 9px 13px; font-size: 7px; letter-spacing: .15em; }
  .stage-scene { left: 50%; top: 39%; width: calc(100vw - 22px); border-radius: 22px; }
  .stage-frame { border-radius: 22px; }
  .stage-meta { left: 14px; right: 14px; bottom: 12px; justify-content: space-between; gap: 8px; font-size: 6px; }
  .stage-rail { display: none; }
  .stage-copy { left: 18px; right: 18px; width: auto; bottom: 8.5vh; }
  .stage-copy h1 { font-size: clamp(42px, 12vw, 60px); }
  .stage-copy h2 { font-size: clamp(38px, 10.8vw, 56px); }
  .stage-lead { margin-top: 13px; font-size: 12px; line-height: 1.55; max-width: 92%; }
  .stage-progress { left: 18px; bottom: 3vh; grid-template-columns: 110px 24px 30px; }
  .stage-scroll-cue { display: none; }
}


/* V21 — fixed background, items appear one by one */
.object-story {
  height: 560vh;
  position: relative;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,245,230,.82), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,242,225,.74), transparent 26%),
    linear-gradient(180deg, #f6f1e9 0%, #eee7de 55%, #e8dfd3 100%);
}
.object-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 56% 78%, rgba(188,160,128,.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)),
    linear-gradient(180deg, #f6f1e9 0%, #eee7de 55%, #e8dfd3 100%);
}
.object-ambient { position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; pointer-events:none; }
.object-ambient.ambient-a { width:360px; height:360px; left:6vw; top:16vh; background:rgba(247,224,200,.8); }
.object-ambient.ambient-b { width:420px; height:420px; right:5vw; top:18vh; background:rgba(250,242,228,.9); }
.object-badge {
  position:absolute; left:50%; top:88px; transform:translateX(-50%); z-index:8;
  padding:11px 18px; border-radius:999px; border:1px solid rgba(36,33,29,.10); background:rgba(255,255,255,.58);
  backdrop-filter: blur(14px); box-shadow:0 12px 28px rgba(41,33,26,.07); font-size:10px; letter-spacing:.18em; font-weight:700; white-space:nowrap;
}
.object-scene {
  position:absolute; left:60%; top:49%; width:min(78vw,1040px); aspect-ratio:1672/941;
  transform:translate(-50%, -50%) perspective(1900px) rotateX(1.4deg) rotateY(-2.1deg) scale(.985);
  transform-style:preserve-3d; transform-origin:50% 58%; z-index:4;
}
.object-frame {
  position:absolute; inset:0; overflow:hidden; border-radius:30px; border:1px solid rgba(36,33,29,.08);
  box-shadow:0 34px 90px rgba(53,40,31,.12), inset 0 1px 0 rgba(255,255,255,.65); background:#e7ddd0;
}
.object-base, .object-layer { position:absolute; display:block; object-fit:cover; will-change:opacity, transform, filter; }
.object-base { inset:0; width:100%; height:100%; z-index:1; }
.object-layer { opacity:0; z-index:2; }
.object-art   { left:37.44%; top:12.54%; width:19.737%; height:27.63%; }
.object-right { left:65.191%; top:20.191%; width:31.1%; height:55.26%; }
.object-chair { left:0%; top:53.135%; width:19.139%; height:44.633%; }
.object-lamp  { left:10.167%; top:13.815%; width:25.12%; height:68.013%; }
.object-center{ left:41.268%; top:51.01%; width:35.885%; height:34.006%; }
.object-bench { left:72.967%; top:63.762%; width:27.033%; height:34.006%; }
.object-softlight {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 32%), linear-gradient(90deg, rgba(255,255,255,.06), transparent 28%, transparent 74%, rgba(255,255,255,.04));
}
.object-meta {
  position:absolute; right:24px; bottom:20px; z-index:7; display:flex; gap:18px; font-size:8px; letter-spacing:.16em; font-weight:700; color:#2b2620; text-shadow:0 1px 5px rgba(255,255,255,.92);
}
.object-rail {
  position:absolute; right:-112px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:16px; z-index:8;
}
.object-rail-item {
  position:relative; display:grid; grid-template-columns:22px auto; gap:10px; align-items:center; opacity:.34; color:rgba(36,33,29,.85);
  transition:opacity .35s ease, transform .35s ease; font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
.object-rail-item::before { content:""; position:absolute; left:-18px; top:50%; width:9px; height:1px; background:currentColor; opacity:.45; }
.object-rail-item.is-active { opacity:1; transform:translateX(-8px); }
.object-copy {
  position:absolute; left:6vw; bottom:11vh; width:min(31vw,450px); z-index:12; pointer-events:none;
}
.object-copy .chapter { position:absolute; left:0; bottom:0; width:100%; opacity:0; transform:translateY(30px); transition:opacity .42s var(--ease), transform .62s var(--ease); }
.object-copy .chapter.is-active { opacity:1; transform:none; }
.object-copy h1, .object-copy h2 {
  margin:0; font-family:Georgia, "Times New Roman", serif; font-weight:500; letter-spacing:-.045em; line-height:.94; max-width:10ch;
}
.object-copy h1 { font-size:clamp(54px, 5.1vw, 88px); }
.object-copy h2 { font-size:clamp(46px, 4.3vw, 70px); }
.object-lead { margin:18px 0 0; max-width:400px; color:rgba(36,33,29,.70); font-size:13px; line-height:1.72; }
.object-progress { left:6vw; bottom:5vh; z-index:13; }
.object-scroll-cue { right:2.5vw; top:50%; transform:translateY(-50%); z-index:13; }

@media (max-width:1180px) {
  .object-scene { left:62%; width:min(82vw, 960px); }
  .object-copy { left:4vw; width:min(34vw, 390px); }
  .object-rail { right:-98px; }
}
@media (max-width:1024px) {
  .object-story { height:540vh; }
  .object-badge { top:82px; font-size:8px; }
  .object-scene { left:61%; top:47%; width:88vw; }
  .object-copy { left:24px; width:min(40vw, 340px); bottom:9vh; }
  .object-copy h1 { font-size:clamp(48px, 6vw, 74px); }
  .object-copy h2 { font-size:clamp(42px, 5.1vw, 62px); }
  .object-rail { right:-84px; gap:13px; }
}
@media (max-width:720px) {
  .object-story { height:470vh; }
  .object-sticky { height:100svh; min-height:100svh; }
  .object-badge { top:74px; max-width:calc(100vw - 34px); padding:9px 13px; font-size:7px; letter-spacing:.15em; }
  .object-scene { left:50%; top:39%; width:calc(100vw - 22px); }
  .object-frame { border-radius:22px; }
  .object-meta { left:14px; right:14px; bottom:12px; justify-content:space-between; gap:8px; font-size:6px; }
  .object-rail { display:none; }
  .object-copy { left:18px; right:18px; width:auto; bottom:8.5vh; }
  .object-copy h1 { font-size:clamp(42px, 12vw, 60px); }
  .object-copy h2 { font-size:clamp(38px, 10.8vw, 56px); }
  .object-lead { margin-top:13px; font-size:12px; line-height:1.55; max-width:92%; }
  .object-progress { left:18px; bottom:3vh; grid-template-columns:110px 24px 30px; }
  .object-scroll-cue { display:none; }
}

/* ===== v22 rebuilt realistic fixed-room hero ===== */
.object-story {
  height: 760vh;
  position: relative;
}
.object-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.75), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #f3eee7 0%, #ece5da 100%);
}
.object-badge {
  position: absolute;
  top: 12.5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  padding: 10px 18px;
  border: 1px solid rgba(36,33,29,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(14px);
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 700;
  white-space: nowrap;
}
.object-copy {
  position: absolute;
  left: 6vw;
  bottom: 13.5vh;
  width: min(29vw, 450px);
  z-index: 11;
  pointer-events: none;
}
.object-copy .chapter {
  position: absolute;
  inset: auto 0 0 0;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .55s var(--ease), transform .75s var(--ease);
}
.object-copy .chapter.is-active { opacity: 1; transform: none; }
.object-copy h1,
.object-copy h2 {
  font-size: clamp(42px, 5vw, 82px);
}
.object-lead {
  margin: 18px 0 0;
  color: rgba(36,33,29,.72);
  line-height: 1.75;
  font-size: 15px;
  max-width: 430px;
}
.object-scene-wrap {
  position: absolute;
  left: 50%;
  top: 55.5%;
  width: min(56vw, 980px);
  transform: translate(-3%, -50%);
  z-index: 5;
}
.object-scene {
  position: relative;
  width: 100%;
  will-change: transform;
}
.object-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 40px 90px rgba(79,62,46,.14), inset 0 0 0 1px rgba(255,255,255,.4);
  background: #dfd6c9;
}
.object-base,
.object-layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.object-base {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.object-layer {
  opacity: 0;
  will-change: transform, opacity, filter;
  transform-origin: 50% 82%;
  filter: blur(16px);
}
.layer-art { left: 43.2%; top: 24.3%; width: 23.4%; z-index: 2; }
.layer-chair { left: 4.4%; bottom: 1.7%; width: 26.4%; z-index: 7; }
.layer-side-table { left: 13.8%; bottom: 4.9%; width: 10.1%; z-index: 8; }
.layer-sofa { left: 44.2%; bottom: 2.3%; width: 49.2%; z-index: 6; }
.layer-lamp { left: 35.8%; bottom: 11.2%; width: 35.2%; z-index: 5; }
.layer-coffee-table { left: 41.8%; bottom: 1.2%; width: 34.2%; z-index: 9; }
.layer-plant { right: 5.2%; bottom: 7.2%; width: 16.3%; z-index: 7; }
.layer-ottoman { right: 8.6%; bottom: 0.5%; width: 22.4%; z-index: 8; }
.object-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 74%, rgba(255,255,255,.07)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 22%, rgba(0,0,0,.04) 100%);
  pointer-events: none;
  z-index: 20;
}
.object-meta {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  font-size: 9px;
  letter-spacing: .17em;
  font-weight: 700;
  color: rgba(36,33,29,.74);
}
.object-rail {
  position: absolute;
  right: -170px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 160px;
  z-index: 12;
}
.object-rail-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  gap: 10px;
  color: rgba(36,33,29,.34);
  transition: color .35s ease, transform .35s ease;
  font-size: 9px;
  letter-spacing: .18em;
  font-weight: 700;
  text-transform: uppercase;
}
.object-rail-item span { opacity: .75; }
.object-rail-item strong { font-weight: 700; }
.object-rail-item.is-active {
  color: rgba(36,33,29,.92);
  transform: translateX(-6px);
}
.object-progress {
  left: 6vw;
  bottom: 6vh;
}
.object-scroll-cue {
  right: 2.8vw;
  top: 24.5vh;
}
.showroom-float {
  position: fixed;
  left: 22px;
  bottom: 18px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(36,33,29,.12);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px);
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(64,49,38,.08);
}
.showroom-float:hover { background: rgba(255,255,255,.92); }

@media (max-width: 1180px) {
  .object-copy { width: min(32vw, 390px); }
  .object-scene-wrap { width: min(58vw, 860px); transform: translate(-1%, -50%); }
  .object-rail { right: -148px; width: 138px; }
  .object-copy h1, .object-copy h2 { font-size: clamp(38px, 4.6vw, 68px); }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 10px 20px;
    height: auto;
    min-height: 82px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .desktop-nav {
    grid-column: 1 / -1;
    justify-self: center;
    gap: 24px;
  }
  .header-cta { justify-self: end; }
  .object-story { height: 860vh; }
  .object-badge { top: 15vh; }
  .object-scene-wrap {
    top: 42.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(88vw, 840px);
  }
  .object-copy {
    left: 5vw;
    right: 5vw;
    width: auto;
    bottom: 10.5vh;
  }
  .object-copy h1, .object-copy h2 { font-size: clamp(42px, 7vw, 68px); max-width: 12ch; }
  .object-lead { max-width: 520px; font-size: 14px; }
  .object-rail {
    right: auto;
    left: 50%;
    bottom: -86px;
    top: auto;
    width: min(92vw, 820px);
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
  }
  .object-rail-item {
    grid-template-columns: auto auto;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    backdrop-filter: blur(10px);
  }
  .object-progress { left: 5vw; bottom: 4vh; }
  .object-scroll-cue { display: none; }
}

@media (max-width: 720px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 14px 18px 12px;
  }
  .brand { gap: 10px; }
  .desktop-nav { justify-self: start; font-size: 10px; gap: 18px; }
  .header-cta { justify-self: start; }
  .object-story { height: 940vh; }
  .object-sticky { min-height: 100svh; }
  .object-badge {
    top: 112px;
    max-width: calc(100vw - 40px);
    white-space: normal;
    text-align: center;
    font-size: 9px;
    line-height: 1.4;
  }
  .object-scene-wrap {
    top: 33%;
    width: calc(100vw - 24px);
  }
  .object-frame {
    border-radius: 24px;
    box-shadow: 0 28px 50px rgba(79,62,46,.12), inset 0 0 0 1px rgba(255,255,255,.42);
  }
  .object-copy {
    left: 18px;
    right: 18px;
    bottom: 96px;
  }
  .object-copy .eyebrow { margin-bottom: 14px; }
  .object-copy h1, .object-copy h2 {
    font-size: clamp(34px, 10vw, 52px);
    max-width: 10ch;
  }
  .object-lead { font-size: 13px; line-height: 1.65; margin-top: 14px; max-width: 100%; }
  .object-rail {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    width: auto;
    transform: none;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .object-rail::-webkit-scrollbar { display: none; }
  .object-rail-item { flex: 0 0 auto; }
  .object-meta {
    left: 14px;
    right: 14px;
    bottom: 12px;
    justify-content: flex-start;
    gap: 8px 12px;
    font-size: 8px;
    max-width: 72%;
  }
  .object-progress {
    left: 18px;
    bottom: 58px;
    grid-template-columns: 140px 28px 36px;
    font-size: 8px;
  }
  .showroom-float {
    left: 16px;
    bottom: 16px;
    min-height: 40px;
    padding: 0 15px;
    font-size: 10px;
  }

  .layer-art { left: 42.7%; top: 24.5%; width: 24%; }
  .layer-chair { left: 3.8%; bottom: 1.9%; width: 28%; }
  .layer-side-table { left: 14%; bottom: 4.6%; width: 11%; }
  .layer-sofa { left: 43%; bottom: 2.2%; width: 52%; }
  .layer-lamp { left: 34%; bottom: 10.8%; width: 37%; }
  .layer-coffee-table { left: 41%; bottom: 1.2%; width: 36%; }
  .layer-plant { right: 4.2%; bottom: 7.3%; width: 17.5%; }
  .layer-ottoman { right: 7%; bottom: 0.2%; width: 24.5%; }

  .intro-band,
  .projects,
  .process,
  .studio,
  .contact {
    scroll-margin-top: 90px;
  }
}

@media (max-width: 460px) {
  .object-story { height: 980vh; }
  .object-badge { top: 108px; padding: 8px 14px; }
  .object-scene-wrap { top: 31%; width: calc(100vw - 18px); }
  .object-copy { bottom: 104px; }
  .object-copy h1, .object-copy h2 { font-size: clamp(31px, 10.5vw, 42px); }
  .object-meta { max-width: 76%; }
  .object-progress { width: calc(100vw - 110px); grid-template-columns: minmax(94px, 1fr) 28px 36px; }
}


/* ===== v23 placement tuning ===== */
.object-copy {
  left: 6vw;
  bottom: 16vh;
  width: min(26vw, 420px);
}
.object-copy h1,
.object-copy h2 {
  line-height: .92;
}
.object-scene-wrap {
  left: 60%;
  top: 52%;
  width: min(54vw, 920px);
  transform: translate(-50%, -50%);
}
.object-rail {
  right: max(22px, 2vw);
  top: 50%;
  width: 118px;
}
.object-progress {
  left: 6vw;
  bottom: 6vh;
}
.object-scroll-cue {
  right: 2.2vw;
  top: 23vh;
}

@media (max-width: 1440px) {
  .object-copy { width: min(28vw, 400px); }
  .object-scene-wrap { left: 59%; width: min(56vw, 860px); }
}

@media (max-width: 1180px) {
  .object-copy {
    left: 4vw;
    bottom: 15vh;
    width: min(30vw, 360px);
  }
  .object-scene-wrap {
    left: 58%;
    top: 50.5%;
    width: min(58vw, 760px);
  }
  .object-rail {
    right: 18px;
    width: 108px;
  }
}

@media (max-width: 980px) {
  .object-story { height: 840vh; }
  .object-badge { top: 14vh; }
  .object-scene-wrap {
    left: 50%;
    top: 36%;
    width: min(90vw, 820px);
    transform: translate(-50%, -50%);
  }
  .object-copy {
    left: 6vw;
    right: 6vw;
    bottom: 13vh;
    width: auto;
  }
  .object-copy h1,
  .object-copy h2 {
    max-width: 10ch;
    font-size: clamp(40px, 6.4vw, 64px);
  }
  .object-lead {
    max-width: 560px;
  }
  .object-rail {
    left: 50%;
    right: auto;
    bottom: 18px;
    top: auto;
    width: min(92vw, 820px);
    transform: translateX(-50%);
    justify-content: center;
  }
  .object-progress {
    left: 6vw;
    bottom: 82px;
  }
}

@media (max-width: 720px) {
  .object-story { height: 900vh; }
  .object-badge {
    top: 100px;
  }
  .object-scene-wrap {
    top: 29%;
    width: calc(100vw - 28px);
  }
  .object-copy {
    left: 18px;
    right: 18px;
    bottom: 144px;
  }
  .object-copy h1,
  .object-copy h2 {
    max-width: 9ch;
    font-size: clamp(32px, 9.2vw, 50px);
  }
  .object-lead {
    font-size: 13px;
    line-height: 1.6;
  }
  .object-rail {
    left: 14px;
    right: 14px;
    bottom: 18px;
    width: auto;
    transform: none;
    justify-content: flex-start;
  }
  .object-progress {
    left: 18px;
    bottom: 78px;
    width: calc(100vw - 120px);
  }
  .showroom-float {
    bottom: 18px;
  }
  .object-meta {
    max-width: 74%;
  }
}

@media (max-width: 460px) {
  .object-story { height: 940vh; }
  .object-scene-wrap {
    top: 27%;
    width: calc(100vw - 18px);
  }
  .object-copy {
    bottom: 148px;
  }
  .object-copy h1,
  .object-copy h2 {
    font-size: clamp(29px, 10.2vw, 40px);
  }
  .object-progress {
    bottom: 82px;
    width: calc(100vw - 122px);
  }
}


/* ===== v24 desktop/frame containment tuning ===== */
.object-scene-wrap {
  left: auto;
  right: clamp(28px, 4vw, 72px);
  top: 52%;
  width: min(45vw, 760px);
  transform: translateY(-50%);
}
.object-copy {
  left: clamp(28px, 6vw, 92px);
  bottom: 15.5vh;
  width: min(27vw, 420px);
}
.object-rail {
  right: 20px;
  width: 110px;
}
.object-badge {
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1440px) {
  .object-scene-wrap {
    right: clamp(24px, 3vw, 48px);
    width: min(47vw, 720px);
  }
  .object-copy {
    width: min(29vw, 390px);
  }
}

@media (max-width: 1180px) {
  .object-scene-wrap {
    right: 22px;
    width: min(49vw, 650px);
    top: 51%;
  }
  .object-copy {
    left: 4vw;
    width: min(31vw, 340px);
  }
  .object-rail {
    right: 14px;
    width: 96px;
  }
}

@media (max-width: 980px) {
  .object-scene-wrap {
    left: 50%;
    right: auto;
    top: 36%;
    width: min(90vw, 800px);
    transform: translate(-50%, -50%);
  }
  .object-copy {
    left: 6vw;
    right: 6vw;
    width: auto;
  }
  .object-rail {
    left: 50%;
    right: auto;
    width: min(92vw, 820px);
    transform: translateX(-50%);
  }
}

@media (max-width: 720px) {
  .object-scene-wrap {
    top: 30%;
    left: 50%;
    right: auto;
    width: calc(100vw - 28px);
    transform: translate(-50%, -50%);
  }
  .object-copy {
    left: 18px;
    right: 18px;
    bottom: 142px;
  }
}

@media (max-width: 460px) {
  .object-scene-wrap {
    top: 28.5%;
    width: calc(100vw - 18px);
  }
}


/* ===== v25 hard containment + balanced placement ===== */
/* Desktop: scene is anchored by viewport percentages so it can never leave the right edge. */
@media (min-width: 1101px) {
  .object-scene-wrap {
    left: 52vw !important;
    right: auto !important;
    top: 50% !important;
    width: min(42vw, 720px) !important;
    max-width: 42vw !important;
    transform: translateY(-50%) !important;
  }
  .object-copy {
    left: 5vw !important;
    right: auto !important;
    bottom: 15vh !important;
    width: min(31vw, 460px) !important;
  }
  .object-copy h1,
  .object-copy h2 {
    font-size: clamp(44px, 4.6vw, 78px) !important;
    max-width: 9.5ch !important;
  }
  .object-rail {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -58px !important;
    width: 100% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 7px 12px !important;
  }
  .object-rail-item {
    grid-template-columns: auto auto !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(10px) !important;
    font-size: 8px !important;
  }
  .object-progress {
    left: 5vw !important;
    bottom: 6vh !important;
  }
  .object-scroll-cue {
    right: 1.7vw !important;
    top: 25vh !important;
  }
}

/* Large tablet / small laptop: stack scene above copy, centered safely. */
@media (min-width: 721px) and (max-width: 1100px) {
  .object-story { height: 840vh !important; }
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    top: 37% !important;
    width: min(88vw, 780px) !important;
    max-width: calc(100vw - 40px) !important;
    transform: translate(-50%, -50%) !important;
  }
  .object-copy {
    left: 6vw !important;
    right: 6vw !important;
    bottom: 13vh !important;
    width: auto !important;
  }
  .object-copy h1,
  .object-copy h2 {
    font-size: clamp(40px, 6.5vw, 64px) !important;
    max-width: 10ch !important;
  }
  .object-rail {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -62px !important;
    width: min(92vw, 780px) !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 7px 10px !important;
  }
  .object-rail-item {
    grid-template-columns: auto auto !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.46) !important;
  }
  .object-progress {
    left: 6vw !important;
    bottom: 6vh !important;
  }
  .object-scroll-cue { display: none !important; }
}

/* Phone: centered hero, rail hidden so nothing competes with the room. */
@media (max-width: 720px) {
  .object-story { height: 900vh !important; }
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    top: 29.5% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    transform: translate(-50%, -50%) !important;
  }
  .object-frame {
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  .object-copy {
    left: 18px !important;
    right: 18px !important;
    bottom: 108px !important;
    width: auto !important;
  }
  .object-copy h1,
  .object-copy h2 {
    font-size: clamp(31px, 9.6vw, 48px) !important;
    max-width: 9.5ch !important;
  }
  .object-lead {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
  }
  .object-rail { display: none !important; }
  .object-progress {
    left: 18px !important;
    bottom: 56px !important;
    width: calc(100vw - 122px) !important;
    grid-template-columns: minmax(90px, 1fr) 28px 36px !important;
  }
  .object-scroll-cue { display: none !important; }
  .object-meta {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    max-width: calc(100% - 24px) !important;
    justify-content: flex-start !important;
    gap: 5px 9px !important;
    font-size: 6px !important;
  }
}

@media (max-width: 460px) {
  .object-scene-wrap {
    top: 28.5% !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
  .object-copy {
    bottom: 104px !important;
  }
  .object-copy h1,
  .object-copy h2 {
    font-size: clamp(29px, 10vw, 40px) !important;
  }
}

/* The room and every transparent item are always clipped to the frame. */
.object-frame {
  overflow: hidden !important;
  contain: paint;
}


/* ===== v26 exact desktop move-left placement ===== */
/* User-marked target: room starts around 30vw and ends around 86vw. */
@media (min-width: 1101px) {
  .object-scene-wrap {
    left: 30vw !important;
    right: auto !important;
    top: 51% !important;
    width: 56vw !important;
    max-width: 960px !important;
    transform: translateY(-50%) !important;
  }

  .object-copy {
    left: 5vw !important;
    right: auto !important;
    width: min(24vw, 410px) !important;
    bottom: 15vh !important;
  }

  .object-rail {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -58px !important;
    width: 100% !important;
    transform: translateX(-50%) !important;
  }

  .object-progress {
    left: 5vw !important;
    bottom: 6vh !important;
  }
}

/* Keep laptop/tablet safely centered rather than pushing it to an edge. */
@media (min-width: 721px) and (max-width: 1100px) {
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    width: min(88vw, 780px) !important;
    max-width: calc(100vw - 40px) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Phone remains centered and fully inside screen. */
@media (max-width: 720px) {
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ===== v27 exact room-start alignment ===== */
/* User-marked request: room frame should begin near the blue line, not far right. */
@media (min-width: 1101px) {
  .object-scene-wrap {
    position: absolute !important;
    left: 31vw !important;
    right: auto !important;
    top: 50.5% !important;
    width: 57vw !important;
    max-width: none !important;
    transform: translateY(-50%) !important;
  }

  .object-scene {
    width: 100% !important;
  }

  .object-frame {
    width: 100% !important;
  }

  .object-copy {
    left: 5vw !important;
    width: min(23vw, 390px) !important;
    bottom: 15vh !important;
  }

  .object-rail {
    left: 31vw !important;
    right: auto !important;
    top: auto !important;
    bottom: -56px !important;
    width: 57vw !important;
    transform: none !important;
    justify-content: center !important;
  }

  .object-progress {
    left: 5vw !important;
    bottom: 6vh !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    top: 36% !important;
    width: min(90vw, 820px) !important;
    max-width: calc(100vw - 32px) !important;
    transform: translate(-50%, -50%) !important;
  }

  .object-rail {
    left: 50% !important;
    right: auto !important;
    width: min(92vw, 820px) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 720px) {
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    top: 30% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ===== v28 hard desktop left-position fix ===== */
@media (min-width: 1101px) {
  .object-sticky {
    overflow: hidden !important;
  }

  .object-copy {
    left: 5vw !important;
    width: min(22vw, 360px) !important;
    right: auto !important;
    bottom: 15vh !important;
  }

  .object-scene-wrap {
    position: absolute !important;
    left: 30vw !important;
    right: auto !important;
    top: 50% !important;
    width: calc(100vw - 35vw) !important;
    max-width: none !important;
    min-width: 720px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  .object-scene,
  .object-frame {
    width: 100% !important;
    max-width: none !important;
  }

  .object-rail {
    position: absolute !important;
    left: 30vw !important;
    right: auto !important;
    top: auto !important;
    bottom: -58px !important;
    width: calc(100vw - 35vw) !important;
    transform: none !important;
    justify-content: center !important;
  }

  .object-progress {
    left: 5vw !important;
    bottom: 6vh !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .object-copy {
    left: 5vw !important;
    right: 5vw !important;
    width: auto !important;
    bottom: 12.5vh !important;
  }

  .object-scene-wrap {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 36% !important;
    width: calc(100vw - 48px) !important;
    max-width: 820px !important;
    transform: translate(-50%, -50%) !important;
  }

  .object-rail {
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 40px) !important;
    max-width: 820px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 720px) {
  .object-copy {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    bottom: 140px !important;
  }

  .object-scene-wrap {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 30% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ===== v29 ROOT CAUSE FIX =====
   Older CSS still had .object-scene { left:60%; top:49% }.
   Even after moving .object-scene-wrap left, that inner offset pushed the visible room
   back to the far right. Reset the INNER scene origin permanently. */
.object-scene {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

@media (min-width: 1101px) {
  .object-scene-wrap {
    position: absolute !important;
    left: 30vw !important;
    right: auto !important;
    top: 50% !important;
    width: 57vw !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  .object-scene {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }

  .object-frame {
    width: 100% !important;
    max-width: none !important;
  }

  .object-copy {
    left: 5vw !important;
    right: auto !important;
    width: min(22vw, 360px) !important;
    bottom: 15vh !important;
  }

  .object-rail {
    left: 30vw !important;
    right: auto !important;
    top: auto !important;
    bottom: -58px !important;
    width: 57vw !important;
    transform: none !important;
    justify-content: center !important;
  }

  .object-progress {
    left: 5vw !important;
    bottom: 6vh !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    top: 36% !important;
    width: min(90vw, 820px) !important;
    max-width: calc(100vw - 32px) !important;
    transform: translate(-50%, -50%) !important;
  }
  .object-scene {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  .object-scene-wrap {
    left: 50% !important;
    right: auto !important;
    top: 30% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    transform: translate(-50%, -50%) !important;
  }
  .object-scene {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }
}