/* ── m3 03 What we do — maarch-3/sections/03-what-we-do/brief.md ──
   Figma 1:1454 circle #dfdfcb 329 @ (95,1059) overlapping the hero · 1:1455 "what we / do?" 41/61 bold ·
   1:1377 equation 38px bold #2d2d2d, centre y 1302, x 490 */

.m3-equation {
    z-index: 3;   /* badge paints over the hero */
    background: var(--skin-canvas);
    padding: calc(61 * var(--u)) 0 calc(79 * var(--u));
}
.m3-equation__badge {
    position: absolute;
    left: calc(95 * var(--u));
    top: calc(-163 * var(--u));
    width: calc(329 * var(--u));
    height: calc(329 * var(--u));
    border-radius: 50%;
    background: #dfdfcb;
}
.m3-equation__badge > span {
    position: absolute;
    left: calc(3.5 * var(--u));
    right: 0;
    top: calc(128 * var(--u));
    text-align: center;
    font-weight: 700;
    line-height: 1;
    color: var(--skin-black);
    text-transform: lowercase;
}
.m3-equation__w, .m3-equation__d { display: block; }
.m3-equation__w { font-size: calc(41 * var(--u)); }
.m3-equation__d { font-size: calc(61 * var(--u)); }

.m3-equation__text {
    margin-left: calc(372 / 1684 * 100%);
    font-size: var(--fs-38);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;   /* one line in the design; wraps again ≤ 991.98px */
    color: var(--m3-text-dark);
}
.m3-equation__text i { font-style: normal; font-weight: 400; }
.m3-equation__text em { font-style: normal; color: var(--skin-coral); }

@media (max-width: 991.98px) {
    .m3-equation { padding: 120px 0 48px; }
    .m3-equation__badge { width: 180px; height: 180px; top: -90px; left: var(--skin-gutter); }
    .m3-equation__badge > span { top: 52px; left: 0; }
    .m3-equation__w { font-size: 24px; }
    .m3-equation__d { font-size: 36px; }
    .m3-equation__text { margin-left: 0; font-size: 26px; line-height: 1.3; white-space: normal; }
}
@media (max-width: 575.98px) {
    .m3-equation__text { font-size: 21px; }
}