/* Metro Builders — Lift Interiors: overhead opening, Designs Alive, scope, closing.
   Rendered stills only (design concepts). Approved storyboard: docs/lift-storyboard. */

/* ---------- 1. Opening: a short descent from above into Timeless ---------- */
.li-open { position: relative; height: 200vh; background: #e9e4dc; }
.li-open__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.li-open__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.li-open__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 15, .42), rgba(20, 18, 15, .08) 45%, rgba(20, 18, 15, .38)); opacity: calc(1 - var(--k, 0)); }
.li-open__copy { position: absolute; left: 0; right: 0; bottom: max(56px, 9vh); color: var(--on-image); opacity: calc(1 - var(--k, 0) * 1.6); transform: translateY(calc(var(--k, 0) * -40px)); }
.li-open__copy .label { color: rgba(244, 241, 235, .78); }
.li-open__copy h1 { font-size: clamp(2.8rem, 7vw, 7rem); letter-spacing: -.055em; line-height: .94; margin-top: 14px; max-width: 12ch; }
.li-open__copy p { margin-top: 18px; max-width: 44ch; color: rgba(244, 241, 235, .82); }
.li-open .concept-tag, .li-dz .concept-tag, .li-close .concept-tag { right: max(16px, 2vw); bottom: 16px; }

/* ---------- 2. Designs Alive ---------- */
.li-dz { position: relative; height: 340vh; background: #141311; }
.li-dz__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #141311; touch-action: pan-y; }
.li-dz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025);
  transition: opacity .9s var(--ease), transform 1.6s var(--ease), filter .9s var(--ease); filter: brightness(.55); }
.li-dz__img.is-on { opacity: 1; transform: none; filter: none; }
.li-dz__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 11, 10, .55) 0%, rgba(12, 11, 10, 0) 26%, rgba(12, 11, 10, 0) 58%, rgba(12, 11, 10, .72) 100%); }
.li-dz__head { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(16px, 4vh, 40px)); color: var(--on-image); }
.li-dz__head .label { color: rgba(244, 241, 235, .74); }
.li-dz__head h2 { font-size: clamp(1.8rem, 3.4vw, 3.2rem); margin-top: 10px; max-width: 22ch; }
.li-dz__foot { position: absolute; left: 0; right: 0; bottom: max(28px, 5vh); color: var(--on-image); }
.li-dz__foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; }
.li-dz__line { min-height: 3.2em; max-width: 46ch; font-size: clamp(.95rem, 1.2vw, 1.1rem); color: rgba(244, 241, 235, .86); transition: opacity .5s; }
.li-dz__line b { display: block; font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.03em; color: #fff; margin-bottom: 4px; }
.li-dz__tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.li-dz__tabs button, .li-dz__turn { cursor: pointer; background: rgba(12, 11, 10, .28); border: 1px solid rgba(244, 241, 235, .28); color: rgba(244, 241, 235, .82);
  padding: 11px 16px; font: 500 .66rem/1 var(--f); letter-spacing: .2em; text-transform: uppercase; backdrop-filter: blur(6px); transition: background .4s, color .4s, border-color .4s; }
.li-dz__tabs button[aria-pressed="true"] { background: var(--on-image); color: var(--graphite); border-color: var(--on-image); }
.li-dz__tabs button:hover, .li-dz__turn:hover { border-color: rgba(244, 241, 235, .8); }
.li-dz__turn { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; }
.li-dz__turn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; transition: transform .6s var(--ease); }
.li-dz__turn[aria-pressed="true"] svg { transform: rotate(180deg); }
.li-dz__dash { display: none; gap: 6px; margin-top: 14px; }
.li-dz__dash i { width: 22px; height: 2px; background: rgba(244, 241, 235, .3); transition: background .4s; }
.li-dz__dash i.is-on { background: #fff; }

/* ---------- 3. Scope ---------- */
.li-scope { background: var(--stone); padding: clamp(80px, 11vw, 150px) 0; }
.li-scope .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.li-scope figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.li-scope figure img { width: 100%; height: 100%; object-fit: cover; }
.li-scope figure .concept-tag { left: 12px; bottom: 10px; }
.li-scope h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); letter-spacing: -.05em; margin-top: 12px; }
.li-scope__list { margin-top: 26px; font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 300; line-height: 1.6; color: var(--graphite); }
.li-scope__list span { white-space: nowrap; }
.li-scope__list span + span::before { content: "·"; margin: 0 .55em; color: var(--titanium); }
.li-scope p.m { margin-top: 22px; color: var(--muted); max-width: 44ch; }

/* ---------- 4. Closing: looking out from inside the lift at night ---------- */
.li-close { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #0e1016; color: var(--on-image); display: grid; }
.li-close picture, .li-close__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.li-close__media { object-fit: cover; transform: scale(calc(1.12 - var(--p, 0) * .1)); transform-origin: 50% 55%; }
.li-close__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, .62) 0%, rgba(10, 10, 12, .1) 42%, rgba(10, 10, 12, .35) 100%); }
.li-close__inner { position: relative; align-self: start; padding-block: calc(var(--nav-h) + clamp(48px, 10vh, 110px)) 80px; display: grid; gap: 28px; justify-items: center; text-align: center; }
.li-close h2 { font-size: clamp(2.4rem, 5.6vw, 5.8rem); letter-spacing: -.055em; line-height: .96; max-width: 14ch; }

@media (max-width: 760px) {
  .li-open { height: 170vh; }
  .li-dz { height: 300vh; }
  .li-dz__foot .wrap { grid-template-columns: 1fr; }
  .li-dz__tabs { display: none; }
  .li-dz__dash { display: flex; }
  .li-scope .wrap { grid-template-columns: 1fr; }
  .li-scope figure { aspect-ratio: 4 / 4.4; }
}
@media (prefers-reduced-motion: reduce) {
  .li-dz__img { transition: opacity .3s linear; transform: none; filter: none; }
  .li-close__media { transform: none; }
}