/* Rent & Stay — главная. */

/* ---------- первый экран: дом открывается сам, потом поиск и заявка ---------- */
.house{position:relative;height:100vh;height:100svh;min-height:700px;background:var(--paper);overflow:hidden}
.hs-stage{position:absolute;inset:0;overflow:hidden;background:var(--paper);cursor:default}
.hs-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hs-lockup{position:absolute;left:0;right:0;top:69%;text-align:center;padding:0 16px;pointer-events:none;will-change:opacity,transform}
.hs-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.16);opacity:0;pointer-events:none}
.hs-mark{display:none}
.hs-word{font-family:var(--head);font-weight:500;font-size:clamp(23px,4.1vw,60px);line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.hs-word i{font-style:normal;color:var(--orange)}
.hs-sub{font-weight:500;font-size:clamp(14px,1.45vw,21px);letter-spacing:.3em;margin-top:.7em;margin-right:-.3em}
.hs-word,.hs-sub{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s var(--ease)}
.hs-in .hs-word,.hs-in .hs-sub{opacity:1;transform:none}
.hs-in .hs-sub{transition-delay:.12s}
.hs-hint{display:none}
.hs-final{position:absolute;inset:0;display:flex;align-items:center;padding-top:var(--nav-h);opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(243,229,212,.97) 0%,rgba(243,229,212,.94) 50%,rgba(243,229,212,0) 82%)}
.hs-final.live{pointer-events:auto}
.hs-final .wrap{width:100%}
.hs-text{max-width:min(620px,56vw)}
.hs-text .h-display{margin:18px 0 0}
.hs-text .h-display em{display:block}
.hs-text p{margin-top:18px;font-size:18px;max-width:34em}

/* карточка «Найти квартиру / Оставить заявку» */
.hero-card{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 24px 50px -30px rgba(55,53,53,.35)}
.hc-tabs{display:flex;gap:4px;padding:4px;background:var(--paper);border-radius:999px;margin-bottom:14px}
.hc-tabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:11px 14px;font-weight:700;font-size:15.5px;color:var(--muted);cursor:pointer}
.hc-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.hc-pane{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:stretch}
.hc-pane[hidden]{display:none}
.hc-pane select,.hc-pane input[type=number],.hc-pane input[type=text]{width:100%;min-width:0;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px 14px;font-size:16px;font-weight:500;color:var(--ink)}
.hc-pane select:focus,.hc-pane input:focus{outline:2px solid var(--orange-deep);outline-offset:1px}
.hc-pane .btn{padding:14px 22px}
.hc-lead{grid-template-columns:auto 1fr auto}
.hc-chips{display:flex;gap:6px}
.hc-chips label{position:relative;cursor:pointer}
.hc-chips input{position:absolute;opacity:0;pointer-events:none}
.hc-chips span{display:flex;align-items:center;height:100%;padding:0 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-weight:700;white-space:nowrap;background:#fff}
.hc-chips input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hc-chips input:focus-visible+span{outline:2px solid var(--orange-deep);outline-offset:2px}
.hc-note{margin-top:10px;font-size:14px;font-weight:600;color:var(--muted)}

/* без 3D (слабое устройство или отключённая анимация) */
.hs-static{height:auto;min-height:0}
.hs-static .hs-stage{position:relative;inset:auto;height:auto}
.hs-static canvas,.hs-static .hs-photo{display:none}
.hs-static .hs-lockup{position:relative;top:auto;padding:calc(var(--nav-h) + 40px) 16px 8px}
.hs-static .hs-mark{display:block;width:min(30vh,48vw);height:auto;margin:0 auto 22px}
.hs-static .hs-word,.hs-static .hs-sub{opacity:1;transform:none}
.hs-static .hs-final{position:relative;opacity:1!important;pointer-events:auto;background:none;padding:24px 0 64px}

/* ---------- свежие квартиры ---------- */
.fresh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.fresh-links{display:flex;gap:10px;flex-wrap:wrap}
.nf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nf-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.nf-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(55,53,53,.45)}
/* рамка фото всегда 4:3: вертикальные фото обрезаются, а не растягивают карточку */
.nf-ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivory-deep)}
.nf-ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.nf-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.nf-body b{font-family:var(--head);font-weight:500;font-size:22px;line-height:1.2}
.nf-body b small{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted)}
.nf-t{font-size:16px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-m{font-size:15px;color:var(--muted)}
.nf-empty{grid-column:1/-1;padding:40px 0;font-size:17px;font-weight:600;color:var(--muted)}

/* ---------- развилка «снимаю / сдаю» ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.path{display:block}
.path-img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;position:relative;background:var(--ivory-deep)}
.path-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);transform:scale(1.04)}
.path:hover .path-img img{transform:scale(1)}
.path-tag{position:absolute;left:18px;top:18px;background:var(--paper);padding:8px 14px;border-radius:100px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.path-body{padding-top:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.path h3{font-family:var(--head);font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.24}
.path .lede{margin-top:10px;font-size:16.5px}
.path .btn{margin-top:22px}
.arrow{width:56px;height:56px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:22px;transition:all .4s var(--ease)}
.path:hover .arrow{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;transform:rotate(-45deg)}

/* ---------- цифры и отзывы ---------- */
#proof .stats{margin-bottom:56px}

@media(max-width:960px){
  .paths{grid-template-columns:1fr}
  .nf-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  /* на телефоне: сверху сцена дома, ниже — текст и форма обычным блоком */
  .house{height:auto;min-height:0;overflow:visible}
  .hs-stage{position:relative;inset:auto;height:56vh;height:56svh}
  .hs-sub{letter-spacing:.2em;margin-right:-.2em}
  .hs-final{position:relative;inset:auto;opacity:1!important;pointer-events:auto;background:none;padding:22px 0 44px}
  .hs-text{max-width:100%}
  .hs-text .h-display{font-size:24px}
  .hs-text p{font-size:16.5px;margin-top:12px}
  .hero-card{padding:14px;margin-top:22px}
  .hc-pane,.hc-lead{grid-template-columns:1fr}
  .hc-chips{min-width:0}
  .hc-chips label{flex:1;min-width:0}
  .hc-chips span{justify-content:center;text-align:center;white-space:normal;padding:11px 8px;font-size:14.5px;line-height:1.25}
  .hero-card,.hc-pane{min-width:0}
  .hc-pane .btn{width:100%}
  .nf-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none}
  .nf-grid::-webkit-scrollbar{display:none}
  .nf-card{flex:0 0 80%;scroll-snap-align:start}
  .fresh-head{margin-bottom:28px}
}

/* ---------- о нас ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-imgs{position:relative;height:600px}
.about-imgs div{position:absolute;overflow:hidden;border-radius:16px;background:var(--ivory-deep)}
.about-imgs div:first-child{inset:0 22% 18% 0}
.about-imgs div:last-child{width:46%;height:46%;right:0;bottom:0;border:10px solid var(--ivory)}
.about-imgs img{width:100%;height:100%;object-fit:cover}
.about-text .h2{margin-top:18px}
.about-text p{color:var(--muted);font-size:18px;margin-top:20px}
.chips{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.chip{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;display:flex;gap:12px}
.chip::before{content:"✦";color:var(--orange-deep);font-size:11px;line-height:2}
@media(max-width:960px){
  .about{grid-template-columns:1fr;gap:40px}
  .about-imgs{height:420px}
  .chips{grid-template-columns:1fr}
}