/* KOKO portfolio: quiet frames, tangible creative objects. */
:root{--folio-surface:#fff;--folio-soft:#e9eef4;--folio-deep:#344258}
nav a{padding:10px 0;transition:color .2s}nav a:hover{color:var(--orange)}
.reading.portfolio{max-width:none;padding:128px max(6%,calc((100vw - 1320px)/2));background:var(--paper);position:relative;z-index:4;scroll-margin-top:84px}
.portfolio-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:48px}
.portfolio .eyebrow{color:var(--orange);margin-bottom:17px;font-size:10px}
.portfolio h2{font-size:clamp(34px,4.1vw,58px);line-height:1.15;letter-spacing:-.055em;margin:0;font-weight:600}
.portfolio-heading>p{font-size:13px;line-height:1.9;color:var(--muted);max-width:330px;margin:0 0 3px}
.portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.portfolio-filters{display:flex;gap:7px;flex-wrap:wrap}
.portfolio-filters button{border:1px solid transparent;border-radius:24px;font-size:12px;padding:11px 18px;transition:background .2s,color .2s,border-color .2s}
.portfolio-filters button:hover{border-color:var(--line)}
.portfolio-filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.portfolio-count{font-size:11px;color:var(--muted);white-space:nowrap}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
.portfolio-card{position:relative;min-width:0}
.portfolio-card[hidden]{display:none}
.portfolio-visual{aspect-ratio:1.42;position:relative;overflow:hidden;border-radius:19px;background:var(--folio-soft);isolation:isolate;display:flex;align-items:center;justify-content:center}
.portfolio-visual:after{content:'';position:absolute;inset:0;border:1px solid #48566b08;border-radius:inherit;pointer-events:none}
.portfolio-card-copy{padding:22px 3px 0;display:flex;align-items:start;justify-content:space-between;gap:20px}
.portfolio-card h3{font-size:21px;font-weight:550;letter-spacing:-.04em;line-height:1.3;margin:0 0 7px}
.portfolio-card-copy p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}
.portfolio-open{position:absolute;inset:0;width:100%;border-radius:20px;padding:0;z-index:5;cursor:pointer}
.portfolio-open:active{transform:none}
.portfolio-arrow{width:35px;height:35px;display:grid;place-items:center;border:1px solid #48566b26;border-radius:50%;font-size:16px;transition:background .25s,color .25s,transform .25s}
.portfolio-card:hover .portfolio-arrow,.portfolio-card:focus-within .portfolio-arrow{background:var(--ink);color:white;transform:rotate(45deg)}
.portfolio-sample{position:absolute;top:18px;left:18px;z-index:4;font-size:8px;letter-spacing:.05em;padding:6px 9px;border-radius:12px;color:var(--ink);background:#ffffffb8;backdrop-filter:blur(8px)}
.folio-object{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.folio-window{width:83%;height:73%;border-radius:10px;background:#fff;box-shadow:0 22px 42px #3442581a;border:1px solid #ffffffbc;overflow:hidden;transform:rotate(-3deg);font-size:8px}
.folio-window-chrome{height:22px;border-bottom:1px solid #e8ecf1;display:flex;align-items:center;gap:3px;padding:0 10px;background:#f9fafc}
.folio-window-chrome i{width:4px;height:4px;background:#d6dde5;border-radius:50%}.folio-window-chrome span{margin:auto;color:#98a3b1;font-size:6px;letter-spacing:.07em;transform:translateX(-10px)}
.web-art{background:radial-gradient(circle at 62% 42%,#b9cde0,#dbe7f2 65%,#e8eef4)}
.web-card-viewport{height:calc(100% - 22px);overflow:hidden;background:#071d36}
.web-card-viewport img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.06);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.web-card-phone{position:absolute;z-index:3;right:5%;bottom:5%;width:21%;height:64%;overflow:hidden;padding:5px 4px;border:3px solid #0b2340;border-radius:18px;background:#0b2340;box-shadow:0 15px 30px #071d364a;transform:translate(5%,8%) rotate(8deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.web-card-phone img{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover;object-position:top}
.print-art{background:radial-gradient(circle at 65% 38%,#e7edf8,#d5deed 70%,#c8d4e5)}
.album-book{position:relative;width:83%;aspect-ratio:720/499;transform:rotate(-5deg);perspective:900px;filter:drop-shadow(12px 24px 19px #233e7040)}
.album-book img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border:4px solid #ffffffeb}
.album-book-inside{transform:translate(2%,1%)}
.album-cover-preview{transform-origin:left center;transform:rotateY(-7deg);backface-visibility:hidden;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.video-art{background:radial-gradient(circle at 53% 51%,#29304a 0,#12182b 47%,#080d1b 100%);color:#eef4ff}
.video-art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(135deg,transparent,#000 50%,transparent);pointer-events:none}
.video-art .portfolio-sample{color:#dfe7ff;background:#151e3bbd;border:1px solid #aabfff2b}
.video-card-stage{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:86%;height:79%;padding:5.5%;border:1px solid #a3b8ff33;border-radius:14px;background:linear-gradient(145deg,#91a9ff10,#ffffff04 60%);box-shadow:0 22px 52px #0007;transform:rotate(-2deg);overflow:hidden}
.video-card-stage::before{content:"";position:absolute;width:65%;aspect-ratio:1;left:19%;top:3%;border:1px solid #8aa5ff29;border-radius:50%;box-shadow:0 0 0 34px #7389ff0b,0 0 0 78px #7389ff08;pointer-events:none}
.video-card-overline,.video-card-foot{position:relative;z-index:2;font-size:9px;letter-spacing:.18em;color:#b8c5e9}
.video-card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #b0bcdb30;padding-top:13px}
.video-card-foot b{font-size:19px;font-weight:400;color:#f9ae76}
.video-card-perspective{position:relative;z-index:1;display:grid;place-items:center;flex:1;perspective:800px}
.video-card-cube{--cube-size:clamp(112px,16vw,181px);position:relative;width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-25deg);transition:transform 1.15s cubic-bezier(.15,.75,.15,1)}
.video-card-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 15px;border:1px solid #ffffff8a;backface-visibility:hidden;box-shadow:inset 0 0 36px #ffffff1c,0 16px 30px #0004}
.video-card-face>span{font-size:8px;letter-spacing:.15em}
.video-card-face strong{font-size:clamp(20px,2.5vw,32px);line-height:.98;letter-spacing:-.08em;font-weight:700}
.video-card-face strong span{color:#f5aa79}
.video-card-front{transform:translateZ(calc(var(--cube-size) / 2));background:linear-gradient(135deg,#405de5,#151e5b);color:#fff}
.video-card-front i{position:absolute;right:13px;bottom:14px;font-style:normal;font-size:10px;color:#fff;border:1px solid #fff9;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.video-card-right{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2));background:linear-gradient(145deg,#d77253,#641e4d);color:#fff}
.video-card-top{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2));background:linear-gradient(135deg,#16b4b0,#2253a1);color:#fff}
.image-art{background:#e9edf2}.image-composition{width:74%;height:75%;position:relative;transform:rotate(-2deg)}.image-print{position:absolute;border:6px solid white;box-shadow:0 12px 26px #48566b26;overflow:hidden;background:#dbe3ed}.image-print-back{inset:1% 28% 10% 0;transform:rotate(-9deg);background:#48566b}.image-print-front{inset:11% 0 0 27%;transform:rotate(7deg);background:#e6aa7d}.image-print-back b{position:absolute;font-family:Georgia,serif;font-size:clamp(70px,11vw,152px);line-height:1;color:#d7dfeb;left:11%;top:20%;font-weight:400}.image-print-back small{position:absolute;left:10%;top:8%;font-size:5px;color:white;letter-spacing:.2em}.image-print-front:before{content:'';position:absolute;width:88%;height:88%;border:18px solid #f1c7a7;border-radius:50%;left:18%;top:12%;box-shadow:inset 7px 4px 14px #8e542647,8px 12px 15px #8e542629;transform:rotate(-28deg)}.image-print-front strong{position:absolute;font-size:clamp(17px,2.2vw,31px);line-height:.95;letter-spacing:-.07em;bottom:10%;left:10%;color:#fff;font-weight:600}.image-print-front small{position:absolute;right:8%;top:8%;font-size:5px;color:#754729;letter-spacing:.16em;writing-mode:vertical-rl}.image-swatch{position:absolute;bottom:2%;left:6%;width:39%;background:#fff;padding:5%;box-shadow:0 7px 16px #48566b22;display:flex;gap:5px;transform:rotate(-9deg)}.image-swatch i{width:30%;aspect-ratio:1;background:#48566b}.image-swatch i:nth-child(2){background:#d97932}.image-swatch i:nth-child(3){background:#dce4ed}
.crm-art{background:#e3e9f0}
/* Each work type moves according to the object it represents. */
.portfolio-card:is(:hover,:focus-within,.is-in-view) .folio-window{transform:translateY(-5px) rotate(-1deg)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .web-card-viewport img{transform:scale(1.15) translateY(-3%)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .web-card-phone{transform:translate(-6%,-5%) rotate(1deg)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .album-book{transform:translateY(-5px) rotate(-2deg)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .album-cover-preview{transform:rotateY(-34deg)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-stage{transform:translateY(-5px) rotate(0)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-cube{transform:rotateX(28deg) rotateY(-48deg)}
.image-print-back,.image-print-front,.image-swatch{transition:transform .75s cubic-bezier(.2,.75,.2,1)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .image-composition{transform:translateY(-3px) rotate(0)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .image-print-back{transform:translate(-8%,-6%) rotate(-16deg)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .image-print-front{transform:translate(8%,4%) rotate(13deg)}
.portfolio-card:is(:hover,:focus-within,.is-in-view) .image-swatch{transform:translate(-12%,9%) rotate(-12deg)}
.portfolio-disclosure{margin:38px 0 0!important;font-size:11px!important;color:var(--muted);line-height:1.8;max-width:none!important;display:flex;gap:8px;align-items:start}.portfolio-disclosure:before{content:'';display:block;flex:0 0 4px;width:4px;height:4px;border-radius:50%;background:var(--orange);margin-top:8px}
.portfolio-contact{position:relative;z-index:4;background:#e9eef4;padding:95px max(6%,calc((100vw - 1320px)/2)) 28px;scroll-margin-top:80px}
.contact-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:100px;align-items:end;padding-bottom:80px}.portfolio-contact .eyebrow{color:var(--muted);font-size:10px}.portfolio-contact h2{font-size:clamp(35px,4.6vw,64px);font-weight:550;letter-spacing:-.055em;line-height:1.2;margin:0}.portfolio-contact h2 span{color:var(--orange)}.contact-placeholder{border-left:1px solid #48566b23;padding-left:32px;padding-bottom:3px}.contact-placeholder p{font-size:13px;line-height:1.9;margin:0;color:var(--muted)}.contact-placeholder strong{display:block;font-weight:500;font-size:14px;color:var(--ink);margin-bottom:9px}.contact-footer{border-top:1px solid #48566b20;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:10px;color:var(--muted)}.contact-footer-brand{font-size:19px;letter-spacing:-1px;font-weight:750;color:var(--ink)}.contact-footer-brand span{color:var(--orange)}.contact-footer a{display:flex;align-items:center;gap:18px}.contact-footer a:hover{color:var(--orange)}
@media(min-width:1600px){.portfolio-visual{aspect-ratio:1.5}.folio-window{font-size:10px}}
@media(max-width:900px){.portfolio-heading{align-items:start;gap:30px}.portfolio-heading>p{max-width:270px;font-size:12px}.portfolio-grid{gap:38px 20px}.portfolio-visual{aspect-ratio:1.2}.folio-window{height:66%;width:87%}.image-composition{height:65%;width:80%}.contact-layout{gap:45px}}
@media(max-width:600px){.reading.portfolio{padding:76px 6% 70px}.portfolio-heading{display:block;margin-bottom:29px}.portfolio h2{font-size:35px}.portfolio-heading>p{max-width:290px;margin-top:19px;line-height:1.8}.portfolio-toolbar{display:block;margin-bottom:22px}.portfolio-filters{gap:4px}.portfolio-filters button{font-size:10px;padding:9px 12px}.portfolio-count{display:block;margin:18px 0 0;font-size:10px}.portfolio-grid{grid-template-columns:1fr;gap:35px}.portfolio-visual{aspect-ratio:1.34;border-radius:16px}.portfolio-card-copy{padding-top:18px}.portfolio-card h3{font-size:20px}.portfolio-card-copy p{font-size:11px}.portfolio-arrow{width:31px;height:31px;font-size:14px}.image-print-back b{font-size:125px}.image-print-front strong{font-size:27px}.portfolio-disclosure{font-size:10px!important;margin-top:29px!important}.portfolio-contact{padding:68px 6% 22px}.contact-layout{grid-template-columns:1fr;gap:35px;padding-bottom:50px}.portfolio-contact h2{font-size:38px}.contact-placeholder{padding-left:20px}.contact-placeholder p{font-size:12px}.contact-placeholder strong{font-size:13px}.contact-footer{font-size:8px;gap:12px;flex-wrap:wrap}.contact-footer-brand{font-size:17px}.contact-footer a{gap:10px}}
@media(prefers-reduced-motion:reduce){.portfolio-card *,.portfolio-card *::before,.portfolio-card *::after{transition:none!important;animation:none!important}.portfolio-card:is(:hover,:focus-within,.is-in-view) .portfolio-visual *{transform:none!important}}
body:has(#motion[aria-pressed=true]) .portfolio-card *,body:has(#motion[aria-pressed=true]) .portfolio-card *::before,body:has(#motion[aria-pressed=true]) .portfolio-card *::after{transition:none!important;animation:none!important}
body:has(#motion[aria-pressed=true]) .portfolio-card:is(:hover,:focus-within,.is-in-view) .portfolio-visual *{transform:none!important}
@media(prefers-reduced-motion:reduce){.portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-cube{transform:rotateX(18deg) rotateY(-25deg)!important}.portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-front{transform:translateZ(calc(var(--cube-size) / 2))!important}.portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-right{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))!important}.portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-top{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))!important}}
body:has(#motion[aria-pressed=true]) .portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-cube{transform:rotateX(18deg) rotateY(-25deg)!important}
body:has(#motion[aria-pressed=true]) .portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-front{transform:translateZ(calc(var(--cube-size) / 2))!important}
body:has(#motion[aria-pressed=true]) .portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-right{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))!important}
body:has(#motion[aria-pressed=true]) .portfolio-card:is(:hover,:focus-within,.is-in-view) .video-card-top{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))!important}
@media(forced-colors:active){.portfolio-open{border:1px solid ButtonText}.portfolio-sample{border:1px solid CanvasText}.portfolio-filters button[aria-pressed=true]{border:2px solid Highlight}}
/* Supplied poster artwork retains its complete proportions in the work card. */
.image-print:has(img){width:54%;height:auto;aspect-ratio:1122/1402;inset:auto;border-width:4px}
.image-print-back:has(img){left:2%;top:0}.image-print-front:has(img){right:0;bottom:0}
.image-print img{display:block;width:100%;height:100%;object-fit:contain}
.image-print-front:has(img)::before{display:none}

/* Real CRM project preview. The poster is redacted in the image itself. */
.crm-real-preview{position:absolute;inset:16% 7% 8%;background:#202c3e;border:1px solid #9faaba;border-radius:7px;overflow:hidden;box-shadow:0 15px 30px #34425524;transform:rotate(-3deg);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.crm-real-bar{height:27px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#d8e0ec;font:600 7px monospace;letter-spacing:.04em}.crm-real-bar span{color:#9ba9bd;font:7px sans-serif}
.crm-real-preview img{width:100%;height:calc(100% - 27px);display:block;object-fit:contain;background:#1b2432}
.crm-real-play{position:absolute;left:calc(50% - 20px);top:calc(55% - 20px);width:40px;height:40px;display:grid;place-items:center;background:#253244e6;border:1px solid #ffffff88;border-radius:50%;color:#fff;font-size:12px;padding-left:2px}
.portfolio-card:hover .crm-real-preview{transform:rotate(0) translateY(-5px)}
@media(prefers-reduced-motion:reduce){.crm-real-preview{transition:none;transform:none!important}}