.contact-page {
    background: linear-gradient(165deg, #f4f7fc, #eaf1fa);
}

.contact-page .container {
    max-width: 1120px;
}

.contact-hero h1 {
    color: #113152;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.1;
}

.hero-copy {
    max-width: 710px;
    color: #5a6d86;
}

.hero-panel {
    border-radius: 17px;
    color: #edf7ff;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(165deg, #113257, #15527f);
    box-shadow: 0 22px 36px rgba(10, 25, 45, 0.2);
}

.hero-panel h4 {
    color: #ffffff;
}

.contact-shell {
    border-radius: 17px;
    border: 1px solid #d8e3ef;
    background: #ffffff;
    padding: 1.28rem;
    box-shadow: 0 14px 26px rgba(16, 35, 55, 0.08);
}

.section-title {
    color: #173d62;
    font-size: 1.16rem;
    margin-bottom: 0.74rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.92rem;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    display: block;
    margin-bottom: 0.38rem;
    color: #234260;
    font-size: 0.9rem;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #ccd9e8;
    background: #f9fbff;
    color: #1d2e43;
    padding: 0.62rem 0.72rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: #6ba1dd;
    box-shadow: 0 0 0 3px rgba(64, 110, 173, 0.14);
    background: #ffffff;
}

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

.contact-page .footer-premium {
    margin-top: 2.5rem;
}

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

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

    .contact-shell {
        padding: 1rem;
    }
}