.smu-about-pillars {
    background: var(--smu-color-surface);
    border-bottom: 1px solid var(--smu-color-border);
}

.smu-about-pillars__inner {
    box-sizing: content-box;
    width: auto;
    max-width: 1240px;
    margin-inline: auto;
    padding: 104px 32px 96px;
}

.smu-about-pillars__eyebrow {
    margin: 0 0 14px;

    color: var(--smu-color-accent);

    font-family: var(--smu-font-data);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.22em;

    text-transform: uppercase;
}

.smu-about-pillars__title {
    max-width: 24ch;
    margin: 0 0 16px;

    font-family: var(--smu-font-display);
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;

    text-wrap: balance;
}

.smu-about-pillars__title em {
    font-style: normal;
    font-weight: inherit;
}

.smu-about-pillars__title .is-green {
    color: var(--smu-color-accent);
}

.smu-about-pillars__title .is-gold {
    color: #8c5a10;
}

.smu-about-pillars__intro {
    max-width: 66ch;
    margin: 0 0 48px;

    color: var(--smu-color-ink-soft);

    font-size: 17px;
    line-height: 1.65;
}

.smu-about-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.smu-about-pillars__card {
    display: flex;
    flex-direction: column;
    gap: 14px;

    min-height: 100%;

    padding: 32px 34px 30px;

    border: 1px solid var(--smu-color-border);
    border-radius: var(--smu-radius-card);

    color: var(--smu-color-text);
    text-decoration: none;

    box-shadow: var(--smu-shadow-card);

    transition:
        box-shadow var(--smu-duration-fast) var(--smu-ease-standard);
}

.smu-about-pillars__card--light {
    background: var(--smu-color-page);
}

.smu-about-pillars__card:hover {
    box-shadow: var(--smu-shadow-card-hover);
}

.smu-about-pillars__kicker {
    color: var(--smu-color-accent);

    font-family: var(--smu-font-data);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.smu-about-pillars__card h3 {
    margin: 0;

    font-family: var(--smu-font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 600;
    line-height: 1.06;
}

.smu-about-pillars__card p {
    margin: 0;

    color: var(--smu-color-text-muted);

    font-size: 15.5px;
    line-height: 1.6;
}

.smu-about-pillars__link {
    margin-top: auto;

    color: var(--smu-color-accent);

    font-size: 14.5px;
    font-weight: 600;
}

.smu-about-pillars__card--dark {
    background: var(--smu-color-ink);
    border-color: var(--smu-color-ink);

    color: #f0eee9;

    box-shadow: var(--smu-shadow-card-hover);
}

.smu-about-pillars__card--dark .smu-about-pillars__kicker,
.smu-about-pillars__card--dark .smu-about-pillars__link {
    color: #d9a452;
}

.smu-about-pillars__card--dark p {
    color: rgba(240, 238, 233, 0.68);
}

.smu-about-pillars__card--dark h3 {
    color: #f0eee9;
}

.smu-about-pillars__card--dark h3,
.smu-about-pillars__card--dark p,
.smu-about-pillars__card--dark span {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .smu-about-pillars__inner {
        padding: 88px 24px 76px;
    }

    .smu-about-pillars__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .smu-about-pillars__inner {
        padding: 72px 20px 64px;
    }

    .smu-about-pillars__card {
        padding: 28px 24px;
    }
}