/* Approved material and packaging layout. Fixed 1440px page, 928px boards. */
.approved-layout { --label-left-axis: 24px; --content-axis: 304px; --label-right-axis: 904px; --symbol-axis: 800px; }
.approved-layout .brand-grid-lines,.approved-layout .graphics-grid { display: none; }
.approved-layout .brand-material-board::before { content: ""; position: absolute; left: 688px; top: 24px; bottom: 24px; width: 1px; background: rgba(255,255,255,.07); }
.approved-layout .robbi-wordmark { left: 24px; top: 24px; width: 448px; height: auto; }
.approved-layout .porsche-mark { left: var(--symbol-axis); right: auto; top: 24px; width: 120px; height: auto; transform: translateX(-50%); }
.approved-layout .material-story { top: 232px; left: 24px; width: 448px; font-size: 12px; line-height: 24px; text-align: left; text-align-last: auto; letter-spacing: normal; word-spacing: normal; }
.approved-layout .material-story p { min-height: 0; }
.approved-layout .material-story p + p { margin-top: 80px; }
.approved-layout .material-story::after { content: ""; position: absolute; left: 0; top: 88px; width: 664px; height: 1px; background: rgba(255,255,255,.07); }
.approved-layout .material-services { left: 0; top: auto; bottom: 56px; width: 688px; height: 16px; display: block; font-family: "Map Sans",sans-serif; font-weight: 400; font-size: 10px; line-height: 16px; }
.approved-layout .brand-monogram { left: var(--symbol-axis); right: auto; top: auto; bottom: 56px; width: 133.333333px; height: 132.291667px; transform: translateX(-50%); }
.approved-layout .brand-monogram img { width: 133.333333px; height: auto; }
/* Labels anchor to opposite outer edges; symbols share the right-column center. */
.approved-layout .material-services > span { position: absolute; top: 0; white-space: nowrap; }
.approved-layout .material-services > span:nth-child(1) { left: var(--label-left-axis); }
.approved-layout .material-services .service-ai { display: block; left: 204px; transform: translateX(-50%); }
.approved-layout .material-services .service-packaging { left: var(--content-axis); }
.approved-layout .graphics-heading { left: 0; width: 928px; height: 32px; align-items: flex-start; font: 400 10px/16px "Map Sans",sans-serif; }
.approved-layout .graphics-heading > span { position: absolute; top: 0; width: 208px; text-align: left; }
.approved-layout .graphics-heading > span:first-child { left: var(--label-left-axis); }
.approved-layout .graphics-heading > span:last-child { right: 24px; text-align: right; }
.approved-layout .graphics-heading h3 { left: var(--content-axis); top: 0; }
.approved-layout .graphics-board::before { content: ""; position: absolute; left: 24px; right: 24px; top: 120px; height: 1px; background: rgba(255,255,255,.07); }
.approved-layout .graphics-story { left: var(--content-axis); top: 192px; width: 600px; text-align: left; text-align-last: auto; letter-spacing: normal; word-spacing: normal; }
.approved-layout .graphics-story::before { content: ""; position: absolute; left: -64px; top: -72px; height: 471px; width: 1px; background: rgba(255,255,255,.07); }
.approved-layout .graphics-caption { left: var(--content-axis); top: 536px; line-height: 24px; }