/* === About Us page =========================================== */

.about-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding-block: clamp(56px, 7vw, 96px);
}

.about-hero__title {
    color: var(--ink);
    font-family: var(--ff-serif);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-block: 16px 20px;
    max-width: 700px;
}

.about-hero__sub {
    color: var(--ink-mid);
    font-size: 17px;
    line-height: 1.7;
}

/* Shared section shell */
.about-section {
    border-bottom: 1px solid var(--hairline);
    padding-block: clamp(56px, 7vw, 96px);
}

.about-section__label {
    color: var(--ink-faint);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.about-section__title {
    color: var(--ink);
    font-family: var(--ff-serif);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 32px;
}

.about-section__body {
    color: var(--ink-mid);
    font-size: 17px;
    line-height: 1.75;
}

.about-section__body p + p {
    margin-top: 1.2em;
}

/* How it works steps */
.about-steps {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
}

.about-step {
    border-top: 2px solid var(--hairline);
    padding: 28px 40px 28px 0;
}

.about-step:not(:last-child) {
    border-right: 1px solid var(--hairline);
    margin-right: 40px;
}

.about-step__num {
    color: var(--ink-faint);
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.about-step h3 {
    color: var(--ink);
    font-family: var(--ff-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 10px;
}

.about-step p {
    color: var(--ink-mid);
    font-size: 16px;
    line-height: 1.65;
}

/* Contact */
.about-contact__email {
    color: var(--accent);
    font-family: var(--ff-serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 50px;
    margin-bottom: 16px;
    text-decoration: none;
    vertical-align: top;
}

.about-contact__email:hover {
    color: var(--accent-dk);
}

.about-contact__note {
    color: var(--ink-faint);
    font-size: 15px;
}

@media (max-width: 700px) {
    .about-steps {
        grid-template-columns: 1fr;
    }

    .about-step {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }
}