@font-face { font-family: "Archivo"; src: url("../fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #282828;
  --white: #fff;
  --band: #f4ece6;            /* sampled from tower-iso-n.webp background */
  --pad: clamp(16px, 2.8vw, 40px);
  --gap: clamp(12px, 1.4vw, 20px);
  --track-d: -0.055em;
  --t0: clamp(64px, 11vw, 170px);
  --t1: clamp(52px, 7.4vw, 112px);
  --t2: clamp(44px, 5vw, 72px);
  --t3: clamp(26px, 2.9vw, 42px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }

/* type */
.caps {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-d);
  line-height: 0.86;
}
.t0 { font-size: var(--t0); }
.t1 { font-size: var(--t1); }
.t2 { font-size: var(--t2); }
.t3 { font-size: var(--t3); line-height: 0.92; letter-spacing: -0.045em; }
.ui {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.muted { opacity: 0.38; }

/* sections */
.sec { padding: clamp(80px, 9vw, 140px) var(--pad); }
.dark { background: var(--ink); color: var(--white); }
.light { background: var(--white); color: var(--ink); }
.sec__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec__aside { opacity: 0.55; text-align: right; padding-bottom: 0.4em; }

/* hero */
.hero {
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 34%);
}
.brand, .nav, .hero__title, .hero__foot, .credit { position: absolute; z-index: 2; }
.brand { top: 26px; left: var(--pad); }
.nav { top: 26px; right: var(--pad); display: flex; gap: 28px; }
.nav a, .brand, .go, .hero__link { transition: opacity .2s; }
.nav a:hover, .brand:hover { opacity: .6; }
.hero__title {
  top: clamp(72px, 9vh, 100px); left: var(--pad);
  font-size: clamp(64px, 8.6vw, 170px);
  color: #fff;
}
.hero__title span { display: block; white-space: nowrap; }
.hero__foot {
  left: var(--pad); bottom: 30px;
  max-width: 400px;
}
.hero__line { font-size: 15px; line-height: 1.45; margin-bottom: 18px; }
.hero__link { display: inline-block; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 3px; }
.hero__link:hover { opacity: .7; }
.credit { right: var(--pad); bottom: 30px; opacity: .75; font-size: 10px; text-align: right; max-width: 240px; }

/* pricing */
.pricing .sec__aside { opacity: .5; }
.prices { border-top: 1px solid rgba(40,40,40,.9); }
.prices li {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: baseline;
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(40,40,40,.18);
}
.pk { grid-column: 1 / 4; }
.prices p { grid-column: 4 / 9; max-width: 32em; opacity: .75; }
.price { grid-column: 9 / 13; text-align: right; white-space: nowrap; }
.price small { font-size: 11px; letter-spacing: .06em; margin-left: 10px; vertical-align: 0.35em; opacity: .6; }
.terms { margin-top: 28px; }

/* process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); border-top: 1px solid rgba(255,255,255,.25); }
.steps li { padding-top: 22px; }
.steps .num { display: block; opacity: .5; margin-bottom: clamp(48px, 6vw, 96px); }
.steps .t3 { margin-bottom: 18px; min-height: 1.84em; }
.steps p { max-width: 19em; opacity: .8; }

/* offer */
.offer { padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(80px, 9vw, 120px); }
.offer .t0 span { display: block; }
.offer__text { margin-top: clamp(40px, 5vw, 64px); margin-left: calc(100% * 6 / 12); max-width: 30em; }

/* footer */
.foot {
  background: var(--ink); color: rgba(255,255,255,.45);
  display: flex; justify-content: space-between; gap: 40px;
  padding: 28px var(--pad) 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 10px;
}
.foot span:last-child { max-width: 640px; text-align: right; }

/* phone */
@media (max-width: 760px) {
  .nav { gap: 16px; }
  .nav a:nth-child(2) { display: none; }   /* phone: Process goes, the contact link stays (it was the one hidden) */
  .hero__img { object-position: 52% 50%; }
  .hero__title { top: 76px; right: var(--pad); }
  .hero__title span { white-space: normal; }
  .hero__foot { right: var(--pad); bottom: 92px; max-width: none; }
  .credit { left: var(--pad); right: var(--pad); bottom: 24px; text-align: left; max-width: none; }
  .hero__scrim { background: linear-gradient(to top, rgba(20,20,20,.7) 0%, rgba(20,20,20,0) 50%); }

  .sec__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec__aside { text-align: left; }



  .steps .t3 { min-height: 0; }

  .prices li { grid-template-columns: 1fr auto; row-gap: 10px; }
  .pk { grid-column: 1; }
  .price { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .prices p { grid-column: 1 / 3; }

  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 22px 0 40px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .steps .num { margin-bottom: 28px; }

  .offer__text { margin-left: 0; }
  .foot { flex-direction: column; gap: 12px; }
  .foot span:last-child { text-align: left; }
}

/* ---------- 08: full-screen slides (from 05-chapters, without the sticky stacking) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chap { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.chap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chap__img--top { object-position: 50% 18%; }
.chap--dark { color: var(--white); background: var(--ink); }
.chap--dark::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 100%); }
.chap--light { color: var(--ink); background: var(--white); align-items: stretch; }
.chap--light .chap__img--plan { object-fit: contain; inset: 6vh 4vw 6vh 40vw; width: auto; height: auto; max-width: 56vw; max-height: 88vh; margin: auto; }
.chap__body { position: relative; z-index: 1; padding: 0 var(--pad) clamp(40px, 6vw, 88px); max-width: 1100px; }
.chap--light .chap__body { display: flex; flex-direction: column; justify-content: flex-end; max-width: 38vw; }
.chap__body .ui { display: block; margin-bottom: 20px; opacity: .8; }
.chap__body h2 { margin-bottom: 24px; }
.chap__body p { max-width: 420px; font-size: 15px; opacity: .85; }
@media (max-width: 760px) {
  .chap--light { flex-direction: column; justify-content: flex-end; }
  .chap--light .chap__img--plan { position: relative; inset: auto; max-width: 100%; max-height: none; margin: 72px auto 24px; padding: 0 var(--pad); }
  .chap--light .chap__body { max-width: none; }
}
.chap__img--mid { object-position: 50% 33%; }             /* tower-north-focus: roof edge stays in the fold */
.chap--dark:last-child::after { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%); }
@media (min-width: 761px) {
  .chap--light .chap__img--plan { inset: 6vh 4vw 6vh 50vw; max-width: 46vw; }
  .chap--light .chap__body { max-width: calc(50vw + 5vw); padding-left: calc(var(--pad) + 5vw); }   /* designers 05.11: text closer to the plan */
}
@media (min-width: 761px) {
  .chap--light .chap__img--plan { inset: 6vh 4vw 6vh 50vw; width: 46vw; height: 88vh; max-width: none; max-height: none; margin: 0; object-fit: contain; }
}

/* ---------- one block = one screen (Lev, 01.11) ---------- */
.offer__me { margin-top: clamp(48px, 6vw, 88px); margin-left: calc(100% * 6 / 12); max-width: 30em; }
.offer__me .t3 { margin-bottom: 16px; }
.offer__me p { opacity: .75; }
.offer__mail { display: inline-block; margin-top: clamp(28px, 3vw, 40px); border-bottom: 1px solid currentColor; padding-bottom: 4px; }
@media (min-width: 761px) {
  .pricing { min-height: 100svh; padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; justify-content: center; }
  .process { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .offer { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 760px) { .offer__me { margin-left: 0; } }
.light.process { border-top: 1px solid rgba(40,40,40,.18); }

/* ---------- live apartment picker on slide 02 ---------- */
.pick { position: absolute; inset: 6vh 4vw 6vh 50vw; display: flex; align-items: center; justify-content: center; }
.pick__svg { width: 100%; height: 100%; }
/* Lev 07.11: chessboard tones, taken in red. Lev 09.11: the tint is a layer under the walls (cells), not a masked overlay */
.pu { fill: rgba(255,255,255,0); stroke: none; cursor: pointer; transition: fill-opacity .2s; outline: none; }
.pu.c0 { fill: #8DB598; } .pu.c1 { fill: #C9DCCC; } .pu.c2 { fill: #ABC8B3; } .pu.tk { fill: #D9776B; }
.pu.c0, .pu.c1, .pu.c2, .pu.tk { fill-opacity: .6; }
.pick__svg.hov .pu:not(.on), .pick__svg.auto .pu:not(.on) { fill-opacity: .45; }
.pu.on { fill-opacity: 1; }
/* Lev 09.11: statuses read at a glance (reserved = amber hatch, sold = red, both stronger than the free greens even
   when idle), and the lit flat lights its own outer walls (ring paths kept to the wall pixels by #wmask) */
.pu.rs { fill: url(#phatch); }
.pu.rs, .pu.tk { fill-opacity: .85; }
.pick__svg.hov .pu.rs:not(.on), .pick__svg.hov .pu.tk:not(.on), .pick__svg.auto .pu.rs:not(.on), .pick__svg.auto .pu.tk:not(.on) { fill-opacity: .7; }
/* layers (tools/v2/maisi-layers.py): status cells under the ink (one wall layer of one thickness, captions), the lit
   flat's walls on top as traced vector paths in its status colour */
.pick__ink, .pick__walls { pointer-events: none; }
.pw { fill: currentColor; color: transparent; transition: color .2s; }
.pw.on.st-a { color: #2F6B45; } .pw.on.st-r { color: #A8731F; } .pw.on.st-s { color: #A23A30; }
.st { display: inline-block; padding: 3px 8px 2px; color: #fff; letter-spacing: .06em; }
.st--a { background: #3E7A55; } .st--r { background: #B9822A; } .st--s { background: #B2453A; }
.apt__no .st { margin-left: 6px; }
.apt { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; margin-top: clamp(24px, 3.5vh, 40px);
  padding-top: 20px; border-top: 1px solid rgba(40,40,40,.18); max-width: 520px; }
.apt__no { opacity: .6; margin-bottom: 8px; }
.apt__sum { font-size: 15px; margin-bottom: 12px; }
.apt__rooms { list-style: none; padding: 0; margin: 0; }
.apt__rooms li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px solid rgba(40,40,40,.08); }
.chap--light .chap__body .t1 { font-size: clamp(40px, 5.2vw, 84px); }
@media (max-width: 760px) {
  .pick { position: relative; inset: auto; padding: 72px var(--pad) 8px; }
  .pick__svg { height: auto; }
}
.apt__rooms li span:last-child { text-transform: none; letter-spacing: 0; }
/* Lev 09.11: the picked flat is the thing to look at: its own final, large, next to its numbers */
.apt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; max-width: none; }
.apt__fig { margin: 0; height: min(54vh, 540px); }
.apt__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
@media (min-width: 761px) { .floor.chap--light .chap__body h2.t1 { font-size: clamp(36px, 3.6vw, 56px); } }
@media (max-width: 760px) {
  .apt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; padding-top: 12px; }
  .apt__fig { height: 30svh; }
  .floor .pick { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }   /* the plan moves sideways only; a vertical swipe on it scrolls the page (x only: contain on y trapped it) */
}
.chap__img--cut { object-position: 66% 50%; }            /* tower of maisi-slice-dusk-ai sits at 49-83 % of the width */
@media (min-width: 761px) {
}

/* =========================================================
   09-all (/2/): every service shows itself, one screen each
   ========================================================= */
.scr { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.sh__lbl { display: block; margin-bottom: 18px; opacity: .7; }
.sh h2 { margin-bottom: 18px; }
.sh p { max-width: 30em; opacity: .8; }
.go {
  display: inline-block; align-self: flex-start;
  border: 1px solid rgba(255,255,255,.55); border-radius: 1px;
  padding: 13px 18px 12px; transition: background .2s, color .2s;
}
.go:hover { background: #fff; color: var(--ink); }
.go--ink { border-color: rgba(40,40,40,.55); }
.go--ink:hover { background: var(--ink); color: #fff; }
.pad-y { padding-top: clamp(40px, 7vh, 64px); padding-bottom: clamp(40px, 7vh, 64px); }

/* 01 film */
.film { background: #0d1626; }
.film__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%), linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%); }
.film__sh { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); bottom: clamp(32px, 6vh, 72px); max-width: 980px; }
.film__sh h2 { margin-bottom: 22px; }
.lines span { display: block; white-space: nowrap; }
.film__sh p { max-width: 24em; }

/* 02 building selector */
.sel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 64px); padding-left: var(--pad); }
.sel__sh { grid-column: 1; grid-row: 1; padding-top: clamp(40px, 8vh, 88px); }
.sel__read { grid-column: 1; grid-row: 2; min-height: 0; display: flex; flex-direction: column; padding: 12px 0 clamp(28px, 5vh, 56px); }
.sel__sh p { display: none; }   /* Lev 09.11: the floor image gets the height, not the copy */
/* the hovered (or auto-lit) floor, in 3D and from above; both crops are shared by all floors, so nothing jumps */
/* Lev 09.11: one big image at a time, 3D or plan, instead of two small ones side by side */
.sel__view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sel__tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.sel__tabs button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; cursor: pointer;
  border: 1px solid rgba(40,40,40,.3); padding: 7px 14px 6px; }
.sel__tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sel__fig { margin: 0; flex: 1; min-height: 0; }
.sel__fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }   /* fills what the screen leaves */
.sel__fig[data-show="iso"] #selPlan, .sel__fig[data-show="plan"] #selIso { display: none; }
.sel__meta { margin: 14px 0 16px; }
.sel__go { justify-self: start; }
.sel__bld { grid-column: 2; grid-row: 1 / 3; height: 100%; min-height: 0; display: flex; justify-content: flex-end; background: #fff; }
.sel__bld img, .sel__bld svg { height: 100%; width: auto; aspect-ratio: 1100 / 1775; max-width: 100%; display: block; }
.sel__bld .bf { cursor: pointer; outline: none; }
.sel__bld .fm { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-opacity: 0; stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  transition: fill-opacity .45s, stroke-opacity .45s; }
.sel__bld .bf.on .fm { fill: var(--ink); fill-opacity: .55; stroke-opacity: 1; transition-duration: .15s; }
.sel__bld .bn, .sel__bld .bt { display: none; }   /* Lev 05.11: no floor numbers beside the tower, the floor shows itself on the left */

/* 03 floor in 3D: the 08-final picker, playing by itself */
.floor .chap__body h2 { margin-bottom: 20px; }

/* 04 apartments in 3D */
/* Lev 09.11: two spreads of two apartments, each render as tall as the screen allows, nothing overlaps */
.isos { background: var(--band); color: var(--ink); display: grid; grid-template-rows: auto 1fr; row-gap: 20px;
  padding: clamp(40px, 7vh, 64px) var(--pad); }
.isos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); min-height: 0; }
.isos figure { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.isos img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.isos figcaption { margin-top: 8px; opacity: .6; text-align: center; }

/* 05 interiors */
.ints { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: clamp(40px, 7vh, 64px) var(--pad); }
.ints__sh { grid-column: 1 / 5; align-self: end; }
.ints__grid { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--gap); min-height: 0; }
.ints__grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

/* 06 view by floor */
.views { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: clamp(40px, 7vh, 64px) var(--pad); }
.views__sh { grid-column: 1 / 5; align-self: end; }
/* Lev 09.11: floor and compass side spelled out; floors 26 and 12 on both sides of the building */
.views__grid { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px var(--gap);
  min-height: 0; list-style: none; padding: 0; margin: 0; }
.views__grid li { display: flex; flex-direction: column; min-height: 0; }
.views__grid img { flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: 50% 40%; }
.views__grid p { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.views__grid .ui { opacity: .7; }

/* 07 cutaway */
.cut { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; column-gap: var(--gap); padding-right: var(--pad); }
.cut__side { display: contents; }
.cut__a { grid-column: 1 / 9; grid-row: 1 / 3; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 66% 50%; }
.cut__side .sh { grid-column: 9 / 13; grid-row: 1; padding-top: clamp(40px, 7vh, 64px); }
.cut__b { grid-column: 9 / 13; grid-row: 2; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: 0 100%;
  padding: 8px 0 clamp(40px, 7vh, 64px); }

/* 08 spin */
.spin { background: #9fb3c8; }
.spin__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spin__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%), linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%); }
.spin__sh { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); bottom: clamp(32px, 6vh, 72px); }
.spin__sh h2 { margin-bottom: 24px; }

