/* Grand Mall sales site — shared layout. Each design (cinema / gallery / blueprint / boutique) sets the tokens below
   and restyles what it needs; the structure and the step-by-step flow stay the same. */
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-500.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-700.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-400.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-500.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/Cormorant-500.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/Cormorant-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/Cormorant-Italic-400.ttf"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --bg: #111213; --ink: #F3F3F1; --muted: #A7ABB0; --line: rgba(255,255,255,.16); --panel: #17181A; --panel-ink: #F3F3F1;
  --accent: #00B4C4; --accent-ink: #062B2F; --display: Montserrat, Inter, system-ui, sans-serif; --text: Inter, system-ui, sans-serif;
  --veil: linear-gradient(90deg, rgba(10,11,12,.78), rgba(10,11,12,.25) 60%, rgba(10,11,12,.5));
  --plan-bg: #131416; --outline: #1E2023; --outline-stroke: #3A3D41; --ctx: #1A1C1F; --ctx-void: #15171A;
  --unit-stroke: #2B2E32; --g-shop: #2A3036; --g-anchor: #3A4450; --g-food: #23474B; --g-leisure: #3F3A4B;
  --hot: #00B4C4; --lbl: #E6E8EA; --esc: #5A5F66; --gutter: clamp(16px, 4vw, 56px); --radius: 0px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--text); overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* background video — plays on the intro and mall steps, dims behind the plan */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
#bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .8s var(--ease), transform 1.6s var(--ease), opacity .8s; }
.veil { position: absolute; inset: 0; background: var(--veil); transition: opacity .8s; }
#level-photo { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .6s, background-image .6s; }
/* the floor walkthrough sits over the still of the same floor and fades in once it actually plays, so a slow
   line or a blocked autoplay simply leaves the photo in place */
