/* contact.css — layout based on Figma screenshot */

:root{
    --bg: #f6f6f6;
    --text: #2f2f2f;
    --muted: #777;
    --line: rgba(0,0,0,.18);
    --btn: #3b3b3b;
    --btnText: #fff;
}

body{
    margin: 0 200px;
    color: var(--text);
    background: linear-gradient(180deg, #FBFBFB 0%, #D7D7D7 100%);
    font-family: 'Aeroport', system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.contact-wrap{
    min-height: 100vh;
    padding: 48px 56px 40px;
    box-sizing: border-box;
}

.contact-hero{
    padding: 24px 0 8px;
    text-align: center;
}

.contact-title{
    margin: 0;
    font-weight: 400;
    letter-spacing: .06em;
    font-size: 185px;
    line-height: 1;
}

.contact-grid{
    margin: 100px 110px 0;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
}

/* Left info block */
.contact-info{
    padding-top: 10px;
}

.info-block{
    max-width: 320px;
}

.info-kicker{
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
}

.info-label{
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
}

.info-text{
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.info-text a{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
}
.info-text a:hover{
    border-bottom-color: rgba(0,0,0,.30);
}

/* Form */
.contact-form{
    width: 100%;
}

.form{
    width: 100%;
}

.form-row{
    display: grid;
    gap: 22px;
    margin-bottom: 18px;
}

.form-row.two{
    grid-template-columns: 1fr 1fr;
}

.field{
    display: block;
}

.field-label{
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.field input,
.field textarea{
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 10px 2px;
    outline: none;
    font-size: 14px;
    color: var(--text);
    box-sizing: border-box;
}

.field textarea{
    resize: vertical;
    min-height: 42px;
}

.field input:focus,
.field textarea:focus{
    border-bottom-color: rgba(0,0,0,.45);
}

.form-actions{
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

.btn-send{
    appearance: none;
    border: none;
    background: var(--btn);
    color: var(--btnText);
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.btn-send:hover{
    filter: brightness(1.05);
}

.btn-send:active{
    transform: translateY(1px);
}

/* Alerts */
.form-alert{
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.08);
}
.form-alert.success{
    background: rgba(0,0,0,.06);
}
.form-alert.error{
    background: rgba(0,0,0,.06);
}
.form-alert ul{
    margin: 0;
    padding-left: 18px;
}

/* Honeypot hidden */
.hp{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Bottom Social */
.contact-social{
    margin-top: 150px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    align-items: center;
    text-align: center;
}

.social-link{
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .08em;
    color: #6b6b6b;
    text-decoration: none;
}
.social-link:hover{
    color: #2f2f2f;
}

/* Responsive */
@media (max-width: 900px){
    .contact-wrap{ padding: 36px 22px 34px; }
    .contact-grid{
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .info-block{ max-width: none; }
    .form-row.two{ grid-template-columns: 1fr; }
    .form-actions{ justify-content: flex-start; }
    .contact-social{
        grid-template-columns: 1fr;
        margin-top: 46px;
    }
}