:root{
  --bg:#EDEDED;
  --paper:#FCFCFC;
  --text:#28282C;
  --muted:#666666;
  --line:#DADADA;
  --card:#F7F7F7;
  --shadow:0 12px 40px rgba(0,0,0,.12);
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}
body.intro-locked{overflow:hidden}

/* Вступительное видео до показа сайта (как в artgreen) */
.introVideo{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1a1c1f;
  transition:opacity .45s ease, visibility .45s ease;
  touch-action:none;
  cursor:grab;
}
.introVideo:active{
  cursor:grabbing;
}
.introVideo.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.introVideo__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

img{max-width:100%; display:block}
button, input{font:inherit}

.page{
  max-width: 1280px;
  margin: 40px auto;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.rule{height:1px; background:var(--line)}

/* Header */
.header{padding: 22px 0 0}
.header__row{display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand__logo{
  height:40px;
  max-width:160px;
  object-fit:contain;
}

.nav{flex:1}
.nav__burger{display:none; width:44px; height:44px; border:0; background:transparent; padding:10px; border-radius:8px}
.nav__burger span{display:block; height:2px; background:var(--text); margin:6px 0; border-radius:2px}
.nav__list{display:flex; gap:18px; justify-content:center; list-style:none; padding:0; margin:0}
.nav__link{text-decoration:none; color:inherit; font-size:14px}
.nav__link:hover{opacity:.75}

.header__actions{display:flex; align-items:center; gap:14px}
.header__phone{font-size:14px; text-decoration:none; color:inherit; white-space:nowrap}

.btn{border:1px solid transparent; padding: 12px 18px; border-radius:0; background:transparent; cursor:pointer; font-size:14px}
.btn--outline{border-color:var(--muted); color:var(--text); background:#fff}
.btn--outline:hover{background:#f3f3f3}
.btn--primary{background:var(--text); color:#fff}
.btn--primary:hover{opacity:.9}
.btn--wide{width:100%}
.btn--small{padding: 8px 12px; font-size:12px}

/* Hero */
.hero{padding: 42px 0 46px}
.hero__grid{display:grid; grid-template-columns: 1.25fr .75fr; gap: 20px 40px; align-items:start}
.hero__title{margin:0; font-size:56px; line-height:1.05; font-weight:600; letter-spacing:-0.02em}
.hero__right{justify-self:end; text-align:left; max-width:330px; padding-top: 10px}
.hero__kicker{margin:0 0 18px; font-size:14px; color:var(--muted); line-height:1.4}
.hero__imageWrap{grid-column:1/-1; margin-top: 8px}
.hero__image{width:100%; height:520px; object-fit:cover}

/* Sections */
.section{padding: 52px 0}
.section__title{margin:0 0 14px; font-size:34px; font-weight:500; letter-spacing:-0.01em}
.section__head{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Head/lead (как в artgreen/arthome contacts) */
.head{margin-bottom:26px}
.head--center{text-align:center}
.head h2{margin:0 0 10px; font-size:34px; font-weight:500; letter-spacing:-0.01em}
.lead{margin:0; color:var(--muted); line-height:1.6; font-size:14px}

/* Cards */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px}
.card{background:var(--card); padding: 22px; min-height: 210px}
.card__icon{
  width:34px; height:34px; border-radius:50%;
  background:var(--text);
  display:grid; place-items:center;
  margin-bottom: 14px;
}
.card__title{margin:0; font-size:16px; font-weight:600}
.card__rule{height:1px; background:var(--line); margin: 12px 0}
.card__text{margin:0; font-size:12px; color:var(--muted); line-height:1.45}

/* Projects */
.projects{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:22px;
}
.project{position:relative; border:0; padding:0; background:#000; cursor:pointer; overflow:hidden}
.project img{width:100%; height: 220px; object-fit:cover; opacity:.95; transform:scale(1.02); transition: transform .25s ease, opacity .25s ease}
.project:hover img{transform:scale(1.07); opacity:1}
.project__label{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.04em;
}

/* Reviews */
.reviews__arrows{display:flex; gap:10px}
.circleBtn{width:34px; height:34px; border-radius:999px; border:0; background:var(--text); color:#fff; cursor:pointer}
.circleBtn:hover{opacity:.9}

.reviews{display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px}
.review{background:var(--card); padding: 22px; min-height: 160px}
.review__name{margin:0; font-size:14px; font-weight:600}
.review__rule{height:1px; background:var(--line); margin: 12px 0}
.review__text{margin:0; font-size:12px; color:var(--muted); line-height:1.5}

/* FAQ */
.faq{margin-top: 22px}
.faq__item{background:var(--card); margin-bottom: 12px}
.faq__q{width:100%; border:0; background:transparent; padding: 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; font-size:15px; font-weight:500; text-align:left}
.faq__sign{font-size:22px; color:var(--muted)}
.faq__a{padding: 0 18px 16px; color:var(--muted); font-size:12px; line-height:1.5; display:none}
.faq__item.is-open .faq__a{display:block}

/* Mortgage */
.mortgage{display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; align-items:start}
.mortgage__text{background:var(--card); padding:22px}
.mortgage__text p{margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.5}
.mortgage__image img{width:100%; height: 420px; object-fit:cover}

.form{display:grid; gap:14px}
.field{display:grid; gap:6px}
.field__label{font-size:12px; color:var(--muted)}
.field__input{height:44px; border:1px solid var(--line); padding:0 12px; background:#fff}
.check{display:flex; align-items:flex-start; gap:10px; font-size:11px; color:var(--muted)}
.check input{margin-top:2px}

/* Contacts (общие) */
.contacts__body{margin-top:22px; max-width:760px; margin-left:auto; margin-right:auto}
.contacts__cta{text-align:center; margin-bottom:32px}
/* Длинный текст кнопки: переносы и ограничение по ширине (мобилка) */
.contacts__btn{
  box-shadow:var(--shadow);
  border-radius:6px;
  display:inline-block;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
}
.contacts__req{
  position:relative;
  padding:24px 88px 24px 22px;
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--line);
  font-size:13px;
  line-height:1.5;
  color:var(--text);
}
.contacts__req p{margin:0 0 8px}
.contacts__req p:last-child{margin-bottom:0}
.contacts__name{font-weight:600; margin-bottom:10px!important}
.contacts__salon{font-weight:500}
.contacts__region{
  font-weight:600;
  font-size:clamp(17px,2.2vw,20px);
  text-transform:none;
  letter-spacing:.04em;
  line-height:1.25;
  color:var(--text);
  margin:0 0 12px!important;
}
.contacts__phones{margin:0 0 8px}
.contacts__req a{color:var(--text); text-decoration:underline; text-underline-offset:2px}
.contacts__req a:hover{opacity:.8}
.contacts__privacy{
  margin-top:14px!important;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)!important;
}
.contacts__socials{
  position:absolute;
  top:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.contacts__socials-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.contacts__social{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--text);
  text-decoration:none;
  font-size:11px;
}
.contacts__social-ic svg{
  width:18px;
  height:18px;
  display:block;
}
.contacts__social-ic svg[stroke]{fill:none; stroke:currentColor}
.contacts__social:hover{background:#f5f5f5}

/* Footer */
.footer{padding: 22px 0; background:#fff; border-top:1px solid var(--line)}
.footer__row{display:flex; align-items:center; justify-content:space-between}
.footer__copy{font-size:12px; color:var(--muted)}
.footer__link{font-size:12px; color:inherit; text-decoration:none}
.footer__link:hover{opacity:.75}

/* Footer directions (как в artgreen/arthome) */
.footer__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
  color:var(--muted);
}
.footer__directions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
}
.footer__directions-label{color:var(--muted); margin-right:4px}
.footer__dir{
  text-decoration:none;
  border-bottom:1px solid transparent;
  color:var(--text);
}
.footer__dir:hover{border-bottom-color:var(--text)}
.footer__current{color:var(--muted)}
.to-top{
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  color:var(--text);
  font-size:12px;
}
.to-top__arrow{font-weight:600}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000}
.modal.is-open{display:flex}
.modal__overlay{position:absolute; inset:0; background: rgba(0,0,0,.45)}
.modal__panel{position:relative; width:min(1060px, calc(100% - 24px)); background:#fff; padding: 18px; box-shadow: var(--shadow)}
.modal__panel--small{width:min(520px, calc(100% - 24px))}
.modal__close{position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:var(--muted)}
.modal__grid{display:grid; grid-template-columns: 1.4fr .9fr; gap: 18px; align-items:stretch}
.modal__media{position:relative; background:#000}
.modal__media img{width:100%; height: 430px; object-fit:cover}
.modal__nav{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:0; background: rgba(255,255,255,.9); cursor:pointer}
.modal__nav--left{left:10px}
.modal__nav--right{right:10px}
.modal__content{
  display:flex;
  flex-direction:column;
}
.modal__actions{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.modal__priceFork{
  margin-top: 14px;
  padding: 14px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.modal__priceFork[hidden]{display:none !important}
.modal__priceFork-label{
  font-size:13px;
  font-weight:600;
  color: var(--text);
  margin: 0 0 6px;
  line-height:1.35;
}
.modal__priceFork-hint{
  font-size:11px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height:1.4;
}
.modal__priceFork-btns{display:flex; flex-wrap:wrap; gap:8px}
.modal__priceFork-btns .btn{flex:1 1 auto; min-width:min(140px, 100%); justify-content:center}
[data-price-btn][aria-expanded="true"]{
  box-shadow: 0 0 0 2px rgba(40,40,44,.15);
}
.modal__title{margin: 8px 0 10px; font-size:22px; font-weight:600}
.modal__rule{height:1px; background:var(--line); margin: 12px 0}
.modal__meta{font-size:12px; color:var(--muted); line-height:1.6}
.modal__list{font-size:12px; color:var(--muted); line-height:1.7}
.modal__list ul{margin:0; padding-left: 16px}
.muted{font-size:11px; color:var(--muted); margin: 12px 0 0}

/* Mortgage + Process макет (верстка, не картинка) */
.mortgage-process{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}

.mortgage-mock{
  background: #d9d9d9;
  border-radius: 26px;
  padding: 26px;
  min-height: 420px;
}
.mortgage-mock__title{
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .02em;
}
.mortgage-mock__item{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
}
.mortgage-mock__num{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #cfcfcf;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.mortgage-mock__text{
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b2f;
}
.mortgage-mock__banks{
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.mortgage-mock__bank{
  flex: 1;
  height: 56px;
  border-radius: 16px;
  background: #cfcfcf;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .04em;
}

.process{
  background: #d9d9d9;
  border-radius: 26px;
  padding: 26px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 420px;
}
.process--compact{min-height: 420px}
.process__phone{
  width: 260px;
  height: 520px;
  border-radius: 44px;
  background: #16161a;
  padding: 16px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.process__phone::before{
  content:"";
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.process__screen{
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  background-image: url('img/hero.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(.95);
}
.process__title{
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 600;
}
.process__steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.process__step{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
}
.process__dot{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(22,22,26,.18);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.process__desc{font-size: 13px; line-height: 1.5; color:#2b2b2f}

.process__step:not(:last-child)::after{
  content:"";
  position:absolute;
  left: 23px;
  top: 46px;
  width: 2px;
  height: calc(100% + 14px);
  background: rgba(22,22,26,.16);
}

/* Mortgage + Stages (from design mock; phone shown in mock is NOT rendered) */
.mortgageStages{margin-top:22px;}
.mortgageStages__h3{margin:0 0 18px; font-size:28px; font-weight:600;}
.mortgageStages__list{display:grid; gap:10px; margin-bottom:18px;}
.mortgageStages__li{display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.45; color:#222;}
.mortgageStages__num{font-weight:600; color:#222; min-width:48px;}
.mortgageStages__banks{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:8px;}
.mortgageStages__bank{border:1px solid rgba(0,0,0,.10); background:#fff; height:66px; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.06em; color:#1a1a1a;}

.mortgageStages__process{margin-top:48px;}
.mortgageStages__rows{border-top:1px solid rgba(0,0,0,.12);}
.mortgageStages__row{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:24px;
  padding:16px 0;
  border-bottom:1px solid rgba(0,0,0,.12);
  opacity:0;
  transform:translateX(40px);
  transition:opacity .45s ease, transform .45s ease;
}
.mortgageStages__row--left{
  transform:translateX(-40px);
}
.mortgageStages__row--visible{
  opacity:1;
  transform:translateX(0);
}
.mortgageStages__left{display:flex; gap:14px; align-items:flex-start;}
.mortgageStages__stepNum{min-width:58px; font-weight:600; color:#222;}
.mortgageStages__stepTitle{font-weight:600; color:#222;}
.mortgageStages__right{color:#444; font-size:12px; line-height:1.5; padding-top:2px;}

/* Responsive */
@media (max-width: 1024px){
  .page{margin: 0; max-width:none}
  .hero__title{font-size:44px}
  .hero__image{height:420px}
  .cards{grid-template-columns: repeat(2, 1fr)}
  .projects{grid-template-columns: repeat(2, 1fr)}
  .reviews{grid-template-columns: repeat(2, 1fr)}
  .contacts__grid{grid-template-columns: repeat(2, 1fr)}
  .mortgage{grid-template-columns: 1fr}
  .mortgage-process{grid-template-columns: 1fr;}
  .process{grid-template-columns: 240px 1fr;}
  .process__phone{width: 220px; height: 440px;}
  .mortgageStages__row{grid-template-columns: 320px 1fr;}
  .modal__grid{grid-template-columns: 1fr}
  .modal__media img{height:360px}
  /* планшет: соцсети не в углу карточки — не наезжают на реквизиты */
  .contacts__req{padding:22px 20px}
  .contacts__socials{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    margin-bottom:10px;
  }
  .contacts__socials-label{width:100%; text-align:left}
}

@media (max-width: 720px){
  /* Убираем горизонтальный «дрожащий» скролл */
  html{
    overflow-x: hidden;
  }
  .page{
    overflow-x: hidden;
    max-width: 100%;
  }

  .header__row{gap:12px}
  .nav__burger{display:inline-block}
  .nav__list{position:absolute; left:0; right:0; top:78px; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 14px 24px; flex-direction:column; align-items:flex-start; gap:12px; display:none}
  .nav.is-open .nav__list{display:flex}
  .nav{position:relative}
  .header__actions{gap:10px}
  .header__phone{display:none}

  .hero__grid{grid-template-columns: 1fr; gap: 18px}
  .hero__right{justify-self:start; max-width:420px}
  .hero__title{font-size:34px}
  /* Главное фото: без обрезки; без отрицательных margin — они давали overflow по X */
  .hero__imageWrap{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    background: var(--card);
  }
  .hero__image{
    width: 100%;
    height: auto;
    max-height: min(75vh, 540px);
    object-fit: contain;
    object-position: center;
  }

  .section{padding: 40px 0}
  .section__title{font-size:26px}

  .cards{grid-template-columns: 1fr}
  .projects{grid-template-columns: 1fr}
  .project img{height: 220px}
  .reviews{grid-template-columns: 1fr}

  .contacts__socials{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    margin-bottom:10px;
  }
  .contacts__socials-label{width:100%; text-align:left}

  /* Кнопка «Оставить заявку / …» на всю ширину колонки — без вылезания за экран */
  .contacts__cta{
    width:100%;
    padding:0;
    box-sizing:border-box;
  }
  .contacts__cta .contacts__btn{
    display:block;
    width:100%;
    max-width:100%;
    padding:12px 14px;
  }

  .mortgage-process{gap: 16px;}
  .mortgage-mock{min-height: unset; padding: 20px;}
  .mortgage-mock__title{font-size: 22px;}
  .process{grid-template-columns: 1fr; min-height: unset; padding: 20px;}
  .process__phone{width: 210px; height: 420px;}
  .process__title{font-size: 20px;}

  .mortgageStages__h3{font-size:22px;}
  .mortgageStages__banks{grid-template-columns: 1fr;}
  .mortgageStages__bank{height:56px;}
  .mortgageStages__row{grid-template-columns: 1fr; gap:8px;}
  .mortgageStages__right{padding-top:0;}

  /* Модалка проекта: прокрутка + отступ от нижней панели браузера / home indicator */
  .modal{
    align-items: flex-start;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal__panel{
    margin: auto 0;
    max-height: min(calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), calc(100vh - 24px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .modal__grid{
    flex: 1 1 auto;
    min-height: 0;
  }
  .modal__content{
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Screenshot block */
.shot{
  margin-top: 28px;
  background: #fff;
}
.shot img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(40,40,44,.12);
}