.contact-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; padding-top: 34px; padding-bottom: 38px; }
.contact-intro h1 { font-size: clamp(26px, 3vw, 36px); }
.contact-intro p:not(.eyebrow) { font-size: 17px; max-width: 680px; margin: 18px 0; }
.contact-person { align-self: start; padding: 24px; border: 1px solid #a7a6a555; border-top: 3px solid var(--green); border-radius: 4px; background: #fff; }
.contact-person h2 { color: var(--off-black); font-weight: 600; font-size: 24px; line-height: 1.3; margin: 0 0 8px; }
.contact-role { margin: 0; font-size: 14px; }
.contact-details { margin: 22px 0 0; }
.contact-details div + div { margin-top: 18px; }
.contact-details dt { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.contact-details dd { margin: 0; overflow-wrap: anywhere; }
.contact-details a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-details a:hover { color: var(--off-black); }
@media (max-width: 760px) {
 .contact-page { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; padding-bottom: 28px; }
 .contact-intro p:not(.eyebrow) { font-size: 16px; }
 .contact-person { padding: 20px; }
}

/* Iconen bij de contactgegevens */
.contact-details .contact-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
.contact-icon { width: 24px; height: 24px; grid-column: 1; grid-row: 1 / 3; align-self: center; color: var(--anthracite); }
.contact-row dt, .contact-row dd { grid-column: 2; }

/* Verfijnde contacticonen */
.contact-details .contact-row { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
.contact-icon { width: 32px; height: 32px; }