/* 09 availability, set like a price sheet */
.avail { display: flex; flex-direction: column; padding: clamp(40px, 7vh, 64px) var(--pad); }
.avail__sh { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; margin-bottom: clamp(24px, 4vh, 40px); }
.avail__sh .sh__lbl { grid-column: 1 / 13; }
.avail__sh h2 { grid-column: 1 / 8; margin: 0; }
.avail__sh p { grid-column: 9 / 13; justify-self: end; text-align: right; }
.av { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.av th.n, .av th.av__st { text-align: right; }
.av th { text-align: left; font-weight: 500; opacity: .55; padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.av td { padding: 0; height: clamp(34px, 4.9vh, 48px); border-bottom: 1px solid rgba(40,40,40,.16); font-size: 15px; }
.av .n { text-align: right; padding-right: 3vw; }
.av td:first-child, .av td:nth-child(2) { font-size: 18px; letter-spacing: -.01em; }
.av__st { text-align: right; }
.av tbody { transition: opacity .25s; }
.av tbody.fade { opacity: 0; }

@media (max-width: 760px) {
  .sh h2 { margin-bottom: 12px; }
  .sh__lbl { margin-bottom: 12px; }
  .film__sh h2 { font-size: clamp(44px, 12vw, 64px); }

  .sel { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 0 var(--pad); }
  .sel__sh, .sel__read, .sel__bld { grid-column: 1; }
  .sel__sh { grid-row: 1; padding-top: 40px; padding-bottom: 12px; }
  .sel__sh p { display: none; }
  .sel__bld { grid-row: 2; justify-content: center; }
  .sel__read { grid-row: 3; padding: 14px 0 24px; }
  .sel__tabs { margin-bottom: 8px; }
  .sel__read { display: block; }
  .sel__fig img { height: auto; max-height: 30svh; }
  .sel__meta { margin: 10px 0 0; }
  .sel__go { display: none; }

  .floor .chap__body { padding-bottom: 28px; }
  .floor .chap__body h2 { font-size: 40px; margin-bottom: 12px; }
  .floor .chap__body > p { display: none; }
  /* 26 MAISI floor is 1.78:1: at phone width the flats were 20 px wide. Wider than the screen, panned by hand or
     by the autoplay (app.js centres the lit flat) */
  .floor .pick { overflow-x: auto; justify-content: flex-start; padding: 44px var(--pad) 8px; scrollbar-width: none; }
  .floor .pick::-webkit-scrollbar { display: none; }
  .floor .pick__svg { width: 150%; flex: none; }
  .lines span { white-space: normal; }   /* long Russian lines ran into the right edge */

  .ints, .views { grid-template-columns: 1fr; grid-template-rows: auto 1fr; row-gap: 20px; }
  .ints__sh, .ints__grid, .views__sh, .views__grid { grid-column: 1; }
  .ints__sh, .views__sh { align-self: start; }
  .isos__grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }   /* phone: one above the other */
  .ints__grid { gap: 8px; }
  .views__sh p { display: none; }
  .views__grid { gap: 10px 10px; }
  .views__grid .t3 { font-size: 22px; }
  .views__grid p { gap: 8px; margin-top: 4px; }

  .cut { grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr; column-gap: 10px; padding: 40px var(--pad); }
  .cut__side .sh { grid-column: 1 / 3; grid-row: 1; padding: 0 0 20px; }
  .cut__a { grid-column: 1; grid-row: 2; }
  .cut__b { grid-column: 2; grid-row: 2; padding: 0; object-fit: cover; object-position: 50% 50%; }

  .spin { background: var(--ink); }
  .spin__v { bottom: auto; height: auto; aspect-ratio: 720 / 864; }
  .spin__scrim { display: none; }
  .spin__sh { bottom: 32px; }

  .avail__sh h2 { grid-column: 1 / 13; }
  .avail__sh p { display: none; }
  .av td { font-size: 13px; height: 36px; }
  .av td:first-child, .av td:nth-child(2) { font-size: 14px; }
  .av .n { padding-right: 10px; }
  .av th:nth-child(4), .av td:nth-child(4), .av__hs { display: none; }
}

/* phone, second pass after the 390 screenshots */
@media (max-width: 760px) {
  .film__scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%); }


  .spin__v { height: calc(100% - 220px); aspect-ratio: auto; }
  .av td { height: 42px; }

  .pricing { padding-top: 44px; padding-bottom: 44px; }
  .pricing .sec__head { flex-direction: row; align-items: flex-end; margin-bottom: 20px; }
  .prices li { padding: 16px 0 18px; row-gap: 6px; }
  .prices p { font-size: 13px; line-height: 1.42; }
  .price { font-size: 36px; }
  .terms { margin-top: 18px; font-size: 14px; }

  .process { padding-top: 44px; padding-bottom: 44px; }
  .process .sec__head { margin-bottom: 24px; }
  .steps { grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 0; }
  .steps li { padding: 16px 0 28px; border-top: 1px solid rgba(40,40,40,.25); border-bottom: 0; }
  .steps .num { margin-bottom: 18px; }
  .steps .t3 { font-size: 24px; margin-bottom: 10px; }
  .steps p { font-size: 13px; line-height: 1.42; }
}

