/* A project gallery with three expanding scenes and two responsive reveals. */
:root{--motion-ease:cubic-bezier(.22,.8,.25,1)}
.work-section .section-top{padding-block:23px}
.lead-art{height:550px;background:#18392e;isolation:isolate}
.art-word{left:4%;top:auto;bottom:2px;font-size:150px;line-height:1;color:#8bab9b;opacity:.24;z-index:-1}
.lead-art .lead-desktop{width:69%;left:16%;top:77px;transform:translate(var(--lx,0px),var(--ly,0px)) rotate(-3deg);box-shadow:0 24px 50px #061a2640;transition:transform .8s var(--motion-ease),opacity .5s}
.lead-art .lead-mobile{right:10%;top:78px;width:185px;height:395px;transform:translate(var(--px,0px),var(--py,0px)) rotate(8deg);filter:drop-shadow(0 16px 16px #061a2630);transition:transform .8s var(--motion-ease),width .6s,height .6s,right .6s,top .6s}
.lead-art[data-lead-view=mobile] .lead-desktop{transform:translate(-120px,30px) rotate(-6deg);opacity:.2}
.lead-art[data-lead-view=mobile] .lead-mobile{width:220px;height:460px;right:calc(50% - 110px);top:55px;transform:rotate(0)}
.lead-controls{position:absolute;top:25px;left:48px;display:flex;gap:4px;z-index:3}
.lead-controls button{width:42px;height:38px;display:grid;place-items:center;background:transparent;color:#edf5eb;border:1px solid #849a8d;border-radius:3px}
.lead-controls button[aria-pressed=true]{background:#d9f289;color:#1a3024;border-color:#d9f289}
.lead-tag{position:absolute;right:48px;top:28px;font:12px 'Manrope',sans-serif;color:#c5d6c7}
.lead-art .art-caption{color:#e4eee4;bottom:26px}.lead-art .art-caption .square{background:#d9f289}
.lead-art .circle-button{background:#d9f289;color:#162d21}.lead-art .circle-button:hover{background:#fff}
.lead-caption{padding-block:25px 48px}.lead-caption .index{color:#487058}
.collection-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;padding-block:28px 35px;border-top:1px solid var(--line)}
.collection-heading h3{font-size:42px;line-height:1.1;font-weight:700}.collection-heading h3 span{color:var(--coral)}
.collection-heading p{font-size:17px;color:var(--muted);line-height:1.6}.collection-mark svg{height:57px;width:57px;stroke-width:1}
.more-work{display:flex;gap:12px;align-items:stretch;padding-bottom:45px}
.more-work .project-item{flex:1 1 0;min-width:0;transition:flex-grow .75s var(--motion-ease);position:relative}
.more-work[data-open] .project-item{flex-grow:.78}.more-work[data-open] .project-item[data-expanded=true]{flex-grow:2.45}
.more-work .project-media{position:relative}.more-work .project-visual{height:505px;text-align:start;isolation:isolate}
.project-visual .stage-word{position:absolute;top:48px;left:22px;right:22px;z-index:-1;font:800 64px/1.05 'Manrope',sans-serif;text-align:left;white-space:nowrap;pointer-events:none}
.project-visual .stage-kicker{position:absolute;top:22px;right:22px;display:flex;gap:8px;align-items:center;font-size:12px;pointer-events:none}
.stage-kicker svg{width:15px;height:15px}.stage-subline{position:absolute;bottom:24px;right:24px;font-size:15px;font-weight:600;pointer-events:none;max-width:calc(100% - 90px)}
.project-visual.budafeast{background:#eeddb9;color:#40372a}.budafeast .stage-word{color:#aa8a4d}
.more-work .budafeast .phone-shot{object-fit:contain;border:5px solid #26362b;border-radius:25px;background:#26362b}
.project-visual.poolcleaner{background:#c6dfd1;color:#194d3b}.poolcleaner .stage-word{font:800 45px/1.1 var(--font);color:#719f88;right:22px;left:auto;text-align:right;white-space:normal;max-width:260px}
.project-visual.mrmoto{background:#e95534;color:#1e231f}.mrmoto .stage-word{color:#9c301b;font-style:italic}
.more-work .project-visual .phone-shot{width:190px;height:350px;left:calc(50% - 95px);top:120px;opacity:1;object-fit:contain;transform:rotate(-7deg);transition:transform .85s var(--motion-ease),opacity .5s,left .8s var(--motion-ease)}
.more-work .poolcleaner .phone-shot{width:155px;height:335px;left:calc(50% - 77.5px);top:128px;transform:rotate(5deg);border:5px solid #21392d;border-radius:25px;object-fit:cover;object-position:top;box-shadow:0 18px 26px #1a4d351c}
.more-work .mrmoto .phone-shot{transform:rotate(-9deg);filter:drop-shadow(0 15px 12px #6c1f151c)}
.more-work .project-visual .desktop-shot{width:calc(100% - 44px);height:320px;top:135px;left:22px;opacity:1;transform:translateY(14px);clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--motion-ease),transform .8s var(--motion-ease);object-fit:contain}
.more-work .poolcleaner .desktop-shot{clip-path:inset(100% 0 0 0)}.more-work .mrmoto .desktop-shot{clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.more-work .project-visual[data-preview=desktop] .desktop-shot,.more-work .project-visual[data-pinned][data-preview=desktop]:is(:hover,:focus-visible) .desktop-shot{opacity:1;clip-path:inset(0);transform:none}
.more-work .mrmoto[data-preview=desktop] .desktop-shot,.more-work .mrmoto[data-pinned][data-preview=desktop]:is(:hover,:focus-visible) .desktop-shot{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.more-work .project-visual[data-preview=desktop] .phone-shot,.more-work .project-visual[data-pinned][data-preview=desktop]:is(:hover,:focus-visible) .phone-shot{opacity:0;transform:translate(-80px,50px) rotate(-15deg)}
.more-work .project-visual[data-preview=mobile] .phone-shot,.more-work .project-visual[data-pinned][data-preview=mobile]:is(:hover,:focus-visible) .phone-shot{opacity:1;transform:rotate(-7deg)}
.more-work .poolcleaner[data-preview=mobile] .phone-shot,.more-work .poolcleaner[data-pinned][data-preview=mobile]:is(:hover,:focus-visible) .phone-shot{transform:rotate(5deg)}
.more-work .project-visual[data-preview=mobile] .desktop-shot,.more-work .project-visual[data-pinned][data-preview=mobile]:is(:hover,:focus-visible) .desktop-shot{opacity:1;clip-path:inset(0 100% 0 0)}
.more-work .poolcleaner[data-preview=mobile] .desktop-shot{clip-path:inset(100% 0 0 0)}.more-work .mrmoto[data-preview=mobile] .desktop-shot{clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.more-work .media-toolbar{min-height:56px}.expand-preview{width:36px;height:34px;background:transparent;display:grid;place-items:center;border:1px solid transparent;border-radius:3px;color:var(--muted)}
.expand-preview[aria-expanded=true]{background:var(--ink);color:#fff}.expand-preview svg{width:18px;height:18px}
.more-work .project-caption{padding-top:17px;padding-bottom:0;min-height:155px;gap:8px}.more-work .project-caption h3{font-size:24px;overflow-wrap:normal}.more-work .project-caption p{font-size:15px;max-width:440px}.more-work .index{font-size:11px}
.project-cursor{position:absolute;top:0;left:0;z-index:8;display:flex;align-items:center;gap:9px;pointer-events:none;padding:8px 12px;background:var(--ink);color:white;font-size:12px;opacity:0;transition:opacity .15s;white-space:nowrap}.project-cursor svg{width:15px;height:15px}.project-visual[data-pointer=true] .project-cursor{opacity:1}
.desktop-work{gap:20px;padding-top:8px;padding-bottom:22px}.desktop-work .project-visual{height:390px;isolation:isolate}
.desktop-work .stage-word{font-size:44px;top:22px;left:24px;color:#9f717e}.desktop-work .calmcat .stage-word{font-size:38px;color:#648c6a}
.desktop-work .project-visual .desktop-shot,.desktop-work .project-visual[data-preview=mobile] .desktop-shot,.desktop-work .project-visual[data-pinned][data-preview=mobile]:is(:hover,:focus-visible) .desktop-shot{opacity:1;transform:none;height:77%;width:90%;left:5%;top:20%;clip-path:none}
.mobile-peek{position:absolute;inset:0;z-index:1;background:#cda9b7;clip-path:inset(0 0 0 calc(100% - var(--reveal,0%)));transition:clip-path .75s var(--motion-ease)}
.calmcat .mobile-peek{background:#b7c8ad}.desktop-work .mobile-peek .phone-shot,.desktop-work .project-visual[data-preview=mobile] .phone-shot,.desktop-work .project-visual[data-pinned][data-preview=desktop]:is(:hover,:focus-visible) .phone-shot,.desktop-work .project-visual[data-pinned][data-preview=mobile]:is(:hover,:focus-visible) .phone-shot{opacity:1;transform:rotate(5deg);height:90%;width:200px;left:auto;right:16%;top:5%;object-fit:contain}
.peek-divider{position:absolute;z-index:2;top:0;bottom:0;right:var(--reveal,0%);width:2px;background:#fff;opacity:0;transition:right .75s var(--motion-ease),opacity .4s;pointer-events:none}
.project-visual[data-revealing=true] .peek-divider{opacity:1}.peek-divider::after{content:'';position:absolute;top:45%;width:6px;height:38px;left:-2px;background:white;border-radius:3px}
.project-visual[data-dragging=true] .mobile-peek,.project-visual[data-dragging=true] .peek-divider{transition:none}
.reveal-control{display:flex;direction:ltr;align-items:center;gap:10px;width:100%;padding:11px 2px 5px;color:var(--muted)}.reveal-control svg{width:16px;height:16px}.reveal-control input{direction:ltr;width:100%;min-width:0;accent-color:var(--ink);height:20px;cursor:ew-resize}.desktop-work .media-toolbar{border-bottom:0;padding-top:3px}.desktop-work .project-caption{border-top:1px solid var(--line);padding-top:18px}
@media(min-width:761px){.more-work .project-item[data-expanded=false] .project-caption h3{font-size:22px}.more-work[data-open] .project-item[data-expanded=false] .stage-word{opacity:.6}.more-work[data-open] .project-item[data-expanded=false] .stage-subline{font-size:13px}.more-work[data-open] .project-item[data-expanded=false] .project-caption p{font-size:14px}}
@media(min-width:1600px){.lead-art{height:610px}.lead-art .lead-desktop{width:64%;left:19%;top:70px}.lead-art .lead-mobile{height:450px;width:215px;top:70px}}
@media(max-width:1100px){.more-work{gap:10px}.more-work .project-visual{height:455px}.more-work .project-visual .phone-shot{width:170px;height:310px;left:calc(50% - 85px);top:120px}.more-work .poolcleaner .phone-shot{width:136px;height:293px;left:calc(50% - 68px);top:130px}.more-work .project-visual .desktop-shot{height:270px;top:137px}.project-visual .stage-word{font-size:52px;left:17px}.poolcleaner .stage-word{font-size:37px}.more-work .preview-open{font-size:12px}.more-work .media-toolbar{gap:4px}.preview-views button{width:30px}.expand-preview{width:28px}.collection-heading h3{font-size:36px}.collection-heading p{font-size:16px}.desktop-work .project-visual{height:340px}.desktop-work .mobile-peek .phone-shot{right:12%;height:90%;width:170px}.lead-art .lead-mobile{right:6%}.lead-art .lead-desktop{width:76%;left:10%}}
@media(max-width:900px) and (min-width:761px){.more-work .project-caption h3,.more-work .project-caption h3[dir=ltr]{font-size:20px}.more-work[data-open] .project-item{flex-grow:.7}.more-work[data-open] .project-item[data-expanded=true]{flex-grow:2.5}.more-work[data-open] .project-item[data-expanded=false] .preview-open{font-size:0;gap:0}.more-work[data-open] .project-item[data-expanded=false] .project-caption h3{font-size:18px}.more-work .project-caption p{font-size:14px}.project-visual .stage-kicker{right:15px;font-size:11px}}
@media(max-width:760px){.lead-art{height:390px}.art-word{font-size:76px;bottom:5px;top:auto}.lead-art .lead-desktop{width:110%;left:-6%;top:118px;transform:rotate(-4deg)}.lead-art .lead-mobile{width:125px;height:270px;right:-9px;top:75px;transform:rotate(8deg)}.lead-art[data-lead-view=mobile] .lead-mobile{width:155px;height:325px;right:calc(50% - 77.5px);top:45px}.lead-controls{top:17px;left:23px}.lead-controls button{width:36px;height:34px}.lead-tag{right:23px;top:26px;font-size:10px}.lead-art .art-caption{font-size:11px;left:23px;bottom:18px}.collection-heading{align-items:start;padding-block:24px 25px;gap:18px;flex-wrap:wrap}.collection-heading h3{font-size:35px}.collection-heading p{font-size:15px;max-width:250px}.collection-mark{display:none}.more-work{display:block;padding-bottom:20px}.more-work .project-item{margin-bottom:25px}.more-work .project-visual{height:460px}.more-work .project-visual .phone-shot{width:190px;height:340px;left:calc(50% - 95px);top:105px}.more-work .poolcleaner .phone-shot{width:150px;height:324px;left:calc(50% - 75px);top:114px}.project-visual .stage-word{top:45px;font-size:57px}.poolcleaner .stage-word{font-size:39px;max-width:220px}.project-visual .stage-kicker{top:18px;right:20px}.stage-subline{bottom:21px;font-size:14px}.more-work .project-visual .desktop-shot{height:310px;top:115px;width:calc(100% - 24px);left:12px}.more-work .project-caption{min-height:0;flex-direction:row;gap:15px;padding-bottom:8px}.more-work .project-caption p{max-width:170px;font-size:14px}.more-work .project-caption h3{font-size:23px}.expand-preview{display:none}.more-work .media-toolbar{gap:10px}.preview-views button{width:38px}.more-work .preview-open{font-size:13px}.project-cursor{display:none}.desktop-work{display:block;padding-bottom:15px}.desktop-work .project-item{margin-bottom:20px}.desktop-work .project-visual{height:345px}.desktop-work .project-visual .desktop-shot{height:73%;top:24%;width:94%;left:3%}.desktop-work .stage-word{font-size:37px;top:24px}.desktop-work .calmcat .stage-word{font-size:32px}.desktop-work .mobile-peek .phone-shot{height:91%;width:170px;right:11%;top:4.5%}.desktop-work .project-caption{padding-bottom:15px}.reveal-control{padding-top:13px}.lead-caption{padding-bottom:30px}}
@media(max-width:370px){.more-work .project-caption{flex-direction:column}.more-work .project-caption p{max-width:none}.collection-heading h3{font-size:33px}.lead-tag{font-size:9px}.lead-controls{left:17px}.stage-subline{font-size:13px}.project-visual .stage-word{font-size:50px}.poolcleaner .stage-word{font-size:36px}.desktop-work .stage-word{font-size:30px}.desktop-work .calmcat .stage-word{font-size:28px}.desktop-work .mobile-peek .phone-shot{right:9%}}
.more-work .project-visual .phone-shot{height:325px}.more-work .poolcleaner .phone-shot{height:310px;width:144px;left:calc(50% - 72px)}
@media(min-width:761px){.more-work[data-open] .project-item[data-expanded=false] .stage-subline{opacity:0}.more-work[data-open] .project-item[data-expanded=false] .poolcleaner .stage-word{white-space:nowrap;font-size:32px;max-width:none}}
@media(max-width:1100px) and (min-width:761px){.more-work .project-visual .phone-shot{height:295px}.more-work .poolcleaner .phone-shot{height:280px;width:130px;left:calc(50% - 65px)}.stage-subline{display:none}}
@media(max-width:760px){.more-work .project-visual .phone-shot{height:310px}.more-work .poolcleaner .phone-shot{height:295px;width:137px;left:calc(50% - 68.5px)}}
@media(prefers-reduced-motion:reduce){.lead-art .lead-desktop,.lead-art .lead-mobile{transform:none!important}.more-work .project-item,.project-visual .desktop-shot,.project-visual .phone-shot,.mobile-peek,.peek-divider{transition:none!important}.project-cursor{display:none!important}}
