:root{--paper:#f8f8f4;--ink:#20211f;--muted:#62645e;--line:#d8d9d1;--purple:#d9cef7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #7650bc;outline-offset:5px}.skip{position:fixed;top:-100px;background:white;padding:16px;z-index:20}.skip:focus{top:0}header{height:96px;margin:0 4.5%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:60px;position:relative;z-index:3}.monogram{font-size:34px;font-weight:700;letter-spacing:-4px}.monogram span{font-weight:400}nav{display:flex;gap:32px;font-size:14px}nav a{position:relative;padding:8px 0}nav a:after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--ink);transition:width .25s}nav a:hover:after,nav a.active:after{width:100%}.nav-note{margin-left:auto;font-size:12px;color:var(--muted)}.hero{position:relative;min-height:700px;padding:65px 4.5% 0;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:550}.hero h1{position:relative;z-index:1;font-weight:500;font-size:clamp(70px,8.4vw,135px);letter-spacing:-.075em;line-height:1.06;margin:40px 0 35px;pointer-events:none}.hero h1 span{display:block;font-size:.69em;letter-spacing:-.065em}.hero h1 em{font-family:'Playfair Display',Georgia,serif;font-weight:500}.hero-bottom{position:relative;z-index:2;max-width:520px}.hero-bottom p{font-size:17px;line-height:1.65;max-width:445px;color:#50534d}.pill{border:1px solid var(--ink);border-radius:40px;display:inline-flex;align-items:center;gap:35px;padding:15px 23px;font-size:14px;transition:transform .2s,background .2s}.pill:hover{transform:translateY(-3px)}.dark{background:var(--ink);color:white;margin-top:15px}.pill span{font-size:11px;opacity:.6}.hero-art{position:absolute;right:-3%;top:100px;width:52%;height:490px;background:radial-gradient(ellipse at 50% 50%,#e3cafa 0,transparent 65%);transition:transform .7s ease;mix-blend-mode:multiply}.hero-art img{width:100%;height:100%;object-fit:contain}.handnote{position:absolute;right:5%;top:490px;font:italic 23px Georgia;transform:rotate(-9deg);z-index:2}.hero-footer{margin-top:78px;border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.3px;color:var(--muted)}.section{padding:95px 4.5%}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.section-heading h2{font-size:clamp(38px,4.5vw,66px);font-weight:500;letter-spacing:-.055em;margin:0}.count{font-size:16px;vertical-align:top;display:inline-block;margin:10px 0 0 14px;letter-spacing:0}.section-heading p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}.project{margin-bottom:70px}.project-visual{position:relative;min-height:530px;border:0;border-radius:8px;width:100%;display:flex;text-align:left;align-items:center;overflow:hidden;padding:50px;transition:box-shadow .3s}.project-visual:hover{box-shadow:0 15px 45px #29252815}.project-visual:hover .mock{transform:rotate(0deg) translateY(-8px)}.project-label{position:absolute;top:28px;left:32px;font-size:11px;letter-spacing:1.3px}.project-label.right{left:auto;right:32px}.project-title{width:42%;position:relative;z-index:1}.project-title h3{font-size:clamp(46px,5.4vw,82px);letter-spacing:-.065em;font-weight:500;margin:0 0 12px}.project-title p{font-size:17px;max-width:230px;line-height:1.5}.verdant{background:#e6edda;color:#304735}.vinyl{background:#29252c;color:#f7eced}.wander{background:#dfecf7;color:#253e63}.mock{position:absolute;right:7%;width:46%;background:#fcfcf8;border-radius:12px;padding:25px;box-shadow:0 24px 70px #26342922;transform:rotate(-5deg);transition:transform .5s;color:#314236}.mock-top{display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid #ddd;padding-bottom:15px}.mock h4{font-family:Georgia;font-weight:400;font-size:32px;margin:28px 0 20px;max-width:250px}.search-box{border:1px solid #cbd3c3;border-radius:20px;padding:11px 15px;font-size:10px}.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.swatch{height:115px;border-radius:5px;background:linear-gradient(140deg,#f2d1c2,#d8d9b1);display:flex;align-items:end;padding:10px;font-size:10px}.swatch:nth-child(2){background:linear-gradient(130deg,#e1ddb7,#b4bc91)}.swatch:nth-child(3){background:linear-gradient(130deg,#f3e0d0,#d9b6b1)}.vinyl .mock{background:#f0b448;color:#2b252b;transform:rotate(5deg)}.vinyl .mock h4{font-family:inherit;font-size:50px;font-weight:700;line-height:.95;letter-spacing:-3px}.timeline{display:flex;justify-content:space-between;padding:23px 0 10px;border-top:1px solid #59451a;margin-top:35px;font-size:12px}.timeline b{background:#302631;color:#f8cb66;border-radius:30px;padding:10px;margin-top:-10px}.wander .mock{transform:rotate(-4deg);background:#fff}.wander .mock h4{color:#305280;font-family:inherit;font-size:35px;font-weight:500;letter-spacing:-1.5px}.trip{padding:16px;background:#e9effd;border-radius:8px;font-size:12px;color:#304d77;margin-top:12px}.trip small{display:block;margin-top:7px;color:#607391}.preview-tag{position:absolute;bottom:27px;right:30px;font-size:11px;letter-spacing:.7px;border:1px solid currentColor;border-radius:30px;padding:10px 15px}.project-meta{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;margin-top:22px;align-items:center}.project-meta h3{font-size:20px;font-weight:500;margin:0}.project-meta p{font-size:14px;color:var(--muted);margin:5px 0}.tags{display:flex;gap:7px;justify-content:end}.tags span{font-size:11px;border:1px solid var(--line);border-radius:30px;padding:7px 12px}.index{color:var(--muted);font-size:12px}.other{background:#eeeee9}.asterisk{display:inline-block;color:#9572c2;margin-left:20px;font-size:65px;vertical-align:middle}.gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;align-items:start;padding-top:30px}.gallery-item{background:none;border:0;padding:0;text-align:left;transition:transform .25s}.gallery-item:nth-child(2){margin-top:70px;transform:rotate(3deg)}.gallery-item:nth-child(1){transform:rotate(-3deg)}.gallery-item:hover{transform:rotate(0deg) translateY(-7px)}.poster{height:380px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 15px 25px #20202012}.poster small{font-size:11px;letter-spacing:1px}.poster b{font-size:65px;font-weight:500;line-height:.95;letter-spacing:-5px}.poster-one{background:#b9c5f1;color:#26313e}.poster-one b{font-family:Georgia;font-style:italic;font-size:83px}.poster-two{background:#eb5734;color:#381d18}.poster-two b{font-size:75px}.poster-three{background:#dadf91;color:#354123}.poster-three b{font-family:Georgia;font-size:65px;letter-spacing:-4px}.gallery-caption{margin-top:18px;font-size:14px;display:flex;justify-content:space-between}.gallery-caption small{color:var(--muted);font-size:12px}.contact{padding-top:105px;padding-bottom:110px}.contact h2{font-size:clamp(70px,12vw,170px);font-weight:500;letter-spacing:-.075em;margin:15px 0 35px;line-height:1.1}.contact-links{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.contact-links button{border:0;border-top:1px solid var(--line);padding:20px 0;background:none;text-align:left;font-size:23px;display:flex;justify-content:space-between;align-items:center}.contact-links small{font-size:11px;color:var(--muted)}footer{border-top:1px solid var(--line);margin:0 4.5%;padding:25px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}dialog{border:0;border-radius:12px;padding:45px;max-width:650px;width:calc(100% - 32px);max-height:85vh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#20211f77;backdrop-filter:blur(7px)}.close{display:block;margin-left:auto;border:1px solid var(--line);padding:8px 15px;background:none;border-radius:25px}.detail-title{font-size:52px;letter-spacing:-2px;font-weight:500;margin:30px 0 15px}dialog p{line-height:1.7;color:var(--muted)}.detail-grid{display:grid;gap:15px;margin-top:25px}.detail-grid div{border-top:1px solid var(--line);padding-top:15px}.detail-grid h3{font-size:16px;margin:0}.detail-grid p{font-size:14px;margin:5px 0}.detail-poster{margin-top:25px;max-width:350px}.detail-poster .poster{height:400px}@media(min-width:1550px){body{max-width:1700px;margin:auto}}@media(max-width:900px){.nav-note{display:none}.hero{min-height:640px}.hero-art{right:-10%;top:160px;width:60%;opacity:.6}.hero h1{font-size:85px}.hero-bottom{max-width:53%}.hero-bottom p{font-size:16px}.handnote{top:470px}.project-visual{min-height:440px;padding:35px}.project-title h3{font-size:55px}.mock{right:4%;width:48%;padding:18px}.mock h4{font-size:25px}.swatch{height:85px}.project-meta{grid-template-columns:1fr auto}.tags{display:none}.poster{height:290px;padding:18px}.poster b,.poster-one b,.poster-two b,.poster-three b{font-size:48px;letter-spacing:-2px}.section{padding:70px 4.5%}}@media(max-width:600px){header{height:80px;gap:25px}nav{gap:16px;font-size:12px}.monogram{font-size:29px}.hero{padding-top:40px;min-height:760px}.hero h1{font-size:58px;margin-top:30px;letter-spacing:-4px}.hero h1 span{font-size:40px;line-height:1.2;letter-spacing:-2px}.hero-bottom{max-width:100%}.hero-bottom p{max-width:340px}.hero-art{top:360px;right:0;width:85%;height:260px;opacity:1}.handnote{top:550px;font-size:18px;right:7%}.hero-footer{margin-top:285px;font-size:9px}.hero-footer span:last-child{display:none}.section-heading{display:block;margin-bottom:30px}.section-heading p{margin-top:16px;font-size:14px}.section-heading h2{font-size:42px}.project-visual{height:535px;padding:30px;align-items:start}.project-title{width:100%;margin-top:32px}.project-title h3{font-size:51px}.project-title p{font-size:15px;margin:0;max-width:none}.project-label{left:25px;top:22px;font-size:9px}.project-label.right{right:25px}.mock{top:210px;right:10%;width:80%;padding:18px}.mock h4{font-size:25px;margin:18px 0}.mock-top{font-size:9px}.swatch{height:65px}.preview-tag{bottom:16px;right:16px;font-size:9px}.vinyl .mock h4{font-size:40px}.timeline{margin-top:18px}.wander .mock h4{font-size:26px}.trip{padding:10px}.project-meta h3{font-size:19px}.project-meta p{font-size:12px}.project{margin-bottom:40px}.gallery{grid-template-columns:1fr;gap:35px;padding:10px 15px}.gallery-item:nth-child(2){margin-top:0}.poster{height:400px;padding:28px}.poster b,.poster-one b,.poster-two b,.poster-three b{font-size:75px;letter-spacing:-4px}.gallery-item:nth-child(3){transform:rotate(-2deg)}.contact-links{grid-template-columns:1fr;gap:5px}.contact-links button{font-size:22px}footer{gap:15px;flex-wrap:wrap}footer span:last-child{width:100%}dialog{padding:25px}.detail-title{font-size:40px}.asterisk{font-size:46px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Blend the studio backdrop into the paper without cropping the sculpture. */
.hero-art{mask-image:radial-gradient(ellipse at center,#000 48%,transparent 73%)}
.project-label,.preview-tag,.tags span,.mock-top,.gallery-caption small,.contact-links small{font-size:12px}
.contact-links>a{border-top:1px solid var(--line);padding:20px 0;font-size:23px}
@media(max-width:600px){.project-label{font-size:10px}.mock-top{font-size:10px}.hero-art{mask-image:radial-gradient(ellipse at center,#000 45%,transparent 73%)}}
@media(max-width:600px){.hero{min-height:0}.hero-art{position:relative;top:auto;right:auto;width:100%;height:275px;margin:18px 0 0}.hero-footer{margin-top:18px}.handnote{top:auto;bottom:115px;right:9%}}
@media(max-width:360px){.hero h1{font-size:50px;letter-spacing:-3px}.hero h1 span{font-size:34px;letter-spacing:-1.8px}nav{gap:12px}.project-label.right{max-width:120px;text-align:right}.poster-two b{font-size:65px}}
/* Shared page and case study layouts */
main{min-height:calc(100vh - 190px)}
.page-heading{max-width:780px;margin-bottom:65px}.page-heading h1{font-size:clamp(52px,7.5vw,105px);font-weight:500;letter-spacing:-.065em;line-height:1.05;margin:23px 0}.page-heading>p{max-width:530px;font-size:18px;line-height:1.65;color:var(--muted)}
.project-title h2{font-size:clamp(46px,5.4vw,82px);letter-spacing:-.065em;font-weight:500;margin:0 0 12px}.project-visual:hover .mock{transform:rotate(0deg) translateY(-8px)}.project-description{max-width:640px;line-height:1.65}.project-meta{grid-template-columns:minmax(0,1fr) auto auto}.project-meta h3{font-size:19px}
.contact-page{min-height:calc(100vh - 190px)}.contact h1{font-size:clamp(70px,12vw,170px);font-weight:500;letter-spacing:-.075em;margin:15px 0 65px;line-height:1.1}.gallery-page{min-height:calc(100vh - 190px);padding-bottom:110px}
.back-link{font-size:14px;text-decoration:underline;text-underline-offset:6px}.case-intro{padding-top:40px;padding-bottom:25px}.case-heading{padding:65px 0 40px}.case-heading h1{font-size:clamp(64px,10vw,140px);font-weight:500;letter-spacing:-.075em;line-height:1.05;margin:20px 0}.case-subtitle{font-size:clamp(20px,2.5vw,32px);margin:0 0 20px}.case-summary{font-size:18px;line-height:1.7;max-width:650px;color:var(--muted)}.case-visual .project-title h2{font-size:clamp(35px,4vw,58px);line-height:1.08;letter-spacing:-.045em}.draft-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:20px}.case-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:7%;margin:55px 8% 0 4.5%}.case-nav{position:sticky;top:35px;align-self:start;display:grid;gap:21px;padding-top:30px;border-top:1px solid var(--line);font-size:14px}.case-nav a:hover{text-decoration:underline;text-underline-offset:5px}.case-story section{padding:30px 0 80px;border-top:1px solid var(--line);scroll-margin-top:35px}.case-story h2{font-size:clamp(32px,3.4vw,50px);font-weight:500;letter-spacing:-.045em;line-height:1.15;margin:24px 0}.case-story p{font-size:17px;line-height:1.8;color:var(--muted);max-width:760px}.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}.case-facts dt{font-size:13px;text-transform:uppercase;letter-spacing:1px}.case-facts dd{font-size:16px;line-height:1.6;margin:12px 0 0;color:var(--muted)}.case-placeholder{background:#edeee8;border:1px solid var(--line);border-radius:8px;padding:35px;margin-top:35px}.case-placeholder>span,.process-grid>div>span{font-size:12px;letter-spacing:1.2px;color:var(--muted)}.case-placeholder h3{font-size:28px;font-weight:500;letter-spacing:-.04em;line-height:1.2}.case-placeholder p{font-size:15px}.screen-slot{min-height:300px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(120deg,#e9e7f1,#e7eeed)}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:35px 0}.process-grid>div{border-top:1px solid var(--line);padding-top:20px}.process-grid h3{font-size:22px;font-weight:500}.process-grid p{font-size:15px}.next-project{background:#eeeee9}.next-project h2{font-size:clamp(45px,7vw,95px);letter-spacing:-.055em;font-weight:500;margin:25px 0 0}.next-project p{color:var(--muted);font-size:18px}.next-project .back-link{display:inline-block;margin-top:30px}
@media(max-width:900px){.case-body{grid-template-columns:150px minmax(0,1fr);gap:30px;margin-right:4.5%}.project-title h2{font-size:55px}.project-meta{grid-template-columns:1fr auto}}
@media(max-width:600px){.page-heading{margin-bottom:35px}.page-heading h1{font-size:50px}.page-heading .count{font-size:14px;margin-left:9px}.page-heading>p{font-size:16px}.project-title h2{font-size:51px}.case-body{display:block;margin-top:20px}.case-nav{position:static;display:flex;flex-wrap:wrap;gap:16px;padding:20px 0 35px}.case-intro{padding-top:25px}.case-heading{padding-top:45px}.case-heading h1{font-size:66px}.case-summary{font-size:16px}.case-visual .project-title h2{font-size:35px;max-width:300px}.case-story section{padding:30px 0 50px}.case-facts{grid-template-columns:1fr;gap:20px}.process-grid{grid-template-columns:1fr;gap:10px}.process-grid h3{margin:12px 0 0}.process-grid p{margin:8px 0}.case-placeholder{padding:23px}.case-story p{font-size:16px}.contact h1{margin-bottom:45px}}
/* Typography: geometric display type with an open, readable text face. */
:root{--display:'Space Grotesk',Arial,sans-serif;--body:'Manrope',Arial,sans-serif}
body{font-family:var(--body)}h1,h2,h3,.monogram{font-family:var(--display)}
.monogram{letter-spacing:-2px;font-weight:600}
.hero h1{font-family:var(--display);font-size:clamp(68px,7.9vw,120px);font-weight:500;letter-spacing:-.045em;line-height:1.1;margin:50px 0 18px;max-width:900px}
.hero-role{position:relative;z-index:2;font-family:var(--display);font-size:clamp(22px,2.4vw,36px);font-weight:400;letter-spacing:-.025em;margin:0 0 44px}
.hero-bottom p{font-size:17px;line-height:1.85}.hero-art{top:95px;right:-1%;width:48%}.hero-art img{animation:glass-float 9s ease-in-out infinite;transform-origin:center;will-change:transform}
.handnote{font:500 15px var(--body);line-height:1.5;letter-spacing:0;transform:rotate(-6deg)}
.page-heading h1,.case-heading h1,.contact h1{letter-spacing:-.045em;font-weight:500}.section-heading h2,.next-project h2{letter-spacing:-.035em}.case-story h2,.detail-title,.case-placeholder h3{letter-spacing:-.03em}.project-title h2{letter-spacing:-.04em}.eyebrow{letter-spacing:1.5px;line-height:1.5}.project-meta h3{font-weight:500}
.hero .eyebrow{animation:hero-arrive .7s ease-out both}.hero h1{animation:hero-arrive .85s .1s ease-out both}.hero-role{animation:hero-arrive .85s .2s ease-out both}.hero-bottom{animation:hero-arrive .85s .3s ease-out both}
.motion-toggle{background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 4px;font-size:12px;letter-spacing:0;color:var(--muted)}.motion-toggle:hover{color:var(--ink);border-color:var(--ink)}
.hero.motion-paused .hero-art img{animation-play-state:paused}.hero.motion-paused .hero-art{transform:none!important}
@keyframes glass-float{0%,100%{transform:translateY(9px) rotate(-5deg) scale(.95)}50%{transform:translateY(-16px) rotate(5deg) scale(1.025)}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hero h1{font-size:clamp(58px,8vw,75px)}.hero-art{right:-8%;width:58%;top:170px}.hero-role{font-size:27px}.hero-bottom{max-width:55%}}
@media(max-width:600px){.hero h1{font-size:clamp(40px,10.2vw,61px);letter-spacing:-.04em;line-height:1.16;margin:40px 0 12px;white-space:nowrap}.hero-role{font-size:25px;margin-bottom:28px}.hero-bottom{max-width:100%}.hero-bottom p{font-size:16px;line-height:1.8}.hero-art{position:relative;right:auto;top:auto;width:100%;height:285px;margin-top:25px}.hero-footer{gap:15px;align-items:start}.hero-footer>span:first-child{max-width:200px;line-height:1.8}.hero-footer .motion-toggle{display:block;white-space:nowrap}.handnote{bottom:120px;font-size:14px}.page-heading h1{font-size:46px}.case-heading h1{font-size:60px}.project-title h2{font-size:47px}}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none!important}.hero-art img{will-change:auto}}
.hero-art,.handnote{pointer-events:none}.hero-footer{position:relative;z-index:2}
/* The sculpture is now a directly movable object, with no looping motion. */
.hero-art{border:0;padding:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:none}
.hero-art img{animation:none;transform:rotate(var(--drag-turn,0deg));pointer-events:none;user-select:none;-webkit-user-drag:none;will-change:auto}
.hero-art.is-dragging{cursor:grabbing}
.hero-art:focus-visible{outline:none;filter:drop-shadow(0 0 7px #7558b8)}
.reset-sculpture{background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 4px;font-size:12px;white-space:nowrap;color:var(--muted)}
.reset-sculpture:hover{color:var(--ink);border-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Prevent focus on a moved object from scrolling the hero's contents. */
.hero{overflow:clip}
