/* Four client films, introduced only at the cloud portfolio. */
.portfolio-clouds{inset:0;justify-content:flex-start;gap:clamp(18px,3vh,32px);overflow-x:hidden;overflow-y:auto;padding:max(96px,13dvh) max(24px,5vw) max(32px,env(safe-area-inset-bottom));overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;scrollbar-width:none;scroll-padding-block:24px;transform:none;transition:opacity .6s;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.portfolio-clouds::-webkit-scrollbar{display:none;width:0;height:0}
/* The cloud view stays clear; only the earlier process views use a scrim. */
#cinema[data-stage="3"] .copy-scrim,#cinema[data-stage="3"] .outside-glow{display:none}
.portfolio-clouds h2{flex-shrink:0;font-size:clamp(38px,5vw,70px)}
.portfolio-clouds h2 .letter-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.10em .08em .08em;margin:-.10em -.08em -.08em}
.portfolio-clouds h2 .word-letter{display:block;opacity:1;transform:none;filter:none}
.portfolio-clouds.title-arriving{opacity:1;transform:none}
/* On a return visit, the heading may lead the camera; cards wait for arrival. */
.portfolio-clouds.title-arriving:not(.show) .cloud-card{visibility:hidden}
.cloud-projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1320px;gap:clamp(14px,2vw,30px);align-items:stretch;flex-shrink:0;margin:0 auto;padding:20px 0 30px;perspective:none}
.cloud-card{appearance:none;display:block;aspect-ratio:auto;min-width:0;width:100%;padding:0;pointer-events:auto;font:inherit;color:#292820;border:1px solid #ffffffcc;border-radius:16px;background:#fff;overflow:hidden;text-align:left;box-shadow:none;opacity:0;filter:none;transition:none}
.cloud-card:nth-child(n){transform:none}
/* Reveal only once each card enters view, including the lower mobile rows. */
.cloud-card.is-revealed{opacity:1}
.portfolio-clouds.show .cloud-card:hover,.portfolio-clouds.show .cloud-card:focus-visible{transform:none;box-shadow:none}
.cloud-card span{padding:0;font-size:inherit}
.cloud-card .cloud-card-label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:62px;padding:17px 18px 20px;font-size:clamp(14px,1.35vw,19px);line-height:1.2;letter-spacing:-.025em;border-top:1px solid #eeebe640}
.cloud-card .cloud-card-arrow{font-size:19px;color:#958775;flex-shrink:0}
.project-media{display:grid;place-items:center;position:relative;width:100%;aspect-ratio:5/4;overflow:hidden;background:#fff;opacity:0;transition:opacity 700ms cubic-bezier(.4,0,.2,1)}
.project-media.has-content.reveal-allowed{opacity:1}
.cloud-card .project-media{display:grid}
/* Reset immediately on return visits; only the subsequent reveal animates. */
.cloud-card .project-media:not(.reveal-allowed){transition:none}
.project-media video,.project-media .project-poster{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;aspect-ratio:auto;object-fit:contain;margin:0;background:#fff;pointer-events:none;visibility:hidden}
/* A still is a fallback, never an additional layer underneath playback. */
.project-media video.is-ready,.project-media .project-poster.is-ready{visibility:visible}
.portfolio-phone{position:absolute;display:block;height:82%;aspect-ratio:.485;transform:none;border-radius:20% / 9.7%;background:linear-gradient(115deg,#fff 12%,#f4f4f0 48%,#deded8 100%);border:1px solid #d5d5cf;box-shadow:inset 1px 1px 2px #fff,inset -1px -1px 2px #c7c7c0,0 3px 0 -1px #deded8,0 20px 30px -14px #22222230}
.portfolio-phone-screen{display:block;position:absolute;inset:1.65% 3.4%;border-radius:18% / 8.5%;overflow:hidden;background:#171310;box-shadow:0 0 0 1px #242420,inset 0 0 0 1px #ffffff12}
.portfolio-phone-screen video,.portfolio-phone-screen .project-poster{object-fit:cover;object-position:center;transform:scale(1.1);transform-origin:center;background:#171310}
.portfolio-phone-island{display:block;position:absolute;top:2.6%;left:34%;width:32%;aspect-ratio:3.55;border-radius:999px;background:#030303;box-shadow:0 0 0 1px #ffffff0a;pointer-events:none}
.portfolio-phone-island:after{content:"";position:absolute;right:11%;top:28%;height:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#30414a,#11151a 42%,#050505 70%)}
.portfolio-phone-side{position:absolute;left:-3px;top:24%;width:2px;height:7%;border-radius:2px;background:linear-gradient(90deg,#d2d2cb,#fafaf6)}
.portfolio-phone-side:before{content:"";position:absolute;top:-105%;left:0;width:2px;height:40%;border-radius:2px;background:inherit}
.portfolio-phone-side:after{content:"";position:absolute;top:130%;left:0;width:2px;height:100%;border-radius:2px;background:inherit}
.portfolio-phone-power{position:absolute;right:-2px;top:30%;width:2px;height:12%;border-radius:2px;background:#ccccc5}
.cinema-dialog{box-sizing:border-box;width:min(1000px,92vw);max-height:92dvh;padding:20px 24px;border:1px solid #ffffffa0;border-radius:20px;background:#fff;color:#292820;font-family:Arial,Helvetica,sans-serif;overflow:auto;transform-origin:center;will-change:auto}
.cinema-dialog::backdrop{background:#252b2670;backdrop-filter:blur(12px);opacity:0;transition:opacity .46s ease}
.cinema-dialog.is-open::backdrop{opacity:1}
.cinema-dialog header{gap:20px;margin:0 0 12px}
.cinema-dialog h2{font:700 clamp(21px,3vw,30px)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.04em;margin:0}
.cinema-dialog .project-reveal-text{display:inline-block;white-space:nowrap}
.cinema-dialog .letter-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.10em .08em .08em;margin:-.10em -.08em -.08em}
.cinema-dialog .word-letter{display:block;opacity:1;transform:none;filter:none}
.cinema-dialog header button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;font:inherit;color:#292820;padding:10px;background:transparent;transition:background-color .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
.cinema-dialog header button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.cinema-dialog header button:focus-visible{background:#f3f1ed;outline-offset:4px;border-radius:50%}
.cinema-dialog header button:active svg{transform:scale(.86)}
@media(hover:hover){
 .cinema-dialog header button:hover{background:#f3f1ed;box-shadow:0 3px 14px #6452400d}
 .cinema-dialog header button:hover svg{transform:rotate(8deg) scale(.92)}
}
.project-viewer{height:min(62dvh,580px)}
.project-viewer .project-media{height:100%;aspect-ratio:auto}
.project-actions{display:flex;justify-content:center;padding:20px 0 4px}
.project-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 26px;border-radius:999px;background:#151515;color:#fff;text-decoration:none;font:400 15px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.025em;transition:background-color .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.project-contact:hover{background:#30302e;transform:translateY(-1px);box-shadow:0 5px 18px #1515151a}}
.project-contact:active{transform:translateY(0)}
.project-contact:focus-visible{outline:2px solid #665d4c;outline-offset:5px}
.cinema-dialog [data-project-retry]{display:block;margin:8px auto 0;padding:10px 20px;border:1px solid #d9d3ca;border-radius:24px;background:#faf8f4;font:inherit;font-size:12px}
.cinema-dialog .project-status{font-size:12px;color:#7f776c;margin:10px 0 0}
.project-status:empty{display:none}
@media(max-width:1050px){
 .portfolio-clouds{padding-top:max(88px,12dvh)}
 .cloud-projects{grid-template-columns:repeat(2,minmax(0,1fr));max-width:740px;gap:24px;padding:10px 0 24px}
 .cloud-card .cloud-card-label{font-size:18px}
}
@media(max-width:640px){
 .portfolio-clouds{gap:20px;padding:max(88px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
 .portfolio-clouds h2{font-size:40px}
 .cloud-projects{grid-template-columns:1fr;max-width:410px;gap:22px;margin:0 auto}
 .cloud-card{border-radius:15px}
 .cloud-card .cloud-card-label{padding:16px 18px;font-size:18px}
 .cloud-card .cloud-card-arrow{display:none}
 .cinema-dialog{width:94vw;padding:16px;border-radius:18px}
 .project-viewer{height:58dvh}
}
@media(prefers-reduced-motion:reduce){
 .project-media{transition:none}
 .portfolio-clouds,.cloud-card{transition:none!important}
 .cinema-dialog::backdrop{transition:none}
 .cinema-dialog header button,.cinema-dialog header button svg,.project-contact{transition:none;transform:none!important}
 .portfolio-clouds.show .cloud-card,.portfolio-clouds.show .cloud-card:hover{transform:none}
}
body.reduced .portfolio-clouds,body.reduced .cloud-card{transition:none!important}
body.reduced .project-media{transition:none}
body.reduced .cinema-dialog::backdrop{transition:none}
body.reduced .cinema-dialog header button,body.reduced .cinema-dialog header button svg,body.reduced .project-contact{transition:none;transform:none!important}
body.reduced .portfolio-clouds.show .cloud-card{transform:none}

/* Added portfolio cards use the existing phone and card styles. */
.cloud-card[data-work="nudge"]{text-decoration:none;cursor:pointer}
.cloud-card[data-work="breath-works"]{text-decoration:none;cursor:pointer}
.project-media[data-client-project="nudge"] .portfolio-phone-screen{display:grid;place-items:center;background:#000}
.project-media[data-client-project="nudge"] .portfolio-phone-screen video{position:static;inset:auto;width:70%;height:auto;object-fit:contain;transform:none;background:#000}
.project-media[data-client-project="nudge"] .portfolio-phone-screen .project-poster{inset:0;margin:auto;width:70%;height:auto;object-fit:contain;transform:none;background:#000}
.project-media[data-client-project="breath-works"] .portfolio-phone-screen{display:grid;place-items:center;background:#fff}
.project-media[data-client-project="breath-works"] .portfolio-phone-screen .project-logo{display:block;width:48%;height:auto;overflow:visible}

/* Six projects in three desktop columns; tablet and phone layouts stay intact. */
@media(min-width:1051px){
 .cloud-projects{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:1080px}
}

.cinema-dialog .project-status{display:flex;justify-content:center;align-items:center;line-height:0;color:#8b8171}
.cinema-dialog .project-status:not(.is-loading){height:0;margin:0}

/* The mobile viewer fills the available browser viewport, including safe areas. */
@media(max-width:640px),(max-height:500px) and (max-width:1024px){
 .cinema-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));border:0;border-radius:0;overflow:hidden}
 .cinema-dialog[open]{display:flex;flex-direction:column}
 .cinema-dialog header{flex:0 0 auto;margin:0;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
 .cinema-dialog .project-viewer{flex:1 1 0;min-height:0;height:auto;width:100%}
 .cinema-dialog .project-actions{flex:0 0 auto;padding:12px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
 .cinema-dialog .project-status,.cinema-dialog [data-project-retry]{flex-shrink:0}
 .cinema-dialog::backdrop{background:#fff;backdrop-filter:none}
}