/* Real work presented as objects: paper for branding, a Mac for web. */
.unit-page .comm-landing-pair{display:block}
.unit-page .comm-landing-pair .comm-landing-row{display:block;padding:65px 0 75px}
.unit-page .comm-landing-pair .comm-landing-copy{width:100%;text-align:center;margin:0 auto 36px}
.unit-page .comm-landing-pair .comm-landing-preview{height:auto;max-width:1050px}
.unit-page .comm-landing-row{scroll-margin-top:110px}
.unit-page .comm-landing-copy h2{margin-top:0}
.object-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:20px 0}
.object-controls[hidden]{display:none}
.object-controls button{width:44px;height:44px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff09;color:#eee;font:400 18px/1 sans-serif;cursor:pointer}
.object-controls button:hover:not(:disabled){background:#ffffff20}
.object-controls button:disabled{opacity:.25;cursor:default}
.object-controls span{min-width:78px;text-align:center;color:#aaa;font-size:12px;font-variant-numeric:tabular-nums}
.branding-objects{width:100%;max-width:1050px;margin:auto}
.brand-picker{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.brand-picker button{min-height:42px;padding:11px 18px;border:1px solid #ffffff26;border-radius:30px;background:#ffffff05;color:#a1a1a6;font:500 12px/1.4 var(--body,sans-serif);cursor:pointer}
.brand-picker button[aria-pressed=true]{color:#101014;background:#eee;border-color:#eee}
.brand-object[hidden],.paper-spread[hidden]{display:none}
.paper-stage{height:440px;display:flex;align-items:center;justify-content:center;perspective:1300px;position:relative;margin:0 auto;max-width:930px;padding:20px 45px}
.paper-spread{display:flex;align-items:center;justify-content:center;position:relative;max-width:100%;width:auto;filter:drop-shadow(0 35px 24px #0008);transform:rotateX(9deg) rotateZ(-3deg);transition:transform .4s;isolation:isolate}
.paper-sheet{position:relative;display:block;flex:0 1 auto;min-width:0;margin:0;border:0;background:#eee;padding:0;cursor:zoom-in;box-shadow:0 1px 0 #fff,0 3px 0 #aaa,0 5px 0 #ddd;transform-style:preserve-3d}
.paper-sheet img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
.paper-sheet:first-child{transform:rotateY(7deg);transform-origin:right center;z-index:2}
.paper-sheet:nth-child(2){transform:rotateY(-7deg);transform-origin:left center}
.paper-sheet:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 80%,#0003);pointer-events:none}
.paper-sheet:nth-child(even):after{background:linear-gradient(90deg,#0003,transparent 15%,#ffffff0b 60%,transparent)}
.paper-booklet .paper-spread{max-width:580px}
.paper-square-book .paper-spread{max-width:710px}
.paper-accordion .paper-spread{transform:rotateX(13deg) rotateZ(-4deg);max-width:870px}
.paper-accordion .paper-sheet{width:33.333%;box-shadow:0 1px 0 #ddd,0 3px 0 #999}
.paper-accordion .paper-sheet:nth-child(2){transform:rotateY(-15deg);transform-origin:left center}
.paper-accordion .paper-sheet:nth-child(3){transform:rotateY(9deg);transform-origin:left center}
.paper-cards .paper-spread{align-items:center;gap:30px;max-width:650px}
.paper-cards .paper-sheet{width:48%;box-shadow:0 3px 2px #ddd;border-radius:4px;overflow:hidden;transform:rotate(-9deg)}
.paper-cards .paper-sheet:nth-child(2){transform:rotate(8deg) translateY(25px);margin-left:-35px}
.paper-cards .paper-sheet:after{background:linear-gradient(125deg,#ffffff10,transparent)}
.paper-caption{text-align:center;margin:15px 0 0}
.paper-caption h3{font-size:clamp(25px,3vw,37px);line-height:1.15;font-weight:650;letter-spacing:-.04em;margin:0 0 9px}
.paper-caption p,.paper-help{font-size:12px;line-height:1.6;color:#a1a1a6;margin:0;text-align:center}
.paper-help{font-size:11px;color:#888}
.mac-presentation{max-width:1050px;margin:30px auto 0;width:100%}
.macbook{position:relative;width:100%;padding:0 6.5% 15px;filter:drop-shadow(0 24px 28px #0009)}
.mac-lid{position:relative;border-radius:20px 20px 8px 8px;background:linear-gradient(110deg,#55565b,#16171b 8%,#191a1e 90%,#696a70);border:1px solid #a4a5ac88;padding:22px 13px 24px;box-shadow:inset 0 0 0 3px #08090b}
.mac-camera{position:absolute;width:35px;height:12px;border-radius:0 0 8px 8px;left:calc(50% - 17px);top:5px;background:#030405}
.mac-camera:after{content:"";position:absolute;left:15px;top:3px;width:4px;height:4px;border-radius:50%;background:#152029;box-shadow:0 0 0 1px #ffffff10}
.mac-screen{position:relative;background:#000;aspect-ratio:1440/1000;overflow:hidden;border-radius:3px}
.mac-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%;touch-action:pan-x pan-y}
.mac-track::-webkit-scrollbar{display:none}
.mac-slide{position:relative;flex:0 0 100%;height:100%;min-width:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#0b0b0c}
.mac-slide>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.mac-slide>iframe{position:absolute;top:0;left:0;width:1440px;height:1000px;border:0;transform-origin:0 0;background:#fff}
.mac-slide>iframe[hidden]{display:none}
.mac-wordmark{position:absolute;bottom:8px;left:0;width:100%;text-align:center;color:#bbb;font:500 8px/1 sans-serif;letter-spacing:.02em}
.mac-base{position:absolute;left:0;right:0;bottom:4px;height:18px;border-radius:2px 2px 50% 50%/2px 2px 8px 8px;background:linear-gradient(#d8d9de,#a8a9b1 35%,#6b6c74 76%,#303138);border-bottom:1px solid #ffffff60;box-shadow:0 2px 0 #000}
.mac-base>span{position:absolute;left:42%;top:0;width:16%;height:6px;border-radius:0 0 10px 10px;background:linear-gradient(90deg,#85868e,#c9cad0,#85868e);box-shadow:inset 0 -1px 1px #666}
.mac-foot{position:absolute;left:14%;right:14%;bottom:0;height:4px;background:#08090a;border-radius:0 0 8px 8px}
.mac-caption{text-align:center;padding:25px 0 0}
.mac-caption .mac-client{font-size:clamp(23px,3vw,34px);line-height:1.2;font-weight:650;letter-spacing:-.04em;margin:0}
.mac-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.mac-actions button,.mac-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 17px;border:1px solid #ffffff30;border-radius:25px;color:#bbb;background:#ffffff06;font:500 11px/1.5 var(--body,sans-serif);text-decoration:none;cursor:pointer}
.mac-actions button:hover,.mac-actions a:hover{background:#ffffff16;color:#fff}
@media(max-width:700px){.unit-page .comm-landing-pair .comm-landing-row{padding:45px 0 55px}.paper-stage{height:290px;padding:20px 8px;perspective:800px}.paper-sheet img{max-height:230px}.paper-caption{margin-top:8px}.brand-picker{gap:7px;margin-bottom:12px}.brand-picker button{font-size:11px;padding:10px 12px}.paper-cards .paper-spread{max-width:300px}.paper-cards .paper-sheet:nth-child(2){margin-left:-10px}.paper-cards .paper-spread{gap:12px}.macbook{padding:0 4% 12px}.mac-lid{border-radius:10px 10px 5px 5px;padding:13px 5px 15px}.mac-base{height:12px}.mac-wordmark{font-size:5px;bottom:5px}.mac-camera{width:23px;left:calc(50% - 11px);height:7px;top:3px}.mac-camera:after{width:3px;height:3px;top:1px;left:10px}.mac-caption{padding-top:20px}.mac-actions{gap:8px}.mac-actions button,.mac-actions a{font-size:10px;padding:8px 12px}.mac-base>span{height:4px}.mac-presentation{margin-top:22px}.object-controls{gap:13px;margin:17px 0}.paper-accordion .paper-spread{transform:rotateX(8deg) rotateZ(-3deg)}}
@media(prefers-reduced-motion:reduce){.paper-spread{transition:none}}

/* One pair of side arrows; the work carries its own identity. */
.brand-showcase,.mac-showcase{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center}
.mac-showcase:has(.object-side-arrow[hidden]){grid-template-columns:minmax(0,1fr)}
.brand-view{min-width:0}
.object-side-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#151518b3;color:#eee;font:400 22px/1 sans-serif;cursor:pointer;backdrop-filter:blur(10px)}
.object-side-arrow:hover:not(:disabled){background:#ffffff25}.object-side-arrow:disabled{opacity:.25;cursor:default}.object-side-arrow[hidden]{display:none}
.mac-caption .object-controls{margin-top:4px}
.unit-page #polpo-nero .comm-case-grid>.gallery-tile{grid-column:auto;min-width:0}
@media(max-width:700px){.brand-showcase,.mac-showcase{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}.object-side-arrow{width:40px;height:40px}.branding-objects .paper-stage{padding-inline:3px}.branding-objects .paper-stage{height:250px}.branding-objects .paper-sheet img{max-height:200px}}

/* Projects and their pages have separate navigation; every piece keeps its shape. */
.brand-piece-stage{display:flex;justify-content:center;align-items:center;height:440px;padding:18px 25px;min-width:0}
.brand-piece{display:flex;justify-content:center;align-items:center;max-width:100%;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.brand-piece[hidden]{display:none}
.brand-piece>img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 18px 35px #0007;border-radius:1px}
.brand-piece-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:8px}
.brand-piece-controls button{width:36px;height:36px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff05;color:#ddd;cursor:pointer;font:400 17px/1 sans-serif}
.brand-piece-controls button:hover:not(:disabled){background:#ffffff18}
.brand-piece-controls button:disabled{opacity:.25;cursor:default}
.brand-piece-controls span{min-width:110px;text-align:center;font-size:11px;color:#aaa;font-variant-numeric:tabular-nums}
.branding-objects>.object-controls{margin:24px 0 10px}
.branding-objects>.object-controls span{color:#ddd;font-size:12px}
.branding-objects .paper-help{line-height:1.75}
@media(max-width:700px){.brand-piece-stage{height:300px;padding:10px 3px}.brand-piece-controls{gap:8px}.brand-piece-controls span{min-width:102px;font-size:10px}.branding-objects>.object-controls{margin-top:22px}.branding-objects .paper-help{padding-inline:15px;font-size:10px}}
.branding-objects>.object-controls{margin:0 0 14px}
.branding-objects>.paper-help{margin-top:22px}

/* A printed leaf turns around its spine while the next page rests underneath. */
.brand-piece-stage{position:relative;perspective:1400px;overflow:hidden}
.brand-turn-sheet{position:absolute;z-index:4;transform-origin:left center;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.brand-turn-front,.brand-turn-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1px;box-shadow:0 2px 3px #0006,0 20px 28px #0005}
.brand-turn-front{background:#f4f1e9}
.brand-turn-front>img{display:block;width:100%;height:100%;object-fit:contain}
.brand-turn-front:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 8%,#fff0 72%,#ffffff28);box-shadow:inset 1px 0 1px #fff5}
.brand-turn-back{transform:rotateY(180deg);background:linear-gradient(90deg,#d7d2c6,#faf8f1 12%,#f1eee5 75%,#dcd6ca)}
.brand-turn-back>img{display:block;width:100%;height:100%;object-fit:contain;opacity:.055;filter:blur(1px);transform:scaleX(-1)}
.brand-turn-shadow{position:absolute;z-index:2;background:linear-gradient(90deg,#0008,transparent 75%);pointer-events:none;opacity:0}
@media(prefers-reduced-motion:reduce){.brand-turn-sheet,.brand-turn-shadow{display:none}}
.brand-piece-stage.is-turning .brand-piece{pointer-events:none}
.brand-turn-front{transform:translateZ(.1px)}
.brand-turn-back{transform:rotateY(180deg) translateZ(.1px)}