/* ========================================================
   BASE
======================================================== */

#as-project-brief{

  --brand:#25589c;
  --brand-dark:#173f78;

  --ink:#142033;
  --muted:#667386;

  --line:#dce2e9;
  --soft:#f4f7fa;

  width:100%;
  padding:72px 24px;

  box-sizing:border-box;

  background:#f4f6f8;

  color:var(--ink);

  font-family:inherit;

}

#as-project-brief *{
  box-sizing:border-box;
}


/* ========================================================
   MAIN LAYOUT
======================================================== */

.as-pb-wrap{

  width:100%;
  max-width:1180px;

  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(280px,.72fr)
    minmax(0,1.55fr);

  background:#fff;

  border:1px solid var(--line);

}


/* ========================================================
   INTRO
======================================================== */

.as-pb-intro{

  padding:52px 42px;

  background:#eef3f8;

  border-right:1px solid var(--line);

}


.as-pb-kicker{

  margin-bottom:17px;

  color:var(--brand);

  font-size:11px;

  line-height:1;

  font-weight:700;

  letter-spacing:1.7px;

}


.as-pb-intro h2{

  margin:0 0 20px;

  color:var(--ink);

  font-size:38px;

  line-height:1.12;

  font-weight:700;

  letter-spacing:-.6px;

}


.as-pb-lead{

  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.75;

}


.as-pb-divider{

  width:100%;

  height:1px;

  margin:34px 0;

  background:#d5dce5;

}


/* ========================================================
   PROCESS
======================================================== */

.as-pb-process{

  display:flex;

  flex-direction:column;

  gap:25px;

}


.as-pb-step{

  display:grid;

  grid-template-columns:38px 1fr;

  gap:12px;

}


.as-pb-step > span{

  color:var(--brand);

  font-size:11px;

  font-weight:700;

  letter-spacing:.5px;

}


.as-pb-step strong{

  display:block;

  margin-bottom:5px;

  font-size:13px;

  line-height:1.4;

  color:var(--ink);

}


.as-pb-step p{

  margin:0;

  color:var(--muted);

  font-size:12px;

  line-height:1.55;

}


.as-pb-note{

  margin-top:36px;

  padding-top:22px;

  border-top:1px solid #d5dce5;

  color:var(--muted);

  font-size:12px;

  line-height:1.65;

}


/* ========================================================
   FORM
======================================================== */

.as-pb-form-panel{

  padding:52px;

  background:#fff;

}


.as-pb-grid{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  column-gap:22px;

  row-gap:23px;

}


.as-field{

  min-width:0;

  display:flex;

  flex-direction:column;

}


.as-full{

  grid-column:1 / -1;

}


.as-field > label:not(.as-upload){

  margin:0 0 8px;

  color:var(--ink);

  font-size:13px;

  line-height:1.4;

  font-weight:600;

}


.as-field label em{

  color:#bb3131;

  font-style:normal;

  margin-left:2px;

}


.as-field input,

.as-field select,

.as-field textarea{

  width:100%;

  margin:0;

  border:1px solid #d8dee7;

  border-radius:2px;

  outline:0;

  background:#fff;

  color:var(--ink);

  font-family:inherit;

  font-size:14px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;

}


.as-field input,

.as-field select{

  height:54px;

  padding:0 15px;

}


.as-field select{

  cursor:pointer;

}


.as-field textarea{

  min-height:158px;

  padding:14px 15px;

  resize:vertical;

  line-height:1.65;

}


.as-field input:focus,

.as-field select:focus,

.as-field textarea:focus{

  border-color:var(--brand);

  box-shadow:
    0 0 0 3px rgba(37,88,156,.08);

}


.as-field input::placeholder,

.as-field textarea::placeholder{

  color:#97a2b2;

}


/* ========================================================
   UPLOAD
======================================================== */

.as-upload{

  min-height:106px;

  margin:0;

  padding:19px;

  border:1px dashed #aeb8c6;

  background:#fafbfd;

  display:flex;

  flex-direction:row;

  align-items:center;

  gap:16px;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease;

}


.as-upload:hover{

  border-color:var(--brand);

  background:#f5f8fc;

}


.as-upload-icon{

  width:44px;
  height:44px;

  flex:0 0 44px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:1px solid #d2d8e0;

  background:#fff;

  color:var(--brand);

  font-size:22px;

}


.as-upload-text{

  min-width:0;

}


.as-upload-text strong{

  display:block;

  margin-bottom:5px;

  color:var(--ink);

  font-size:13px;

  font-weight:600;

}


.as-upload-text span{

  display:block;

  color:var(--muted);

  font-size:12px;

  line-height:1.5;

}


.as-file-list{

  margin-top:9px;

  color:#46546a;

  font-size:12px;

  line-height:1.7;

  word-break:break-word;

}


/* ========================================================
   SUBMIT
======================================================== */

.as-submit{

  width:100%;

  min-height:58px;

  margin-top:30px;

  padding:0 24px;

  border:0;

  background:var(--brand);

  color:#fff;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:14px;

  font-family:inherit;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:background .18s ease;

}


.as-submit:hover{

  background:var(--brand-dark);

}


.as-submit:disabled{

  cursor:wait;

  opacity:.65;

}


.as-submit-arrow{

  font-size:20px;

  line-height:1;

}


.as-submit-note{

  margin-top:12px;

  text-align:center;

  color:var(--muted);

  font-size:11.5px;

  line-height:1.6;

}


.as-error{

  display:none;

  margin-top:22px;

  padding:11px 13px;

  border:1px solid #ecc1c1;

  background:#fff6f6;

  color:#a52b2b;

  font-size:12px;

  line-height:1.6;

}


/* ========================================================
   TABLET
======================================================== */

@media(max-width:900px){

  #as-project-brief{
    padding:50px 18px;
  }

  .as-pb-wrap{
    grid-template-columns:1fr;
  }

  .as-pb-intro{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

}


/* ========================================================
   MOBILE
======================================================== */

@media(max-width:640px){

  #as-project-brief{
    padding:36px 14px;
  }

  .as-pb-intro{
    padding:34px 24px;
  }

  .as-pb-intro h2{
    font-size:31px;
  }

  .as-pb-form-panel{
    padding:30px 20px;
  }

  .as-pb-grid{
    grid-template-columns:1fr;
    row-gap:19px;
  }

  .as-full{
    grid-column:auto;
  }

}