/* Главная после героя: утверждение, разрез здания, горизонт, две двери, регистрация. */

/* кнопка-контур на светлой бумаге */
.paper .btn--ghost{--b-ink:var(--color-text-inverse);--b-line:var(--color-text-inverse);box-shadow:inset 0 0 0 1px var(--color-text-inverse)}
@media (hover:hover) and (pointer:fine){
  .paper .btn--ghost:hover{background:var(--color-text-inverse);color:var(--color-text);--b-line:var(--color-text)}
}
.paper .btn--ink{--b-fill:var(--color-text-inverse);--b-ink:var(--color-text);--b-line:rgba(241,240,230,.4)}

/* 1. утверждение */
.statement{padding:clamp(56px,7vw,112px) 0 clamp(44px,5vw,80px)}
.statement__text{
  font-weight:800;
  font-size:clamp(30px,5.3vw,88px);
  line-height:.98;
  letter-spacing:-.03em;
  text-transform:uppercase;
  max-width:19ch;
}
.statement__text .lt{font-weight:400}
.statement__foot{
  display:grid;grid-template-columns:minmax(0,34ch) auto;
  justify-content:space-between;align-items:end;gap:28px;
  margin-top:clamp(36px,5vw,72px);
  padding-top:28px;
  border-top:1px solid rgba(25,37,30,.28);
}
.statement__copy{font-size:clamp(15px,1.1vw,18px);max-width:34ch}
.statement__foot .btn{justify-self:start}

/* 2. разрез здания: слева липкий кадр с отметками, справа уровни */
.xs{padding:clamp(24px,3vw,48px) 0 clamp(64px,8vw,128px);border-top:1px solid rgba(25,37,30,.18)}
.xs__title{max-width:14ch;margin:clamp(28px,4vw,64px) 0 clamp(32px,4vw,64px)}
.xs__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(24px,5vw,88px);
  align-items:start;
}
.xs__stage{position:sticky;top:28px;margin:0}
.xs__fig{position:relative;aspect-ratio:1400/951;background:#d3ddd6}
.xs__fig img{width:100%;height:100%;object-fit:cover}
.xs__cap{margin-top:12px;color:rgba(25,37,30,.7)}
.xs__mark{
  position:absolute;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  border:2px solid var(--color-primary);
  background:rgba(164,198,74,.16);
  opacity:0;
  transition:opacity .45s var(--ease-soft);
  pointer-events:none;
}
.xs__mark i{
  position:absolute;left:-2px;top:-2px;transform:translateY(-100%);
  padding:5px 8px;font-style:normal;
  background:var(--color-text-inverse);color:var(--color-text);
  white-space:nowrap;
}
.xs[data-active="roof"] .xs__mark[data-for="roof"],
.xs[data-active="upper"] .xs__mark[data-for="upper"],
.xs[data-active="middle"] .xs__mark[data-for="middle"],
.xs[data-active="core"] .xs__mark[data-for="core"],
.xs[data-active="ground"] .xs__mark[data-for="ground"]{opacity:1}
/* метка нижнего уровня внутри кадра, не за его краем */
.xs__mark[data-for="ground"] i,.xs__mark[data-for="roof"] i{transform:none;top:auto;bottom:100%}
.xs__mark[data-for="ground"] i{bottom:auto;top:0;left:0}
.xs__mark[data-for="roof"] i{bottom:auto;top:0;left:0}

.xs__levels{display:grid;padding-top:6vh}
.xs__lvl{
  min-height:40vh;
  display:grid;align-content:start;gap:14px;
  padding:0 0 clamp(36px,6vh,80px);
  border-top:1px solid rgba(25,37,30,.28);
  padding-top:28px;
  opacity:.38;
  transition:opacity .5s var(--ease-soft);
  outline:none;
}
.xs__lvl:last-child{min-height:34vh}
.xs__lvl.is-active{opacity:1}
.xs__lvl h3{
  font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:1;
  font-size:clamp(24px,2.6vw,40px);
}
.xs__lvl p{font-size:clamp(16px,1.2vw,19px);max-width:34ch}
.xs__lvl:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:6px}

/* 3а. Внутри: номер крупно, холл вертикально и ниже, панель текста наезжает на номер */
.inside{background:var(--color-background);padding:clamp(56px,7vw,112px) 0 clamp(56px,6vw,96px)}
.inside__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.inside__room{grid-column:1 / span 8;grid-row:1;margin:0;position:relative}
.inside__room figcaption{position:absolute;left:var(--pad);top:14px;margin:0;padding:6px 10px;background:var(--color-background);color:var(--color-text)}
.inside__room img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.inside__lobby{grid-column:9 / span 4;grid-row:1;margin:clamp(56px,10vw,170px) var(--pad) 0 0}
.inside__lobby img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.inside figcaption{margin-top:10px;color:var(--color-text-muted)}
.inside__text{
  grid-column:2 / span 5;grid-row:2;
  margin-top:calc(clamp(24px,4.5vw,72px) * -1);
  position:relative;z-index:2;
  padding:clamp(24px,3vw,44px);
  background:var(--color-surface-elevated);
  box-shadow:var(--shadow-lift);
  display:grid;gap:18px;
}
.inside__text p{max-width:32ch}

