/* A live creative workspace, in Sabry's own identity. */
body{--studio-rgb:202,255,75;--studio-bottom:64px}
#studio-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--ambient-color:202,255,75;--ambient-x:70%;--ambient-y:30%;transition:opacity .6s}
#studio-fx:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--ambient-x) var(--ambient-y),rgba(var(--ambient-color),.105),transparent 58%),radial-gradient(ellipse at 4% 85%,rgba(var(--ambient-color),.04),transparent 45%);transition:background 1.2s,opacity .7s}
#studio-fx:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#11170f33,transparent 20%,transparent 80%,#11170f33);pointer-events:none}
#studio-fx canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
#studio-fx.gpu-ready canvas{opacity:.82}#studio-fx.gpu-ready:before{opacity:.25}
#network-bg{opacity:.52}.flow-section:before{background:linear-gradient(0deg,#11170f55,transparent 30%,#11170f20 50%,transparent 80%)}
.workspace-bar{position:fixed;z-index:38;top:88px;left:0;right:0;height:30px;background:#171d14e8;border-block:1px solid #51613d38;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;font:8px/1 monospace;letter-spacing:.6px;color:#829174;backdrop-filter:blur(12px);transition:opacity .5s}
.workspace-file{display:flex;align-items:center;gap:13px;height:100%;color:#bbc7aa}.workspace-file i{width:5px;height:5px;background:rgb(var(--studio-rgb));border-radius:50%;box-shadow:0 0 12px rgba(var(--studio-rgb),.6)}.workspace-file small{color:#6c7c5e;font-size:7px;letter-spacing:1px;margin-right:14px}.workspace-meta{display:flex;gap:26px}.workspace-meta>span:last-child{color:rgb(var(--studio-rgb))}
.workspace-ruler{position:fixed;top:118px;height:12px;left:5.5%;right:5.5%;z-index:35;pointer-events:none;border-top:1px solid #61764728;background:repeating-linear-gradient(90deg,#8da96633 0 1px,transparent 1px 12px);mask-image:linear-gradient(#000,transparent);opacity:.65}
.studio-tools{position:fixed;left:13px;top:calc(50% - 120px);z-index:35;display:grid;gap:6px;background:#151d11d9;border:1px solid #687f4433;border-radius:4px;padding:8px 5px;backdrop-filter:blur(10px)}.studio-tools a{display:grid;place-items:center;width:29px;height:30px;color:#78896b;position:relative;border-radius:2px}.studio-tools svg{width:19px;height:19px}.studio-tools a.active{color:rgb(var(--studio-rgb));background:rgba(var(--studio-rgb),.09);box-shadow:inset 0 0 0 1px rgba(var(--studio-rgb),.2)}.studio-tools a:hover{color:#edf4e4}.studio-tools a>span{position:absolute;left:40px;font:9px monospace;background:#26301f;border:1px solid #5d76484d;color:#e3ebd8;white-space:nowrap;padding:9px 12px;opacity:0;transform:translateX(-4px);pointer-events:none;transition:.2s}.studio-tools a:hover>span,.studio-tools a:focus-visible>span{opacity:1;transform:none}
.studio-console{position:fixed;bottom:0;left:0;right:0;height:var(--studio-bottom);background:#12190fef;z-index:80;border-top:1px solid #7691513d;display:grid;grid-template-columns:190px 1fr 90px;align-items:center;gap:28px;padding:9px 5.5%;backdrop-filter:blur(15px);box-shadow:0 -10px 35px #10160d22}
.console-name{font:8px monospace;letter-spacing:.8px;color:#a1b28d;display:flex;gap:14px;align-items:center}.console-name>i{display:grid;place-items:center;border:1px solid #778e4c55;width:27px;height:27px;color:#caff4b;font-style:normal;font-size:12px}.console-name span{display:block;color:#6c805a;margin-top:5px;font-size:7px}.studio-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.studio-timeline>a{min-width:0;display:block;color:#7a8a6d;position:relative;padding:3px 0}.track-name{display:flex;justify-content:space-between;font:8px monospace;margin-bottom:8px;white-space:nowrap;gap:5px}.track-name small{font-size:7px;opacity:.6}.track-clip{height:13px;background:rgba(var(--track-rgb),.08);border:1px solid rgba(var(--track-rgb),.20);display:block;position:relative;overflow:hidden}.track-clip i{position:absolute;inset:0;background:rgba(var(--track-rgb),.22);transform-origin:left;transform:scaleX(var(--clip-progress,0));border-right:2px solid rgb(var(--track-rgb))}.track-clip b{position:absolute;top:3px;width:4px;height:4px;transform:rotate(45deg);background:rgb(var(--track-rgb));opacity:.45}.track-clip b:nth-of-type(1){left:17%}.track-clip b:nth-of-type(2){left:50%}.track-clip b:nth-of-type(3){left:82%}.studio-timeline>a.active{color:rgb(var(--track-rgb))}.studio-timeline>a.active .track-clip{border-color:rgba(var(--track-rgb),.6);box-shadow:0 0 12px rgba(var(--track-rgb),.07)}.console-position{text-align:right;font:10px monospace;color:rgb(var(--studio-rgb));letter-spacing:1px}.console-position small{display:block;font-size:7px;letter-spacing:.7px;color:#778a62;margin-top:6px}
.is-loading .workspace-bar,.is-loading .workspace-ruler,.is-loading .studio-tools,.is-loading .studio-console{visibility:hidden}.is-entering .workspace-bar,.is-entering .studio-console{animation:studio-enter .8s ease both}.motion-control{bottom:calc(var(--studio-bottom) + 12px)!important;z-index:81!important}
.introduction,.intro-stage,.reduced .introduction,.reduced .intro-stage{height:calc(100svh - 0px);min-height:790px}.intro-copy{top:24%}.intro-copy h1{font-size:clamp(86px,9.2vw,144px)}.intro-meta{bottom:calc(var(--studio-bottom) + 24px)}.portrait-scene{bottom:calc(var(--studio-bottom) - 10px);height:79%}.intro-stage:after{background:linear-gradient(0deg,#11170f,transparent 21%)}.intro-scroll{margin-top:25px}
.flow-section{padding-block:145px}.studio-board{position:relative;--board-rgb:202,255,75;--frame-alpha:0}.board-bar{position:absolute;top:-48px;left:-16px;right:-16px;height:35px;border:1px solid rgba(var(--board-rgb),.18);display:flex;align-items:center;gap:20px;padding:0 13px;font:8px monospace;background:linear-gradient(90deg,rgba(var(--board-rgb),.07),#17201095);color:#a8b59b;letter-spacing:.4px}.board-bar>span{display:flex;gap:10px;align-items:center}.board-bar>span i{width:6px;height:6px;background:rgb(var(--board-rgb));opacity:.75}.board-bar>small{font-size:7px;color:#718362;margin-left:auto}.replay-scene{background:none;border:0;border-left:1px solid rgba(var(--board-rgb),.2);color:#829673;padding:0 0 0 15px;font:8px monospace;display:flex;align-items:center;gap:6px;cursor:pointer;min-height:28px}.replay-scene svg{width:11px;height:11px}.replay-scene:hover{color:rgb(var(--board-rgb))}.replay-scene:focus-visible{outline:1px solid rgb(var(--board-rgb));outline-offset:3px}
.draw-frame{position:absolute;inset:-12px -16px;width:calc(100% + 32px);height:calc(100% + 24px);overflow:visible;pointer-events:none;z-index:12;color:rgb(var(--board-rgb))}.draw-path{stroke:rgb(var(--board-rgb));stroke-width:.7;vector-effect:non-scaling-stroke;opacity:var(--frame-alpha);filter:drop-shadow(0 0 4px rgba(var(--board-rgb),.3))}.frame-anchors{fill:#182110;stroke:rgb(var(--board-rgb));stroke-width:1;opacity:var(--frame-alpha)}.draft-pointer{filter:drop-shadow(0 3px 4px #0008);opacity:0}.drawing .draw-path{opacity:.85}.drawing .frame-anchors{opacity:.8}.section-top{border-top:0;padding-top:22px}.section-top .eyebrow:before{background:rgb(var(--board-rgb))}.section-heading{margin-top:60px}.career-layout{margin-top:60px}
.studio-type .type-word{display:inline-block;white-space:nowrap}.type-char{position:relative}.typing-caret:after{content:'';position:absolute;left:100%;top:.12em;height:.8em;width:2px;background:currentColor;box-shadow:0 0 10px rgba(var(--studio-rgb),.5);animation:caret-pulse .45s steps(1) infinite}.studio-type[data-typing=true]{text-shadow:0 0 32px rgba(var(--studio-rgb),.06)}.intro-copy h1 .type-word{line-height:inherit}.studio-board .career-period i{border-color:rgb(var(--board-rgb))}.studio-board .career-row:first-child .career-period i{background:rgb(var(--board-rgb))}.studio-board .career-row:not(:last-child):after{background:linear-gradient(rgba(var(--board-rgb),.4),rgba(var(--board-rgb),.1))}.service-number{border:1px solid #bfa0ff44;background:#bfa0ff0a;width:29px;height:29px;display:grid;place-items:center;border-radius:2px;font-size:9px;color:#c5b0e3}.client-mark{transition:transform .3s,color .3s,filter .3s}.client-mark:hover{filter:drop-shadow(0 0 10px #ffd17933);color:#ffd179}.enquiry-panel{background:linear-gradient(135deg,#86ead408,#16200fc7);border-color:#87ead43a}.enquiry-panel:focus-within{border-color:#87ead477;box-shadow:0 0 35px #87ead40a}.studio-board .service-art{border:1px solid #bf9aff33}.service-expanded .web-illustration{transition:transform .65s}.service-expanded:hover .web-illustration{transform:perspective(800px) rotateY(3deg) rotateX(-2deg)}
.museum-chapter .work-intro{top:151px}.museum-tour-note{top:194px}.museum-chapter .work-bottom{bottom:calc(var(--studio-bottom) + 38px)}.museum-chapter .timeline{bottom:calc(var(--studio-bottom) + 15px)}.museum-chapter .work-copy{bottom:calc(var(--studio-bottom) + 120px)}.museum-chapter .door-copy{top:32%}.work-section{padding-top:130px;padding-bottom:140px}.work-section .section-top{border-top:1px solid #a6c17a2a}.connect-section{padding-bottom:155px}footer{padding-bottom:calc(var(--studio-bottom) + 35px)}
.studio-project .dialog-intro{border-bottom:1px solid #9dbb7844;padding-bottom:25px}.studio-project .dialog-main-image{transform-origin:center;will-change:clip-path}.studio-project .dialog-details>div{border-top:1px solid #9dbb7833;padding-top:18px}
@keyframes studio-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes caret-pulse{50%{opacity:0}}
@media(min-width:1700px){.studio-tools{left:23px}.intro-copy{top:25%}.portrait-scene{height:82%}}
@media(max-width:1150px){.studio-tools{display:none}.studio-console{grid-template-columns:120px 1fr 55px;gap:20px}.console-name{font-size:7px}.console-name>i{display:none}.track-name{font-size:7px}.intro-copy h1{font-size:10vw}.board-bar{left:-12px;right:-12px}.draw-frame{inset:-12px -12px;width:calc(100% + 24px)}}
@media(max-width:900px){.workspace-bar{top:112px;padding-inline:5.5%;font-size:7px;height:28px}.workspace-ruler{top:140px;height:9px}.workspace-file small{display:none}.workspace-meta{gap:16px}.studio-console{grid-template-columns:1fr 55px;padding:9px 5.5%;gap:20px}.console-name{display:none}.intro-copy{top:25%}.intro-meta{font-size:7px}.portrait-scene{height:70%;bottom:calc(var(--studio-bottom) - 5px)}.flow-section{padding-block:130px}.museum-chapter .work-intro{top:168px}.museum-tour-note{top:208px}.section-heading{margin-top:50px}.board-bar>small{display:none}.replay-scene{margin-left:auto}}
@media(max-width:600px){body{--studio-bottom:51px}.workspace-bar{font-size:7px}.workspace-meta>span:first-child{display:none}.workspace-file{gap:9px}.workspace-meta{gap:8px}.studio-console{grid-template-columns:1fr 34px;gap:14px;padding:7px 5.5%;background:#11180ff5}.studio-timeline{gap:5px}.track-name{font-size:0;height:8px;justify-content:center;margin-bottom:7px}.track-name small{font-size:8px;opacity:.6}.studio-timeline>a.active .track-name small{opacity:1}.track-clip{height:10px}.track-clip b{top:2px;width:3px;height:3px}.console-position{font-size:9px;letter-spacing:0}.console-position small{font-size:6px;margin-top:5px}.motion-control{font-size:7px!important;padding:7px 9px!important;right:14px!important;bottom:calc(var(--studio-bottom) + 9px)!important}.introduction,.intro-stage,.reduced .introduction,.reduced .intro-stage{min-height:880px}.intro-copy{top:177px;width:88%}.intro-copy h1{font-size:19.8vw}.intro-description{margin-top:21px}.intro-description p{font-size:10px;max-width:290px}.intro-name{margin-top:17px}.portrait-scene{height:40%;width:92%;right:-13%;bottom:53px}.intro-scroll{top:473px;margin:0;max-width:91px}.intro-meta{bottom:calc(var(--studio-bottom) + 19px)}.intro-meta>span:last-child{max-width:105px;line-height:1.8;display:none}.flow-section{padding:112px 7% 105px}.board-bar{top:-46px;left:-10px;right:-10px;padding:0 10px;height:33px;font-size:7px}.replay-scene{padding-left:10px;font-size:7px}.replay-scene>span{display:none}.replay-scene svg{width:13px;height:13px}.draw-frame{left:-10px;right:-10px;width:calc(100% + 20px)}.draw-path{stroke-width:.55}.draft-pointer text{display:none}.section-top{padding-top:15px}.section-heading{margin-top:40px}.career-layout{margin-top:38px}.section-heading h2,.career-intro h2{font-size:16.4vw}.clients-section .section-heading h2{font-size:14.6vw}.career-row h3{font-size:27px}.service-row h3{font-size:40px}.service-row>summary{grid-template-columns:24px 1fr 32px;gap:13px}.service-number{width:23px;height:23px;font-size:8px}.contact-layout{gap:44px}.service-copy{line-height:1.85}.client-mark strong{font-size:16px}.client-mark svg{width:30px}.client-mark{gap:6px}.studio-project .dialog-intro{padding-bottom:20px}.museum-chapter .work-intro{top:165px}.museum-tour-note{top:197px;font-size:7px}.museum-tour-note em{font-size:27px}.museum-chapter .work-copy{bottom:calc(var(--studio-bottom) + 133px)}.museum-chapter .work-copy h2{font-size:37px}.museum-chapter .work-copy>p:nth-of-type(2){font-size:9px;margin-bottom:9px}.museum-chapter .work-copy>p:first-of-type{margin-top:12px}.museum-chapter .work-bottom{bottom:calc(var(--studio-bottom) + 40px)}.museum-chapter .door-copy{top:auto;bottom:calc(var(--studio-bottom) + 165px)}.work-section{padding-top:85px}.connect-section{padding-bottom:110px}.direct-email{font-size:37px}}
@media(max-width:380px){.career-row h3{font-size:24px}.service-row h3{font-size:37px}.direct-email{font-size:33px}.intro-copy h1{font-size:19.5vw}.portrait-scene{height:39%;width:97%;right:-18%}.client-mark strong{font-size:14px}.client-mark svg{width:27px}}
.reduced .type-char{visibility:visible!important}.reduced .typing-caret:after{display:none}.reduced .draft-pointer{display:none}.reduced .studio-type{text-shadow:none}.reduced .draw-path{filter:none}.reduced .studio-tools,.reduced .studio-console,.reduced .workspace-bar{animation:none!important}.reduced .replay-scene{display:none}
@media(prefers-reduced-motion:reduce){.type-char{visibility:visible!important}.typing-caret:after,.draft-pointer{display:none}.service-expanded:hover .web-illustration{transform:none}}
@media print{.studio-console,.studio-tools,.workspace-bar,.workspace-ruler,.draw-frame,#studio-fx{display:none}.type-char{visibility:visible!important}}

.museum-tour-note{transition:opacity .35s}.museum-chapter:not(.entering-museum) .museum-tour-note{opacity:0;pointer-events:none}

@media(max-width:600px){.museum-chapter .work-copy{bottom:calc(var(--studio-bottom) + 88px)}}