.commercial-journey {
    --journey-paper: var(--service-paper, #f7f5f0);
    --journey-ink: var(--service-ink, #2c2b28);
    --journey-muted: var(--service-muted, #64605a);
    --journey-line: var(--service-line, #cbc6bc);
    border-top: 1px solid var(--journey-line);
    background: var(--journey-paper);
}

.commercial-journey--city {
    --journey-paper: var(--paper-deep, #ece8df);
    --journey-ink: var(--ink, #34332f);
    --journey-muted: var(--muted, #69655d);
    --journey-line: var(--line, #cbc4b9);
}

.commercial-journey__shell {
    width: min(100% - 64px, 1440px);
    margin: 0 auto;
    padding: 82px 0;
}

.commercial-journey--city .commercial-journey__shell {
    width: min(1180px, calc(100% - 48px));
}

.commercial-journey__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 36px 72px;
    align-items: end;
    padding-bottom: 36px;
    border-bottom: 2px solid var(--journey-ink);
}

.commercial-journey__kicker {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--journey-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.commercial-journey h2 {
    margin: 0;
    color: var(--journey-ink);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.05;
}

.commercial-journey__heading > p:not(.commercial-journey__kicker) {
    max-width: 40ch;
    margin: 0;
    color: var(--journey-muted);
    font-size: 16px;
    line-height: 1.65;
}

.commercial-journey__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 1px solid var(--journey-line);
}

.commercial-journey__links a {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 286px;
    padding: 26px;
    border-right: 1px solid var(--journey-line);
    border-bottom: 1px solid var(--journey-line);
    color: var(--journey-ink);
    text-decoration: none;
}

.commercial-journey__links a:hover,
.commercial-journey__links a:focus-visible {
    background: var(--journey-ink);
    color: #fffdf8;
    outline: none;
}

.commercial-journey__number {
    font-size: 12px;
    font-weight: 700;
}

.commercial-journey__copy {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 22px 0;
}

.commercial-journey__copy strong {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.18;
}

.commercial-journey__copy span {
    color: var(--journey-muted);
    font-size: 14px;
    line-height: 1.6;
}

.commercial-journey__links a:hover .commercial-journey__copy span,
.commercial-journey__links a:focus-visible .commercial-journey__copy span {
    color: #e4e0d8;
}

.commercial-journey__open {
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .commercial-journey__heading { grid-template-columns: 1fr; gap: 20px; }
    .commercial-journey__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .commercial-journey__links a { min-height: 238px; }
}

@media (max-width: 600px) {
    .commercial-journey__shell,
    .commercial-journey--city .commercial-journey__shell { width: min(100% - 28px, 560px); padding: 54px 0; }
    .commercial-journey h2 { font-size: 32px; }
    .commercial-journey__links { grid-template-columns: 1fr; }
    .commercial-journey__links a { min-height: 188px; padding: 22px; }
}