/* hero: tower-tilt.webp (05.11). Pale neighbours fill the left half below ~32 % height, so the white
   headline gets a soft dark falloff from the left edge, gone by ~55 % of the width. */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(20,20,20,.45) 0%, rgba(20,20,20,.4) 34%, rgba(20,20,20,0) 55%),
    linear-gradient(to top, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 34%);
}
@media (max-width: 760px) {
  .hero__img { object-position: 60% 50%; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(20,20,20,.45) 0%, rgba(20,20,20,.38) 55%, rgba(20,20,20,0) 90%),
      linear-gradient(to top, rgba(20,20,20,.7) 0%, rgba(20,20,20,0) 50%);
  }
}

/* iOS Safari: no native start glyph over the muted loops (it could not be tapped through the overlays);
   a tap on the screen plays them (app.js inline()), the overlays let it through */
.film__v::-webkit-media-controls-start-playback-button, .spin__v::-webkit-media-controls-start-playback-button,
.film__v::-webkit-media-controls, .spin__v::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.film__scrim, .spin__scrim { pointer-events: none; }

/* Lev 09.11, desktop pass. Floor 5: the text column ends before the plan (it ran 5vw under it, areas on the plan) */
@media (min-width: 761px) {
  .floor.chap--light .chap__body { max-width: 48vw; }
}
/* Facade selector on wide screens: copy | big floor image | tower, no empty middle */
@media (min-width: 1100px) {
  .sel { grid-template-columns: minmax(260px, 24%) minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto auto; column-gap: clamp(32px, 3vw, 56px); }
  .sel__read, .sel__view { display: contents; }
  .sel__sh { grid-column: 1; grid-row: 1; }
  .sel__tabs { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
  .sel__fig { grid-column: 2; grid-row: 1 / 6; align-self: stretch; padding: clamp(32px, 6vh, 64px) 0; }
  .sel__fig img { object-position: center center; }
  .sel__meta { grid-column: 1; grid-row: 4; margin: 0 0 16px; }
  .sel__go { grid-column: 1; grid-row: 5; margin-bottom: clamp(28px, 5vh, 56px); }
  .sel__bld { grid-column: 3; grid-row: 1 / 6; }
}

/* ---------- narrow phones (Lev 09.11: enlarged system text). 130 % text on a 390 px phone = a 300 px page, 160 % = 244 px.
   Below 360 px every heading size is capped by the width so its longest word fits (ПОКУПАТЕЛЬ, КЛИКАБЕЛЕН = 6.4 em,
   ПРОДАЙТЕ = 5.2 em, the mail address = 9.6 em); 360 px and wider stay exactly as they were. ---------- */
@media (max-width: 359px) {
  :root {
    --t0: min(64px, calc((100vw - 32px) / 5.4));
    --t1: min(52px, calc((100vw - 32px) / 6.6));
    --t2: min(44px, calc((100vw - 32px) / 6.6));
    --t3: min(26px, calc((100vw - 32px) / 7.6));
  }
  .hero__title { font-size: var(--t0); }
  .chaps .chap--light .chap__body h3, .floor .chap__body h2 { font-size: min(40px, calc((100vw - 32px) / 6.6)); }
  .offer__mail { font-size: min(var(--t3), calc((100vw - 32px) / 10)); }
  .nav a:not(:last-child) { display: none; }          /* logo + contact only */
  .facts { grid-template-columns: repeat(2, auto); }
  p, dd, dt, li, figcaption { overflow-wrap: break-word; }
  .steps { grid-template-columns: 1fr; }
  .apt { grid-template-columns: minmax(0, 1fr); }      /* the flat above its numbers */
  .apt__rooms li { gap: 8px; }
  .price { font-size: min(36px, calc((100vw - 32px) / 7)); }
  .offer__mail { display: block; width: max-content; max-width: 100%; }
  .chap--light .chap__body .t1 { font-size: min(40px, calc((100vw - 32px) / 6.6)); }
  /* a one-screen block grows instead of pushing its top under the block above (floor plan screen at 244 x 528) */
  .scr { height: auto; min-height: 100svh; }
  /* designed, not just fitting: text over photos and video reads on busy windows, micro labels stay one line,
     views stack in one column (no "NORTH- / EAST"), the floor plan is twice the screen wide and pans sideways */
  .hero__title, .hero__foot, .credit, .film__sh, .spin__sh, .chap--dark .chap__body { text-shadow: 0 1px 14px rgba(20,20,20,.55), 0 0 2px rgba(20,20,20,.35); }
  .film__scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.82) 100%); }
  .hero__scrim { background: linear-gradient(to top, rgba(20,20,20,.78) 0%, rgba(20,20,20,0) 62%), linear-gradient(to bottom, rgba(20,20,20,.35) 0%, rgba(20,20,20,0) 30%); }
  .sh__lbl, .chap__body > .ui, .credit { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%; }   /* width 0: a one-line label never widens its block */
  .views__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .views__grid img { aspect-ratio: 16 / 9; flex: none; }
  .views__grid p .ui { white-space: nowrap; }
  .floor .pick__svg { width: 200%; }
}

