/* =========================================================
   ДАРСИ — блок с открытой формой расчёта стоимости.
   Светлая тема, фото проджект-менеджера + форма.
   ========================================================= */

.est{
  --ink:#1B1418;
  --ink-2:#4A4046;
  --ink-3:#8A7F86;
  --hair:#E7DDE1;
  --tint:#FBF5F6;
  --rose:#E3A9BA;
  --rose-dark:#C07E93;

  position:relative; overflow:hidden;
  padding:clamp(56px,7vw,110px) var(--pad-x);
  background:
    radial-gradient(80% 65% at 4% 4%, #F7E6EA 0%, rgba(247,230,234,0) 58%),
    radial-gradient(80% 70% at 96% 96%, #EFEAE4 0%, rgba(239,234,228,0) 60%),
    #FAF6F4;
  color:var(--ink);
  letter-spacing:-.022em;
}
.est__inner{
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:clamp(280px,23vw,440px) minmax(0,1fr);
  gap:clamp(28px,3.6vw,64px); align-items:center;
}

/* =========================================================
   ФОТО ПРОДЖЕКТА
   ========================================================= */
.est__media{
  position:relative; align-self:stretch;
  width:100%; max-width:440px;
  min-height:clamp(360px,34vw,520px);
}
.est__photo{
  position:absolute; inset:0; overflow:hidden;
  background:var(--tint);
}
.est__photo img{
  max-width:none;
  position:absolute; inset:-1px;
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover; object-position:50% 22%;
  display:block;
}
.est__photo img.est__manager-photo{object-position:55% 28%}
.est__photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,12,16,0) 52%, rgba(20,12,16,.62) 100%);
}

.est__person{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(16px,1.4vw,24px);
  color:#fff; display:flex; flex-direction:column; gap:4px;
}
.est__person b{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(18px,1.4vw,23px); line-height:1.1; letter-spacing:-.015em;
}
.est__person span{
  font-size:clamp(12px,.9vw,13.5px); line-height:1.35;
  color:rgba(255,255,255,.82); letter-spacing:-.02em;
}

/* =========================================================
   ТЕКСТ
   ========================================================= */
.est__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1; letter-spacing:-.015em;
  margin:0 0 16px; max-width:none;
}
.est__sub{
  margin:0 0 clamp(14px,1.4vw,20px);
  font-size:clamp(15px,1.2vw,18px); line-height:1.45; letter-spacing:-.03em;
  color:var(--ink-2); max-width:64ch;
}

.est__list{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,1.4vw,24px);
  margin:0 0 clamp(24px,2.6vw,36px); padding:0; list-style:none;
}
.est__list li{
  position:relative; padding-top:16px;
  border-top:1px solid var(--hair);
  font-size:clamp(13px,.98vw,15px); line-height:1.42; letter-spacing:-.03em; color:var(--ink-2);
}
.est__list li::before{
  content:''; position:absolute; left:0; top:-1px;
  width:34px; height:2px; background:var(--rose-dark);
}
.est__list b{display:block; margin-bottom:5px; color:var(--ink); font-weight:600; font-size:15px; letter-spacing:-.03em}

/* =========================================================
   ФОРМА
   ========================================================= */
.est__form{max-width:none}

.est__area{
  width:100%; min-height:104px; resize:vertical; display:block;
  padding:14px 16px; margin-bottom:12px;
  font:inherit; font-size:15px; letter-spacing:-.03em; color:var(--ink);
  background:#fff; border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.est__area::placeholder{color:#B9AEB4}
.est__area:focus{border-color:var(--rose-dark)}

.est__file{
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:12px 18px; margin-bottom:14px; line-height:1.3;
  background:var(--tint); border:1px dashed #D8C8CE; color:var(--ink-2);
  font-size:14px; letter-spacing:-.03em; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.est__file:hover{border-color:var(--rose-dark); color:var(--ink); background:#fff}
.est__file svg{width:16px; height:16px; fill:currentColor; flex:0 0 auto}
.est__file input{position:absolute; width:0; height:0; opacity:0}
.est__files{margin:-8px 0 14px; font-size:12.5px; color:var(--ink-3)}

.est__row{display:flex; gap:10px; flex-wrap:wrap}
.est__input{
  flex:1 1 260px; min-width:0; height:56px; padding:0 18px;
  font:inherit; font-size:16px; letter-spacing:-.02em; color:var(--ink);
  background:#fff; border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.est__input::placeholder{color:#B9AEB4}
.est__input:focus{border-color:var(--rose-dark)}
.est__input.is-err{border-color:#D46A6A}

.est__btn{
  height:56px; padding:0 30px; flex:1 1 100%;
  background:var(--accent-grad); color:var(--accent-ink);
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  transition:background .25s ease, transform .2s ease;
}
.est__btn:hover{background:var(--accent-grad-hi); transform:translateY(-1px)}
.est__err{margin:8px 0 0; font-size:13px; color:#C25757}

.est__check{display:flex; gap:10px; align-items:flex-start; margin-top:14px; cursor:pointer}
.est__check input{position:absolute; opacity:0; width:0; height:0}
.est__check-box{
  width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  border:1px solid var(--hair); background:#fff; transition:.2s ease;
}
.est__check input:checked + .est__check-box{
  background:var(--rose-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--rose-dark);
}
.est__check span:last-child{font-size:12px; line-height:1.4; color:var(--ink-3); white-space:nowrap}
.est__check a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}

.est__done{
  display:flex; gap:12px; align-items:flex-start;
  padding:20px; background:var(--tint); border:1px solid var(--hair);
}
.est__done p{margin:0; font-size:15px; line-height:1.45; color:var(--ink-2)}
.est__done b{color:var(--ink)}
.est__done-ico{
  width:26px; height:26px; flex:0 0 auto; color:#fff;
  background:var(--rose-dark); display:grid; place-items:center;
}
.est__done-ico svg{width:16px; height:16px}
.est [hidden]{display:none !important}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1400px){
  /* ручной перенос убираем — текст сам ложится в две строки */
  .est__title br{display:none}
}

@media (max-width:1200px){
  .est__inner{grid-template-columns:clamp(240px,22vw,320px) minmax(0,1fr); gap:28px}
  .est__list{grid-template-columns:1fr; gap:12px}
  .est__list li{padding-top:13px}
}

@media (max-width:900px){
  .est__inner{grid-template-columns:1fr; gap:26px; justify-items:center}
  .est__body{display:contents}
  .est__title,.est__form,.est__done,.est__sub,.est__list{width:100%}
  .est__title{order:1; margin-bottom:-8px}
  .est__form,.est__done{order:2}
  .est__sub{order:3; margin:4px 0 -8px}
  .est__list{order:4; margin-bottom:0}
  .est__media{order:5; min-height:0; aspect-ratio:16/9; max-width:none}
  .est__photo img{object-position:50% 18%}
  .est__photo img.est__manager-photo{object-position:55% 30%}
  .est__check span:last-child{white-space:normal}
}

@media (max-width:720px){
  .est{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .est__inner{gap:18px}
  .est__media{width:100%; max-width:none; aspect-ratio:4/3}
  .est__photo img.est__manager-photo{object-position:55% 32%}
  .est__row{flex-direction:column}
  .est__input,.est__btn{flex:0 0 auto; width:100%; height:50px}
  .est__area{min-height:76px; margin-bottom:9px}
  .est__file{width:100%; min-height:44px; margin-bottom:9px; padding:9px 12px; justify-content:flex-start; text-align:left}
  .est__check{margin-top:10px}
  .est__check{min-height:44px; align-items:center}
}