/* The design study: four chapters on one continuous stage. */
.motion-lab{height:420svh;background:#dbded9;position:relative;border-block:1px solid #b8beb8}
.motion-lab .motion-stage{position:sticky;top:0;height:100svh;min-height:660px;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:0;padding:100px 7% 30px;overflow:hidden;background:radial-gradient(ellipse at 52% 44%,#f7f8f2 0%,#e3e6df 40%,#d1d6d0 100%)}
.motion-heading{display:grid;grid-template-columns:1fr auto;align-items:end;position:relative;z-index:5;gap:8px 24px}.motion-heading .overline{grid-column:1/-1;font-size:10px;letter-spacing:.16em;color:#54645d}.motion-heading h2{font-size:clamp(30px,3.6vw,58px);line-height:1.08;letter-spacing:-.05em;margin:0}.motion-heading h2 em{font-style:normal;color:#65746d}.motion-heading>p{font-size:12px;max-width:210px;color:#56635c;margin:0 0 4px}
.motion-lab .layers{position:relative;inset:auto;width:100%;height:100%;min-height:0;margin:0;transform:none;perspective:1600px;isolation:isolate}
.scene-orbit{position:absolute;inset:10% 6%;border:1px solid #a1b3a22e;border-radius:50%;transform:rotateX(64deg);box-shadow:0 0 0 45px #859b8510,0 0 0 90px #859b8508}.scene-note{position:absolute;left:0;top:12%;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#61736b;writing-mode:vertical-rl}.build-deck{position:absolute;width:min(58%,700px);aspect-ratio:1.65;left:50%;top:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) translateX(var(--deck-x,5%)) rotateX(var(--deck-rx,13deg)) rotateY(var(--deck-ry,-18deg));will-change:transform}
.build-sheet{position:absolute;inset:0;border:1px solid #fff;border-radius:10px;background:#eef1e9;box-shadow:0 2px 0 #8a9489,0 5px 0 #b0b7ad,0 25px 35px -20px #253a3666;overflow:hidden;backface-visibility:hidden;will-change:transform,opacity}.sheet-label{padding:14px 22px;font-size:10px;letter-spacing:.07em;border-bottom:1px solid #81948a44;display:flex;justify-content:space-between}.sheet-label span{opacity:.6}.blueprint{transform:translate3d(var(--wire-x,-21%),var(--wire-y,-8%),-80px);opacity:var(--wire-opacity,1);background:repeating-linear-gradient(90deg,transparent 0 39px,#839b8b15 39px 40px),repeating-linear-gradient(0deg,#e6ece3 0 39px,#839b8b15 39px 40px)}.wire-nav{display:flex;gap:18px;align-items:center;margin:20px 6%;border-bottom:1px solid #697d7166;padding-bottom:14px}.wire-nav b{margin-right:auto;letter-spacing:-.05em}.wire-nav i{width:40px;height:4px;background:#7c928266}.wire-body{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:0 6%}.wire-body b{font-size:clamp(18px,2.8vw,40px);line-height:1.1;display:block;margin-bottom:16px;color:#456354}.wire-body i{display:block;height:5px;margin:8px 0;background:#82988c55;width:85%}.wire-body strong{display:block;width:42%;height:20px;border:1px solid #637b6c;margin-top:20px}.wire-photo{border:1px solid #81978c;background:linear-gradient(35deg,transparent 49.7%,#9eafa3 50%,transparent 50.3%);display:grid;place-items:center;color:#799083;font-size:12px}.wire-bottom{display:flex;gap:20px;padding:20px 6%}.wire-bottom i{height:28px;flex:1;border:1px solid #7f9b8455}
.identity-sheet{transform:translate3d(var(--brand-x,10%),var(--brand-y,5%),0);opacity:var(--brand-opacity,0);background:#f0ebde}.identity-content{padding:5% 6%;display:grid;grid-template-columns:1fr 1fr;gap:8%;height:85%}.identity-word{font-size:clamp(28px,5.5vw,76px);font-weight:750;letter-spacing:-.07em;color:#123d4b;line-height:.87}.identity-word em{font-style:normal;color:#77b7b2}.identity-word small{display:block;font-size:11px;letter-spacing:0;line-height:1.4;font-weight:450;margin-top:25px}.identity-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.identity-palette i{background:#153e4b;position:relative;font-style:normal;border-radius:2px}.identity-palette i:nth-child(2){background:#83bcb9}.identity-palette i:nth-child(3){background:#de7044}.identity-palette i:nth-child(4){background:#e1d9c6}.identity-palette span{position:absolute;bottom:10px;left:10px;font-size:9px;color:#fff}.identity-palette i:nth-child(4) span{color:#564e42}
.finished-sheet{transform:translate3d(var(--site-x,22%),var(--site-y,20%),80px);opacity:var(--site-opacity,0);background:#e6e9e3;border-color:#fff}.device-toolbar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:8px;letter-spacing:.05em;color:#5d6c63;background:linear-gradient(#fbfcf9,#d4dad2);border-bottom:1px solid #bdc7bc}.device-toolbar>span:first-child{font-size:7px;color:#91a18f;letter-spacing:3px}.finished-sheet img{width:100%;height:calc(100% - 28px);object-fit:cover;object-position:top;display:block}
.responsive-device{position:absolute;left:69%;top:50%;width:clamp(100px,12vw,180px);aspect-ratio:430/810;transform:translate(var(--phone-x,70px),calc(-40% + var(--phone-y,70px))) rotateY(var(--phone-ry,-18deg));border:5px solid #3b443f;border-radius:25px;background:#12262b;box-shadow:0 0 0 1px #dfe4dc,3px 5px 0 #88918a,10px 24px 30px -10px #243b3870;opacity:var(--phone-opacity,0);overflow:hidden;will-change:transform,opacity}.responsive-device img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.phone-speaker{position:absolute;top:6px;left:35%;width:30%;height:9px;border-radius:20px;background:#202925;z-index:1}.scene-caption{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#586c60;opacity:var(--phone-opacity,0);white-space:nowrap}
.motion-bottom{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1.25fr;gap:14px 7%;border-top:1px solid #98a59c66;padding-top:20px}.motion-chapter-copy{display:grid;grid-template-columns:48px 1fr;gap:6px 12px}.motion-chapter-copy>span{grid-row:1/3;font-size:10px;color:#617968;padding-top:5px;font-variant-numeric:tabular-nums}.motion-chapter-copy h3{font-size:20px;font-weight:550;letter-spacing:-.035em;margin:0}.motion-chapter-copy p{font-size:12px;line-height:1.5;color:#5c6b61;margin:0;max-width:350px}.motion-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;align-self:center}.motion-chapters button{background:none;border:0;color:#64766a;text-align:left;padding:8px 0 12px;position:relative;font-size:12px;white-space:nowrap}.motion-chapters button span{display:block;font-size:9px;margin-bottom:7px}.motion-chapters button:after,.motion-chapters i{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#869b8844}.motion-chapters i{z-index:1;transform:scaleX(var(--step-progress,0));transform-origin:left;background:#345e4b}.motion-chapters [aria-current]{color:#163f2d}.motion-brief{grid-column:2;justify-self:start;font-size:11px!important;margin:0!important;padding-bottom:3px!important}.motion-chapters button:focus-visible{outline:2px solid #345e4b;outline-offset:5px}
@media(min-width:1600px){.build-deck{width:min(60%,850px)}}
@media(max-width:800px){.motion-lab{height:350svh}.motion-lab .motion-stage{padding:90px 7% 22px;min-height:630px}.motion-heading{grid-template-columns:1fr}.motion-heading h2{font-size:34px;max-width:310px}.motion-heading>p{max-width:none;font-size:11px}.motion-heading .overline{font-size:8px}.motion-lab .layers{min-height:230px}.build-deck{width:83%;left:48%;aspect-ratio:1.45}.sheet-label{padding:9px 10px;font-size:7px}.sheet-label span{display:none}.wire-nav{margin:12px 6%;padding-bottom:7px;gap:8px}.wire-nav i{width:17px}.wire-nav b{font-size:12px}.wire-body b{font-size:23px;margin-bottom:8px}.wire-body strong{height:12px;margin-top:8px}.wire-bottom{padding:12px 6%;gap:8px}.wire-bottom i{height:14px}.wire-photo{font-size:8px}.identity-word{font-size:37px}.identity-word small{font-size:8px;margin-top:14px}.identity-palette span{font-size:6px;left:5px;bottom:5px}.device-toolbar{height:19px;font-size:5px;padding:0 7px}.finished-sheet img{height:calc(100% - 19px)}.responsive-device{width:83px;border-width:3px;border-radius:14px;left:68%}.phone-speaker{height:5px;top:4px}.scene-note{font-size:7px;left:-3%;top:17%}.scene-caption{font-size:8px;bottom:1%}.motion-bottom{grid-template-columns:1fr;gap:10px;padding-top:14px}.motion-chapter-copy{grid-template-columns:40px 1fr;min-height:67px}.motion-chapter-copy h3{font-size:19px}.motion-chapter-copy p{font-size:11px}.motion-chapters{gap:14px}.motion-chapters button{font-size:10px;padding-top:0}.motion-chapters button span{display:inline;margin-right:5px;font-size:8px}.motion-brief{grid-column:1;justify-self:end;font-size:10px!important}.scene-orbit{inset:17% 0}}
@media(max-height:740px) and (min-width:801px){.motion-lab .motion-stage{min-height:580px;padding-top:82px;padding-bottom:18px}.motion-heading h2{font-size:36px}.build-deck{width:min(52%,570px)}.motion-bottom{padding-top:12px}.responsive-device{width:115px}}
@media(prefers-reduced-motion:reduce){.motion-lab{height:auto}.motion-lab .motion-stage{position:relative;height:auto;min-height:0;padding-top:70px}.motion-lab .layers{height:480px;--deck-x:-9%;--deck-rx:0deg;--deck-ry:0deg;--wire-opacity:0;--brand-opacity:0;--site-opacity:1;--site-x:0%;--site-y:0%;--phone-opacity:1;--phone-x:0px;--phone-y:0px;--phone-ry:0deg}.build-deck,.build-sheet,.responsive-device{will-change:auto}.motion-heading>p{display:none}@media(max-width:800px){.motion-lab .layers{height:270px}}}
/* Preserve the mobile layout's full width inside the device. */
.responsive-device{background:#153e4b;padding-top:18px}
.responsive-device img{width:calc(100% - 12px);height:auto;max-width:none;object-fit:initial;display:block;margin-inline:6px}
@media(max-width:800px){.responsive-device{padding-top:10px}.responsive-device img{width:calc(100% - 6px);margin-inline:3px}}
/* Five physical cards, from the initial brief to ongoing development. */
.motion-lab{height:520svh}
.motion-chapters{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.brief-sheet{background:#f2f1e9;transform:translateZ(80px)}
.brief-board{padding:6%;display:grid;grid-template-columns:1.2fr 1fr;gap:9%;height:85%;align-items:center}
.brief-board small{font-size:9px;letter-spacing:.12em;color:#617569}
.brief-board h3{font-size:clamp(24px,2.8vw,40px);line-height:1.12;letter-spacing:-.04em;margin:15px 0;color:#203e34}
.brief-board p{font-size:12px;color:#607068;line-height:1.6}
.brief-board dl{margin:0}.brief-board dl>div{border-top:1px solid #b7c2b6;padding:14px 0}.brief-board dt{font-size:9px;color:#6c7d70;margin-bottom:5px}.brief-board dd{font-size:13px;line-height:1.4;margin:0;color:#273e33}
.mockups-sheet{background:#ebece5;opacity:0}.concept-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:4%;height:89%}.concept-trio article{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:12px;background:#133f4e;color:#e2f0e7;box-shadow:0 4px 8px #273c3425;border:1px solid #ffffff65;border-radius:3px}.concept-trio small{font-size:7px;letter-spacing:.05em;opacity:.8}.concept-trio b{font-size:18px;letter-spacing:-.04em;margin:10px 0}.concept-trio h4{font-size:24px;line-height:1.05;letter-spacing:-.04em;margin:12px 0}.concept-trio i{font-style:normal;font-size:8px;background:#de7044;color:#172d33;padding:8px;margin-top:auto}.concept-photo{min-height:40px;flex:1;background:url(assets/revel-motion-photo.jpg) center / cover}.concept-trio .concept-b{background:#f7ebd5;color:#245050;transform:translateY(5px)}.concept-b b{font-family:Georgia,serif;font-size:21px}.concept-b h4{font-family:Georgia,serif;font-weight:400;font-size:26px}.concept-b .concept-photo{border-radius:60px 60px 2px 2px;margin-bottom:10px;background-position:75% center}.concept-b i{background:#a9c8bd}.concept-trio .concept-c{background:#172924;color:#ddf379}.concept-c h4{text-transform:uppercase;font-size:22px;font-weight:800}.concept-c .concept-photo{background-position:30% center;margin-bottom:10px}.concept-c i{background:#dcf27d}
@media(max-width:800px){.motion-lab{height:440svh}.motion-chapters{gap:7px}.motion-chapters button{font-size:8px}.motion-chapters button span{display:block;margin:0 0 4px}.brief-board{padding:6%;gap:5%;grid-template-columns:1.15fr 1fr}.brief-board small{font-size:6px}.brief-board h3{font-size:19px;margin:8px 0}.brief-board p{font-size:7px}.brief-board dl>div{padding:8px 0}.brief-board dt{font-size:6px}.brief-board dd{font-size:8px}.concept-trio{gap:5px;padding:4%}.concept-trio article{padding:6px}.concept-trio small{font-size:5px}.concept-trio b,.concept-b b{font-size:11px;margin:7px 0}.concept-trio h4,.concept-b h4,.concept-c h4{font-size:13px;margin:7px 0}.concept-trio i{font-size:5px;padding:5px}.concept-photo{min-height:25px}.concept-b .concept-photo,.concept-c .concept-photo{margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){.motion-lab{height:auto}.motion-lab .build-sheet{transition:none}}