/* ---------- phone tap targets (mobile audit 11.11): 44 px tall without moving anything. Padding grows the hit
   area, a matching negative margin (or inline padding, which never touches the line box) keeps the text where it was. ---------- */
@media (max-width: 760px) {
  .nav a { padding: 14.5px 8px; margin: -14.5px -8px; }               /* 15 px -> 44 px; gap 16 px = two 8 px halves */
  .go { padding: 14px 18px 13px; }                                    /* 42 -> 44 px: hero button, «Open ...» */
  .offer__me .offer__mail { padding-top: 16px; margin-top: 12px; }    /* 29 -> 45 px, the text stays 28 px below */
  /* footer: three links on three 14 px lines, so each one grows where nothing else is tappable: the contacts
     upwards (into the footer padding), the privacy link downwards (over the credits); the first link paints on
     top so the mail link's top padding never takes its taps */
  .foot a { position: relative; padding-top: 33px; }
  .foot a:first-of-type { z-index: 1; }
  .foot a[href*="privacy"] { padding: 0 0 33px; }
}

/* ---------- short phones (375 x 667, audit 11.11): every text block fits one screen, only the vertical air shrinks.
   v2/ru/cases.css (made by tools/build-ru.py) comes after this file, so its rules are outranked by one more class. ---------- */
