.contact{
    max-width: var(--maxw);
    margin: 2.5rem auto; /* 40px */
    padding: 0 1.25rem; /* 20px */
    color: var(--ink);
}

.contact h1{
    font-family: "Playfair Display", serif;
    color: var(--nav-pill);
    font-size: clamp(1.75rem, 5vw, 2.5rem); /* 28px -> 40px */
    margin: 0 0 0.5rem; /* 8px */
}

.contact p{
    color: #375a56;
    font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px -> 16px */
    margin: 0 0 1rem; /* 16px */
}

.contact-form{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.75rem; /* 12px */
    padding: clamp(1rem, 3vw, 1.25rem); /* 16px -> 20px */
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.06);
}

.contact-form .row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem; /* 16px */
    margin-bottom: 0.875rem; /* 14px */
}

@media (max-width: 760px){
    .contact-form .row{
        grid-template-columns: 1fr;
    }
}

label{
    display: grid;
    gap: 0.375rem; /* 6px */
    font-weight: 600;
    font-size: clamp(0.8125rem, 1.4vw, 0.875rem); /* 13px -> 14px */
}

input, select, textarea{
    width: 100%;
    padding: clamp(0.625rem, 1.5vw, 0.75rem); /* 10px -> 12px */
    border: 1px solid var(--border);
    border-radius: 0.625rem; /* 10px */
    background: #fff;
    color: var(--ink);
    font-size: clamp(0.8125rem, 1.4vw, 0.9375rem); /* 13px -> 15px */
}

textarea{
    resize: vertical;
}

.btn{
    margin-top: 0.625rem; /* 10px */
    background: var(--teal);
    color: #ecf2ef;
    padding: clamp(0.625rem, 1.5vw, 0.75rem) clamp(0.875rem, 2vw, 1.125rem); /* 10-12px, 14-18px */
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 0.625rem; /* 10px */
    font-weight: 700;
    letter-spacing: 0.0625rem; /* 1px */
    text-transform: uppercase;
    font-size: clamp(0.8125rem, 1.4vw, 0.875rem); /* 13px -> 14px */
    cursor: pointer;
}

.btn:hover{
    background: var(--teal-d);
}

.small{
    font-size: clamp(0.6875rem, 1.2vw, 0.75rem); /* 11px -> 12px */
    color: #5b7;
}

.hp{
    position: absolute;
    left: -9999px;
}

/* Mobile specific adjustments */
@media (max-width: 480px) {
    .contact {
        margin: 1.25rem auto; /* 20px */
        padding: 0 1rem; /* 16px */
    }

    .contact h1 {
        font-size: 1.5rem; /* 24px */
        margin-bottom: 0.375rem; /* 6px */
    }

    .contact p {
        font-size: 0.8125rem; /* 13px */
        margin-bottom: 0.75rem; /* 12px */
    }

    .contact-form {
        padding: 0.875rem; /* 14px */
    }

    label {
        font-size: 0.75rem; /* 12px */
    }

    input, select, textarea {
        padding: 0.5625rem; /* 9px */
        font-size: 0.8125rem; /* 13px */
    }

    .btn {
        padding: 0.625rem 0.875rem; /* 10px 14px */
        font-size: 0.75rem; /* 12px */
    }
}