.wdc-process-scope.process{--process-progress:var(--wdc-scroll-story-progress,0);--scene-progress:var(--wdc-scroll-story-scene-position,1);--active-y:var(--wdc-scroll-story-active-y,18%);height:500svh;color:var(--black);margin:0;padding:0}.wdc-process-scope .layout{grid-template-columns:minmax(350px,.78fr) minmax(540px,1.22fr);align-items:center;gap:clamp(48px,6vw,92px);width:100%;max-width:1500px;height:calc(100svh - 72px);margin:0 auto;padding:18px 32px 28px;display:grid;position:sticky;top:72px;overflow:hidden}.wdc-process-scope .timelineColumn{height:min(620px,100svh - 126px);position:relative}.wdc-process-scope .track{z-index:0;background:#d4d4cf;width:2px;position:absolute;top:12%;bottom:12%;left:29px;overflow:hidden}.wdc-process-scope .track span{transform:scaleY(var(--process-progress));transform-origin:50% 0;background:var(--yellow-dark);will-change:transform;display:block;position:absolute;inset:0}.wdc-process-scope .steps{z-index:1;margin:0;padding:0;list-style:none;position:absolute;inset:0}.wdc-process-scope .step{top:var(--active-y);opacity:var(--wdc-scroll-story-step-opacity,1);transform:translateY(calc(-50% + var(--wdc-scroll-story-step-shift,0px)));pointer-events:none;will-change:opacity, transform;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:30px;padding:0;display:grid;position:absolute;left:0;right:0}.wdc-process-scope .number{background:var(--off-white);color:#70706b;width:60px;height:60px;font-family:var(--font-data);letter-spacing:.06em;transition:color .52s var(--ease), background-color .52s var(--ease), border-color .52s var(--ease), transform .62s var(--ease);border:1px solid #b7b7b1;border-radius:50%;place-items:center;font-size:13px;font-weight:800;display:grid}.wdc-process-scope .stepCopy{opacity:1;max-width:440px}.wdc-process-scope .stepCopy h2{font-family:var(--font-display);letter-spacing:-.045em;margin:0;font-size:clamp(30px,2.6vw,42px);font-weight:800;line-height:1.02}.wdc-process-scope .stepCopy p{max-width:390px;color:var(--gray-700);margin:14px 0 0;font-size:18px;line-height:1.55}.wdc-process-scope .studio{align-self:center;min-width:0}.wdc-process-scope .stickyScene{flex-direction:column;justify-content:center;min-height:0;padding:0;display:flex}.wdc-process-scope .workbench{aspect-ratio:1.16;isolation:isolate;background:#0c0c0b;border:1px solid #30302d;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 30px 70px #05050529}.wdc-process-scope .workbench:before{content:"";z-index:0;background:#10100f;border-top:1px solid #242422;position:absolute;inset:52px 0 0}.wdc-process-scope .workbenchHeader{z-index:10;color:#d7d7d2;letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;width:100%;height:52px;padding:0 20px;font-size:11px;font-weight:750;display:flex;position:absolute;top:0;left:0}.wdc-process-scope .workbenchHeader i{background:var(--yellow);width:42px;height:2px;display:block}.wdc-process-scope .artifact{--artifact-visibility:clamp(0, calc(var(--scene-progress) - var(--artifact-stage) + 1), 1);opacity:var(--artifact-visibility);pointer-events:none;transition:opacity .46s linear, transform .72s var(--ease)}.wdc-process-scope .brief,.wdc-process-scope .sitemap{color:var(--black);background:#f7f7f3;border:1px solid #d5d5cf;border-radius:4px;padding:17px;position:absolute;box-shadow:0 18px 38px #00000042}.wdc-process-scope .brief{z-index:5;width:36%;top:20%;left:7%;transform:translateY(22px)rotate(-1.7deg)}.wdc-process-scope .sitemap{z-index:4;width:39%;top:13%;right:6%;transform:translateY(22px)rotate(1.4deg)}.wdc-process-scope .brief header,.wdc-process-scope .sitemap header{border-bottom:2px solid var(--black);letter-spacing:.055em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;font-size:10px;display:flex}.wdc-process-scope .brief header span,.wdc-process-scope .sitemap header span{color:#755900;font-weight:850}.wdc-process-scope .brief header strong,.wdc-process-scope .sitemap header strong{font-weight:800}.wdc-process-scope .brief dl{margin:0}.wdc-process-scope .brief dl>div{border-bottom:1px solid #d9d9d4;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:10px;padding:11px 0 8px;display:grid}.wdc-process-scope .brief dt,.wdc-process-scope .brief dd{margin:0;font-size:9px;line-height:1.25}.wdc-process-scope .brief dt{color:#6a6a66;letter-spacing:.04em;text-transform:uppercase;font-weight:700}.wdc-process-scope .brief dd{font-weight:750}.wdc-process-scope .briefMark{gap:6px;margin-top:15px;display:flex}.wdc-process-scope .briefMark span:first-child{background:var(--yellow-dark);width:54%;height:4px}.wdc-process-scope .briefMark span:last-child{background:var(--black);width:18%;height:4px}.wdc-process-scope .sitemapTree{padding:18px 0 3px;position:relative}.wdc-process-scope .sitemapTree:before{content:"";background:#8a8a84;width:1px;height:23px;position:absolute;top:39px;left:50%}.wdc-process-scope .sitemapTree span{background:#fff;border:1px solid #aaa9a3;border-radius:3px;place-items:center;min-height:27px;font-size:8px;font-weight:750;display:grid}.wdc-process-scope .sitemapRoot{width:44%;box-shadow:inset 0 -3px 0 var(--yellow);margin:0 auto 24px;border-color:var(--yellow-dark)!important}.wdc-process-scope .sitemapTree>div{grid-template-columns:repeat(3,1fr);gap:7px;display:grid;position:relative}.wdc-process-scope .sitemapTree>div:before{content:"";background:#8a8a84;height:1px;position:absolute;top:-13px;left:16%;right:16%}.wdc-process-scope .browserBoard{z-index:6;background:#f1f1ed;border:1px solid #494945;border-radius:7px;width:76%;height:62%;position:absolute;top:18%;left:12%;overflow:hidden;transform:translateY(22px);box-shadow:0 26px 54px #00000057}.wdc-process-scope .browserChrome{background:#fbfbf8;border-bottom:1px solid #d1d1cc;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;height:37px;padding:0 12px;display:grid}.wdc-process-scope .browserDots{gap:4px;display:flex}.wdc-process-scope .browserDots i{background:#aaa9a3;border-radius:50%;width:6px;height:6px;display:block}.wdc-process-scope .browserDots i:first-child{background:var(--yellow-dark)}.wdc-process-scope .browserAddress{color:#656560;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:8px;overflow:hidden}.wdc-process-scope .browserStatus{color:#735900;letter-spacing:.04em;text-transform:uppercase;font-size:8px;font-weight:750}.wdc-process-scope .wireframe{padding:16px 18px}.wdc-process-scope .wireNav{border-bottom:1px solid #d0d0cb;align-items:center;gap:7px;height:18px;display:flex}.wdc-process-scope .wireNav b{background:#252522;width:30px;height:6px;margin-right:auto}.wdc-process-scope .wireNav span{background:#b7b7b1;width:20px;height:3px}.wdc-process-scope .wireHero{border-bottom:1px solid #d0d0cb;grid-template-columns:1.25fr .75fr;align-items:center;gap:17px;height:118px;display:grid}.wdc-process-scope .wireHero>div{gap:9px;display:grid}.wdc-process-scope .wireHero b,.wdc-process-scope .wireHero span{background:#93938d;height:8px;display:block}.wdc-process-scope .wireHero b:first-child{background:#272724;width:88%;height:15px}.wdc-process-scope .wireHero b:nth-child(2){background:#272724;width:62%;height:15px}.wdc-process-scope .wireHero span{background:var(--yellow-dark);width:38%}.wdc-process-scope .wireHero>i{background:repeating-linear-gradient(135deg,#0000 0 7px,#dbdbd5 7px 8px);border:1px solid #aaa9a3;height:75px;display:block}.wdc-process-scope .wireCards{grid-template-columns:repeat(3,1fr);gap:9px;padding-top:14px;display:grid}.wdc-process-scope .wireCards span{background:#fafaf7;border:1px solid #aaa9a3;height:55px}.wdc-process-scope .publishedSite{z-index:2;color:#fff;background:#050505;position:absolute;inset:37px 0 0;overflow:hidden}.wdc-process-scope .publishedSite nav{border-bottom:1px solid #282826;align-items:center;gap:13px;height:34px;padding:0 16px;font-size:7px;display:flex}.wdc-process-scope .publishedSite nav strong{letter-spacing:.06em;margin-right:auto;font-size:8px}.wdc-process-scope .publishedSite nav i{background:var(--yellow);border-radius:2px;width:31px;height:12px;display:block}.wdc-process-scope .publishedSite>div{flex-direction:column;justify-content:center;height:calc(100% - 68px);padding:14px 11%;display:flex}.wdc-process-scope .publishedSite small{color:var(--yellow);letter-spacing:.08em;text-transform:uppercase;font-size:7px;font-weight:800}.wdc-process-scope .publishedSite>div strong{font-family:var(--font-display);letter-spacing:-.045em;margin-top:8px;font-size:clamp(17px,2.3vw,31px);line-height:.94}.wdc-process-scope .publishedSite>div>span{background:var(--yellow);border-radius:2px;width:52px;height:16px;margin-top:14px;display:block}.wdc-process-scope .publishedSite footer{border-top:1px solid #282826;grid-template-columns:repeat(3,1fr);gap:7px;height:34px;padding:8px 16px;display:grid}.wdc-process-scope .publishedSite footer i{border:1px solid #3c3c38}.wdc-process-scope .phoneReview{z-index:8;background:#f4f4ef;border:4px solid #11110f;border-radius:18px;width:21%;height:49%;position:absolute;bottom:6%;right:6%;overflow:hidden;transform:translateY(22px)rotate(1.2deg);box-shadow:0 18px 38px #00000061,0 0 0 1px #5c5c56}.wdc-process-scope .phoneSpeaker{z-index:2;background:#252522;border-radius:9px;width:32%;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.wdc-process-scope .phoneScreen{height:100%;padding:24px 11px 10px}.wdc-process-scope .phoneScreen>span{background:#1c1c1a;width:35%;height:5px;margin-bottom:29%;display:block}.wdc-process-scope .phoneScreen>strong{background:#242421;width:89%;height:9px;margin-bottom:6px;display:block}.wdc-process-scope .phoneScreen>strong:nth-of-type(2){width:67%}.wdc-process-scope .phoneScreen>i{background:var(--yellow);border-radius:2px;width:48%;height:17px;margin:15px 0 20px;display:block}.wdc-process-scope .phoneScreen>div{grid-template-columns:1fr 1fr;gap:5px;display:grid}.wdc-process-scope .phoneScreen>div b{border:1px solid #bab9b3;height:42px}.wdc-process-scope .reviewNote{z-index:9;border-left:3px solid var(--yellow);color:#11110f;background:#f8f8f4;width:31%;padding:13px 15px;position:absolute;bottom:7%;left:7%;transform:translateY(22px)rotate(-1deg);box-shadow:0 14px 28px #00000047}.wdc-process-scope .reviewNote>span{color:#795d00;font-size:8px;font-weight:850}.wdc-process-scope .reviewNote>strong{margin-top:4px;font-size:10px;display:block}.wdc-process-scope .reviewNote>div{gap:5px;margin-top:9px;display:flex}.wdc-process-scope .reviewNote i{border:1px solid #bbb9b2;border-radius:2px;padding:3px 5px;font-size:7px;font-style:normal}.wdc-process-scope .publishMark{z-index:11;color:#fff;background:#0a0a09;border:1px solid #4a4a46;border-radius:4px;align-items:center;gap:8px;padding:9px 12px 9px 9px;display:flex;position:absolute;top:10%;right:7%;transform:translateY(22px)rotate(1deg);box-shadow:0 14px 25px #00000059}.wdc-process-scope .publishMark span{background:var(--yellow);color:#050505;border-radius:50%;place-items:center;width:22px;height:22px;font-size:12px;font-weight:900;display:grid}.wdc-process-scope .publishMark strong{letter-spacing:.06em;text-transform:uppercase;font-size:9px}@keyframes processTrack{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes processStepOne{0%,15%{opacity:1;transform:translateY(-50%)}22%,to{opacity:0;transform:translateY(calc(-50% - 18px))}}@keyframes processStepTwo{0%,14%{opacity:0;transform:translateY(calc(18px - 50%))}21%,35%{opacity:1;transform:translateY(-50%)}42%,to{opacity:0;transform:translateY(calc(-50% - 18px))}}@keyframes processStepThree{0%,34%{opacity:0;transform:translateY(calc(18px - 50%))}41%,55%{opacity:1;transform:translateY(-50%)}62%,to{opacity:0;transform:translateY(calc(-50% - 18px))}}@keyframes processStepFour{0%,54%{opacity:0;transform:translateY(calc(18px - 50%))}61%,75%{opacity:1;transform:translateY(-50%)}82%,to{opacity:0;transform:translateY(calc(-50% - 18px))}}@keyframes processStepFive{0%,74%{opacity:0;transform:translateY(calc(18px - 50%))}81%,to{opacity:1;transform:translateY(-50%)}}@keyframes processArtifactTwo{0%,15%{opacity:0;transform:translateY(22px)rotate(1.4deg)}26%,to{opacity:1;transform:none}}@keyframes processArtifactThree{0%,35%{opacity:0;transform:translateY(22px)}46%,to{opacity:1;transform:none}}@keyframes processArtifactFour{0%,55%{opacity:0;transform:translateY(22px)rotate(1deg)}66%,to{opacity:1;transform:none}}@keyframes processArtifactFive{0%,75%{opacity:0;transform:translateY(22px)rotate(1deg)}87%,to{opacity:1;transform:none}}@supports (animation-timeline:view()){@media (min-width:901px) and (prefers-reduced-motion:no-preference){.wdc-process-scope.process{view-timeline-name:--wdc-process;view-timeline-axis:block}.wdc-process-scope .track span,.wdc-process-scope .step,.wdc-process-scope .sitemap,.wdc-process-scope .browserBoard,.wdc-process-scope .phoneReview,.wdc-process-scope .reviewNote,.wdc-process-scope .publishedSite,.wdc-process-scope .publishMark{animation-duration:1ms;animation-fill-mode:both;animation-timeline:--wdc-process;animation-range:cover 16% cover 84%}.wdc-process-scope .track span{animation-name:processTrack}.wdc-process-scope .step{top:50%}.wdc-process-scope .step:first-child{animation-name:processStepOne}.wdc-process-scope .step:nth-child(2){animation-name:processStepTwo}.wdc-process-scope .step:nth-child(3){animation-name:processStepThree}.wdc-process-scope .step:nth-child(4){animation-name:processStepFour}.wdc-process-scope .step:nth-child(5){animation-name:processStepFive}.wdc-process-scope .step .number{border-color:var(--yellow-dark);background:var(--yellow);color:var(--black);transform:scale(1.08)}.wdc-process-scope .brief{opacity:1;transform:none}.wdc-process-scope .sitemap{animation-name:processArtifactTwo}.wdc-process-scope .browserBoard{animation-name:processArtifactThree}.wdc-process-scope .phoneReview,.wdc-process-scope .reviewNote{animation-name:processArtifactFour}.wdc-process-scope .publishedSite,.wdc-process-scope .publishMark{animation-name:processArtifactFive}}}@supports not (animation-timeline:view()){@media (min-width:901px){.wdc-process-scope[data-scroll-story]{--process-progress:1;--scene-progress:5;max-width:1340px;height:auto;margin:0 auto;padding:24px 32px 96px}.wdc-process-scope [data-scroll-story-layout]{height:auto;min-height:0;padding:0;display:block;position:static;top:auto;overflow:visible}.wdc-process-scope [data-scroll-story-timeline]{height:auto}.wdc-process-scope [data-scroll-story-scene]{display:none}.wdc-process-scope [data-scroll-story-track]{top:72px;bottom:72px;left:25px}.wdc-process-scope [data-scroll-story-track]>span{transform:scaleY(1)}.wdc-process-scope [data-scroll-story-steps]{position:relative;inset:auto}.wdc-process-scope [data-scroll-story-step]{opacity:1;pointer-events:auto;grid-template-columns:52px minmax(0,360px) minmax(320px,560px);align-items:start;gap:20px;min-height:0;padding:48px 0;position:relative;inset:auto;transform:none}.wdc-process-scope [data-scroll-story-static-scene]{grid-column:3;width:auto;margin-top:0;padding-left:0;display:block!important}}}.wdc-process-scope .mobileScene{display:none}.wdc-process-scope .mobileScene picture,.wdc-process-scope .stageSnapshot{width:100%;display:block}.wdc-process-scope .stageSnapshot{background:#0c0c0b;border:1px solid #30302d;border-radius:12px;height:auto;box-shadow:0 20px 45px #05050521}@media (max-width:1100px){.wdc-process-scope .layout{grid-template-columns:minmax(310px,.8fr) minmax(460px,1.2fr);gap:42px}.wdc-process-scope .step{gap:24px}}@media (max-width:900px){.wdc-process-scope.process{max-width:1340px;height:auto;margin:0 auto;padding:18px 20px 104px}.wdc-process-scope .layout{width:auto;height:auto;padding:0;display:block;position:static;overflow:visible}.wdc-process-scope .timelineColumn{height:auto}.wdc-process-scope .studio{display:none}.wdc-process-scope .track{top:72px;bottom:72px;left:25px}.wdc-process-scope .steps{position:relative;inset:auto}.wdc-process-scope .step,.wdc-process-scope .step:first-child,.wdc-process-scope .step:last-child{opacity:1;pointer-events:auto;grid-template-columns:52px minmax(0,1fr);align-items:start;gap:20px;min-height:0;padding:48px 0;position:relative;inset:auto;transform:none}.wdc-process-scope .number{width:52px;height:52px}.wdc-process-scope .stepCopy{opacity:1;padding-top:2px}.wdc-process-scope .stepCopy h2{font-size:clamp(30px,7vw,38px)}.wdc-process-scope .stepCopy p{max-width:520px;font-size:17px}.wdc-process-scope .mobileScene{grid-column:1/-1;width:100%;margin-top:10px;padding-left:72px;display:block}}@media (max-width:560px){.wdc-process-scope.process{padding-left:16px;padding-right:16px}.wdc-process-scope .step,.wdc-process-scope .step:first-child,.wdc-process-scope .step:last-child{grid-template-columns:46px minmax(0,1fr);gap:16px;padding:42px 0}.wdc-process-scope .track{left:22px}.wdc-process-scope .number{width:46px;height:46px;font-size:11px}.wdc-process-scope .stepCopy h2{font-size:29px}.wdc-process-scope .stepCopy p{margin-top:10px;font-size:16px}.wdc-process-scope .mobileScene{margin-top:8px;padding-left:62px}}@media (min-width:901px) and (prefers-reduced-motion:reduce){.wdc-process-scope.process{max-width:1340px;height:auto;margin:0 auto;padding:24px 32px 96px;--process-progress:1!important;--scene-progress:5!important;--active-y:50%!important}.wdc-process-scope .layout{height:auto;min-height:0;padding:0;display:block;position:static;top:auto;overflow:visible}.wdc-process-scope .timelineColumn{height:auto}.wdc-process-scope .studio{display:none}.wdc-process-scope .track{top:72px;bottom:72px;left:25px}.wdc-process-scope .steps{position:relative;inset:auto}.wdc-process-scope .step,.wdc-process-scope .step:first-child,.wdc-process-scope .step:last-child{pointer-events:auto;grid-template-columns:52px minmax(0,360px) minmax(320px,560px);align-items:start;gap:20px;min-height:0;padding:48px 0;position:relative;inset:auto;opacity:1!important;transform:none!important}.wdc-process-scope .stepCopy{padding-top:2px}.wdc-process-scope .mobileScene{grid-column:3;width:auto;margin-top:0;padding-left:0;display:block}.wdc-process-scope .artifact,.wdc-process-scope .number,.wdc-process-scope .stepCopy{transition:none}.wdc-process-scope .track span{transform:scaleY(1)}.wdc-process-scope .stepCopy{opacity:1;animation:none}.wdc-process-scope .number{transform:none!important}}@media (prefers-reduced-motion:reduce){.wdc-process-scope .artifact,.wdc-process-scope .number,.wdc-process-scope .stepCopy{transition:none}.wdc-process-scope .artifact,.wdc-process-scope .number,.wdc-process-scope .stepCopy,.wdc-process-scope .step{will-change:auto}}
