.contact-info-note {
    border-top: 1px solid #d0d0d0;
    margin-top: 3rem;
    padding-top: 2rem;
    /* Same reasoning as the hero's margin-top: this page has no theme container padding
       of its own, so without this the note sits flush against the footer. */
    padding-bottom: 4rem;
    text-align: center;
}
.contact-info-label {
    font-weight: 700;
    color: var(--title-black);
    margin: 0 0 0.35rem 0;
}
.contact-info-line {
    color: var(--color-text);
    margin: 0 0 0.35rem 0;
}
.contact-info-line:last-child {
    margin-bottom: 0;
}
.contact-info-line a {
    /* framework.css sets a blanket "a { display: flex; }" — without overriding it here
       this link becomes a block-level flex container spanning the full page width
       instead of staying inline next to "E-mail:", so it wraps and left-aligns. */
    display: inline;
    color: var(--color-primary);
    text-decoration: none;
}
.contact-info-line a:hover {
    text-decoration: underline;
}