@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;450;500;600&display=swap');
:root{font-family:'Google Sans Flex',Arial,sans-serif;color:#111;background:#f3f3f3;font-synthesis:none;--ease:cubic-bezier(.22,1,.36,1);--blue:#073bff;--orange:#ff4916}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,a:focus-visible,.case-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:5px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}.portfolio{height:100svh;min-height:680px;padding:0 3.5vw;display:flex;flex-direction:column;max-width:1800px;margin:auto}.intro{text-align:center;height:29svh;min-height:180px;display:flex;justify-content:center;flex-direction:column;flex-shrink:0;transition:opacity .3s,transform .6s var(--ease)}h1{font-size:clamp(27px,2.25vw,38px);font-weight:400;line-height:1.25;margin:0 0 12px}.intro p{font-size:clamp(20px,1.65vw,28px);margin:0;display:flex;justify-content:center;gap:.3em}.roles{display:inline-grid;text-align:right;width:5.3em;color:#949494;overflow:hidden;vertical-align:bottom}.roles span{grid-area:1/1;display:block}.board{display:grid;grid-template-columns:1.05fr 1.05fr .78fr 1.52fr;grid-template-rows:1fr 1fr;gap:clamp(14px,1.5vw,24px);position:relative}.card{position:relative;isolation:isolate;min-width:0;background:#fff;border-radius:25px;padding:0;text-align:left;transition:transform .6s var(--ease),border-radius .6s var(--ease),box-shadow .4s;animation:settle .8s var(--ease) both;animation-delay:calc(var(--i)*65ms);overflow:visible}.card:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);border-radius:inherit;clip-path:circle(0% at 95% 90%);transition:clip-path .65s var(--ease)}.card:is(:hover,:focus-visible,.revealed):before{clip-path:circle(150% at 95% 90%)}.card:active{transform:scale(.98)}.card>img{position:absolute;object-fit:contain;pointer-events:none;transition:transform .7s var(--ease),opacity .45s;width:95%;height:100%;left:2.5%;top:-14%}.card-label{position:absolute;bottom:17px;left:23px;right:17px;display:flex;align-items:center;justify-content:space-between;font-size:15px;gap:10px;z-index:3}.action,.plus{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#f1f1f1;flex:none;transition:background .4s,color .4s}.action svg{width:21px;height:21px}.card:is(:hover,:focus-visible) .action{background:var(--blue);color:#fff}.plus{font-size:23px}.personal-copy,.work-copy{position:absolute;left:25px;right:25px;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .6s var(--ease);pointer-events:none}.work-copy{font-size:clamp(19px,1.8vw,28px);line-height:1.2;bottom:74px}.work:is(:hover,:focus-visible) .work-copy{opacity:1;transform:none}.work:is(:hover,:focus-visible)>img{transform:translateY(-30px) scale(.88)}.portrait{grid-row:1/3;overflow:hidden}.portrait>img{height:98%;width:115%;left:-7.5%;top:8%;object-position:bottom}.portrait .thought{opacity:0}.portrait .personal-copy{top:26px}.personal-copy small{display:block;font-size:14px;margin-bottom:17px}.personal-copy strong{font-size:clamp(23px,2.1vw,33px);font-weight:400;line-height:1.16;display:block}.personal-copy>span{display:block;font-size:16px;line-height:1.5;margin-top:17px}.personal:is(:hover,:focus-visible,.revealed) .personal-copy{opacity:1;transform:none}.portrait:is(:hover,:focus-visible,.revealed) .rest{opacity:0}.portrait:is(:hover,:focus-visible,.revealed) .thought{opacity:1;transform:translateY(22%) scale(.8)}.music .personal-copy,.coffee .personal-copy{top:30px}.music:is(:hover,:focus-visible,.revealed)>img,.coffee:is(:hover,:focus-visible,.revealed)>img{opacity:.12;transform:translateX(18%) scale(.85)}.music>img{width:80%;left:10%;top:-9%}.coffee>img{width:75%;left:12.5%;top:-8%}.television>img{height:114%;top:-24%}.volvo{grid-column:2/4}.volvo>img{width:92%;height:115%;left:4%;top:-19%}.kry{grid-column:4}.kry>img{height:110%;width:55%;left:43%;top:-17%;transform:rotate(10deg)}.kry .work-copy{right:42%}.kry:is(:hover,:focus-visible)>img{transform:rotate(5deg) translateY(-15px) scale(.9)}footer{display:flex;justify-content:flex-end;align-items:center;gap:13px;margin-top:auto;padding:24px 0;font-size:14px}footer a:hover{text-decoration:underline}@keyframes settle{from{opacity:.7;transform:translateY(-25px) rotate(-1.2deg)}60%{opacity:1;transform:translateY(3px) rotate(.2deg)}to{transform:none}}
body.case-open{overflow:hidden}.case-open .intro{opacity:0;transform:translateY(-25px);pointer-events:none}.case-open .board{position:fixed;left:22px;top:34px;bottom:34px;width:125px;height:auto;min-height:0;display:flex;flex-direction:column;gap:12px;z-index:5}.case-open .board .card{height:calc((100svh - 130px)/6);min-height:68px;flex:1;border-radius:16px;animation:none;overflow:hidden}.case-open .board .card>img{top:-7%;height:100%;width:90%;left:5%;transform:none}.case-open .board .card-label{font-size:12px;left:11px;bottom:8px;right:9px}.case-open .board .action,.case-open .board .plus{display:none}.case-open .board .personal-copy,.case-open .board .work-copy{display:none}.case-open .board .portrait .thought{display:none}.case-open .board .portrait .rest{opacity:1}.case-open .board .card.selected{background:#dfe5ff}.case-open footer{opacity:0;pointer-events:none}.case-shell{position:fixed;left:172px;right:28px;top:28px;bottom:28px;background:#fff;border-radius:30px;z-index:10;overflow:hidden;transform-origin:top left}.case-shell[hidden]{display:none}.case-toolbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 25px 0 42px}.case-breadcrumb{font-size:14px;color:#707070}.close{width:37px;height:37px;background:#f3f3f3;border-radius:50%;font-size:26px;line-height:1;transition:background .3s,transform .3s}.close:hover{background:#dfe5ff;transform:rotate(90deg)}.case-scroll{height:calc(100% - 100px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d9d9d9 transparent;scroll-behavior:smooth}.case-layout{display:grid;grid-template-columns:47% 53%;padding:0 44px;gap:0}.case-text{min-width:0;padding-right:48px}.chapter{min-height:calc(100svh - 158px);display:flex;flex-direction:column;justify-content:center;padding:60px 0 85px;scroll-margin-top:0}.chapter h2{font-size:clamp(40px,5.4vw,82px);font-weight:400;line-height:1.05;margin:0 0 28px;letter-spacing:-.025em}.chapter:not(:first-child) h2{font-size:clamp(34px,3.9vw,60px);line-height:1.1}.chapter p{font-size:clamp(17px,1.5vw,23px);line-height:1.55;max-width:520px;margin:0}.chapter .date{font-size:14px;letter-spacing:.12em;margin-bottom:35px}.chapter .case-title{font-size:24px;margin-bottom:20px}.facts{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}.facts span{font-size:14px;padding:10px 13px;border-radius:11px;background:#f3f3f3}.chapter-number{font-size:14px;letter-spacing:.1em;color:#777;margin-bottom:25px}.visual-column{position:relative;min-width:0}.visual-stage{position:sticky;top:0;height:calc(100svh - 158px);display:flex;align-items:center;justify-content:center;overflow:visible}.visual-scene{position:absolute;inset:8% 0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .55s,transform .85s var(--ease);pointer-events:none}.visual-scene.active{opacity:1;transform:none}.scene-image{width:100%;max-height:90%;object-fit:contain;border-radius:22px}.hero-object{position:absolute;bottom:1%;width:110%;right:-13%;height:65%;object-fit:contain;z-index:2;transition:transform .6s var(--ease)}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:95%;align-self:flex-start;margin-top:12%;transform:translateY(calc(var(--progress,0)*-30px))}.tile{position:relative;aspect-ratio:1.35;border-radius:20px;background:#dfe5ff;overflow:hidden;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.tile.orange{background:#ffe9dd}.tile:before{content:'';position:absolute;width:70%;height:120%;background:var(--blue);border-radius:50%;right:-29%;top:-10%}.tile.orange:before{background:var(--orange);border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);right:-4%;top:18%}.tile strong,.tile span{position:relative;z-index:1}.tile strong{font-size:clamp(28px,3vw,47px);font-weight:400}.tile span{font-size:14px;max-width:60%}.paths{display:flex;flex-direction:column;gap:17px;width:100%}.path{background:#dfe5ff;border-radius:22px;padding:29px;display:flex;align-items:center;justify-content:space-between;gap:20px}.path:nth-child(2){background:#ffe9dd}.path:nth-child(3){background:#e4f1e7}.path strong{font-size:clamp(27px,3vw,45px);font-weight:400}.path span{font-size:15px;max-width:150px;line-height:1.4}.big-statement{background:var(--blue);color:#fff;padding:45px;border-radius:25px;font-size:clamp(30px,4vw,65px);line-height:1.1;min-height:65%;display:flex;align-items:center}.chapter-nav{height:38px;display:flex;gap:9px;justify-content:center;align-items:center}.chapter-nav button{padding:6px 12px;background:transparent;color:#777;font-size:13px;border-radius:20px}.chapter-nav button[aria-current=true]{background:#f0f2ff;color:var(--blue)}
@media(max-width:1000px){.case-shell{left:122px;right:18px}.case-open .board{width:85px;left:18px}.case-open .board .card-label{font-size:11px}.case-layout{padding:0 28px;grid-template-columns:46% 54%}.case-text{padding-right:25px}.chapter h2{font-size:54px}.tile{padding:15px}.path{padding:22px}.path span{font-size:14px}.card-label{left:16px;font-size:14px}.personal-copy,.work-copy{left:18px;right:18px}}
@media(max-width:650px){.portfolio{height:auto;min-height:100svh;padding:0 18px}.intro{height:190px;min-height:0}.board{height:auto;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,175px);gap:14px;padding-bottom:5px}.portrait{grid-column:1;grid-row:1/3}.television{grid-column:2;grid-row:1}.music{grid-column:2;grid-row:2}.volvo{grid-column:1/3;grid-row:3}.coffee{grid-column:1;grid-row:4}.kry{grid-column:2;grid-row:4}.card{border-radius:22px}.card-label{font-size:14px;bottom:12px;left:15px;right:12px}.personal-copy strong{font-size:23px}.personal-copy>span{font-size:15px}.portrait .personal-copy{top:23px}.portrait>img{top:7%}.work-copy{font-size:23px}.volvo>img{height:120%;top:-26%;width:80%;left:10%}.coffee .personal-copy,.music .personal-copy{top:20px}.coffee .personal-copy strong,.music .personal-copy strong{font-size:21px}.coffee .personal-copy>span{display:none}.kry .work-copy{font-size:18px;left:13px}.kry>img{width:65%;left:35%;top:-8%;height:92%}footer{padding:30px 0}.case-open .board{display:none}.case-shell{inset:12px;border-radius:24px}.case-toolbar{height:55px;padding:0 17px 0 24px}.case-scroll{height:calc(100% - 97px)}.case-layout{display:block;padding:0 24px}.case-text{padding:0}.chapter{min-height:0;padding:35px 0 60px}.chapter h2{font-size:51px}.chapter:not(:first-child) h2{font-size:37px}.chapter p{font-size:18px}.chapter .date{margin-bottom:23px}.chapter .case-title{font-size:22px}.visual-column{display:none}.mobile-visual{height:340px;position:relative;margin-top:35px;overflow:hidden;border-radius:20px}.mobile-visual .visual-scene{inset:0;opacity:1;transform:none}.mobile-visual .tiles{margin-top:0}.mobile-visual .tile{aspect-ratio:1.45}.mobile-visual .hero-object{right:-6%;bottom:-12%;height:80%}.mobile-visual .big-statement{height:100%;font-size:40px;padding:28px}.mobile-visual .paths{gap:10px}.mobile-visual .path{padding:20px}.chapter-nav{height:42px;gap:0}.chapter-nav button{font-size:12px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.focus-tile{width:100%;background:#dfe5ff;color:#111;position:relative;overflow:hidden;isolation:isolate}.focus-tile:before{content:"";position:absolute;right:-45%;top:-10%;height:120%;width:95%;border-radius:50%;background:var(--blue);z-index:-1}.visual-scene:has(.focus-tile){transform:translate(12%,-14%) scale(.5);transform-origin:top right}.visual-scene.active:has(.focus-tile){transform:none}.case-open .card:disabled{opacity:.7}

/* Quieter five-card composition, following the supplied board. */
.board{grid-template-columns:1fr .9fr 1.3fr;grid-template-rows:1fr 1fr;max-width:1260px;width:100%;margin-inline:auto;gap:22px}
.card{border-radius:24px;animation-name:quiet-settle}
@keyframes quiet-settle{from{opacity:.75;transform:translateY(-14px)}to{opacity:1;transform:none}}
.television{grid-column:1;grid-row:1}.music{grid-column:2;grid-row:1}.coffee{grid-column:3;grid-row:1}.volvo{grid-column:1/3;grid-row:2}.kry{grid-column:3;grid-row:2;overflow:hidden}
.card-label{opacity:0;transform:translateY(5px);transition:opacity .35s,transform .6s var(--ease);font-size:14px;bottom:17px}
.card:is(:hover,:focus-visible,.revealed) .card-label{opacity:1;transform:none}
.action{background:transparent;width:28px;height:28px}
.card:is(:hover,:focus-visible) .action{background:transparent;color:#111}
.card:active{transform:scale(.992)}
.work-copy{font-size:clamp(20px,1.7vw,26px);bottom:63px;line-height:1.25}
.work:is(:hover,:focus-visible)>img{transform:translateY(-16px) scale(.95)}
.personal-copy small{display:none}.personal-copy strong{font-size:clamp(22px,1.8vw,29px)}
.personal-copy>span{font-size:15px;max-width:240px}
.music:is(:hover,:focus-visible,.revealed)>img,.coffee:is(:hover,:focus-visible,.revealed)>img{opacity:.09;transform:translateY(5px) scale(.97)}
.television>img{width:90%;left:5%;height:115%;top:-23%}
.music>img{width:72%;left:14%;height:85%;top:-2%}
.coffee>img{width:64%;left:18%;height:90%;top:-7%}
.volvo>img{width:88%;left:6%;height:104%;top:-4%;mix-blend-mode:multiply}
.kry>img{width:55%;left:40%;height:110%;top:8%;transform:none;object-position:bottom}
.kry .work-copy{right:45%;font-size:clamp(20px,1.6vw,25px)}
.kry:is(:hover,:focus-visible)>img{transform:translateX(6px) scale(.98)}
.hero-object{mix-blend-mode:multiply;bottom:3%;height:47%;width:106%;right:-9%}
.case-open .board{max-width:none;margin:0}.case-open .board .card{height:calc((100svh - 116px)/5);min-height:68px;flex:1}
.case-open .board .card-label{opacity:1;transform:none;font-size:11px}
.case-open .board .volvo>img{height:80%;top:0;width:94%;left:3%;mix-blend-mode:multiply}
.case-open .board .kry>img{height:95%;top:9%;width:75%;left:12.5%;object-position:bottom}
footer{font-size:14px;gap:12px}footer svg{width:15px;height:15px}
@media(max-width:650px){.board{grid-template-columns:1fr 1fr;grid-template-rows:190px 205px 185px;height:auto;min-height:0;gap:16px}.television{grid-column:1;grid-row:1}.music{grid-column:2;grid-row:1}.volvo{grid-column:1/3;grid-row:2}.coffee{grid-column:1;grid-row:3}.kry{grid-column:2;grid-row:3}.card{border-radius:22px}.card-label{opacity:0;font-size:13px;left:15px;right:12px}.work:focus-visible .card-label,.card.revealed .card-label{opacity:1}.volvo>img{width:94%;left:3%;height:100%;top:-1%}.kry>img{width:67%;left:27%;height:109%;top:7%}.kry .work-copy{font-size:19px;left:15px;right:46%}.coffee>img{width:80%;left:10%}.personal-copy strong{font-size:22px}.personal-copy{left:18px;right:18px}.mobile-visual .hero-object{height:47%;bottom:3%;right:-3%}.intro{height:190px}}
@media(hover:none){.work .card-label{opacity:1;transform:none}.work .action{width:25px;height:25px}}

/* Kry is the tall, left-hand anchor in the supplied reference. */
.board{grid-template-columns:1.05fr 1.05fr .78fr 1.52fr;grid-template-rows:1fr 1fr;max-width:1400px;gap:22px}
.kry{grid-column:1;grid-row:1/3;overflow:hidden}.television{grid-column:2;grid-row:1}.music{grid-column:3;grid-row:1}.coffee{grid-column:4;grid-row:1}.volvo{grid-column:2/5;grid-row:2;overflow:hidden}
.kry>img{width:116%;height:auto;max-height:none;left:-8%;top:auto;bottom:0;object-fit:contain;object-position:bottom;transform:none}
.kry .work-copy{top:30px;bottom:auto;left:24px;right:24px;font-size:25px;z-index:2}
.kry:is(:hover,:focus-visible)>img{transform:translateY(18px) scale(.96);opacity:.38}
.kry .card-label{z-index:3}.volvo>img{width:75%;left:12.5%;height:140%;top:-24%;object-fit:cover;object-position:50% 60%;mix-blend-mode:multiply}
.volvo:is(:hover,:focus-visible)>img{transform:translateY(-8px) scale(.98);opacity:.3}
.hero-object{height:48%;width:88%;right:0;bottom:0;object-fit:cover;object-position:50% 60%;border-radius:20px}
.case-open .board{display:flex}.case-open .board .kry>img{width:90%;height:110%;left:5%;bottom:0;top:auto;object-fit:contain;opacity:1;transform:none}
.case-open .board .volvo>img{height:90%;width:100%;top:0;left:0;object-fit:cover;object-position:50% 65%;opacity:1;transform:none}
@media(max-width:650px){.board{grid-template-columns:1fr 1fr;grid-template-rows:185px 185px 210px;height:auto;gap:16px}.kry{grid-column:1;grid-row:1/3}.television{grid-column:2;grid-row:1}.music{grid-column:2;grid-row:2}.volvo{grid-column:1;grid-row:3}.coffee{grid-column:2;grid-row:3}.kry>img{width:122%;left:-11%;bottom:0;height:auto;top:auto}.kry .work-copy{font-size:22px;left:18px;right:18px;top:22px}.volvo>img{width:100%;left:0;height:120%;top:-10%;object-position:50% 65%}.volvo .work-copy{font-size:21px}.case-open .board{display:none}}

/* Physical beginnings and an independent product, in the existing board slots. */
.asset-filters{position:absolute;pointer-events:none;overflow:hidden}
.furniture{grid-column:3;grid-row:1;overflow:hidden}
.furniture>img{width:90%;height:90%;left:5%;top:-5%}
.furniture .personal-copy{top:24px;left:18px;right:18px}
.furniture .personal-copy strong{font-size:clamp(19px,1.45vw,24px)}
.furniture .personal-copy>span{font-size:14px;line-height:1.45}
.furniture:is(:hover,:focus-visible,.revealed)>img{opacity:.08;transform:translateY(8px) scale(.97)}
.furniture .card-label{font-size:12px;left:18px;right:12px}
.ora{grid-column:4;grid-row:1;background:#FC92B2;overflow:hidden;container-type:inline-size}
.ora>.ora-mark{width:23%;height:auto;left:10%;top:42%;object-fit:contain;z-index:2;transform:none}
.ora-art{display:block;position:absolute;left:36%;top:-24%;width:65%;height:160%;pointer-events:none}
.ora-phone{position:absolute;width:62%;height:auto;overflow:visible;transition:transform .7s cubic-bezier(.25,1,.5,1);animation:phone-arrive 1.1s cubic-bezier(.25,1,.5,1) both;animation-delay:calc(320ms + var(--phone-order)*90ms);will-change:transform}
.phone-1{left:-3%;top:6%;--phone-order:0;--from-y:20px}
.phone-3{left:47%;top:-9%;--phone-order:1;--from-y:-22px}
.phone-4{left:22%;top:50%;--phone-order:2;--from-y:26px}
.phone-2{left:77%;top:34%;--phone-order:3;--from-y:-18px}
@keyframes phone-arrive{0%{transform:translateY(var(--from-y)) rotate(-2deg);opacity:.6}70%{transform:translateY(-3px) rotate(.3deg);opacity:1}86%{transform:translateY(1px)}100%{transform:none;opacity:1}}
.ora:is(:hover,:focus-visible) .phone-1{transform:translate(-5px,-7px)}
.ora:is(:hover,:focus-visible) .phone-3{transform:translate(5px,-12px)}
.ora:is(:hover,:focus-visible) .phone-4{transform:translate(-2px,7px)}
.ora:is(:hover,:focus-visible) .phone-2{transform:translate(8px,4px)}
.ora:is(:hover,:focus-visible)>.ora-mark{transform:translateY(-20px);opacity:.25}
.ora .work-copy{font-size:clamp(19px,1.7vw,26px);left:24px;right:66%;bottom:58px;z-index:3}
.ora .card-label{z-index:4}
.case-open .board .ora{background:#FC92B2;container-type:normal}
.case-open .board .ora>.ora-mark{height:auto;width:24%;left:8%;top:34%;opacity:1;transform:none}
.case-open .board .ora-art{top:-15%;left:37%;height:155%}
.case-open .board .ora-phone{animation:none;transform:none}
.case-open .board .furniture>img{opacity:1;top:0;width:85%;left:7.5%;transform:none}
.case-shell[data-case=ora]{background:#FC92B2}
.case-shell[data-case=ora] .close,.case-shell[data-case=ora] .facts span,.case-shell[data-case=ora] .chapter-nav button[aria-current=true]{background:#ffffff70;color:#111}
.case-shell[data-case=ora] .case-breadcrumb,.case-shell[data-case=ora] .chapter-number,.case-shell[data-case=ora] .chapter-nav button{color:#512637}
.ora-scene{position:relative;width:100%;height:100%;min-height:250px}
.ora-scene .ora-phone{width:58%;animation:none;transition:transform 1s cubic-bezier(.25,1,.5,1)}
.ora-scene .phone-1{left:-5%;top:18%}.ora-scene .phone-3{left:44%;top:0}.ora-scene .phone-4{left:12%;top:57%}.ora-scene .phone-2{left:63%;top:43%}
.visual-scene:has(.ora-scene){inset:4% 0;overflow:hidden;border-radius:24px}
.visual-scene:not(.active) .ora-scene .ora-phone{transform:translateY(calc(30px + var(--phone-order)*10px))}
.ora-scene.single .ora-phone{width:85%;left:7.5%;top:8%;max-height:90%}
.case-shell[data-transitioning=true] .case-scroll,.case-shell[data-transitioning=true] .case-breadcrumb,.case-shell[data-transitioning=true] .chapter-nav{opacity:0}
.case-scroll,.case-breadcrumb,.chapter-nav{transition:opacity .35s ease}
.shared-phone{position:fixed;z-index:30;pointer-events:none;margin:0;overflow:visible;will-change:transform}
@media(max-width:1000px){.furniture .personal-copy>span{font-size:12px}.furniture .personal-copy strong{font-size:18px}.ora .work-copy{right:50%;font-size:20px}}
@media(max-width:650px){.furniture{grid-column:2;grid-row:2}.ora{grid-column:2;grid-row:3}.furniture .personal-copy{top:20px;left:16px;right:16px}.furniture .personal-copy strong{font-size:20px}.furniture .personal-copy>span{font-size:13px}.ora>.ora-mark{width:25%;left:8%;top:37%}.ora-art{left:31%;top:-8%;width:95%;height:150%}.ora .work-copy{font-size:19px;left:17px;right:48%;bottom:55px}.ora:is(:hover,:focus-visible) .ora-art{opacity:.45}.mobile-visual .ora-scene{height:340px}.ora-scene .ora-phone{width:55%}.ora-scene.single .ora-phone{width:70%;left:15%;top:0}.case-shell[data-case=ora] .chapter-nav button{font-size:11px}}
body:has(.case-shell[data-transitioning=true]) .ora .ora-art{visibility:hidden}

/* Keep the board in place; only the selected card grows into the reading frame. */
.board{transition:opacity .32s ease}
body.case-focused{overflow:hidden}
.case-focused .board{opacity:0;pointer-events:none}
.board .card.selected{visibility:hidden}
.case-focused .intro{opacity:0;transform:translateY(-8px);pointer-events:none}
footer{transition:opacity .25s ease}
.case-focused footer{opacity:0;pointer-events:none}
.case-shell{inset:28px}
.case-shell[data-case=mental-health]{background:#B4E4FF}
.case-shell[data-case=mental-health] .close,.case-shell[data-case=mental-health] .facts span{background:#ffffff80}
@media(max-width:650px){.case-shell{inset:12px}}
.case-scroll,.case-breadcrumb,.chapter-nav{transition:opacity var(--case-fade,400ms) ease}
.board{transition:opacity var(--board-fade,320ms) ease}
/* The frame is the only live geometry during a morph. Content tracks are hidden. */
.case-shell[data-frame=true] [data-motion-track]{visibility:hidden}
[data-motion-track]{will-change:opacity,transform}
.case-shell[data-case=mental-health]{background:var(--hover-color,#B4E4FF)}
.return-face{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:20;opacity:0}
.return-face>.card{position:relative;width:100%;height:100%;display:block;visibility:visible!important;animation:none!important;transition:none!important;transform:none!important;border-radius:inherit}
.return-face .ora-phone{animation:none!important;transform:none!important}
.return-face .card-label,.return-face .work-copy,.return-face .personal-copy,.return-face .reveal-content{display:none!important}
@media(prefers-reduced-motion:reduce){[data-motion-track]{will-change:auto}}

/* Directional canvas movement shares the frame spring, with no opacity tween. */
body[data-board-motion=push] .portfolio{overflow:hidden}
body[data-board-motion=push] .board{opacity:1;transition:none}

/* Stop the desktop canvas at the reference width; spare space stays outside. */
@media(min-width:651px){
  .portfolio{width:100%;max-width:1464px;padding-inline:32px}
  .board{max-width:1400px}
  /* Matching side insets cap the frame without a second sizing constraint
     competing with the transition's inline bounds. */
  .case-shell{left:max(28px,calc((100% - 1400px)/2));right:max(28px,calc((100% - 1400px)/2))}
}