@media (max-width: 760px) and (max-height: 700px) {
  .sec.case { padding-top: 28px; padding-bottom: 28px; }
  .case .case__no { margin-bottom: 12px; }
  .case .case__text { margin-top: 24px; }
  .case .case__text .t3 { margin-bottom: 14px; }
  .case .case__lbl { margin-top: 12px; }
  .case .facts { margin: 14px 0; }

  .sec.pricing { padding-top: 28px; padding-bottom: 28px; }
  .pricing .sec__head { margin-bottom: 12px; }
  .pricing .prices li { padding: 7px 0 8px; row-gap: 2px; }
  .pricing .pk__d { margin-top: 2px; }
  .pricing .terms { margin-top: 8px; }

  .sec.process { padding-top: 32px; padding-bottom: 32px; }
  .process .sec__head { margin-bottom: 16px; }
  .process .steps li { padding: 12px 0 18px; }
  .process .steps .num { margin-bottom: 12px; }

  .sec.offer { padding-top: 40px; padding-bottom: 40px; }
  .offer .offer__text { margin-top: 28px; }
  .offer .offer__me { margin-top: 32px; }
}

/* ---------- Р4 (11.11): the two picker screens on phones. Wide screens (761 px and up) do not change: the stepper is
   never shown there. Floor 5 of 26 MAISI fits the screen width (no sideways plan), heading above it, the flat's card
   right under it; Tower 21 gets a floor stepper with 44 px targets beside 44 px 3D / plan tabs. ---------- */
