.contacts-page .info-hero {
    width: min(var(--dt-container), calc(100% - 2 * var(--dt-pad)));
    margin: 0 auto;
    padding: 96rem 0 52rem;
}
.contacts-page .info-hero h1 { margin: 12rem 0 20rem; }
.contacts-page .info-hero p:not(.section-kicker) { max-width: 780rem; color: var(--dt-muted); font-size: 22rem; }
.contacts-layout {
    width: min(var(--dt-container), calc(100% - 2 * var(--dt-pad)));
    margin: 0 auto 110rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460rem;
    gap: 30rem;
}
.contact-form,
.contact-info {
    padding: 36rem;
    border: 1rem solid var(--dt-line);
    border-radius: var(--dt-radius);
    background: var(--dt-white);
    box-shadow: var(--dt-shadow);
}
.contact-form { display: grid; gap: 18rem; }
.contact-form h2,
.contact-info h2 { font-size: 34rem; }
.contact-form label { display: grid; gap: 8rem; color: var(--dt-accent); font-weight: 900; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1rem solid var(--dt-line);
    border-radius: var(--dt-radius-sm);
    padding: 14rem 16rem;
    color: var(--dt-ink);
    font: inherit;
    background: var(--dt-cream);
}
.contact-info { display: grid; align-content: start; gap: 24rem; }
.contact-info > div > span { display: block; color: var(--dt-accent); font-weight: 900; }
.contact-info p { color: var(--dt-muted); }
.contact-socials__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10rem;
    margin: 10rem 0 0;
    padding: 0;
    list-style: none;
}
.contact-socials__list li { margin: 0; }
.contact-socials__item {
    display: grid;
    gap: 2rem;
    min-width: 132rem;
    padding: 10rem 12rem;
    border: 1rem solid var(--dt-line);
    border-radius: var(--dt-radius-sm);
    color: var(--dt-ink);
    background: var(--dt-cream);
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.contact-socials__item strong { font-size: 14rem; }
.contact-socials__item small {
    max-width: 190rem;
    overflow-wrap: anywhere;
    color: var(--dt-muted);
    font-size: 12rem;
}
a.contact-socials__item:hover,
a.contact-socials__item:focus-visible {
    border-color: var(--dt-accent);
    color: var(--dt-white);
    background: var(--dt-accent);
}
a.contact-socials__item:hover small,
a.contact-socials__item:focus-visible small { color: var(--dt-white); }
@media (max-width: 900px) {
    .contacts-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .contact-socials__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-socials__item { min-width: 0; }
}