#level-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
body[data-screen="levels"] #level-video.is-on { opacity: var(--level-photo, 1); }
/* …and the still of the same floor steps aside, otherwise the two show through each other */
body[data-screen="levels"]:has(#level-video.is-on) #level-photo { opacity: 0; }
body.video-dim #bg-video { filter: blur(14px) brightness(.35) saturate(.8); transform: scale(1.06); }
body[data-screen="level"] .bg { opacity: 0; transition: opacity .6s; }
@media (prefers-reduced-motion: reduce) { #bg-video { display: none; } .bg { background: center/cover url("../assets/01_exterior.webp"); } }

/* header with the three steps */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.logo img { display: block; height: 34px; width: auto; }
.logo .on-light { display: none; }
.steps { display: flex; gap: 6px; list-style: none; margin: 0 auto; padding: 0; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.steps li { display: flex; align-items: center; gap: 6px; color: var(--muted); opacity: .7; transition: color .3s, opacity .3s; }
.steps li + li::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.steps li.is-done { color: var(--ink); opacity: 1; }
.steps a, .steps span { text-decoration: none; padding: 8px 2px; }
.contact-top { font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 10px 0; }
/* language switch: shows the language it switches TO (EN while the page is Russian) */
.top-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.lang { appearance: none; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 999px;
  font: 600 11px/1 var(--display); letter-spacing: .14em; padding: 8px 12px; cursor: pointer; opacity: .8;
  transition: opacity .2s, color .2s, border-color .2s; }
.lang:hover, .lang:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
body[data-screen="intro"] .steps { visibility: hidden; }

/* screens: only one is on; the next slides in */
main { position: relative; z-index: 10; height: 100%; }
.screen { position: absolute; inset: 0; padding: 96px var(--gutter) 40px; opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .7s; }
.screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s; }
.kick { margin: 0 0 14px; font: 600 12px/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
h1, h2, h3 { font-family: var(--display); margin: 0; }
.lead { font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); max-width: 46ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 22px; border: 1px solid var(--line);
  background: transparent; border-radius: var(--radius); font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.big { min-height: 56px; padding: 18px 30px; font-size: 13px; }
.btn.ghost { border-color: transparent; padding-left: 0; padding-right: 0; }
.btn.ghost:hover { border-color: transparent; color: var(--accent); }

/* step 0 — intro */
.s-intro { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 12vh, 140px); }
.s-intro h1 { font-size: clamp(48px, 9.5vw, 150px); line-height: .92; letter-spacing: -.01em; font-weight: 600; text-transform: uppercase; }
.s-intro h1 em { font-style: normal; color: var(--accent); }
.s-intro .lead { margin: 22px 0 34px; }
/* over the video the lead must read on bright frames too */
.s-intro .lead, .s-mall .lead, .fig span, .src { color: var(--ink); opacity: .88; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.s-intro .btn { align-self: flex-start; }

/* step 1 — the mall */
.s-mall { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 40px; padding-bottom: clamp(36px, 8vh, 90px); }
.s-mall h2 { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.06; max-width: 20ch; font-weight: 600; }
.s-mall .lead { margin-top: 18px; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.fig { padding: 22px 20px 0 0; }
.fig + .fig { padding-left: 20px; border-left: 1px solid var(--line); }
.fig b { display: block; font: 600 clamp(30px, 3.6vw, 56px)/1 var(--display); font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }
.mall-go { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.src { margin: 0; font-size: 12px; color: var(--muted); }

/* about the project — the MAPIC 2026 deck, in the deck's own design.
   Over the film this text was unreadable, so this screen is an opaque slide: the client's
   navy (#0D293C), white type and the teal rules above every figure, sampled from their PDF.
   The whole screen scrolls here (the other screens are fixed) — one deck slide per tab. */
.s-project { --dk-bg: #0D293C; --dk-teal: #43C4D3; --dk-ink: #fff; --dk-mut: #AAB4BB; --dk-line: rgba(255,255,255,.16);
  /* the deck is set in a geometric sans; the boutique theme swaps --display to Cormorant, so put it back here */
  --display: Montserrat, Inter, system-ui, sans-serif;
  display: block; background: var(--dk-bg); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(74px, 11vh, 108px) var(--gutter) clamp(32px, 6vh, 64px); color: var(--dk-ink); font-family: var(--text); }
.s-project > * { width: 100%; max-width: 1120px; margin-inline: auto; }
.s-project .kick { color: var(--dk-teal); }
.s-project h2 { font: 700 clamp(23px, 2.9vw, 42px)/1.14 var(--display); max-width: 20ch; color: var(--dk-ink);
  letter-spacing: -.01em; }
.s-project .lead { margin-top: 12px; max-width: 58ch; color: var(--dk-mut); font-size: clamp(14px, 1.1vw, 16px); }
/* this screen scrolls under the fixed header, so the header needs the slide's own colour behind it */
body[data-screen="project"] .top { background: linear-gradient(to bottom, #0D293C 55%, rgba(13,41,60,.86) 80%, rgba(13,41,60,0)); }
/* the section nav stays put while the slide scrolls, the way a deck keeps its contents bar */
.pj-tabs { position: sticky; top: 62px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(20px, 3vh, 34px); padding-top: 10px;
  background: var(--dk-bg); border-bottom: 1px solid var(--dk-line); }
.pj-tabs button { background: none; border: 0; cursor: pointer; padding: 10px 22px 12px; color: var(--dk-mut);
  font: 600 11.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; }
.pj-tabs button:first-child { padding-left: 0; }
.pj-tabs button:hover { color: var(--dk-ink); }
.pj-tabs button[aria-selected="true"] { color: var(--dk-teal); border-bottom-color: var(--dk-teal); }
.pj-body { padding-top: clamp(22px, 4vh, 40px); }
.pj-panel { display: none; }
.pj-panel.is-on { display: block; animation: pj-in .45s var(--ease) both; }
@keyframes pj-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pj-panel h3 { margin: 0 0 20px; font: 700 clamp(19px, 2.1vw, 30px)/1.22 var(--display); max-width: 30ch;
  color: var(--dk-ink); letter-spacing: -.01em; }
.pj-panel > p { margin: 0 0 14px; max-width: 72ch; color: var(--dk-mut); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.6; }
/* the deck's signature: a teal rule, then the figure, then the caption */
.pj-stats { list-style: none; margin: 0 0 26px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 26px; }
.pj-stats li { border-top: 3px solid var(--dk-teal); padding-top: 14px; }
.pj-stats b { display: block; font: 700 clamp(24px, 2.6vw, 38px)/1 var(--display); font-variant-numeric: tabular-nums;
  color: var(--dk-ink); white-space: nowrap; letter-spacing: -.02em; }
.pj-stats span { display: block; margin-top: 9px; color: var(--dk-mut); font-size: 12.5px; line-height: 1.45; }
.pj-stats-2 { margin-bottom: 0; max-width: 560px; }
.pj-bench { margin: 26px 0 20px; border-left: 3px solid var(--dk-teal); padding-left: 22px; }
.pj-bench-say { margin: 0 0 16px; font: 600 clamp(16px, 1.6vw, 21px)/1.36 var(--display); color: var(--dk-ink); max-width: 46ch; }
.pj-cards { list-style: none; margin: 2px 0 18px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pj-cards li { background: rgba(255,255,255,.055); border: 1px solid var(--dk-line); border-radius: 4px; padding: 16px 18px 18px; }
.pj-cards h4 { margin: 0 0 7px; font: 600 14.5px/1.3 var(--display); color: var(--dk-ink); }
.pj-cards p { margin: 0; color: var(--dk-mut); font-size: 12.5px; line-height: 1.5; }
/* bullets with the deck's teal dot */
.pj-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 13px; }
.pj-list li { position: relative; padding-left: 22px; color: var(--dk-mut); font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6; max-width: 76ch; }
.pj-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--dk-teal); }
.pj-steps { list-style: none; counter-reset: s; margin: 22px 0 16px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px 26px; }
.pj-steps li { counter-increment: s; border-top: 3px solid var(--dk-teal); padding-top: 14px; }
.pj-steps h4 { margin: 0 0 7px; font: 600 15px/1.3 var(--display); color: var(--dk-ink); }
.pj-steps h4::before { content: counter(s); display: block; margin-bottom: 7px; color: var(--dk-teal);
  font: 700 20px/1 var(--display); }
.pj-steps p { margin: 0; color: var(--dk-mut); font-size: 12.5px; line-height: 1.5; }
.s-project .src { color: #70808B; }
.pj-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: clamp(24px, 4vh, 40px); padding-top: clamp(18px, 3vh, 28px); border-top: 1px solid var(--dk-line); }
.pj-go .src { flex: 1 1 100%; min-width: 0; font-size: 11px; }
.pj-go .back { color: var(--dk-mut); }
.pj-go .back:hover { color: var(--dk-ink); }
@media (max-width: 860px) {
  /* six wrapped tabs ate a third of a phone screen: one scrollable row instead */
  .pj-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -ms-overflow-style: none; }
  .pj-tabs::-webkit-scrollbar { display: none; }
  .pj-tabs button { flex: 0 0 auto; white-space: nowrap; padding: 9px 15px 11px; letter-spacing: .1em; }
  /* the opening headline must not fill the whole phone screen before the figures */
  .s-project { padding-top: clamp(64px, 9vh, 86px); }
  .s-project h2 { font-size: 21px; max-width: none; }
  .s-project .lead { font-size: 13.5px; margin-top: 9px; }
  .pj-panel h3 { font-size: 18px; margin-bottom: 16px; }
  .pj-stats { gap: 18px 20px; }
  .pj-steps { gap: 18px 20px; }
}

/* step 2 — choose a level */
.s-levels { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); grid-template-rows: auto 1fr auto; gap: 20px 48px; }
.levels-head { grid-column: 1 / -1; }
.levels-head h2 { font-size: clamp(30px, 3.8vw, 56px); font-weight: 600; }
.level-picker { min-height: 0; display: flex; align-items: center; justify-content: center; }
.level-info { align-self: center; border-top: 1px solid var(--line); padding-top: 22px; }
.level-info h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; margin-bottom: 18px; }
.level-info dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 18px; }
.level-info dt { color: var(--muted); } .level-info dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.level-info .mix { color: var(--muted); font-size: 14px; margin: 0; }
.back { grid-column: 1 / -1; justify-self: start; }
.lv { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.mini-outline .o { fill: rgba(255,255,255,.06); stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; }
.mini-outline .u { fill: currentColor; opacity: .28; stroke: none; }

/* picker: isometric stack */
.stack { position: relative; width: min(100%, 760px); height: min(64vh, 600px); }
.slab { position: absolute; left: 0; right: 0; top: calc(var(--i) * 17%); height: 30%; display: flex; align-items: center; color: var(--muted);
  transition: color .3s, transform .45s var(--ease); z-index: calc(10 - var(--i)); }
.plate { display: block; width: 50%; margin-left: 8%; transform: perspective(1400px) rotateX(64deg) rotateZ(-32deg); transform-origin: 50% 50%;
  transition: transform .45s var(--ease), filter .3s; }
.plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.slab .tag { margin-left: auto; display: grid; gap: 4px; text-align: right; font: 500 13px/1.2 var(--text); color: var(--muted); }
.slab .tag b { font: 600 28px/1 var(--display); color: var(--ink); letter-spacing: .02em; }
.slab:hover, .slab:focus-visible, .slab.is-hot { color: var(--accent); }
.slab:hover .plate, .slab:focus-visible .plate, .slab.is-hot .plate { transform: perspective(1400px) rotateX(64deg) rotateZ(-32deg) translateZ(30px); }
.slab:hover .tag b, .slab.is-hot .tag b { color: var(--accent); }

/* picker: photo cards */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; width: 100%; height: 100%; max-height: 64vh; }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; overflow: hidden; min-height: 240px; color: #fff; isolation: isolate; }
.card .ph { position: absolute; inset: 0; z-index: -1; background: center/cover; transition: transform 1s var(--ease), filter .5s; filter: saturate(.85) brightness(.72); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgba(0,0,0,.65)); }
.card:hover .ph, .card.is-hot .ph { transform: scale(1.06); filter: saturate(1) brightness(.85); }
.c-lv { font: 600 44px/1 var(--display); } .c-name { margin-top: 6px; font-weight: 600; } .c-meta { margin-top: 6px; font-size: 13px; opacity: .85; }

