html {
    scroll-behavior: smooth;
}

.brand span {
    font-size: 1.2rem;
    letter-spacing: 0.04em;
}

.brand small {
    letter-spacing: 0.22em;
}

.hero h1 {
    max-width: 980px;
}

.hero .meta {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card .result {
    margin: 18px 0 0;
    color: var(--blue);
    font-weight: 800;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.contact-note {
    margin-top: 18px;
    color: var(--slate);
    font-size: 0.95rem;
}

.contact-note a,
.section a[href^="mailto"] {
    color: var(--blue);
    font-weight: 700;
}

button.button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.site-footer .brand span {
    color: var(--white);
}

.site-footer .brand small {
    color: var(--cyan);
}