@charset "UTF-8";

.selected-works{overflow:hidden;padding-block:clamp(82px,8vw,140px);background:#ecefe8;color:#1b241a;font-family:Manrope,Arial,sans-serif}
.selected-works-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.6fr);align-items:end;gap:clamp(30px,6vw,100px);margin-bottom:clamp(38px,5vw,74px)}
.selected-works-head h2{max-width:910px;margin:17px 0 0;font-size:clamp(44px,5.2vw,82px);font-weight:720;line-height:1.07;letter-spacing:-.065em;text-wrap:balance}
.selected-works-head p{max-width:460px;margin:0 0 7px;color:#5b6858;font-size:clamp(15px,1.15vw,18px);line-height:1.75}
.selected-works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(45px,5vw,75px) clamp(20px,2.5vw,42px)}
.selected-work-card{min-width:0;margin:0}
.selected-work-stage{position:relative;display:grid;place-items:center;overflow:hidden;min-width:0;aspect-ratio:1.53;padding:clamp(20px,3vw,45px);background:#dce2d8;isolation:isolate}
.selected-work-stage:before{position:absolute;inset:-50%;z-index:-1;background:radial-gradient(circle at 70% 25%,#ffffffba 0,transparent 36%),radial-gradient(circle at 20% 90%,#b6c5b37a 0,transparent 38%);content:"";transition:transform .7s cubic-bezier(.22,1,.36,1)}
.selected-work-card:hover .selected-work-stage:before{transform:translate3d(-2%,2%,0) scale(1.05)}
.selected-work-zoom{position:absolute;right:19px;bottom:19px;display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff9c;border-radius:50%;background:#fbfcf5ed;color:#1d281b;font-size:22px;line-height:1;transition:transform .25s}
.selected-work-card:hover .selected-work-zoom{transform:translate(3px,-3px)}
.selected-work-paper{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:0;filter:drop-shadow(0 19px 23px #1d2d1c2c);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.selected-work-paper img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.selected-work-card:hover .selected-work-paper{transform:translateY(-6px)}
.selected-works--logo .selected-work-card:nth-child(2) .selected-work-stage{background:#d9e1d7}
.selected-works--logo .selected-work-card:nth-child(3) .selected-work-stage{background:#e5e8df}
.selected-works--logo .selected-work-card:nth-child(4) .selected-work-stage{background:#dce4d7}
.selected-works--catalog .selected-work-stage{aspect-ratio:1.58;background:#d9dfd5}
.selected-works--catalog .selected-work-card:nth-child(2) .selected-work-stage{background:#e2e5dc}
.selected-works--catalog .selected-work-card:nth-child(3) .selected-work-stage{background:#d7dfd5}
.selected-works--catalog .selected-work-card:nth-child(4) .selected-work-stage{background:#e5e8df}
.selected-works--catalog .selected-work-paper{transform:perspective(1200px) rotateY(-3deg) rotateZ(-1deg)}
.selected-works--catalog .selected-work-card:hover .selected-work-paper{transform:perspective(1200px) rotateY(0deg) rotateZ(0deg) translateY(-5px)}
.selected-works--catalog .selected-work-paper:after{position:absolute;top:5%;bottom:5%;left:50%;width:1px;background:linear-gradient(90deg,#0003,#fff8);box-shadow:0 0 8px #0003;content:"";pointer-events:none}
.selected-works--catalog .selected-work-card:nth-child(4) .selected-work-paper:after{display:none}
.selected-work-card figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:21px;padding-top:18px;border-top:1px solid #c8d1c4}
.selected-work-card figcaption>div{min-width:0}
.selected-work-card figcaption div>span{display:block;margin-bottom:10px;color:#71806d;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.selected-work-card figcaption strong{display:block;font-size:clamp(22px,2vw,32px);font-weight:700;letter-spacing:-.045em;line-height:1.23}
.selected-work-card figcaption p{max-width:520px;margin:10px 0 0;color:#687364;font-size:13px;line-height:1.65}
.selected-work-card figcaption>span{flex:none;color:#95a18f;font-size:12px;font-weight:700}
.selected-works--banner .selected-work-stage{display:flex;flex-direction:column;justify-content:center;align-items:stretch;aspect-ratio:1.55;padding:clamp(16px,2.5vw,38px);background:#dbe2dd}
.selected-work-browser{display:flex;align-items:center;gap:14px;height:33px;padding:0 13px;border:1px solid #bac5bb;border-bottom:0;border-radius:9px 9px 0 0;background:#f8faf5;color:#738071;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.selected-work-browser>span:first-child{display:flex;gap:4px}
.selected-work-browser i{display:block;width:5px;height:5px;border-radius:50%;background:#a4b0a2}
.selected-work-banner{display:block;overflow:hidden;min-height:0;flex:1;border:1px solid #bac5bb;background:#151b29;box-shadow:0 14px 26px #1d2d1c20}
.selected-work-banner img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.selected-work-card:hover .selected-work-banner img{transform:scale(1.025)}
.selected-works--banner .selected-work-card--3{grid-column:1/-1}
.selected-works--banner .selected-work-card--3 .selected-work-stage{aspect-ratio:3.25;background:#dce2dd}
.selected-works--social .selected-work-stage{aspect-ratio:auto;padding:clamp(24px,3vw,44px);background:#dbe1d8}
.selected-works--social .selected-work-card:nth-child(2) .selected-work-stage{background:#e0e5dc}
.selected-works--social .selected-work-card:nth-child(3) .selected-work-stage{background:#e5e8df}
.selected-works--social .selected-work-card:nth-child(4) .selected-work-stage{background:#d8dfd3}
.selected-work-social{display:block;width:min(70%,350px);max-width:100%;background:#fff;box-shadow:0 18px 35px #1d2d1c2d;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.selected-work-card:nth-child(even) .selected-work-social{transform:rotate(2deg)}
.selected-work-card:hover .selected-work-social{transform:rotate(0deg) translateY(-6px)}
.selected-work-social-top{display:flex;align-items:center;gap:7px;height:31px;padding-inline:10px;color:#323b30;font-size:10px}
.selected-work-social-top i{width:16px;height:16px;border-radius:50%;background:#d3dccd}
.selected-work-social-top b{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap;font-size:9px;letter-spacing:.05em}
.selected-work-social-top>span{font-size:13px;line-height:1}
.selected-work-social img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.selected-work-social-bottom{display:flex;align-items:center;gap:13px;height:33px;padding-inline:11px;color:#3c453a;font-size:18px;line-height:1}
.selected-work-social-bottom i{font-style:normal}
.selected-work-social-bottom i:last-child{margin-left:auto}
.selected-works-foot{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(45px,5vw,75px);padding-top:22px;border-top:1px solid #c7d0c3;color:#697666;font-size:12px}
.selected-works-foot>a{display:inline-flex;align-items:center;gap:35px;padding-bottom:7px;border-bottom:1px solid #273426;color:#233023;font-size:14px;font-weight:700;white-space:nowrap}
.selected-works-foot>a span{font-size:21px;line-height:1;transition:transform .25s}
.selected-works-foot>a:hover span{transform:translate(3px,-3px)}
@media(max-width:850px){.selected-works-head{grid-template-columns:1fr;gap:19px}.selected-works-head p{max-width:650px}.selected-work-social{width:min(70%,310px)}}
@media(max-width:620px){.selected-works{padding-block:75px 85px}.selected-works-head{margin-bottom:37px}.selected-works-head h2{font-size:clamp(39px,10vw,57px)}.selected-works-grid{grid-template-columns:1fr;gap:41px}.selected-work-stage{aspect-ratio:1.38;padding:20px}.selected-works--catalog .selected-work-stage{aspect-ratio:1.4}.selected-works--banner .selected-work-stage{aspect-ratio:1.42}.selected-works--banner .selected-work-card--3{grid-column:auto}.selected-works--banner .selected-work-card--3 .selected-work-stage{aspect-ratio:2.15}.selected-works--social .selected-work-stage{aspect-ratio:auto;padding:20px}.selected-work-social{width:min(70%,320px)}.selected-work-card figcaption{margin-top:16px;padding-top:14px}.selected-work-card figcaption strong{font-size:23px}.selected-works-foot{align-items:flex-start;flex-direction:column;gap:17px}}
@media(prefers-reduced-motion:reduce){.selected-works *,.selected-works *:before,.selected-works *:after{transition:none!important}}