/* The dot carries the idea through a physical paper / chrome environment. */
body{position:relative;isolation:isolate}
main{position:relative;z-index:1}

.experience-section,.process-section,.references-section{background:transparent}
.offer-section{background:#e4e3daeb}
footer{position:relative;z-index:2;background:var(--paper)}
.responsibility-intro{max-width:85ch;font-size:14px;line-height:1.85;margin:-14px 0 30px;color:#4a4a43}
.project-selector button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding-bottom:16px}
.project-selector button small{font-size:12px;font-weight:400;color:var(--muted)}
.project-selector button[aria-pressed=true] small{color:var(--blue)}
.project-copy h3{margin-bottom:16px}
.project-owner{font-size:13px;color:var(--blue);font-weight:700;margin-bottom:27px;min-height:22px}
.layer-question{font-size:34px;min-height:0;max-width:23ch;margin:28px 0 18px}
.layer-description{font-size:14px;line-height:1.85;max-width:49ch;min-height:145px;color:#4a4a43}
.teardown{min-height:530px;gap:7vw}
.stage-note{max-width:100%;padding-inline:10px}
.dot-destination{display:inline-block;width:.25em;height:.25em;min-width:12px;min-height:12px;margin-left:.1em;vertical-align:baseline;border:1px solid #eeede670;border-radius:50%}
.brief-section .end-dot{opacity:.55;transform:scale(.8);transform-origin:right center}
.blue-story-track{position:absolute;top:0;left:0;z-index:3;width:100%;pointer-events:none;overflow:visible}
.blue-story-track path{fill:none;stroke:#2948e82a;stroke-width:1;stroke-linecap:round}
.blue-story-dot{position:absolute;left:0;top:0;width:28px;height:28px;z-index:22;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle at 29% 25%,#e8eaff 0%,#93a3ff 10%,#2948e8 36%,#111d74 88%);box-shadow:3px 9px 12px -6px #20201e60;transform:translate(-80px,-80px);will-change:transform;transition:opacity .25s}
.blue-story-dot.is-visible{opacity:1}
.blue-story-dot.is-blue-field{background:radial-gradient(circle at 29% 25%,#fff 0%,#eeede6 28%,#c7c8d2 83%);border:1px solid #fff8;box-shadow:3px 9px 12px -6px #111d7460}
@media(max-width:760px){
 .responsibility-intro{font-size:13px;margin:0 0 24px;line-height:1.85}
 .project-selector button{align-items:flex-start;gap:5px;padding-inline:5px;font-size:13px}
 .project-selector button small{font-size:12px}
 .project-owner{font-size:12px;margin-bottom:22px}
 .layer-question{font-size:31px;max-width:23ch;margin-bottom:16px}
 .layer-description{font-size:13px;line-height:1.85;min-height:180px}
 .teardown{min-height:0}
 .blue-story-dot{width:18px;height:18px}
 .blue-story-track path{stroke:#2948e824}
 .brief-section .end-dot{height:100px;opacity:.28}
}
@media(prefers-reduced-motion:reduce){.blue-story-dot,.blue-story-track{display:none}.dot-destination{background:var(--paper)}}

.motion-switch{position:absolute;bottom:-53px;left:50%;transform:translateX(-50%);min-height:44px;white-space:nowrap;padding:8px 14px;background:var(--paper);border:1px solid var(--line);color:var(--blue);font-size:12px;z-index:4}.motion-switch:hover{border-color:var(--blue)}.blue-motion-paused .blue-story-dot,.blue-motion-paused .blue-story-track{display:none}.blue-motion-on .blue-story-track{display:block}.blue-motion-on .blue-story-dot.is-visible{display:block}.blue-motion-on .hero-stage canvas{pointer-events:auto}
@media(max-width:760px){.hero{padding-bottom:78px}}
@media(prefers-reduced-motion:reduce){.blue-motion-on .sheet{transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .5s,box-shadow .7s!important}.blue-motion-on .blue-story-dot{transition:opacity .25s!important}}