/* Metro Builders — Client Renders (storyboard). Uses the site's tokens and type from styles.css. */
.pg-renders { --gr: #0a0a0b; --champ: #d6c4a0; --champ-2: #b59670; --ivory-2: #f4efe6; }
.pg-renders .hdr__nav a[aria-current="page"] { opacity: 1; }

/* ---------- 1. The vault ---------- */
.vault[hidden] { display: none !important; }
.vault { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--gr); color: #f3eee5; isolation: isolate; }
#vault-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vault__still { position: absolute; inset: 0; background: radial-gradient(60% 70% at 62% 46%, #2a251e 0%, #121110 55%, #0a0a0b 100%); display: none; }
.vault--fallback #vault-canvas { display: none; }
.vault--fallback .vault__still { display: block; background-image: url("poster.webp"), radial-gradient(60% 70% at 62% 46%, #2a251e 0%, #121110 55%, #0a0a0b 100%); background-size: cover; background-position: 70% 50%; }
/* the fade from darkness, and a soft vignette that keeps the copy legible */
.vault__dark { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 10, 11, .78) 0%, rgba(10, 10, 11, .35) 34%, rgba(10, 10, 11, 0) 55%), linear-gradient(0deg, rgba(10, 10, 11, .65) 0%, rgba(10, 10, 11, 0) 28%);
}
.vault::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; pointer-events: none;
  opacity: calc(1 - min(1, var(--intro, 0) * 4)); }
.vault__copy { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-58%); pointer-events: none; }
.vault__over { font-size: .66rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); }
.vault__copy h1 { margin-top: 18px; font-size: clamp(2.8rem, 5.6vw, 5.6rem); font-weight: 200; letter-spacing: -.045em; line-height: .98; max-width: 7.5ch; color: #f6f1e8; }
.vault__lede { margin-top: 22px; max-width: 30ch; color: rgba(243, 238, 229, .72); font-size: 1.02rem; }
.vault__copy > * { opacity: 0; transform: translateY(14px); animation: v-in 1.1s var(--ease) forwards; }
.vault__copy > :nth-child(1) { animation-delay: .5s; } .vault__copy > :nth-child(2) { animation-delay: .7s; } .vault__copy > :nth-child(3) { animation-delay: .9s; }
@keyframes v-in { to { opacity: 1; transform: none; } }

/* the access console: a slim bronze-edged glass panel set in front of the installation */
.console { position: absolute; z-index: 4; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: max(48px, 9vh); width: min(520px, calc(100vw - 2 * var(--gutter)));
  padding: 22px 22px 18px; background: linear-gradient(180deg, rgba(30, 28, 25, .62), rgba(16, 15, 14, .72)); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(214, 196, 160, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 244, 222, .12);
  opacity: 0; transform: translateY(10px); animation: v-in .9s var(--ease) .35s forwards; }
.console::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(214, 196, 160, 0), rgba(230, 210, 170, .9), rgba(214, 196, 160, 0)); }
.console__label { display: block; font-size: .64rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--champ); }
.console__row { display: flex; gap: 10px; margin-top: 12px; }
.console input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 16px; border: 1px solid rgba(243, 238, 229, .26); background: rgba(8, 8, 8, .45); color: #fbf8f2;
  font: 400 1.08rem/1 var(--f); letter-spacing: .16em; text-transform: lowercase; border-radius: 0; transition: border-color .3s, background .3s; }