/* 3. против горизонта: кадр с левого края, панель с перекрытием */
.sky{background:var(--color-background);padding:clamp(56px,7vw,112px) 0}
.sky__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:center;
}
.sky__img{grid-column:1 / span 8;grid-row:1;margin:0;position:relative}
.sky__img img{width:100%;height:auto;aspect-ratio:1190/650;object-fit:cover}
.sky__img figcaption{position:absolute;left:var(--pad);bottom:16px;color:var(--color-text-inverse);max-width:30ch}
.sky__panel{
  grid-column:8 / span 5;grid-row:1;
  margin-right:var(--pad);
  margin-left:-4vw;
  position:relative;
  padding:clamp(28px,3.4vw,56px);
  background:var(--color-surface-elevated);
  box-shadow:var(--shadow-lift);
  display:grid;gap:22px;justify-items:start;
}
.sky__panel p{max-width:32ch}

/* 4. две двери: разной ширины и высоты */
.doors{padding:0 0 clamp(64px,8vw,128px);background:var(--color-background)}
.doors__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);
  align-items:start;
}
.door{display:grid;gap:22px;align-content:start}
.door--guests{
  grid-column:1 / span 7;
  background:var(--color-surface-elevated);
  grid-template-rows:auto 1fr;
}
.door__img img{width:100%;height:auto;aspect-ratio:1400/951;object-fit:cover}
.door__body{padding:clamp(24px,3vw,44px);display:grid;gap:20px;justify-items:start}
.door__body p{max-width:36ch}
.doors__side{
  grid-column:9 / span 4;
  margin-top:clamp(40px,9vw,150px);
  display:grid;gap:clamp(20px,3vw,40px);align-content:start;
}
.door--investors{
  padding:clamp(24px,3vw,44px);
  gap:20px;justify-items:start;
  box-shadow:var(--shadow-lift);
}
.door--investors p{max-width:30ch}
.door__year{display:grid;gap:6px;margin:0}
.door__year .t-num{font-size:clamp(80px,13vw,210px);color:var(--color-surface-elevated);line-height:.8}
.door__year .mono{color:var(--color-text-muted)}

/* 5. регистрация на ночном кадре */
.reg{--reg-x:60%;--reg-y:40%;--reg-bright:1;position:relative;isolation:isolate;overflow:clip;padding:clamp(72px,9vw,144px) 0;background:var(--color-surface)}
.reg__bg{position:absolute;inset:0;z-index:-1}
.reg__bg img{width:100%;height:100%;object-fit:cover;object-position:var(--reg-x) var(--reg-y);filter:brightness(var(--reg-bright))}
.reg__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end}
.reg__title{max-width:11ch;font-size:clamp(38px,6vw,96px);align-self:start}
.reg__panel{padding:clamp(24px,3vw,44px);box-shadow:var(--shadow-lift);max-width:520px;justify-self:end;width:100%}

/* планшет и телефон */
@media (max-width:1000px){
  .xs__grid{grid-template-columns:1fr;gap:0}
  .xs__stage{
    position:sticky;top:8px;z-index:3;
    background:var(--color-surface-inverse);padding:8px 0 0;
  }
  .xs__fig{aspect-ratio:1400/760}
  .xs__levels{padding-top:18px}
  .xs__lvl{min-height:24vh;padding-bottom:24px}
  .xs__lvl:last-child{min-height:18vh}
  .inside__grid{grid-template-columns:1fr}
  .inside__room,.inside__lobby,.inside__text{grid-column:1;grid-row:auto}
  .inside__lobby{margin:32px var(--pad) 0;max-width:420px}
  .inside__text{margin:-40px var(--pad) 0}
  .sky__grid{grid-template-columns:1fr}
  .sky__img,.sky__panel{grid-column:1;grid-row:auto}
  .sky__panel{margin:-48px var(--pad) 0}
  .sky__img figcaption{bottom:auto;top:14px}
  .doors__grid{grid-template-columns:1fr}
  .door--guests,.doors__side{grid-column:1}
  .doors__side{margin-top:0}
  .reg__inner{grid-template-columns:1fr}
  .reg__panel{justify-self:stretch;max-width:none}
}
@media (max-width:640px){
  .statement__foot{grid-template-columns:1fr;gap:20px}
}