/* picker: building section */
.section { width: min(100%, 720px); display: flex; flex-direction: column; }
.roof { height: 22px; border-bottom: 2px solid currentColor; position: relative; color: var(--muted); }
.roof span, .s-elev { position: absolute; left: 0; font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.roof span { bottom: 4px; }
.band { position: relative; display: grid; grid-template-columns: 110px 70px 1fr auto; align-items: center; gap: 12px; height: calc(var(--h) * 1.45vh + 10px);
  min-height: 34px; border-bottom: 1px solid var(--line); padding: 0 16px 0 0; width: 100%; color: inherit; }
.band .s-elev { position: static; color: var(--muted); }
.band .s-lv { font: 600 20px/1 var(--display); } .band .s-meta { color: var(--muted); font-size: 13px; text-align: right; }
.band.park { opacity: .45; height: calc(var(--h) * 1.45vh); }
button.band:hover, button.band:focus-visible, button.band.is-hot { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* picker: list with large numerals */
.list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 820px; }
.list li + li { border-top: 1px solid var(--line); }
/* the numeral is the full level name since 03.11 («Ground Floor», «Level 2»): its column sizes to the text */
.row { display: grid; grid-template-columns: max-content 1fr auto 40px; align-items: center; gap: 18px; width: 100%; padding: 14px 0; color: inherit; }
.l-num { font: 500 clamp(34px, 4.2vw, 60px)/1 var(--display); white-space: nowrap; transition: color .3s, transform .4s var(--ease); }
.l-name { font-size: 18px; } .l-meta { color: var(--muted); font-size: 13px; text-align: right; }
.l-go { font-size: 22px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.row:hover .l-num, .row.is-hot .l-num { color: var(--accent); transform: translateX(8px); }
.row:hover .l-go, .row.is-hot .l-go { opacity: 1; transform: none; }
body[data-screen="levels"] #level-photo { opacity: var(--level-photo, 0); }

/* step 3 — full-screen plan */
.s-plan { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding-top: 78px; padding-bottom: 16px; background: var(--plan-bg); }
.plan-side { display: grid; gap: 12px; min-height: 0; }
.plan-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.plan-head { margin-right: auto; }
.plan-head h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; }
.plan-head h2 span { color: var(--accent); margin-right: 8px; }
.plan-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.level-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
/* full names («Ground Floor») since 03.11: one line per button, the row wraps instead */
.level-tabs button { min-width: 48px; min-height: 40px; padding: 0 14px; white-space: nowrap; border: 1px solid var(--line); background: none; cursor: pointer; font: 600 13px/1 var(--display); border-radius: var(--radius); }
.level-tabs button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plan-tools { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.search input { width: 280px; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); background: transparent; border-radius: var(--radius); }
.search input::placeholder { color: var(--muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 13px; border-radius: var(--radius); }
.chip i { width: 12px; height: 12px; background: var(--c); border: 1px solid var(--unit-stroke); }
.chip[aria-pressed="false"] { opacity: .45; }
.chip.g-shop { --c: var(--g-shop); } .chip.g-anchor { --c: var(--g-anchor); } .chip.g-food { --c: var(--g-food); } .chip.g-leisure { --c: var(--g-leisure); }
.plan-count { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; }
.plan { position: relative; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; border: 1px solid var(--line); }
.plan:active { cursor: grabbing; }
.plan-svg { display: block; width: 100%; height: 100%; }
.plan-svg .outline { fill: var(--outline); stroke: var(--outline-stroke); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.plan-svg .ctx { fill: var(--ctx); stroke: var(--unit-stroke); stroke-width: .5; vector-effect: non-scaling-stroke; }
.plan-svg .ctx.c-void { fill: var(--ctx-void); }
.plan-svg .esc, .plan-svg .lift { fill: var(--esc); }
.plan-svg .unit { stroke: var(--unit-stroke); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s, opacity .3s; outline: none; }
.plan-svg .unit.g-shop { fill: var(--g-shop); } .plan-svg .unit.g-anchor { fill: var(--g-anchor); }
.plan-svg .unit.g-food { fill: var(--g-food); } .plan-svg .unit.g-leisure { fill: var(--g-leisure); }
.plan-svg .unit:hover, .plan-svg .unit:focus-visible, .plan-svg .unit.sel { fill: var(--hot); }
.plan-svg .unit.off { opacity: .16; pointer-events: none; }
.plan-svg .lbl, .plan-svg .lbl-a { fill: var(--lbl); font: 600 1px var(--display); text-anchor: middle; dominant-baseline: central; pointer-events: none; opacity: 0; transition: opacity .2s; }
.plan-svg .lbl-a { font: 500 1px var(--text); fill: var(--lbl-a, var(--lbl)); }
.plan-svg .lbl-u { fill: var(--lbl-u, var(--lbl)); font: 400 1px var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; opacity: 0; transition: opacity .2s; }
.plan-svg .lbl.on, .plan-svg .lbl-a.on, .plan-svg .lbl-u.on { opacity: 1; }
.plan-svg .lbl.on.off, .plan-svg .lbl-a.on.off, .plan-svg .lbl-u.on.off { opacity: .18; }
.plan-svg .void-edge { fill: none; stroke: var(--outline-stroke); stroke-width: .8; vector-effect: non-scaling-stroke; }
.plan-svg .tread-bg { fill: var(--esc); } .plan-svg .tread { stroke: var(--plan-bg); stroke-width: .12; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filters { row-gap: 8px; }
.plan-pick { display: none; }
.plan-svg .entr { fill: var(--accent); } .plan-svg .entr-t { fill: var(--muted); font: 500 1px var(--text); }
.tip { position: absolute; z-index: 20; min-width: 200px; max-width: 260px; padding: 12px 14px; background: var(--panel); color: var(--panel-ink); border: 1px solid var(--line);
  pointer-events: none; display: grid; gap: 2px; box-shadow: 0 12px 30px rgba(0,0,0,.25); border-radius: var(--radius); }
.tip[hidden], .passport[hidden], .fail[hidden] { display: none; }
.tip b { font: 600 18px/1.1 var(--display); } .tip span { color: var(--muted); font-size: 13px; } .tip em { font-style: normal; font-weight: 600; color: var(--accent); }
.zoom { position: absolute; right: calc(var(--gutter) + 12px); bottom: 30px; display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.zoom button { min-width: 40px; min-height: 40px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.zoom #zoom-fit { font-size: 12px; padding: 0 12px; letter-spacing: .06em; }
.zoom span { min-width: 52px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-hint { position: absolute; left: calc(var(--gutter) + 12px); bottom: 30px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }

/* step 4 — passport (right-hand drawer by default) */
.passport { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0); transition: background .4s; }
.passport.is-open { background: rgba(0,0,0,.5); }
/* the panel does not scroll itself: the close button stays put over the photo, the body scrolls under it */
.pp-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 760px); background: var(--panel); color: var(--panel-ink); overflow: hidden;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s var(--ease); }
.passport.is-open .pp-panel { transform: none; }
.pp-close { position: absolute; top: 14px; right: 14px; z-index: 5; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); background: var(--panel); color: var(--panel-ink); cursor: pointer; font-size: 13px; border-radius: var(--radius); }
.pp-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pp-media { position: relative; aspect-ratio: 3 / 2; background: #0002; overflow: hidden; }
.pp-img { position: absolute; inset: 0; transition: opacity .5s; }
.pp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-media[data-photo="fitout"] .shell, .pp-media[data-photo="shell"] .fit { opacity: 0; }
.ph-wait { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(127,127,127,.08) 14px 28px); color: var(--muted); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.pp-toggle { position: absolute; left: 16px; bottom: 16px; display: flex; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: var(--radius); }
.pp-toggle button { min-height: 38px; padding: 8px 14px; border: 0; background: none; color: #fff; cursor: pointer; font-size: 13px; opacity: .7; }
.pp-toggle button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }
.pp-kind { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 10px 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: var(--radius); color: #fff; font-size: 13px; }
.pp-cap { position: absolute; right: 16px; bottom: 16px; margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .75; }
.pp-copy { padding: 30px clamp(20px, 4vw, 44px) 40px; }
.pp-copy h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; font-weight: 600; }
.pp-use { margin: 8px 0 0; font-size: 20px; }
.pp-area { margin: 18px 0 24px; font: 600 clamp(28px, 3vw, 44px)/1 var(--display); color: var(--accent); }
.pp-facts { display: grid; grid-template-columns: 1fr auto; margin: 0 0 24px; border-top: 1px solid var(--line); }
.pp-facts dt, .pp-facts dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pp-facts dt { color: var(--muted); } .pp-facts dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.pp-where { margin: 0 0 20px; }
.pp-loc { display: block; width: 100%; max-height: 220px; color: var(--muted); }
.pp-loc .o { fill: rgba(127,127,127,.08); stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; }
.pp-loc .u { fill: currentColor; opacity: .2; }
.pp-loc .u.me { fill: var(--accent); opacity: 1; }
.pp-terms { font-weight: 600; margin: 0 0 18px; }
.pp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.pp-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.pp-nav a { text-decoration: none; padding: 8px 0; } .pp-nav a:hover { color: var(--accent); }
.pp-src { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.fail { position: fixed; z-index: 99; left: 16px; right: 16px; bottom: 16px; padding: 14px; background: #B3261E; color: #fff; }

/* phones and small tablets */
@media (max-width: 900px) {
  .steps li + li::before { width: 12px; }
  .contact-top { display: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .s-levels { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; overflow: auto; }
  .level-info { display: none; }
  .cards { grid-template-columns: 1fr; max-height: none; }
  .card { min-height: 120px; }
  .row { grid-template-columns: max-content 1fr auto; } .l-num { font-size: 30px; } .l-go { display: none; }
  .band { grid-template-columns: 84px 46px 1fr; } .band .s-meta { display: none; }
  .stack { height: 58vh; }
  .plan-bar { gap: 10px; } .level-tabs button { min-width: 42px; }
  .plan-tools { gap: 8px; } .search input { width: 100%; } .search { flex: 1 1 100%; } .plan-count { display: none; }
  .filters { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .chip { white-space: nowrap; }
  .plan-hint { display: none; }
  .zoom { right: 12px; bottom: 12px; }
  .pp-panel { width: 100%; }
}
@media (max-width: 560px) {
  .logo img { height: 26px; }
  /* logo + breadcrumb + language do not fit across 390px: the breadcrumb was being cut off
     at the right edge, and each screen already names its own step in the heading */
  .steps { display: none; }
  .top-right { margin-left: auto; }   /* the hidden breadcrumb was the spacer that pushed this right */
  .screen { padding-top: 80px; }
}

.house-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.house-photos figure{margin:0}.house-photos img{width:100%;display:block}.house-photos figcaption{font-size:12px;line-height:1.5;margin:6px 0 20px}.pj-head{max-width:1100px}.s-project{overflow:auto;padding-bottom:80px}.pp-actions{flex-wrap:wrap}