.console input:focus { outline: none; border-color: var(--champ); background: rgba(8, 8, 8, .6); box-shadow: 0 0 0 1px var(--champ); }
.console input[aria-invalid="true"] { border-color: #d9a48c; }
.console button { flex: 0 0 auto; height: 54px; padding: 0 22px; border: 0; cursor: pointer; background: linear-gradient(180deg, #e3d2ae, #c8ad80); color: #17140f;
  font: 500 .72rem/1 var(--f); letter-spacing: .2em; text-transform: uppercase; transition: filter .3s, transform .3s; }
.console button:hover { filter: brightness(1.06); }
.console button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.console button[data-busy] span { opacity: .5; }
.console__msg { margin-top: 12px; font-size: .86rem; color: #f0c8b6; }
.console__help { margin-top: 12px; font-size: .8rem; color: rgba(243, 238, 229, .6); }
.vault__skip { position: absolute; z-index: 6; right: max(16px, 3vw); bottom: max(24px, 4vh); padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .25); color: #fff;
  font: 500 .64rem/1 var(--f); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.vault.is-entering .vault__copy, .vault.is-entering .console { transition: opacity .5s ease, transform .6s var(--ease); opacity: 0 !important; transform: translateY(-8px) !important; animation: none; pointer-events: none; }

/* ---------- 2. Arrival: a bright curtain, the project's name, then the gallery ---------- */
.curtain { position: fixed; inset: 0; z-index: 80; background: var(--ivory-2); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.curtain.is-on { opacity: 1; }
.gal-title { position: fixed; inset: 0; z-index: 81; display: grid; place-content: center; text-align: center; gap: 14px; pointer-events: none; opacity: 0; color: var(--graphite); transition: opacity .5s ease; }
.gal-title b { font-weight: 200; font-size: clamp(3.4rem, 9vw, 8rem); letter-spacing: -.05em; line-height: .9; }
.gal-title span { font-size: .68rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--titanium); }
.gal-title.is-on { opacity: 1; }
.gal-title.is-on b { animation: t-in 1.2s var(--ease) both; } .gal-title.is-on span { animation: t-in 1.2s var(--ease) .15s both; }
@keyframes t-in { from { opacity: 0; letter-spacing: .02em; transform: translateY(10px); } }

/* ---------- 3. The presentation: a real-time walk-through of the client's lift ---------- */
.gal { position: relative; background: #0c0c0c; color: #f3eee5; }
.gal > * { opacity: 0; transition: opacity .9s var(--ease); }
.gal.is-in > * { opacity: 1; }
.walk { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.walk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.walk-canvas:active { cursor: grabbing; }
.walk-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--champ); }
.walk-status { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; background: rgba(0, 0, 0, .55); font-size: .86rem; }
.walk-status:empty, .walk-status[hidden] { display: none; }
/* the project's title card, top left, over a soft shade */
.walk-head { position: absolute; z-index: 2; left: 0; top: 0; padding: calc(var(--nav-h) + 22px) max(var(--gutter), 16px) 60px; max-width: min(520px, 60vw); pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(8, 8, 8, .72) 0%, rgba(8, 8, 8, .35) 50%, rgba(8, 8, 8, 0) 75%); }
.gal-kicker { font-size: .62rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--champ); }
.walk-head h1 { margin-top: 10px; font-size: clamp(2.6rem, 5.4vw, 4.8rem); font-weight: 200; letter-spacing: -.05em; line-height: .9; outline: none; }
.gal-meta { margin-top: 12px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 238, 229, .7); }
.walk-spec { margin-top: 8px; font-size: .82rem; color: rgba(243, 238, 229, .62); max-width: 40ch; }
/* the controls: a slim glass panel with bronze rules, right hand side */
.walk-panel { position: absolute; z-index: 2; right: max(16px, 2vw); top: calc(var(--nav-h) + 16px); width: 300px; max-height: calc(100% - var(--nav-h) - 32px); overflow-y: auto;
  padding: 16px; background: linear-gradient(180deg, rgba(28, 26, 23, .7), rgba(14, 13, 12, .78)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 196, 160, .2); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.walk-panel button { font: 400 .8rem/1.2 var(--f); color: #f3eee5; cursor: pointer; }
.walk-designs { display: grid; gap: 6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(214, 196, 160, .18); }
.walk-designs button { text-align: left; padding: 10px 12px; border: 1px solid rgba(243, 238, 229, .16); background: rgba(255, 255, 255, .02); transition: border-color .3s, background .3s; }
.walk-designs button b { display: block; font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; }
.walk-designs button span { display: block; margin-top: 4px; font-size: .78rem; color: rgba(243, 238, 229, .62); }
.walk-designs button[aria-pressed="true"] { border-color: var(--champ); background: rgba(214, 196, 160, .1); }
.walk-label { font-size: .6rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--champ); margin-bottom: 8px; }
.walk-views { display: flex; flex-wrap: wrap; gap: 6px; }
.walk-views button { padding: 8px 10px; border: 1px solid rgba(243, 238, 229, .18); background: none; transition: border-color .3s, background .3s, color .3s; }
.walk-views button[aria-pressed="true"] { background: #e8dcc4; color: #17140f; border-color: #e8dcc4; }
.walk-views .walk-tour { border-color: rgba(214, 196, 160, .55); }
.walk-move { display: flex; align-items: end; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.walk-pad { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.walk-pad button { height: 34px; border: 1px solid rgba(243, 238, 229, .2); background: none; touch-action: none; }
.walk-zoom { display: grid; gap: 6px; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champ); flex: 1 1 100px; }
.walk-zoom input { width: 100%; accent-color: #d6c4a0; }
.walk-reset { padding: 8px 12px; border: 1px solid rgba(243, 238, 229, .25); background: none; }
.walk-hint { margin-top: 12px; font-size: .74rem; color: rgba(243, 238, 229, .55); }
.walk-leave { margin-top: 12px; width: 100%; padding: 11px; border: 1px solid rgba(214, 196, 160, .45); background: none; font-size: .66rem !important; letter-spacing: .22em; text-transform: uppercase; }
.walk-panel button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* storyboard-only controls */
.sb-bar { position: fixed; z-index: 90; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center;
  max-width: calc(100vw - 24px); padding: 7px 10px; background: rgba(42, 30, 12, .92); color: #f6ead6; font-size: .72rem; backdrop-filter: blur(8px); }
.sb-bar b { font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: .62rem; color: #f0c98c; }
.sb-bar code { font-size: .8rem; color: #fff; }
.sb-bar button, .sb-bar a { padding: 5px 9px; border: 1px solid rgba(246, 234, 214, .4); background: none; color: inherit; font: inherit; cursor: pointer; }
.sb-bar button[aria-pressed="true"] { background: #f6ead6; color: #2a1e0c; }
.in-gallery .sb-bar span { display: none; }

@media (max-width: 760px) {
  .vault { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  #vault-canvas, .vault__still { position: relative; inset: auto; width: 100%; height: 50svh; min-height: 300px; flex: 0 0 auto; margin-top: var(--nav-h); }
  .vault__still { display: none; }
  .vault--fallback .vault__still { display: block; }
  .vault__dark { background: none; }
  .vault__copy { position: relative; top: auto; transform: none; margin-top: 18px; }
  .vault__copy h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); max-width: 9ch; }
  .vault__lede { font-size: .95rem; }
  .console { position: relative; left: auto; bottom: auto; margin: 24px var(--gutter) 96px; width: auto; padding: 18px 16px 14px; }
  .console__row { flex-direction: column; }
  .console button { width: 100%; }
  .walk { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .walk-canvas { position: relative; height: 62svh; min-height: 360px; margin-top: var(--nav-h); }
  .walk-head { padding: calc(var(--nav-h) + 14px) 16px 40px; max-width: 80vw; }
  .walk-head h1 { font-size: 2.6rem; }
  .walk-spec { display: none; }
  .walk-panel { position: relative; right: auto; top: auto; width: auto; max-height: none; margin: 0; border-left: 0; border-right: 0; backdrop-filter: none; background: #141311; }
  .walk-designs { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; }
  .walk-pad button, .walk-views button { min-height: 40px; }
  .sb-bar span, .sb-bar b { display: none; }
  .sb-bar { flex-wrap: nowrap; bottom: auto; top: calc(var(--nav-h) + 4px); padding: 5px; gap: 5px; font-size: .62rem; }
  .sb-bar button, .sb-bar a { padding: 4px 6px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .vault__copy > *, .console { animation: none; opacity: 1; transform: none; }
  .vault::after { display: none; }
  .gal > *, .gal-title.is-on b, .gal-title.is-on span { transition: none; animation: none; }
}
.force-rm .vault__copy > *, .force-rm .console { animation: none; opacity: 1; transform: none; }
.force-rm .vault::after { display: none; }
.force-rm .gal > * { transition: none; }
.force-rm .gal-title.is-on b, .force-rm .gal-title.is-on span { animation: none; }

/* ---------- the presentation frame (real portal) ---------- */
.pres { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: var(--nav-h); background: #0c0c0c; }
.pres-bar { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 12px max(16px, 2vw); border-bottom: 1px solid rgba(214, 196, 160, .18); background: #121110; }
.pres-id { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-right: auto; }
.pres-id h1 { font-size: 1.6rem; font-weight: 300; letter-spacing: -.03em; outline: none; }
.pres-id .gal-kicker { flex-basis: 100%; }
.pres-lifts { display: flex; gap: 6px; flex-wrap: wrap; }
.pres-lifts button, .pres-leave { min-height: 40px; padding: 0 16px; border: 1px solid rgba(243, 238, 229, .22); background: none; color: #f3eee5; cursor: pointer;
  font: 500 .7rem/1 var(--f); letter-spacing: .2em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.pres-lifts button[aria-selected="true"] { background: #e8dcc4; color: #17140f; border-color: #e8dcc4; }
.pres-leave { border-color: rgba(214, 196, 160, .45); }
.pres-lifts button:focus-visible, .pres-leave:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pres-frame { width: 100%; height: 100%; border: 0; display: block; background: #0c0c0c; }
@media (max-width: 760px) { .pres-bar { padding: 10px 12px; } .pres-id h1 { font-size: 1.3rem; } .pres-lifts button, .pres-leave { min-height: 38px; padding: 0 12px; } }