/* Small working compositions, made from the portfolio's own materials. */
#approach .process-grid{gap:clamp(20px,2.4vw,42px)}
#approach .studio-step{padding-top:0;min-width:0}
.studio-desk{position:relative;display:block;width:100%;height:300px;padding:0;border:0;background:transparent;text-align:left;color:#f2f0eb;isolation:isolate}
.desk-index{position:absolute;top:17px;left:0;font:10px 'DM Sans',sans-serif;letter-spacing:2px;color:#9a9690}
.desk-composition{position:absolute;inset:48px 0 34px;perspective:800px}
.desk-composition>span{position:absolute;transition:transform .65s cubic-bezier(.2,.75,.25,1),box-shadow .65s}
.desk-composition img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.8) brightness(.85);transition:filter .65s}
.desk-annotation{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;font:10px/1.5 'DM Sans',sans-serif;color:#b48b77;letter-spacing:.3px;transition:color .35s}
.desk-annotation b{font-size:19px;font-weight:400;transition:transform .4s}
.desk-sheet{background:#d7d1c4;color:#292925;box-shadow:0 15px 35px #0005}
.desk-brief{left:6%;top:4%;width:65%;height:91%;padding:17px 18px;transform:rotate(-6deg)}
.desk-file{display:block;font:7px 'DM Sans',sans-serif;letter-spacing:1.2px;color:#676457}
.desk-brief strong{display:block;font:500 25px/.95 Manrope,sans-serif;letter-spacing:-1.1px;margin:12px 0}
.desk-brief em{font-family:Georgia,serif;font-weight:400;color:#9e4d34}
.desk-question{display:block;font:8px/1.7 'DM Sans',sans-serif;border-bottom:1px solid #26262222}
.desk-rule{position:absolute;right:15px;top:18px;width:18px;height:2px;background:#a45b41}
.desk-scrap{right:1%;top:30%;width:43%;padding:13px 11px;background:#25282a;border:1px solid #ffffff24;transform:rotate(8deg);box-shadow:0 15px 30px #0006}
.desk-scrap small,.desk-type small,.desk-type>span,.desk-timeline small,.desk-image small{display:block;font:6px/1.5 'DM Sans',sans-serif;letter-spacing:1.2px;color:#aba79e}
.desk-scrap>span{display:block;font:italic 20px/1.15 Georgia,serif;margin:10px 0;color:#ddd5c6}
.desk-scrap i{font:italic 9px Georgia,serif;color:#ff9472;white-space:nowrap}
.desk-mood{left:5%;top:0;width:60%;height:87%;padding:7px 7px 22px;background:#202329;border:1px solid #ffffff28;transform:rotate(-8deg);box-shadow:0 12px 30px #0006}
.desk-image small{margin-top:6px}
.desk-type{right:1%;top:17%;width:48%;padding:16px 13px;background:#c6c0b5;color:#262726;transform:rotate(7deg);box-shadow:0 10px 30px #0007}
.desk-type small,.desk-type>span{color:#57544d}
.desk-type strong{display:flex;flex-direction:column;font:500 48px/.94 Manrope,sans-serif;letter-spacing:-4px;margin:12px 0}
.desk-type em{font:italic 51px/.94 Georgia,serif;color:#96482f}
.desk-swatches{bottom:0;left:18%;display:flex;padding:7px;background:#161819;border:1px solid #ffffff22;transform:rotate(-3deg);box-shadow:0 8px 25px #0006}
.desk-swatches i{display:block;width:33px;height:25px;background:#ddd5c6}.desk-swatches i:nth-child(2){background:#ff744d}.desk-swatches i:nth-child(3){background:#657d90}.desk-swatches i:nth-child(4){background:#252b32}
.desk-screen{background:#1b1f24;border:1px solid #ffffff30;padding:0 5px 5px;box-shadow:0 20px 35px #0007;overflow:hidden}
.desk-chrome{display:flex;align-items:center;gap:3px;height:18px;padding:0 5px}.desk-chrome i{width:3px;height:3px;background:#7d858b;border-radius:50%}.desk-chrome small{font:5px 'DM Sans',sans-serif;letter-spacing:.8px;margin-left:auto;color:#a9adb0}
.desk-working{width:88%;height:72%;left:1%;top:8%;transform:rotate(-5deg)}
.desk-screen img{height:calc(100% - 18px);object-position:top}
.desk-timeline{width:78%;height:70px;right:0;bottom:0;padding:9px 12px;background:#272a2d;border:1px solid #ffffff2a;transform:rotate(5deg);box-shadow:0 12px 30px #0007}
.desk-track{display:flex;gap:3px;margin-top:5px;height:7px;padding-left:8%}.desk-track i{display:block;width:27%;background:#667e8c}.desk-track:nth-of-type(2){padding-left:20%}.desk-track:nth-of-type(2) i{background:#9e775d;width:40%}.desk-track:nth-of-type(3) i{background:#78856e}
.desk-timeline b{position:absolute;left:64%;top:22px;bottom:6px;width:1px;background:#ff9c77}.desk-timeline b:before{content:'';position:absolute;top:0;left:-2px;width:5px;height:5px;background:#ff9c77}
.desk-selection{right:0;top:0;color:#ff936f;font-size:26px;transform:rotate(4deg)}.desk-selection small{font:8px 'DM Sans',sans-serif;background:#a95136;color:#fff;padding:5px 7px}
.desk-finished{left:2%;top:10%;width:86%;height:76%;transform:rotate(-4deg)}
.desk-phone{right:0;bottom:3%;width:28%;height:70%;border:4px solid #343638;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px #0009;transform:rotate(8deg)}
.desk-phone img{object-fit:cover;object-position:center}
.desk-delivered{left:9%;bottom:0;font:7px 'DM Sans',sans-serif;letter-spacing:1px;padding:8px 11px;background:#d5cfc0;color:#34332f;transform:rotate(-6deg);box-shadow:0 5px 15px #0005}.desk-delivered>span{font-size:14px;margin-right:7px;color:#a54e30}
#approach .studio-step h3{margin:24px 0 13px;font-size:25px}
#approach .studio-step>p{font-size:14px;line-height:1.75;min-height:120px}
#approach .studio-step .step-output{margin-top:20px;padding-bottom:8px}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-composition img{filter:grayscale(0) brightness(1)}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-composition>span:nth-child(1){transform:translate(-4px,-8px) rotate(-9deg)}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-composition>span:nth-child(2){transform:translate(6px,3px) rotate(11deg)}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-composition>span:nth-child(3){transform:translate(0,7px) rotate(-4deg)}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-annotation{color:#ff936f}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-annotation b{transform:translate(3px,-3px)}
@media(min-width:1800px){.studio-desk{height:330px}.desk-brief strong{font-size:30px}.desk-question{font-size:10px}.desk-scrap>span{font-size:24px}.desk-type strong{font-size:58px}.desk-type em{font-size:62px}.desk-annotation{font-size:11px}}
@media(max-width:1100px){#approach .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 30px}.studio-desk{max-width:390px;margin-inline:auto}#approach .studio-step>p{min-height:0}}
@media(max-width:600px){#approach .process-grid{grid-template-columns:1fr;gap:36px}.studio-desk{height:310px;max-width:360px}.desk-composition{inset:42px 8px 36px}#approach .studio-step h3{margin-top:20px}#approach .studio-step .step-output{margin-top:17px}}
@media(prefers-reduced-motion:reduce){.studio-desk *{transition:none!important}}

/* Original graphic studies in place of case-study photographs. */
.desk-artwork{position:relative;display:block;height:calc(100% - 18px);overflow:hidden;background:radial-gradient(circle at 68% 38%,#355269 0,#182631 36%,#0d1219 74%);color:#ecece7}
.desk-artwork::before{content:'';position:absolute;inset:12px;border:1px solid #ffffff2c}
.desk-art-orbit{position:absolute;left:25%;top:9%;width:77%;aspect-ratio:1;border:1px solid #b5c3cf6b;border-radius:50%;transform:rotate(-25deg)}
.desk-art-orbit::after{content:'';position:absolute;inset:18%;border:1px solid #ff987564;border-radius:50%}
.desk-art-core{position:absolute;width:30%;aspect-ratio:1;left:57%;top:25%;border-radius:50%;background:linear-gradient(135deg,#ff9b70,#a94031);box-shadow:0 0 45px #ff744d4a}
.desk-artwork>span{position:absolute;left:13%;top:17%;font:500 clamp(14px,1.35vw,25px)/.97 Manrope,sans-serif;letter-spacing:-.055em}
.desk-artwork em{font:italic 1.16em Georgia,serif;color:#ffac8e}
.desk-artwork b{position:absolute;right:12%;bottom:11%;font:7px 'DM Sans',sans-serif;letter-spacing:1px;color:#b5c3cf}
.desk-ui{position:relative;display:block;height:calc(100% - 18px);overflow:hidden;color:#e8e9e6;background:#101a21}
.desk-ui-nav{height:17%;display:flex;align-items:center;gap:5%;padding:0 6%;border-bottom:1px solid #ffffff2d}
.desk-ui-nav b{font:700 13px Manrope,sans-serif;color:#ff906e;margin-right:auto}
.desk-ui-nav i{height:2px;width:11%;background:#a2aeb64f}.desk-ui-nav i:last-child{width:15%;background:#ff9574}
.desk-ui-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:5%;height:75%;padding:8% 6% 0}
.desk-ui-copy{display:flex;align-items:flex-start;flex-direction:column;min-width:0}
.desk-ui-copy small{font:5px 'DM Sans',sans-serif;letter-spacing:1px;color:#9eb3bf}
.desk-ui-copy strong{font:500 clamp(13px,1.22vw,23px)/1.04 Manrope,sans-serif;letter-spacing:-.07em;margin:8% 0}
.desk-ui-copy em{font:italic 1.06em Georgia,serif;color:#ff9978}
.desk-ui-lines{display:grid;gap:4px;width:90%;margin-bottom:auto}.desk-ui-lines i{height:2px;width:100%;background:#a4b1b84d}.desk-ui-lines i:nth-child(2){width:80%}.desk-ui-lines i:nth-child(3){width:57%}
.desk-ui-cta{font:5px 'DM Sans',sans-serif;letter-spacing:.8px;border-bottom:1px solid #ff9478;padding-bottom:4px;white-space:nowrap}.desk-ui-cta span{margin-left:8px;color:#ff9478}
.desk-ui-visual{position:relative;display:block;overflow:hidden;background:radial-gradient(circle at 70% 30%,#42657c,#263744 45%,#101b24 82%)}
.desk-ui-visual i:first-child{position:absolute;width:85%;aspect-ratio:1;left:-20%;top:22%;border:1px solid #b8d4e759;border-radius:50%}
.desk-ui-visual i:nth-child(2){position:absolute;width:45%;aspect-ratio:1;left:44%;top:22%;border-radius:50%;background:linear-gradient(135deg,#e7a184,#a9503f);box-shadow:0 0 25px #ff744d55}
.desk-ui-visual i:last-child{position:absolute;left:16%;right:16%;bottom:16%;height:1px;background:#dde5ec55}
.desk-ui-baseline{position:absolute;left:6%;right:6%;bottom:3%;height:1px;background:#ffffff3b}
.desk-ui-finished{background:#141718}.desk-ui-finished .desk-ui-visual{background:radial-gradient(circle at 75% 25%,#ad5b44,#4b3035 47%,#17202a 85%)}
.desk-ui-finished .desk-ui-visual i:nth-child(2){background:linear-gradient(135deg,#f0c0a8,#ff704e)}
.desk-phone-ui{position:relative;display:block;height:100%;padding:10px 7px;background:radial-gradient(circle at 60% 44%,#9a4d3e,#251b26 65%,#0d1217);color:#fff}
.desk-phone-ui small{font:700 10px Manrope,sans-serif}.desk-phone-ui>i{position:absolute;left:0;top:29%;width:125%;aspect-ratio:1;border:1px solid #fff6;border-radius:50%}
.desk-phone-ui strong{position:relative;display:block;font:700 11px/.98 Manrope,sans-serif;letter-spacing:-.7px;margin-top:38%}.desk-phone-ui em{font:italic 1em Georgia,serif;color:#ffa486}
.desk-phone-ui>span{position:absolute;left:7px;right:7px;bottom:16px;height:1px;background:#ffffff6b}.desk-phone-ui b{position:absolute;bottom:19px;right:8px;font:12px Manrope,sans-serif;color:#ffa486}
.studio-desk:is(:hover,:focus-visible,[aria-pressed="true"]) .desk-art-core{box-shadow:0 0 60px #ff744d80}
@media(max-width:1100px){.desk-artwork>span{font-size:clamp(17px,2.4vw,26px)}.desk-ui-copy strong{font-size:clamp(17px,2.3vw,25px)}}
@media(max-width:600px){.desk-artwork>span{font-size:23px}.desk-ui-copy strong{font-size:21px}}