.sel__step { display: none; }
@media (max-width: 760px) {
  .floor.chap--light { justify-content: flex-start; padding: 36px 0 24px; }
  .floor .chap__body { display: contents; }
  .floor .chap__body > .ui { order: 1; margin: 0 var(--pad) 12px; }
  .floor .chap__body > h2 { order: 2; margin: 0 var(--pad); }
  .floor .pick { order: 3; padding: 16px var(--pad) 0; overflow-x: hidden; }
  .floor .pick .pick__svg { width: 100%; flex: none; }
  .floor .apt { order: 4; margin: 16px var(--pad) 0; }
  .floor .apt__fig { height: clamp(30svh, calc(100svh - 450px), 48svh); }   /* the flat takes the height a tall phone leaves */

  .sel__view { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: start; column-gap: 8px; }
  .sel__fig { grid-column: 1 / -1; }
  .sel__tabs button { height: 44px; min-width: 44px; padding: 0 16px; }
  .sel__step { display: flex; align-items: center; margin-bottom: 8px; }
  .sel__step button { width: 44px; height: 44px; padding: 0; font: inherit; font-size: 20px; line-height: 1; color: inherit;
    background: none; border: 1px solid rgba(40,40,40,.3); cursor: pointer; }
  .sel__step output { min-width: 6.4em; text-align: center; }
  .sel__meta #selNo, .sel__meta .sel__dot { display: none; }   /* the floor number sits in the stepper */
}