/* Live digital experiences: page motion, campaign variations, a playable game. */
.showcase-heading{align-items:flex-end}
.showcase-heading h2{font-size:clamp(2.6rem,4.3vw,4.2rem)}
.showcase-heading>div{max-width:390px}
.showcase-heading>div>p{color:var(--muted);font-size:1rem;line-height:1.75}
.showcase-motion{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 0;margin-top:14px;background:none;border:0;border-bottom:1px solid #9b72ae;color:#e1baef;cursor:pointer;font-size:.875rem}
.showcase-motion[hidden]{display:none}
.motion-feature{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);background:#18121d;margin-bottom:28px}
.motion-feature-copy{padding:42px 34px;align-self:center;min-width:0}
.motion-feature h3,.experience-card h3{font-size:clamp(2rem,3.2vw,3rem);line-height:1.09;font-weight:400;letter-spacing:-.045em}
.motion-feature h3 span,.experience-card h3 span{color:#cfa0e9}
.motion-feature-copy .eyebrow{margin-bottom:25px}
.motion-feature-copy>p:not(.eyebrow){color:#bcafc8;font-size:1rem;line-height:1.75;margin-top:22px;max-width:380px}
.motion-feature-copy .inline-link{margin-top:26px;font-size:1rem;color:#f0dcff}
.device-controls{display:flex;gap:9px;margin-top:28px;flex-wrap:wrap}
.device-controls button{display:flex;align-items:center;justify-content:center;min-width:102px;min-height:44px;padding:9px 14px;background:none;border:1px solid #725983;color:#bca9c8;font-size:.875rem;cursor:pointer}
.device-controls button[aria-pressed=true]{background:#dfb5f4;color:#281033;border-color:#dfb5f4}
.device-studio{position:relative;display:flex;align-items:center;justify-content:center;padding:34px 28px 45px;min-width:0;background:radial-gradient(ellipse at 50% 10%,#58356b,#24152f 75%);overflow:hidden}
.device-frame{--screen-h:420px;width:100%;max-width:690px;min-width:0;background:#f7f2f7;color:#36203e;border:5px solid #32253c;border-radius:12px;box-shadow:0 20px 50px #08000d88;transition:width .7s cubic-bezier(.2,.7,.2,1),border-radius .7s}
.device-frame.is-mobile{width:250px;border-radius:26px;border-width:7px;--screen-h:420px}
.browser-bar{height:33px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;background:#f0e7f1;border-bottom:1px solid #d5c7dc;border-radius:7px 7px 0 0;font-size:.75rem;color:#7f688b}
.browser-bar>span:first-child{font-size:1rem;letter-spacing:1px;color:#b598c1}
.is-mobile .browser-bar{border-radius:17px 17px 0 0;justify-content:center}
.is-mobile .browser-bar>span:first-child{display:none}
.device-screen{height:var(--screen-h);overflow:hidden;border-radius:0 0 7px 7px}
.is-mobile .device-screen{border-radius:0 0 17px 17px}
.site-scroll{animation:site-tour 15s ease-in-out infinite;animation-play-state:paused;will-change:transform;min-height:calc(var(--screen-h) + 1px)}
@keyframes site-tour{0%,15%,100%{transform:translateY(0)}52%,78%{transform:translateY(calc(var(--screen-h) - 100%))}}
.mini-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;font-size:.75rem;gap:15px}
.mini-logo{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;line-height:1;font-weight:500;letter-spacing:-.08em}
.mini-hero{display:grid;grid-template-columns:1fr 1fr;background:#e9dfe9}
.mini-hero-copy{padding:30px 22px;align-self:center}
.mini-hero-copy>span{font-size:.75rem;color:#81618c;letter-spacing:.09em}
.mini-hero-copy>strong{display:block;font:400 clamp(1.7rem,3vw,2.8rem)/1.04 Georgia,serif;letter-spacing:-.04em;margin-top:16px}
.mini-hero-copy>strong em{color:#947397}
.mini-button{display:inline-block;background:#3b2545;color:white;font-size:.8125rem;padding:10px 14px;margin-top:20px}
.mini-hero>img{width:100%;height:300px;object-fit:cover;object-position:center 25%}
.mini-collection{padding:24px 22px 28px}
.mini-collection>p{font:400 1.65rem/1.2 Georgia,serif;margin-bottom:18px}
.mini-products{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-products img{height:175px;object-fit:cover;object-position:center 35%;width:100%}
.mini-products span{display:block;font-size:.8125rem;margin-top:10px}
.mini-footer{background:#3a2248;color:#ecdef3;padding:26px 22px;font-size:1rem;text-align:center;font-family:Georgia,serif}
.is-mobile .mini-nav{padding:18px 15px}.is-mobile .mini-nav>span:last-child{font-size:.625rem;max-width:78px;text-align:right}
.is-mobile .mini-hero{grid-template-columns:1fr}.is-mobile .mini-hero-copy{padding:26px 20px}.is-mobile .mini-hero-copy>strong{font-size:2.5rem}.is-mobile .mini-hero>img{height:255px}.is-mobile .mini-collection{padding:22px 15px}.is-mobile .mini-products{gap:10px}.is-mobile .mini-products img{height:135px}
.device-note{position:absolute;bottom:12px;left:20px;right:20px;text-align:center;font-size:.75rem;color:#baa2c9;line-height:1.5}
.experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.experience-card{background:#16111c;min-width:0;display:flex;flex-direction:column}
.experience-card-copy{padding:32px 30px 28px}
.experience-card-copy .eyebrow{margin-bottom:18px;font-size:.8125rem}
.experience-card h3{font-size:clamp(2rem,2.8vw,2.65rem)}
.experience-card-copy>p:last-child{color:#b8a9c5;font-size:1rem;line-height:1.75;margin-top:18px;max-width:440px}
.campaign-stage{position:relative;min-height:365px;margin:0 24px;overflow:hidden;background:#271331;isolation:isolate}
.campaign-scene{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:30px;opacity:0;visibility:hidden;transition:opacity .65s,visibility .65s;color:#fff;background:#2a1634}
.campaign-scene.is-active{opacity:1;visibility:visible}
.campaign-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.campaign-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.campaign-avatar video{object-position:65% 22%}
.campaign-scene{isolation:isolate}
.campaign-description{font-size:.8125rem;line-height:1.65;color:#b9a1c8;padding:14px 26px 0;min-height:4em}
.production-secondary{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;margin-top:48px;padding-top:36px;border-top:1px solid #20152830;align-items:center}
.production-secondary .eyebrow{font-size:.8125rem;color:#7c009d;margin-bottom:18px}
.production-secondary h3{font-size:2.3rem;line-height:1.12;letter-spacing:-.045em;font-weight:400}
.production-secondary h3 span{color:#8700bd}
.production-secondary p:not(.eyebrow){color:#66566f;font-size:1rem;line-height:1.75;margin-top:20px;max-width:620px}
.production-secondary>div:last-child>p{font-size:.8125rem;max-width:350px;margin-top:16px}
.production-secondary .inline-link{font-size:1rem;color:#7500a4}
@media(max-width:800px){.production-secondary{grid-template-columns:1fr;gap:20px;margin-top:34px;padding-top:28px}.production-secondary h3{font-size:2rem}.production-secondary>div:last-child>p{max-width:500px}}
.campaign-scene:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#160b20ee,#160b20a3 48%,#160b2022)}
.campaign-fashion img{object-position:70% 22%}.campaign-food-scene img{object-position:center}
.campaign-scene .campaign-wordmark{font-size:1.3rem;font-weight:600;letter-spacing:-.04em;margin-bottom:35px}
.campaign-scene .campaign-kicker{font-size:.75rem;letter-spacing:.12em;color:#eedbf8}
.campaign-scene strong{font-size:2.65rem;line-height:1.02;letter-spacing:-.05em;max-width:310px;font-weight:500;display:block;margin-top:12px}
.campaign-fashion strong,.campaign-food-scene strong{font-family:Georgia,serif;font-weight:400}
.campaign-scene .campaign-action{font-size:.8125rem;background:#fff;color:#361244;padding:10px 15px;margin-top:24px}
.campaign-scene.is-active strong,.campaign-scene.is-active .campaign-action{animation:campaign-reveal .85s both;animation-play-state:paused}
.campaign-scene.is-active .campaign-action{animation-delay:.15s}
@keyframes campaign-reveal{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.campaign-selectors{display:flex;gap:0;padding:20px 24px 0}
.campaign-selectors button{flex:1;min-width:0;border:0;border-bottom:2px solid #4c315e;background:transparent;color:#b69ac8;min-height:48px;font-size:.875rem;padding:10px 4px;cursor:pointer;position:relative}
.campaign-selectors button[aria-pressed=true]{color:white;border-color:#c36bff}
.campaign-selectors button:hover{color:white}
.experience-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding:20px 26px 24px}
.experience-card-footer .inline-link{font-size:.9375rem}
.experience-card-footer>span{font-size:.75rem;color:#a58fb4}
.memory-stage{margin:0 24px;position:relative;min-height:365px;background:radial-gradient(ellipse at 50% 30%,#57078c,#260c3e);padding:20px;overflow:hidden}
.memory-topline{display:flex;justify-content:space-between;align-items:center;color:#ead3fc;font-size:.8125rem;gap:10px;margin-bottom:16px}
.memory-wordmark{font-size:1.25rem;letter-spacing:.14em;font-weight:650}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.memory-card{height:102px;min-width:0;position:relative;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer;perspective:700px}
.memory-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s;transform:rotateY(0)}
.memory-card.is-flipped .memory-card-inner,.memory-card.is-matched .memory-card-inner{transform:rotateY(180deg)}
.memory-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border:1px solid #c075fc66;border-radius:6px;background:linear-gradient(140deg,#7835a3,#442461);color:#e7c6fb;font-size:1.5rem;font-weight:600;letter-spacing:-.05em}
.memory-front{transform:rotateY(180deg);background:#f1dfff;color:#542277;font-size:1.3rem}
.memory-card.is-matched .memory-front{background:#d8b2f2;color:#412251;border-color:#f1dfff}
.memory-card:disabled{cursor:default}
.memory-card:focus-visible{outline-offset:3px;outline-color:white}
.memory-stage.is-attract .memory-card-inner{animation:memory-attract 7s ease-in-out infinite;animation-play-state:paused}
.memory-stage.is-attract .memory-card:nth-child(2n) .memory-card-inner{animation-delay:.3s}
.memory-stage.is-attract .memory-card:nth-child(3n) .memory-card-inner{animation-delay:.6s}
@keyframes memory-attract{0%,18%,80%,100%{transform:rotateY(0)}32%,66%{transform:rotateY(180deg)}}
.memory-intro{position:absolute;inset:0;z-index:2;background:#200b35b8;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:28px;color:#fff}
.memory-intro>span{font-size:.8125rem;letter-spacing:.1em;color:#d8b0f0;margin-bottom:18px}
.memory-intro>strong{font-size:2.6rem;font-weight:500;line-height:1.06;letter-spacing:-.05em;max-width:310px}
.memory-intro>p{font-size:1rem;margin-top:14px;color:#ddc5ed}
.memory-start,.memory-restart{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:0;background:#e9c4ff;color:#3d1855;font-size:.9375rem;font-weight:600;padding:12px 22px;margin-top:22px;cursor:pointer}
.memory-start:hover,.memory-restart:hover{background:white}
.memory-intro[hidden]{display:none}
.memory-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;min-height:34px}
.memory-feedback{color:#e4c8f4;font-size:.875rem;line-height:1.5}
.memory-reset{font-size:.8125rem;min-height:40px;background:none;border:0;border-bottom:1px solid #b883d4;color:#dcb6f2;cursor:pointer;padding:6px 0;flex-shrink:0}
.memory-reset[hidden]{display:none}
.showcase-note{color:#aa97b8;font-size:.8125rem;line-height:1.7;margin-top:24px;max-width:810px}
.motion-work .portfolio-extra{margin-top:30px}
.motion-work .portfolio-extra>summary{font-size:.9375rem;color:#bdaaC8;min-height:65px}
.motion-work.is-motion-running .site-scroll,.motion-work.is-motion-running .campaign-scene.is-active strong,.motion-work.is-motion-running .campaign-scene.is-active .campaign-action,.motion-work.is-motion-running .memory-stage.is-attract .memory-card-inner{animation-play-state:running}
.motion-work.is-motion-paused .campaign-scene.is-active strong,.motion-work.is-motion-paused .campaign-scene.is-active .campaign-action{opacity:1;transform:none;animation:none}
@media(max-width:1100px){.motion-feature{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.motion-feature-copy{padding:32px 26px}.device-studio{padding:30px 20px 44px}.mini-hero-copy{padding:25px 15px}.mini-hero-copy>strong{font-size:2rem}.experience-card-copy{padding:28px 24px}.campaign-scene{padding:25px}.campaign-scene strong{font-size:2.3rem}.memory-card{height:95px}.campaign-stage,.memory-stage{min-height:355px}}
@media(max-width:800px){.showcase-heading>div{max-width:520px;margin-top:20px}.motion-feature{grid-template-columns:1fr}.motion-feature-copy{padding:30px}.motion-feature h3{font-size:2.8rem}.motion-feature-copy>p:not(.eyebrow){max-width:540px}.motion-feature-copy .eyebrow{margin-bottom:20px}.device-controls{margin-top:22px}.device-studio{padding:28px 28px 42px}.device-frame{max-width:620px}.mini-hero-copy>strong{font-size:2.75rem}.experience-grid{grid-template-columns:1fr;gap:25px}.experience-card-copy{padding:30px}.experience-card h3{font-size:2.65rem}.experience-card-copy>p:last-child{max-width:570px}.campaign-stage,.memory-stage{margin-inline:28px;min-height:380px}.campaign-scene{padding:35px}.campaign-scene strong{font-size:3rem}.campaign-selectors{padding-inline:28px}.memory-stage{padding:24px}.memory-card{height:112px}.experience-card-footer{padding-inline:28px}.memory-intro>strong{font-size:3rem}}
@media(max-width:480px){.showcase-heading h2{font-size:2.45rem}.motion-feature-copy{padding:28px 22px}.motion-feature h3{font-size:2.4rem}.device-studio{padding:22px 12px 42px}.device-frame{--screen-h:360px;border-width:4px}.device-frame.is-mobile{--screen-h:360px;width:228px}.mini-nav{padding:17px 13px;font-size:.625rem;gap:8px}.mini-logo{font-size:1.5rem}.mini-hero-copy{padding:20px 12px}.mini-hero-copy>strong{font-size:1.85rem}.mini-hero-copy>span{font-size:.625rem}.mini-hero>img{height:235px}.mini-button{font-size:.75rem;padding:8px;margin-top:15px}.mini-collection{padding:20px 13px}.mini-collection>p{font-size:1.4rem}.mini-products{gap:10px}.mini-products img{height:135px}.mini-products span{font-size:.75rem}.experience-card-copy{padding:28px 22px}.experience-card h3{font-size:2.25rem}.campaign-stage,.memory-stage{margin-inline:16px;min-height:345px}.campaign-scene{padding:24px}.campaign-scene strong{font-size:2.5rem}.campaign-selectors{padding-inline:16px}.campaign-selectors button{font-size:.8125rem}.memory-stage{padding:16px}.memory-card{height:93px}.memory-grid{gap:8px}.memory-intro{padding:24px}.memory-intro>strong{font-size:2.5rem}.memory-wordmark{font-size:1.0625rem}.memory-topline{font-size:.75rem}.memory-face{font-size:1.3rem}.memory-front{font-size:1.1rem}.memory-feedback{font-size:.8125rem}.experience-card-footer{padding:18px 20px 24px}.experience-card-footer .inline-link{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.site-scroll,.campaign-scene strong,.campaign-scene .campaign-action,.memory-stage.is-attract .memory-card-inner{animation:none!important}.device-frame,.memory-card-inner,.campaign-scene{transition:none}.campaign-scene.is-active strong,.campaign-scene.is-active .campaign-action{opacity:1;transform:none}.motion-work.is-motion-running .site-scroll{animation:site-tour 15s ease-in-out infinite!important}.motion-work.is-motion-running .memory-stage.is-attract .memory-card-inner{animation:memory-attract 7s ease-in-out infinite!important}}

/* BORA: animated product campaign for Instagram. */
.campaign-gelato{background:#651b39;color:#fff3e3}
.campaign-gelato img{object-position:62% 50%;animation:gelato-drift 10s ease-in-out infinite;animation-play-state:paused;transform-origin:72% 54%}
.campaign-gelato:after{background:linear-gradient(90deg,#461023d9 0%,#46102380 43%,#46102308 74%)}
.campaign-gelato .campaign-wordmark{font-family:var(--display);font-size:2.4rem;font-weight:750;letter-spacing:-.08em;line-height:1;margin-bottom:22px}
.campaign-gelato .campaign-wordmark small{display:block;font-family:var(--body,sans-serif);font-size:.75rem;letter-spacing:.2em;line-height:1.6;margin-top:3px}
.campaign-gelato .campaign-kicker{color:#ffe0af;font-size:.75rem;letter-spacing:.08em}
.campaign-gelato strong{font-family:var(--display);font-weight:650;font-size:clamp(2.6rem,4.5vw,3.7rem);line-height:.96;letter-spacing:-.055em;text-shadow:0 3px 25px #4a11274d}
.campaign-flavor{font-size:.875rem;line-height:1.5;color:#ffe3cf;margin-top:12px}
.campaign-gelato .campaign-action{background:#ffe29d;color:#602339;font-weight:600;margin-top:20px}

.motion-work.is-motion-running .campaign-gelato.is-active img{animation-play-state:running}
@keyframes gelato-drift{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.10) translateY(-5px)}}
@media(max-width:1100px){.campaign-gelato{padding-top:22px;padding-bottom:30px}.campaign-gelato .campaign-wordmark{font-size:2rem;margin-bottom:18px}.campaign-gelato strong{font-size:2.7rem}}
@media(max-width:480px){.campaign-gelato strong{font-size:2.6rem}.campaign-gelato .campaign-wordmark{margin-bottom:18px}.campaign-gelato .campaign-action{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.campaign-gelato img{animation:none!important}}

/* Natural card heights, with the unique product study below social media. */
.experience-grid{align-items:start}
.experience-column{display:flex;flex-direction:column;gap:28px;min-width:0}
.experience-column .experience-card-footer{margin-top:0}
.food-study{display:grid;grid-template-columns:1fr 1fr;background:#16111c;overflow:hidden;min-width:0}
.food-study-copy{padding:26px 24px;align-self:center;min-width:0}
.food-study .eyebrow{font-size:.75rem;letter-spacing:.07em;margin-bottom:14px}
.food-study h3{font-size:clamp(1.55rem,2.4vw,2rem);line-height:1.08;letter-spacing:-.05em}
.food-study h3 span{color:#bd85e7}
.food-study-copy>p:not(.eyebrow){font-size:.9375rem;line-height:1.65;color:#b8a9c5;margin-top:16px}
.food-study .inline-link{font-size:.875rem;line-height:1.6;margin-top:20px}
.food-study figure{position:relative;min-width:0;min-height:280px;margin:0;background:#28182f}
.food-study img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.food-study figcaption{position:absolute;bottom:0;left:0;right:0;padding:22px 12px 12px;background:linear-gradient(transparent,#190a22db);font-size:.75rem;color:white;text-align:center}
@media(max-width:1100px) and (min-width:801px){.food-study-copy{padding:22px 18px}.food-study-copy>p:not(.eyebrow){font-size:.875rem}.food-study figure{min-height:310px}}
@media(max-width:800px){.experience-column{gap:25px}.food-study-copy{padding:28px}.food-study h3{font-size:2rem}}
@media(max-width:480px){.food-study{grid-template-columns:1fr}.food-study-copy{padding:26px 22px}.food-study figure{min-height:0;aspect-ratio:1}.food-study img{position:static;aspect-ratio:1}.food-study h3{font-size:2rem}}

/* Two focused media demonstrations, with visible inputs and outcomes. */
.experience-card .campaign-selectors{padding-top:0;padding-bottom:20px}
.media-context{padding:20px 24px 0}
.media-context-label{font-size:.75rem;letter-spacing:.08em;color:#c9a9de;margin:0 0 12px}
.media-source-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.media-source-strip figure{margin:0;min-width:0}
.media-source-strip img{width:100%;aspect-ratio:1.6;object-fit:cover;border:1px solid #79559160}
.media-source-strip figcaption{font-size:.75rem;color:#cbbbd5;line-height:1.5;margin-top:5px}
.media-avatar-input{display:flex;align-items:center;gap:18px;min-height:95px}
.media-avatar-input img{width:75px;height:95px;object-fit:cover;object-position:50% 20%;flex-shrink:0}
.media-avatar-input p{font-size:1rem;line-height:1.6;color:#f5eafb}
.media-avatar-input p span{font-size:.875rem;color:#bba7c8}
.media-context .campaign-description{padding:18px 0 0;font-size:1rem;line-height:1.7;min-height:0;color:#e2d3eb}
.media-disclosure{font-size:.8125rem;line-height:1.6;color:#ad98bb;margin-top:10px}
@media(max-width:800px){.media-context{padding-inline:28px}}
@media(max-width:480px){.media-context{padding:18px 16px 0}.media-avatar-input{gap:12px}.campaign-selectors button{font-size:.8125rem}}