/* Figma 600:395 / 630:73, 2026-09-24. Keep shared interactions and fixed 1440px canvas. */
:root { --page-height: 8921px; }
.hero-light-field { background: linear-gradient(180deg, #c870c8 0%, #643864 36%, #211221 60%, #050505 82%); }
.hero-media { background: radial-gradient(ellipse at 45% 0%, #ffeefe 30%, #deb5d8 50%, #bd7cb2 70%); }
.site-header > .contact-button { right: 40px; top: 16px; }
.overview-media > div { height: 554px; }
.overview-media > .media-02 { border-radius: 0; }
.challenge-section { top: 3414px; }
.marketing-section { top: 6220px; }
.portfolio-section h2 { margin-bottom: 16px; }
.rail-overview .overview-summary { width: 296px; }
.challenge-group .challenge-list { list-style: disc; padding-left: 24px; }
.project-navigation { left: 809px; top: 8075px; }
.brand-material-board, .size-comparison, .graphics-board { position: relative; width: 928px; border-radius: 16px; background: #000; overflow: hidden; }
.brand-material-board { height: 734px; }
.brand-grid-lines { position: absolute; top: 16px; left: 17px; width: 650px; height: 699px; }
.robbi-wordmark { position: absolute; top: 16.5px; left: 16px; width: 464px; height: 136px; }
.porsche-mark { position: absolute; top: 15.5px; right: 27px; width: 106px; height: 38px; }
.material-story { position: absolute; top: 266.5px; left: 16px; width: 358px; font: 400 8px/14px "Inter", "PingFang SC", sans-serif; text-align: justify; }
.material-story p { margin: 0; min-height: 52px; }
.material-story p + p { margin-top: 64px; }
.material-services { position: absolute; top: 666px; left: 16px; width: 358px; display: flex; justify-content: flex-start; gap: 50px; font: 700 10px/14px "Map Sans", sans-serif; }
.brand-monogram { position: absolute; left: 784px; top: 547px; width: 128px; height: 128px; overflow: hidden; }
.brand-monogram img { display: block; width: 128px; height: 127px; }
.size-comparison { height: 709px; padding: 16px; }
.size-scene { position: relative; width: 896px; height: 675px; overflow: hidden; border-radius: 16px; color: #130f16; }
.size-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.size-figures { position: absolute; left: 282px; top: 79px; width: 329px; height: 525px; object-fit: cover; }
.size-label { position: absolute; top: 450px; width: 132px; height: 84px; display: flex; flex-direction: column; justify-content: center; }
.size-label-large { left: 696px; }
.size-label-small { left: 56px; text-align: right; }
.size-label strong { display: block; font: 700 40px/48px "Map Sans", sans-serif; }
.size-label > span { display: block; font: 400 24px/28.8px "Inter", sans-serif; }
.dimension { position: absolute; width: 12px; }
.dimension-large { left: 644px; top: 75px; height: 534px; --line-height: 522px; }
.dimension-small { left: 228px; top: 377px; height: 209px; --line-height: 197px; }
.dimension i { position: absolute; display: block; background: #130f16; }
.dimension-cap { left: 0; width: 12px; height: 6px; }
.cap-top { top: 0; }
.cap-bottom { bottom: 0; }
.dimension-line { top: 6px; left: 6px; width: 1px; height: var(--line-height); transform-origin: bottom; }
.dimension-small .dimension-line { left: 5px; }
.graphics-board { height: 615px; }
.graphics-heading { position: absolute; top: 48px; left: 16px; width: 896px; height: 24px; font: 700 10px/8px "Map Sans", sans-serif; display: flex; align-items: center; justify-content: space-between; }
.graphics-heading h3 { position: absolute; left: 313px; margin: 0; font: 700 24px/24px "Map Sans", "PingFang SC", sans-serif; }
.graphics-heading > span:last-child { text-align: right; }
.graphics-grid { position: absolute; left: 16px; top: 120px; width: 895.5px; height: 485px; pointer-events: none; }
.graphics-grid img { position: absolute; left: 205.25px; top: -205.25px; width: 485px; height: 895.5px; transform: rotate(-90deg); }
.graphics-story { position: absolute; left: 336px; top: 192px; width: 576px; margin: 0; font: 400 12px/24px "Inter", "PingFang SC", sans-serif; text-align: justify; }
.graphics-caption { position: absolute; left: 336px; top: 535px; font: 700 16px/16px "Inter", sans-serif; }
.package-photo-pair { display: flex; gap: 16px; width: 928px; height: 608px; padding: 0 16px; }
.package-photo-pair > div { position: relative; width: 440px; height: 608px; border-radius: 16px; overflow: hidden; }
.package-photo-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.package-photo-pair > div:last-child img { position: absolute; top: -2.19%; width: 102.73%; height: 103.07%; }
.event-photo { width: 928px; height: 554px; border-radius: 16px; overflow: hidden; }
.event-photo > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.social-video-board { position: relative; width: 928px; height: 554px; border-radius: 16px; overflow: hidden; }
.social-video-background { position: absolute; top: -1.44%; left: -4.74%; width: 109.49%; height: 103.07%; }
.social-video-row { position: absolute; top: 64px; left: 100px; display: flex; gap: 24px; width: 728px; }
.social-video-column { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 227px; flex: 0 0 227px; }
.social-video-column:first-child { width: 226px; flex-basis: 226px; }
.social-video { position: relative; width: 227px; height: 386px; overflow: hidden; border-radius: 16px; background: #19101c; }
.social-video video { display: block; width: 227px; height: 386px; object-fit: cover; }
.social-ai video { position: absolute; left: -32.5px; width: 306px; height: 386px; }
.social-wechat video { height: 432px; }
.social-event video { height: 409px; }
.social-video .video-toggle { width: 36px; height: 36px; right: 10px; bottom: 10px; padding: 7px; }
.social-video .video-toggle img { width: 20px; height: 20px; }
.platform-mark { display: block; height: 16px; object-fit: contain; }
.social-video-column:nth-child(1) .platform-mark { width: 72px; }
.social-video-column:nth-child(2) .platform-mark { width: 24px; height: 24px; margin-block: -4px; }
.social-video-column:nth-child(3) .platform-mark { width: 16px; }