/* ── studio 05 Values — studio/sections/05-values/brief.md ──
   Figma 1:1645 grey panel 1814×485 @ (54, page y 3158) · 1:1647 dividers (1px) @ x 531 / 982 / 1436, 298h from +103 ·
   icons ≈75h @ +94 · titles 26 #fe4243 centred on +230 (1 or 2 lines) · texts 26/29.17 #4b4949 w337 @ +300 ·
   column centres sit slightly left of the divider midpoints (x 233 / 685 / 1132 / 1587 in the panel) */

.st-values { padding-bottom: calc(84 * var(--u)); background: var(--skin-white); }
.st-values__panel {
    display: grid;
    grid-template-columns: 477fr 451fr 454fr 432fr;
    width: min(1814px, calc(1814 * var(--u)));
    min-height: calc(485 * var(--u));
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background: var(--st-grey);
}
.st-value { position: relative; padding-top: calc(94 * var(--u)); text-align: center; }
.st-value + .st-value::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(103 * var(--u));
    width: 1px;
    height: calc(298 * var(--u));
    background: rgba(0, 0, 0, .25);
}
.st-value--1 { padding-right: calc(10 * var(--u)); }
.st-value--2 { padding-right: calc(40 * var(--u)); }
.st-value--3 { padding-right: calc(48 * var(--u)); }
.st-value--4 { padding-right: calc(24 * var(--u)); }
.st-value img { display: block; width: auto; height: calc(79 * var(--u)); margin: 0 auto; object-fit: contain; }
.st-value--2 img { height: calc(74 * var(--u)); margin-top: calc(3 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.st-value--3 img { height: calc(75 * var(--u)); margin-top: calc(2 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.st-value--4 img { height: calc(76 * var(--u)); margin-top: calc(2 * var(--u)); margin-bottom: calc(1 * var(--u)); }
.st-value h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(63.4 * var(--u));
    margin-top: calc(25 * var(--u));
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: normal;
    color: var(--st-red);
    text-transform: lowercase;
}
.st-value p {
    max-width: calc(337 * var(--u));
    margin: calc(38.6 * var(--u)) auto 0;
    font-size: var(--fs-body);
    line-height: calc(29.167 / 26);
    color: var(--st-text);
    text-transform: lowercase;
}

@media (max-width: 991.98px) {
    .st-values { padding: 0 0 56px; }
    .st-values__panel { grid-template-columns: 1fr 1fr; width: calc(100% - 2 * var(--skin-gutter)); row-gap: 8px; padding: 32px 0; }
    .st-value, .st-value--1, .st-value--2, .st-value--3, .st-value--4 { padding: 24px 20px; }
    .st-value + .st-value::before { display: none; }
    .st-value img, .st-value--2 img, .st-value--3 img, .st-value--4 img { height: 56px; margin: 0 auto; }
    .st-value h3 { min-height: 0; margin-top: 14px; font-size: 20px; }
    .st-value h3 br { display: none; }
    .st-value p { max-width: 300px; margin-top: 10px; font-size: 16px; line-height: 1.45; }
}
@media (max-width: 575.98px) {
    .st-values__panel { grid-template-columns: 1fr; }
}