*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:#cfbea4;color:#171715;font-family:Arial,Helvetica,sans-serif}main{max-width:1772px;margin:auto;overflow:hidden}.artwork{position:relative}.backdrop{display:block;width:100%;height:auto}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}a{color:inherit}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}:focus-visible{outline:3px solid #aa532d;outline-offset:5px}.skip{position:fixed;top:-100px;left:10px;z-index:9;background:white;padding:12px}.skip:focus{top:10px}header{position:absolute;top:2.8%;right:9.3%;width:27%}nav{display:flex;justify-content:space-between;gap:12px}nav a{font-family:'Arial Narrow',Arial,sans-serif;font-size:clamp(12px,1.05vw,18px);text-decoration:none;text-transform:uppercase;min-height:44px;display:flex;align-items:center;white-space:nowrap}nav a:hover{text-decoration:underline}.bio{position:absolute;left:40.2%;top:31.4%;width:46.3%;font-family:'Arial Narrow',Arial,sans-serif}.bio h2{font-size:clamp(20px,1.9vw,33px);color:#fcfaf0;margin:0 0 .25em;letter-spacing:-.04em}.bio .role{font-weight:bold;margin:0 0 2.5em;font-size:clamp(12px,1.05vw,18px)}.bio p{font-size:clamp(13px,1.11vw,19px);line-height:1.22;margin:0}.category{position:absolute;padding:0;border:0;background:none;cursor:pointer;z-index:2}.category img{display:block;width:100%;height:auto;opacity:0}.category:hover{transform:translateY(-6px)}.category[aria-pressed=true]{filter:drop-shadow(0 4px 0 #27241e)}.posters{left:7.05%;top:12.98%;width:11.8%;height:22%}.theatre{left:18.8%;top:21.37%;width:13.3%;height:22.9%}.photography{left:30.7%;top:11.1%;width:12.1%;height:21.8%}.social{left:43.68%;top:17.2%;width:12.1%;height:21.8%}.web{left:55.58%;top:20.2%;width:12.9%;height:22.6%}.logos{left:68.1%;top:11.9%;width:12.25%;height:22.1%}.cartoons{left:80.3%;top:18.77%;width:13.2%;height:23%}.projects{position:absolute;left:14.57%;top:51.3%;width:70.2%;height:40.55%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);column-gap:3.6%;row-gap:8.8%}.project{border:0;padding:0;cursor:pointer;background:#111;overflow:hidden;position:relative;min-height:0}.project img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .2s}.project:hover img{transform:scale(1.035)}.project .caption{position:absolute;bottom:0;left:0;right:0;padding:7px;background:#000c;color:#fff;font-size:14px;opacity:0}.project:focus-visible .caption,.project:hover .caption{opacity:1}.studio p{position:absolute;margin:0;font-size:clamp(10px,.8vw,14.2px);line-height:1.3}.studio-intro{left:69.4%;top:6.57%;width:23.3%}.studio-story{left:56.95%;top:65.75%;width:23.3%}.contact-content{position:absolute;top:7%;left:30%;width:40%}.contact h2{text-align:center;font-weight:900;font-size:clamp(25px,2.7vw,48px);letter-spacing:-.05em;margin:0 0 .7em}form{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:block;color:#fff;background:#111;padding:5px 9px;text-transform:uppercase;font-size:12px;font-weight:bold}.fields{display:grid;gap:7px}input,textarea{display:block;width:100%;border:0;border-radius:0;background:transparent;color:white;font-size:16px;resize:vertical}input{height:23px}textarea{min-height:63px}.form-end{grid-column:1/-1;display:flex;align-items:center;gap:12px}.form-end button{border:1px solid #191919;background:#191919;color:white;padding:9px 15px;cursor:pointer;min-height:44px}.form-end p{font-size:12px;margin:0}.back-top{position:absolute;left:47.8%;top:70%;width:3.8%;min-width:36px;min-height:44px}.back-top img{width:100%}dialog{max-width:min(900px,94vw);max-height:95dvh;background:#e2d9c7;border:0;padding:48px 20px 12px}dialog::backdrop{background:#000d}dialog>img{max-height:75dvh;max-width:100%;display:block;margin:auto}dialog p{text-align:center;margin:12px;font-size:16px}.close{position:absolute;right:8px;top:5px;min-height:40px;border:0;background:none;cursor:pointer;font-weight:bold}
@media(min-width:1772px){.bio p{font-size:19px}.studio p{font-size:14.2px}}
@media(max-width:767px){html{scroll-padding-top:12px}header{position:relative;top:auto;right:auto;width:100%;padding:3px 16px;background:#e5e3dc;order:-1}nav a{font-size:12px}nav{gap:8px}.hero{display:flex;flex-direction:column}.hero .backdrop{min-height:185px;object-fit:cover}.about{background:#c7bba8 url('assets/paper.webp') center/cover;padding:32px 24px 46px}.about>.backdrop{display:none}.bio{position:static;width:auto}.bio h2{font-size:28px;line-height:1.08;max-width:320px}.bio .role{font-size:14px;line-height:1.5;margin:10px 0 26px}.bio p{font-size:16px;line-height:1.55}.portfolio{background:#e1e1d9 url('assets/grid.webp') center/320px;padding:35px 20px 45px;border-block:8px solid #242321}.portfolio>.backdrop{display:none}.portfolio>.sr{position:static;clip:auto;overflow:visible;width:auto;height:auto;margin:0 0 30px;font-size:36px;text-align:center;font-weight:900;letter-spacing:-2px;text-transform:uppercase}.categories{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 16px;align-items:center}.category{position:relative;left:auto;top:auto;width:100%;height:auto}.category img{opacity:1;width:100%;max-height:215px;object-fit:contain}.category:last-child{grid-column:1/-1;width:47%;justify-self:center}.category[aria-pressed=true]{outline:2px solid #494137;outline-offset:5px}.projects{position:static;width:100%;height:auto;margin-top:42px;grid-template-columns:repeat(2,1fr);grid-template-rows:none;gap:16px}.project{aspect-ratio:1.12}.clients{background:#141414}.clients .backdrop{min-height:105px;object-fit:contain}.studio{background:#d9d7ca url('assets/grid.webp');padding-bottom:28px}.studio>.backdrop{width:100%;height:auto;min-height:230px;object-fit:cover}.studio p{position:static;width:auto;font-size:16px;line-height:1.55;background:#f4f2e9;margin:18px 24px 0;padding:20px;box-shadow:2px 4px 0 #ada898}.contact{min-height:565px;background:#c9b89b url('assets/paper.webp') center/cover;padding:32px 24px 95px}.contact>.backdrop{display:none}.contact-content{position:static;width:auto}.contact h2{font-size:34px;margin-bottom:25px}form{grid-template-columns:1fr;gap:12px}.fields{gap:12px}label{font-size:12px;padding:9px 12px}input{height:32px}textarea{min-height:85px}.form-end{flex-wrap:wrap;gap:9px}.form-end p{font-size:13px}.back-top{top:auto;bottom:22px;left:calc(50% - 17px);width:34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

@media(min-width:768px){.back-top img{opacity:0}.category[aria-pressed=true]{outline:2px solid #615845;outline-offset:3px}}
/* Photo album and monochrome client marks */
.projects{background:#e0dfd5 url('assets/grid.webp') center/220px;left:13.8%;width:72%;top:49%;height:45%;padding:18px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;overflow:auto}
.project{background:#eee9dc;padding:7px;box-shadow:1px 2px 4px #0004}.project img{object-fit:cover}.project .caption{opacity:1;font-size:12px;background:#171715b8}
.album-reset{position:absolute;top:45.3%;left:14.7%;border:0;border-bottom:2px solid #34312a;padding:6px 10px;background:#e9e3d4;color:#29261f;font-size:14px;cursor:pointer;min-height:35px;font-weight:bold}
.album-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.album-controls button{min-height:44px;padding:8px 15px;border:1px solid #5d584a;background:transparent;cursor:pointer}.album-controls button:disabled{opacity:.3;cursor:default}
.clients{background:#141414;padding:30px 9% 45px;color:#f3eee2;min-height:210px}.clients h2{text-align:center;margin:0 0 30px;font-size:26px;letter-spacing:.04em}.client-logos{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:0;margin:0;list-style:none}.client-logos li{flex:1;min-width:0;animation:client-float 5s ease-in-out infinite}.client-logos li:nth-child(2n){animation-delay:-1.5s}.client-logos li:nth-child(3n){animation-delay:-3s}.client-logos img{display:block;max-width:100%;width:110px;height:62px;object-fit:contain;margin:auto;filter:brightness(0) invert(1);opacity:.92}.client-logos:hover li{animation-play-state:paused}@keyframes client-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.awards{background:#e3d1ae}.awards img{display:block;width:100%;height:auto}
.contact{background:#c9b89b url('assets/paper.webp') center/cover}.contact>.backdrop{visibility:hidden}.back-top img{opacity:1}
@media(max-width:767px){.projects{position:static;width:100%;height:auto;min-height:200px;padding:10px;margin-top:18px;gap:12px;grid-template-rows:none}.project{aspect-ratio:.85}.album-reset{position:static;display:block;margin:35px auto 0;min-height:44px}.clients{padding:30px 22px}.client-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}.client-logos li:last-child{grid-column:2}.client-logos img{height:50px}.clients h2{font-size:23px}.album-controls{gap:5px}.album-controls p{font-size:13px;margin:8px 2px}.album-controls button{padding:8px}.back-top img{opacity:1}}
@media(prefers-reduced-motion:reduce){.client-logos li{animation:none}}
.project img{object-fit:contain}

.album-reset{cursor:default;margin:0;scroll-margin-top:24px}.projects:empty{background:#e0dfd5 url('assets/grid.webp') center/220px}.category:hover,.category:focus-visible{outline:2px solid #615845;outline-offset:4px}@media(max-width:767px){.album-reset{margin:35px auto 0;text-align:center}.projects:empty{min-height:70px}}
/* The portrait stays pinned while its original poster layer moves on scroll. */
main{overflow:clip}.hero{display:block;height:calc(min(100vw,1772px)*790/1772 + 32vh)}.hero-scene{position:sticky;top:0;width:100%;aspect-ratio:1772/790;overflow:hidden;background:#c8bda9}.hero-portrait{position:absolute;left:35.8916%;top:28.2278%;width:30.1919%;height:auto;z-index:1;pointer-events:none}.hero-posters{will-change:transform;transform:translate3d(0,var(--poster-shift,0px),0)}.hero header{z-index:2;top:12px}.hero .hero-posters{min-height:0}
@media(max-width:767px){.hero{height:calc(100vw*790/1772 + 44px + 23vh);display:block;padding-top:44px}.hero header{position:absolute;top:0;left:0;right:0;width:100%;height:44px}.hero-scene{top:0}.hero-portrait{max-width:none}}
@media(prefers-reduced-motion:reduce){.hero{height:auto}.hero-scene{position:relative}.hero-posters{transform:none!important;will-change:auto}}
.hero,.hero-scene{background:#c8bda9 url("assets/paper.webp") center/cover}
/* Original torn paper edge sits in front of the pinned portrait. */
.hero-edge{position:absolute;z-index:3;top:calc(90% + var(--poster-shift,0px));left:0;right:0;bottom:0;background:#c8bda9 url('assets/paper.webp') center/cover;pointer-events:none}.hero-edge img{display:block;width:100%;height:auto}.astronaut{position:absolute;left:70.88%;top:8.15%;width:10.16%;height:auto;pointer-events:none;will-change:transform}.bio{z-index:1}
.category img{opacity:1}.category,.category:hover,.category[aria-pressed=true]{outline:none;filter:none;box-shadow:none;transition:transform .25s ease}.category:hover{transform:translateY(-3px) rotate(-1.2deg)}.category:focus-visible{outline:2px dashed #926b36;outline-offset:5px;transform:translateY(-3px)}
/* Image-only lightbox, with two minimal navigation arrows. */
dialog{padding:0;border:0;background:transparent;box-shadow:none;width:100vw;height:100dvh;max-width:none;max-height:none;overflow:hidden;margin:0}dialog[open]{display:flex;align-items:center;justify-content:center}dialog::backdrop{background:#000e}dialog>img{max-width:calc(100vw - 112px);max-height:92dvh;width:auto;height:auto;object-fit:contain;margin:0}.album-controls{display:contents}.album-controls p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:-1px}.album-controls button{position:absolute;top:calc(50% - 24px);width:48px;height:48px;border:0;background:transparent;color:white;padding:12px;opacity:.75;cursor:pointer}.album-controls button:hover{opacity:1}.album-controls .previous{left:8px}.album-controls .next{right:8px}.album-controls svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.album-controls button:disabled{visibility:hidden}.close{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;padding:0;min-height:0}.close:focus-visible{clip:auto;width:auto;height:44px;padding:10px;right:12px;top:12px;color:#fff;background:#111}
@media(max-width:767px){.astronaut{left:auto;right:22px;top:10px;width:64px;opacity:.9}.bio h2{padding-right:50px}dialog>img{max-width:calc(100vw - 76px);max-height:94dvh}.album-controls button{width:38px;padding:7px}.album-controls .previous{left:0}.album-controls .next{right:0}.category[aria-pressed=true]{outline:none}}
@media(prefers-reduced-motion:reduce){.hero-edge{top:90%}.astronaut{transform:none!important;will-change:auto}.category:hover{transform:none}}
.hero-edge{top:calc(93.6709% + var(--poster-shift,0px));clip-path:polygon(0 3px,8% 0,16% 4px,24% 1px,33% 5px,42% 0,50% 3px,59% 1px,68% 4px,78% 0,87% 3px,95% 0,100% 2px,100% 100%,0 100%)}@media(prefers-reduced-motion:reduce){.hero-edge{top:93.6709%}}
/* Keep the original hero boundary; remove the enlarged paper cover and gap. */
.hero{height:auto;background:none}.hero-scene{position:relative;top:auto;background:none}.hero-posters{transform:none!important;will-change:auto}.hero-portrait{will-change:transform}.hero-edge{top:93.6709%;background:none;clip-path:none}.hero-edge img{height:100%;object-fit:fill}.about{isolation:isolate}.astronaut{z-index:2}.testimonial{position:absolute;margin:0;width:23.5%;color:#26251f;z-index:2}.testimonial-one{left:10.25%;top:9%}.testimonial-two{left:7%;top:64%}.testimonial span{font-size:clamp(10px,.82vw,14px);text-transform:uppercase;letter-spacing:.03em;color:#756650}.studio .testimonial p{position:static;width:auto;margin:9px 0 0;font-family:Georgia,serif;font-size:clamp(12px,1.05vw,18px);line-height:1.4}
@media(max-width:767px){.hero{height:auto;padding-top:44px}.hero-scene{top:auto}.testimonial{position:static;width:auto;margin:18px 24px 0;background:#f4f2e9;padding:20px;box-shadow:2px 4px 0 #ada898}.testimonial span{font-size:11px}.studio .testimonial p{padding:0;margin:12px 0 0;background:none;box-shadow:none;font-size:16px;line-height:1.55}.astronaut{width:70px;top:14px;right:18px}}
@media(prefers-reduced-motion:reduce){.hero-portrait{transform:none!important;will-change:auto}}
/* Stable text column and a visible, gentle astronaut drift. */
.about{display:grid;grid-template-columns:40.2% 46.3% 13.5%;min-height:0}.about>.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.bio{position:relative;grid-column:2;left:auto;top:auto;width:auto;padding:clamp(135px,12vw,212px) 0 clamp(50px,5vw,88px);text-align:left;font-family:Arial,Helvetica,sans-serif}.bio h2{font-size:clamp(22px,1.9vw,33px);line-height:1.2;letter-spacing:-.025em;margin:0 0 8px}.bio .role{font-size:14px;line-height:1.5;margin:0 0 24px}.bio p{font-size:16px;line-height:1.5;margin:0 0 14px}.bio p:last-child{margin-bottom:0}.astronaut{animation:astronaut-drift 4.5s ease-in-out infinite}@keyframes astronaut-drift{0%,100%{translate:0 0}50%{translate:5px -12px}}
@media(max-width:767px){.about{display:block}.about>.backdrop{display:none}.bio{padding:0;width:100%}.bio h2{font-size:28px;max-width:none;padding-right:64px}.bio .role{margin:12px 0 24px}.bio p{font-size:16px;line-height:1.6;margin-bottom:16px}.astronaut{top:15px}}
@media(prefers-reduced-motion:reduce){.astronaut{animation:none;translate:none}}
.bio .bio-copy{font-family:"Arial Narrow","Aptos Narrow",Arial,sans-serif;font-stretch:condensed;font-size:clamp(16px,1.25vw,22px);line-height:1.25;text-align:left;text-indent:0;letter-spacing:0;word-spacing:normal;margin:0}.bio .role{margin-bottom:24px}@media(max-width:767px){.bio .bio-copy{font-size:16px;line-height:1.4}}
.projects,.projects:empty{background:none}.portfolio #album-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:-1px;padding:0;border:0}.projects{scroll-margin-top:24px}
/* Match the reference text block and keep testimonial typography consistent. */
.bio .bio-copy{font-family:Arial,Helvetica,sans-serif;text-align:justify;text-align-last:left;line-height:1.3;hyphens:none}
.testimonial,.testimonial span,.studio .testimonial p{font-family:Arial,Helvetica,sans-serif;font-style:normal}
.studio .testimonial p{font-size:clamp(14px,1.05vw,18px);line-height:1.4}
dialog::backdrop{background:rgba(0,0,0,.8)}
dialog>img{border:.5cm solid #f7f4ec;box-sizing:content-box;max-width:calc(100vw - 150px);max-height:calc(92dvh - 1cm);box-shadow:0 6px 25px rgba(0,0,0,.25)}
@media(max-width:767px){.bio .bio-copy{font-size:16px;line-height:1.4}.studio .testimonial p{font-size:16px}dialog>img{max-width:calc(100vw - 114px);max-height:calc(94dvh - 1cm)}}
/* The category strip stays compact; albums grow the document only when opened. */
.portfolio{background:#dfdfd5 url('assets/portfolio-unified.webp') center bottom/100% auto}
.portfolio-cover{position:relative;aspect-ratio:1772/620}
.portfolio-cover>.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.portfolio-cover .posters{top:27.42%;height:46.45%}.portfolio-cover .theatre{top:45.16%;height:48.39%}.portfolio-cover .photography{top:23.39%;height:46.13%}.portfolio-cover .social{top:36.29%;height:46.13%}.portfolio-cover .web{top:42.74%;height:47.74%}.portfolio-cover .logos{top:25.16%;height:46.61%}.portfolio-cover .cartoons{top:39.68%;height:48.55%}
.projects{position:relative;left:auto;top:auto;width:72%;height:auto;margin:0 auto;padding:0 0 60px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:24px;overflow:visible;background:none}
.projects:empty{display:none;padding:0;margin:0}
.project{aspect-ratio:1.6;padding:0;border:0;box-shadow:none;background:#e8e8e2}
.project img{object-fit:cover;filter:grayscale(1);width:100%;height:100%}
.project .caption{opacity:0;background:#0009;padding:8px}.project:hover .caption,.project:focus-visible .caption{opacity:1}
dialog>img{filter:none}
.portfolio::after{content:"";display:block;width:100%;aspect-ratio:1772/130;background:#141414 url('assets/portfolio-edge.webp') center bottom/100% 100% no-repeat;position:relative;pointer-events:none}
.projects{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.projects[data-category="posters"] .project{aspect-ratio:5/7}
@media(max-width:767px){.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:767px){.portfolio-cover{aspect-ratio:auto}.portfolio-cover>.backdrop{display:none}.portfolio-cover .sr{position:static;clip:auto;overflow:visible;width:auto;height:auto;display:block;margin:0 0 30px;font-size:36px;text-align:center;font-weight:900;letter-spacing:-2px;text-transform:uppercase}.portfolio-cover .category{position:relative;top:auto;left:auto;height:auto;width:100%}.portfolio-cover .category:last-child{width:47%}.projects{width:100%;margin-top:28px;padding-bottom:0;gap:16px}.projects:empty{display:none;margin-top:0}.project{aspect-ratio:1.15}.project .caption{font-size:11px}}

/* One toolbar remains within its portfolio section. */
.portfolio{background:#dfdfd5 url('assets/portfolio-paper.webp') center top/100% auto;position:relative}
.toolbar-track{position:absolute;left:1.3%;top:145px;bottom:0;width:3.4%;pointer-events:none;z-index:3}
.toolbar-track img{position:sticky;top:20vh;width:100%;height:auto;display:block}
.section-heading-image{display:block;height:auto;object-fit:contain;margin:0 auto}
.clients h2 .section-heading-image{width:clamp(150px,15vw,240px);max-width:100%}
.contact h2 .section-heading-image{width:clamp(240px,27vw,440px);max-width:100%}
.theatre-album .caption{opacity:1;font-family:Arial,Helvetica,sans-serif;font-size:14px}
.theatre-album[aria-expanded=true]{outline:2px solid #615845;outline-offset:3px}
.theatre-photos{grid-column:1/-1;scroll-margin-top:24px}.theatre-photos h3{font-family:Arial,Helvetica,sans-serif;font-size:24px;margin:12px 0 22px}
.theatre-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
dialog>img{border:0;box-shadow:none;max-width:calc(100vw - 112px);max-height:92dvh}
@media(max-width:767px){.toolbar-track{display:none}.theatre-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.theatre-album .caption{font-size:12px}dialog>img{max-width:calc(100vw - 76px);max-height:94dvh}}
main{width:100%;max-width:none;margin:0}.hero{height:calc(100vw*790/1772 + 32vh)}.clients{position:relative;overflow:visible;z-index:1}.clients::before,.clients::after{content:"";position:absolute;left:0;right:0;height:clamp(30px,5vw,82px);background:url('assets/clients-divider.png') center/100% 100% no-repeat;pointer-events:none;z-index:2}.clients::before{top:calc(-1 * clamp(30px,5vw,82px))}.clients::after{bottom:calc(-1 * clamp(30px,5vw,82px));transform:scaleY(-1)}
@media(max-width:767px){.hero{height:auto;padding-top:44px}.clients::before,.clients::after{height:42px}.clients::before{top:-42px}.clients::after{bottom:-42px}}
/* Final section continuity and original contact artwork. */
.hero{height:calc(100vw*790/1772)}
.hero-scene{position:relative}
header{right:7%;width:35%}
nav a{font-size:clamp(10px,1vw,18px)}
.awards{height:calc(100vw*830/3508);overflow:hidden;background:#141414}
.awards img{width:100%;height:auto;max-width:none;transform:translateY(-32.2%)}
.clients{overflow:hidden;padding-bottom:45px}
.clients::before,.clients::after{height:clamp(30px,5vw,82px);z-index:1}
.clients::before{top:0}
.clients::after{bottom:0;transform:scaleY(-1)}
.contact{background:none;min-height:0;padding:0}
.contact>.backdrop{visibility:visible;display:block;width:100%;height:auto}
.contact-content,.contact .back-top{display:none}
@media(max-width:767px){.hero{height:auto;padding-top:44px}.awards{height:calc(100vw*830/3508)}header{right:auto;width:100%}.clients{padding-bottom:30px}.clients::before,.clients::after{height:42px}.clients::before{top:0}.clients::after{bottom:0}}
/* Clients panel supplied by the designer: the artwork owns both rough edges. */
.clients{background:#1d1d1d url('assets/clients-background.png') center/100% 100% no-repeat;aspect-ratio:2048/477;min-height:0;padding:clamp(76px,7vw,124px) 9% clamp(68px,6vw,108px);overflow:hidden}
.clients::before,.clients::after{content:none}
.clients h2,.clients .client-logos{position:relative;z-index:1}
.clients h2{margin:0 0 clamp(26px,3vw,50px)}
.client-logos{min-height:62px}
@media(max-width:767px){.clients{aspect-ratio:auto;min-height:360px;padding:82px 22px 72px;background-size:auto 100%;background-color:#1d1d1d}.clients h2{margin-bottom:32px}.client-logos{min-height:0}}


/* Contact interactions and final section repairs */
.clients{
  background-image:url('assets/clients-background.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  aspect-ratio:5568/1272;
}
.clients::before,.clients::after{content:none!important;display:none!important}
.clients h2,.clients .client-logos{position:relative;z-index:1}
.portfolio{margin-top:0;border-top:0;background-repeat:repeat-y;background-size:100% auto}
.about + .portfolio{margin-top:0}
.contact{position:relative}
.contact-overlay{position:absolute;inset:0;z-index:2}
.contact-form{display:block!important;position:absolute;inset:0;margin:0;padding:0;min-height:0;background:none;border:0}
.contact-form input,.contact-form textarea{position:absolute;display:block;background:transparent;border:0;outline:0;box-shadow:none;color:#f4efe1;font:inherit;padding:2px 4px;resize:none}
#contact-name{left:35.3%;top:23.1%;width:13.9%;height:6.6%}
#contact-email{left:35.3%;top:31.4%;width:13.9%;height:6.6%}
#contact-message{left:50.6%;top:23.1%;width:16.4%;height:16.6%}
.contact-form button{position:absolute;left:43.4%;top:42.1%;width:13.2%;height:6.8%;padding:0;border:0;background:transparent;color:transparent;cursor:pointer}
.contact-form button:focus-visible,.social-links a:focus-visible{outline:2px solid #f2eee4;outline-offset:3px;border-radius:3px}
.social-links{position:absolute;left:41.2%;top:52.1%;width:15.3%;height:10.2%;display:block}
.social-links a{position:absolute;display:block;width:17%;height:100%;border-radius:50%}
.social-instagram{left:21%}
.social-facebook{left:62%}
@media(max-width:767px){
 .clients{aspect-ratio:auto;min-height:390px;background-size:auto 100%;padding:86px 22px 80px}
 .contact-form input,.contact-form textarea{font-size:8px}
}

/* Designer's final backgrounds and category preview treatment. */
.portfolio{background:#e5e5e2 url('assets/portfolio-background.png') center top/100% 100% no-repeat;border:0}
.portfolio-cover>.backdrop{height:auto;object-fit:initial;clip-path:inset(0 0 91% 0)}
.projects .project img{filter:none}
.projects[data-category="theatre"] .project img,.projects[data-category="photography"] .project img{filter:grayscale(1)}
.hero{z-index:1}
.about{margin-top:clamp(-16px,-.9vw,-6px);z-index:2}
.clients{background:#fff url('assets/clients-background.png') center/100% 100% no-repeat;aspect-ratio:auto;min-height:calc(100vw*1272/5568);padding:clamp(55px,5vw,95px) 9% clamp(55px,4vw,80px)}
.clients h2{margin:0 0 clamp(24px,2.5vw,44px)}
.clients::before,.clients::after{content:none!important;display:none!important}
@media(max-width:767px){.portfolio{background-size:100% 100%;border:0}.portfolio-cover>.backdrop{display:none}.about{margin-top:-6px}.clients{min-height:390px;aspect-ratio:auto;padding:70px 22px;background-size:100% 100%}.clients h2{margin-bottom:30px}}
/* Merge the supplied Clients band into the paper surrounding Contact. */
.clients{background-color:#c9b89b;background-image:url('assets/clients-background.png'),url('assets/paper.webp');background-position:center,center;background-size:100% 100%,cover;background-repeat:no-repeat,no-repeat;background-blend-mode:multiply,normal}
@media(max-width:767px){.clients{background-size:100% 100%,cover}}
/* Shared designer-supplied paper joins Clients and Contact. */
.clients{background-image:url('assets/clients-background.png'),url('assets/contact-background.png');background-position:center,center bottom;background-size:100% 100%,100% auto;background-blend-mode:multiply,normal}
.contact{background:#c9b89b url('assets/contact-background.png') center top/100% auto no-repeat;isolation:isolate;margin-top:-1px}
.contact>.backdrop{mix-blend-mode:darken;clip-path:inset(6.8% 0 0 0)}
@media(max-width:767px){.clients{background-size:100% 100%,cover}.contact{background-size:cover}}
/* Raise the entire Contact panel slightly over the preceding section. */
.contact{margin-top:clamp(-64px,-4vw,-24px);z-index:3}
.contact>.backdrop{clip-path:inset(7% 0 0 0)}
@media(max-width:767px){.contact{margin-top:-24px}}
/* Preserve the supplied portfolio paper proportions; tile vertically. */
.portfolio{background-image:url('assets/portfolio-background.png');background-size:100% auto;background-position:center top;background-repeat:repeat-y}
@media(max-width:767px){.portfolio{background-size:100% auto;background-repeat:repeat-y}}
/* Move Clients over the testimonials; keep its lower join intact. */
.clients{position:relative;z-index:3;margin-top:clamp(-64px,-4vw,-24px)}
.contact{margin-top:-1px;z-index:2}
.contact>.backdrop{clip-path:inset(6.8% 0 0 0)}
@media(max-width:767px){.clients{margin-top:-24px}.contact{margin-top:-1px}}
/* Overlap the Clients paper edge with the grass in the studio collage. */
.clients{margin-top:clamp(-135px,-8.5vw,-48px)}
@media(max-width:767px){.clients{margin-top:-48px}}
/* Keep Clients content low; raise only the black artwork boundary. */
.clients{margin-top:clamp(-64px,-4vw,-24px);background-image:url('assets/contact-background.png');background-position:center bottom;background-size:100% auto;background-blend-mode:normal;overflow:visible;isolation:isolate}
.clients::before{content:""!important;display:block!important;position:absolute;inset:-38px 0 0;height:auto;z-index:-1;background:url('assets/clients-background.png') center/100% 100% no-repeat;mix-blend-mode:multiply;pointer-events:none}
.clients::after{content:none!important;display:none!important}
@media(max-width:767px){.clients{margin-top:-24px;background-size:cover}.clients::before{inset:-24px 0 0;height:auto}}
/* Keep one continuous paper surface through the end of Portfolio. */
.portfolio::after{content:none;display:none;background:none}
.portfolio{padding-bottom:clamp(28px,3vw,54px)}
@media(max-width:767px){.portfolio{padding-bottom:36px}}
/* Show the complete portrait cartoons in their preview cards. */
.projects[data-category="cartoons"] .project{aspect-ratio:2048/2732;background:transparent}
.projects[data-category="cartoons"] .project img{object-fit:contain;filter:none}
/* Keep the original planet visible above the mobile portfolio. */
@media(max-width:767px){
 .portfolio{padding-top:112px;isolation:isolate}
 .portfolio::before{content:"";position:absolute;top:8px;right:24px;width:120px;height:86px;background:url('assets/about-clean.webp') -370px -18px/620.2px 227.5px no-repeat;mix-blend-mode:multiply;pointer-events:none;z-index:1;clip-path:polygon(48% 4%,48% 17%,67% 28%,84% 44%,96% 61%,99% 74%,96% 85%,87% 96%,70% 99%,49% 91%,49% 84%,30% 68%,14% 49%,4% 32%,1% 18%,4% 9%,15% 3%,29% 0%)}
}
/* Mobile cards follow their paper outlines instead of the rectangular source crops. */
@media(max-width:767px){
 .category.posters img{clip-path:polygon(3% 4%,96% 4%,97% 97%,2% 97%)}
 .category.theatre img{clip-path:polygon(3.5% 8.5%,86% 2.8%,97% 91.5%,13.5% 97%)}
 .category.photography img{clip-path:polygon(5% 3%,96% 3%,96% 97%,3% 97%)}
 .category.social img{clip-path:polygon(6% 2.5%,97% 3.5%,96% 97%,3% 97%)}
 .category.web img{clip-path:polygon(11.5% 2.5%,96% 7%,90% 96.5%,3% 93%)}
 .category.logos img{clip-path:polygon(4% 4%,93% 2.5%,97% 95%,6% 97%)}
 .category.cartoons img{clip-path:polygon(3% 8%,85.5% 3%,97% 91%,13% 97.5%)}
}
/* Mobile: original title artwork, planet behind astronaut, natural Clients edges. */
@media(max-width:767px){
 .portfolio{padding-top:30px}
 .portfolio::before{content:none}
 .about::before{content:"";position:absolute;top:8px;right:25px;width:120px;height:86px;background:url('assets/about-clean.webp') -370px -18px/620.2px 227.5px no-repeat;mix-blend-mode:multiply;pointer-events:none;z-index:0;clip-path:polygon(48% 4%,48% 17%,67% 28%,84% 44%,96% 61%,99% 74%,96% 85%,87% 96%,70% 99%,49% 91%,49% 84%,30% 68%,14% 49%,4% 32%,1% 18%,4% 9%,15% 3%,29% 0%)}
 .astronaut{z-index:2}
 .bio h2{padding-right:125px;min-height:85px}
 .portfolio-cover .sr{font-size:0;letter-spacing:0;width:280px;max-width:100%;height:70px;margin:0 auto 22px;background:url('assets/portfolio-cover-clean.webp') -440px -12px/1151.8px 851.5px no-repeat;mix-blend-mode:multiply}
 .clients{margin-top:0;min-height:0;padding:44px 22px 40px;background:#c9b89b url('assets/contact-background.png') center/cover}
 .clients::before{inset:0;height:auto;background:none;border:14px solid transparent;border-image:url('assets/clients-background.png') 180 0 180 fill/14px 0/0 stretch;mix-blend-mode:multiply}
}