.page-contact{ background:#fff; }
.contact-hero{
padding: clamp(48px, 6vw, 80px) 0;
padding-top: calc(clamp(48px, 6vw, 80px) + 40px);
min-height: 100vh;
}
.contact-container{
width: min(var(--max), 100%);
margin: 0 auto;
padding: 0 var(--pad);
}
.contact-title{
margin: 0 0 clamp(28px, 5vw, 56px);
font-size: clamp(34px, 4.6vw, 54px);
letter-spacing: -0.02em;
font-weight: 900;
color: #111;
font-family: "Aileron2", sans-serif;
margin-bottom: 100px;
}
.contact-grid{
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: clamp(22px, 4vw, 70px);
align-items: start;
margin-top: 10px;
}
.contact-visual{
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 10px;
}
.contact-visual img{
width: min(400px, 100%);
height: auto;
display: block;
transform: rotate(-6deg);
}
.contact-formwrap{
max-width: 520px;
}
.contact-form{
width: 100%;
}
.form-row{
margin-bottom: 14px;
}
.form-2col{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-field label{
display: block;
font-family: "Aileron", sans-serif;
font-weight: 900;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #111;
margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea{
width: 100%;
border: 1px solid rgba(0,0,0,.25);
background: #fff;
padding: 12px 12px;
font-family: "Dress", sans-serif;
font-size: 12px;
color: #111;
outline: none;
}
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-actions{
margin-top: 10px;
}
.form-btn{
padding: 5px 18px;
border: 1px solid rgba(0,0,0,.55);
background: transparent;
font-family: "Dress", sans-serif;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #111;
cursor: pointer;
transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.form-btn:hover{
background: #000;
color: #fff;
border-color: #000;
}
.contact-infos{
margin-top: clamp(56px, 8vw, 110px);
text-align: center;
color: #111;
}
.contact-brand{
font-family: "Aileron2", sans-serif;
font-weight: 900;
letter-spacing: -0.02em;
font-size: 22px;
margin-bottom: 30px;
margin-top: 120px;
}
.contact-person,
.contact-phone{
font-family: "Dress", sans-serif;
text-transform: uppercase;
letter-spacing: .14em;
font-size: 14px;
margin-top: -10px;
color: inherit;
text-decoration: none;
}
.contact-phone,
.contact-phone:link,
.contact-phone:visited,
.contact-phone:hover,
.contact-phone:active{
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: inherit;
}
.contact-mail{
display: inline-block;
margin-top: 18px;
font-family: "Dress", sans-serif;
text-transform: uppercase;
letter-spacing: .14em;
font-size: 14px;
color: inherit;
text-decoration: none;
margin-bottom: 50px;
}
.form-alert{
  margin: 18px 0 26px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.18);
  font-family: "Dress", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.form-alert.is-success{
  border-color: rgba(0,0,0,.25);
}
.form-alert.is-error{
  border-color: rgba(0,0,0,.45);
}
@media (max-width: 900px){
.contact-grid{
grid-template-columns: 1fr;
gap: 26px;
}
.contact-formwrap{
max-width: 100%;
}
.contact-visual img{
width: min(400px, 80%);
}
.form-2col{
grid-template-columns: 1fr;
}
.contact-title{
margin-bottom: 50px;
}
.contact-brand{margin-top: 100px;
}
}