:root{color-scheme:dark;--white:#f4f2f0;--muted:#b6b4b3;--line:#1b1b1b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#000;color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button{border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #f6a2d5;outline-offset:7px}.skip{position:fixed;top:-80px;left:20px;z-index:100;background:#fff;color:#000;padding:12px}.skip:focus{top:20px}.page{max-width:1440px;margin:auto}.hero{height:1252px;position:relative;overflow:hidden}.edition{position:absolute;top:31px;left:49px;right:49px;display:flex;justify-content:space-between;color:#898989;font-size:9px;letter-spacing:1.2px}h1{position:relative;z-index:3;margin:0;padding-top:95px;text-align:center;font-size:54px;line-height:1.005;font-weight:400;letter-spacing:-2.4px}h1 strong{font-weight:600}.orbit{width:92px;height:48px;vertical-align:-8px;fill:none;stroke:var(--white);stroke-width:2.1;stroke-linecap:round}.scene{position:absolute;top:325px;left:50%;width:1440px;height:700px;transform:translateX(-50%)}.prop{position:absolute}.portrait{width:585px;height:auto;left:421px;top:26px;z-index:2;object-fit:contain;animation:float-face 8s ease-in-out infinite;filter:drop-shadow(0 18px 24px #0007)}.projects-link{position:absolute;left:50%;bottom:50px;display:flex;align-items:center;flex-direction:column;gap:18px;transform:translateX(-50%);font-family:'Comic Sans MS','Chalkboard SE',cursive;font-size:17px;letter-spacing:.8px}.projects-link span{transform:rotate(-4deg)}.projects-link svg{width:12px;height:20px;stroke:currentColor;fill:none;stroke-width:1.2;opacity:.5;transition:transform .25s,opacity .25s}.projects-link:hover svg{transform:translateY(6px);opacity:1}.projects{padding:0 49px}.project{border-top:1px solid var(--line);padding:22px 0 48px}.project-top{display:grid;grid-template-columns:minmax(0,1fr) 262px 272px;gap:32px;min-height:234px}.tags{display:flex;gap:5px;list-style:none;padding:0;margin:0 0 33px}.tags li{background:#292929;border-radius:20px;padding:7px 10px 6px;font-size:10px;line-height:1;white-space:nowrap}.project h2{font-size:26px;line-height:1.08;letter-spacing:-.8px;font-weight:400;margin:0;color:#cecece}.project h2 strong{font-weight:500;color:var(--white)}.project-copy{margin:65px 0 0;font-size:12px;line-height:1.27;max-width:270px}.gallery{display:grid;gap:10px;height:363px}.gallery-territory{grid-template-columns:118fr 332fr 332fr 332fr 196fr}.artwork{display:block;position:relative;overflow:hidden;border-radius:10px;padding:0;background:#000;text-align:left;isolation:isolate}.artwork svg{display:block;width:100%;height:100%;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.artwork:hover svg{transform:scale(1.035)}.image-open{position:absolute;bottom:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#111;font-size:20px;opacity:0;transform:translateY(5px);transition:.25s;z-index:3}.artwork:hover>.image-open,.artwork:focus-visible>.image-open{opacity:1;transform:translateY(0)}.project-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#777;margin-top:17px}.gallery-office{grid-template-columns:1fr 1fr 1fr .7fr}.office-poster{background:#fe613b;padding:26px;color:#222bcd}.poster-top{display:block;font-size:11px;line-height:1.1;font-weight:600;letter-spacing:.3px}.office-word{display:block;font-size:77px;letter-spacing:-6px;line-height:.85;font-weight:700;margin-top:49px}.asterisk{display:inline-block;font-size:65px;vertical-align:2px;margin-left:4px}.poster-bottom{position:absolute;bottom:23px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:9px;font-weight:bold}.poster-bottom>span{font-size:27px;line-height:.6}.office-card{display:grid;place-items:center;background:#c7d0c8;background-image:linear-gradient(125deg,#b1bbb1,#e4e8df);padding:24px}.business-card{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:195px;background:#f9f4e8;color:#282ebf;padding:20px;transform:rotate(-11deg);box-shadow:3px 9px 18px #0003;transition:transform .4s}.office-card:hover .business-card{transform:rotate(-6deg)}.business-card>span:first-child{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:bold;letter-spacing:-.5px}.business-card i{font-size:29px;font-style:normal}.business-card>span:nth-child(2){font-size:26px;font-weight:bold;line-height:.9;letter-spacing:-1px}.business-card small{font-size:8px}.office-type{background:#252ec4;padding:28px;color:#f3eddd}.office-type>span:first-child{font-size:54px;letter-spacing:-3px;line-height:.95;font-weight:bold}.flower{display:block;position:absolute;right:22px;bottom:31px;font-size:190px;line-height:1;color:#ff6942;transition:transform .7s}.office-type:hover .flower{transform:rotate(30deg)}.office-type small{position:absolute;bottom:24px;left:25px;font-size:8px;letter-spacing:.4px}.office-detail{background:#ebe8d8;color:#292fbe;display:flex;flex-direction:column;align-items:center;justify-content:center}.orange-disc{background:#ff633c;width:144px;height:144px;border-radius:50%;font-size:115px;line-height:1;text-align:center;letter-spacing:-14px;padding-right:15px;transform:rotate(-24deg);box-shadow:7px 11px 0 #c9c6b5}.orange-disc>span{position:absolute;top:61px;left:65px;color:#f0e7d4;font-size:70px}.detail-label{position:absolute;bottom:25px;left:24px;font-size:10px;line-height:1.2;font-weight:bold}footer{padding:111px 49px 27px;border-top:1px solid var(--line);margin:0 49px}footer>*{margin-left:-0px}.footer-label{font-size:10px;color:#888;letter-spacing:1px;margin:0 0 32px}.goodbye{font-family:inherit;font-style:normal;font-weight:400;color:var(--white);font-size:85px;line-height:.98;letter-spacing:-4px;margin:0 0 95px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;letter-spacing:.6px;color:#888}.footer-bottom a{color:#ddd;padding:10px 0}.demo-note{font-size:10px;letter-spacing:.5px}.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:#0b0b0bf5;padding:25px 40px;color:var(--white)}.lightbox::backdrop{background:#000d;backdrop-filter:blur(12px)}.lightbox[open]{display:flex;flex-direction:column}.lightbox-toolbar,.lightbox-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:1px;min-height:40px}.lightbox button{background:transparent;padding:12px}.lightbox-close span{font-size:25px;vertical-align:-2px;margin-left:15px}.lightbox-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px}.lightbox-stage>.artwork{height:min(72vh,680px);width:min(650px,75vw);cursor:default;border-radius:10px}.lightbox-stage>.narrow{width:min(250px,65vw)}.lightbox-stage>.end-tile{width:min(370px,70vw)}.lightbox-stage>.office-poster,.lightbox-stage>.office-type,.lightbox-stage>.office-card,.lightbox-stage>.office-detail{max-height:530px;max-width:490px}.lightbox-stage>.office-card{display:grid}.lightbox-stage .office-word{font-size:110px}.lightbox-stage .business-card{width:85%;height:260px}.lightbox-stage>.office-detail{display:flex}.lightbox-stage>.office-type>span:first-child{font-size:80px}.lightbox-stage .flower{font-size:260px}.lightbox-stage .orange-disc{width:200px;height:200px;font-size:155px}.lightbox-stage .orange-disc>span{top:80px;left:94px;font-size:95px}.lightbox-stage .image-open{display:none}body.modal-open{overflow:hidden}
@media(min-width:1441px){.hero{height:1252px}}@media(max-width:1100px){.hero{height:980px}h1{font-size:46px;padding-top:105px}.scene{top:285px;transform:translateX(-50%) scale(.75);transform-origin:top center}.project-top{grid-template-columns:1fr 190px 190px;gap:24px;min-height:217px}.project-copy{font-size:11px}.project h2{font-size:22px}.tags{gap:3px}.tags li{font-size:8px;padding:6px 7px}.gallery{height:280px}.office-word{font-size:57px;letter-spacing:-4px}.asterisk{font-size:40px}.office-type>span:first-child{font-size:40px}.flower{font-size:140px}.business-card{height:170px;padding:13px}.orange-disc{width:110px;height:110px;font-size:90px}.orange-disc>span{font-size:50px;top:50px;left:53px}.goodbye{font-size:70px}}@media(max-width:760px){.hero{height:790px}.edition{top:24px;left:24px;right:24px;font-size:8px}h1{padding-top:110px;font-size:36px;line-height:1.04;letter-spacing:-1.6px}.orbit{width:63px;height:34px;vertical-align:-5px}.scene{top:300px;transform:translateX(-50%) scale(.49)}.projects-link{bottom:27px;font-size:14px;gap:13px}.projects{padding:0 24px}.project{padding-top:18px;padding-bottom:35px}.project-top{grid-template-columns:1fr 1fr;gap:20px;min-height:0;margin-bottom:28px}.project-lead{grid-column:1/-1}.tags{margin-bottom:23px;gap:4px}.tags li{font-size:9px;padding:6px 9px}.project h2{font-size:27px;letter-spacing:-.8px;line-height:1.06}.desktop-br{display:none}.project-copy{margin:0;font-size:11px;line-height:1.35;max-width:none}.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:300px;gap:8px;scrollbar-width:thin;scrollbar-color:#333 #000;padding-bottom:7px}.artwork{flex:none;width:273px;scroll-snap-align:start;border-radius:7px}.gallery-territory .narrow{width:98px}.gallery-territory .end-tile{width:163px}.gallery-office .artwork{width:260px}.gallery-office .office-detail{width:220px}.office-word{font-size:73px}.asterisk{font-size:55px}.office-type>span:first-child{font-size:47px}.business-card{height:180px}.office-poster,.office-type{padding:24px}.flower{font-size:170px}.project-bottom{font-size:7px;letter-spacing:.5px}.image-open{width:25px;height:25px;font-size:17px;opacity:1;transform:none;bottom:10px;right:10px}footer{margin:0 24px;padding:64px 0 20px}.goodbye{font-size:58px;letter-spacing:-2.8px;margin-bottom:70px}.footer-label{font-size:8px;letter-spacing:.7px}.footer-bottom{flex-wrap:wrap;gap:14px;font-size:8px}.demo-note{order:3;width:100%;font-size:9px}.lightbox{padding:15px}.lightbox-stage{padding:15px 0}.lightbox-stage>.artwork{flex:initial;width:85vw;height:55vh}.lightbox-footer{font-size:9px;letter-spacing:0;gap:4px}.lightbox-footer button{padding:12px 4px}.lightbox-stage .office-word{font-size:85px}.lightbox-stage>.office-type>span:first-child{font-size:60px}}@media(max-width:430px){.hero{height:710px}h1{font-size:30px;padding-top:110px;letter-spacing:-1.2px}.orbit{width:54px}.scene{top:280px;transform:translateX(-50%) scale(.34)}.project h2{font-size:25px}.project-top{gap:18px}.goodbye{font-size:49px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep the brand symbol clear of the wordmark at every card size. */
.office-word{position:relative}.office-word .asterisk{position:absolute;right:0;top:-38px;font-size:44px;line-height:1;margin:0}

/* The portrait expression is animated locally. */
.portrait{width:620px;height:auto;aspect-ratio:720/752;left:410px;top:18px;animation:none;transform-origin:50% 65%;will-change:transform;filter:none}
.portrait-fallback,.portrait-animation{display:block;width:100%;height:100%;object-fit:contain}
.portrait-animation{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.portrait.is-animated .portrait-animation{opacity:1}
.portrait.is-animated .portrait-fallback{visibility:hidden}
@media(max-width:760px){.scene{top:265px;transform:translateX(-50%) scale(.62)}}
@media(max-width:430px){.scene{top:260px;transform:translateX(-50%) scale(.49)}}


/* Portfolio title, with clay capability stars across the full cover. */
.edition{z-index:4;text-transform:uppercase;font-size:10px;letter-spacing:1.4px;color:#898787}
.cover-heading{position:relative;z-index:3;width:calc(100% - 96px);max-width:980px;margin:0 auto;padding-top:94px}
.cover-heading h1{padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;font-size:96px;line-height:1.1;letter-spacing:12px;font-weight:400;text-align:center;text-indent:12px}
.intro-line{display:block;white-space:nowrap}
.intro-line strong{font-weight:600}
.intro-line .orbit{width:90px;height:48px;vertical-align:-8px}
.ability-field{position:absolute;inset:0;z-index:2;padding:0;margin:0;list-style:none;pointer-events:none}
.ability{position:absolute;width:200px;display:flex;flex-direction:column;align-items:center;gap:14px;--star-size:120px;--star-angle:0deg}
.ability-sculpture{display:block;width:var(--star-size);height:var(--star-size);object-fit:contain;transform:rotate(var(--star-angle));user-select:none}
.ability-label{display:block;color:#d5d0cc;font-size:14px;line-height:1.25;letter-spacing:.35px;font-weight:400;white-space:nowrap;text-align:center}
.project-role{font-size:10px;line-height:1.5;color:#999;margin:15px 0 20px;letter-spacing:.25px}
.project-copy{line-height:1.45}
.gallery-case{grid-template-columns:1.2fr 1fr 1fr;height:340px}
.case-media{background:#111}
.case-media img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s}
.case-media:hover img{transform:scale(1.025)}
.case-media svg{object-fit:contain}
.lightbox-stage>.case-media{width:min(1280px,92vw);height:min(74vh,780px);max-width:none}
.footer-bio{max-width:650px;font-size:18px;line-height:1.5;color:#bcb9b6;margin:0 0 80px}
.ability-ui{left:5.8%;top:14%;--star-size:150px;--star-angle:-18deg}
.ability-product{right:3.8%;top:10.8%;--star-size:118px;--star-angle:21deg}
.ability-aigc{left:3.8%;top:60%;--star-size:126px;--star-angle:16deg}
.ability-brand{right:5%;top:53%;--star-size:156px;--star-angle:-16deg}
.ability-code{left:29.7%;top:81%;--star-size:88px;--star-angle:25deg}
.projects-link{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:2px}
.projects-link span{transform:none}
@media(max-width:1100px){
 .cover-heading{padding-top:98px}
 .cover-heading h1{font-size:76px;letter-spacing:9px;text-indent:9px}
 .ability{width:170px;gap:12px}
 .ability-ui{--star-size:130px}
 .ability-brand{--star-size:134px}
 .ability-aigc{--star-size:110px}
 .ability-product{--star-size:104px}
 .ability-code{--star-size:76px}
 .ability-label{font-size:12px}
}
@media(max-width:760px){
 .hero{height:1060px}
 .gallery-case{display:flex;height:280px}
 .gallery-case .artwork{width:85vw;max-width:540px}
 .project-role{margin:14px 0 0;font-size:10px}
 .footer-bio{font-size:15px;margin-bottom:48px}
 .edition{left:24px;right:24px;top:25px;font-size:8px;letter-spacing:.7px}
 .cover-heading{width:calc(100% - 36px);padding-top:84px}
 .cover-heading h1{font-size:clamp(44px,7.5vw,60px);line-height:1.1;letter-spacing:5px;text-indent:5px}
 .intro-line .orbit{width:54px;height:30px;vertical-align:-5px}
 .scene{top:285px}
 .ability{width:150px;gap:10px}
 .ability-label{font-size:12px;letter-spacing:.15px}
 .ability-ui{left:12px;top:218px;--star-size:80px}
 .ability-product{right:12px;top:232px;--star-size:76px}
 .ability-aigc{left:20px;top:655px;--star-size:104px}
 .ability-brand{right:18px;top:690px;--star-size:112px}
 .ability-code{left:calc(50% - 75px);top:862px;--star-size:72px}
 .projects-link{bottom:33px;font-size:9px;letter-spacing:1.6px}
}
@media(max-width:430px){
 .hero{height:1000px}
 .edition{left:20px;right:20px;font-size:7px;letter-spacing:.45px}
 .cover-heading{width:calc(100% - 28px);padding-top:85px}
 .cover-heading h1{font-size:clamp(32px,10.5vw,44px);letter-spacing:4px;text-indent:4px;line-height:1.1}
 .intro-line .orbit{width:47px;height:26px;vertical-align:-4px}
 .scene{top:280px}
 .ability{gap:9px}
 .ability-ui{left:9px;top:209px;width:120px;--star-size:66px}
 .ability-product{right:2px;top:220px;width:130px;--star-size:70px}
 .ability-aigc{left:4px;top:622px;width:150px;--star-size:96px}
 .ability-brand{right:3px;top:654px;width:150px;--star-size:92px}
 .ability-code{left:calc(50% - 70px);top:811px;width:140px;--star-size:66px}
 .ability-label{font-size:11px;letter-spacing:.1px}
}
/* A compact title and a lighter, conversational two-line introduction. */
.cover-heading{max-width:1110px;padding-top:88px}
.cover-heading h1{font-size:88px;font-weight:600;letter-spacing:-4.4px;text-indent:0;line-height:1.04}
.cover-statement{margin:13px 0 0;text-align:center;font-size:48px;line-height:1.14;letter-spacing:-2px;font-weight:400}
.cover-statement>span{display:block;white-space:nowrap}
.cover-statement .orbit{width:78px;height:44px;margin-left:8px;vertical-align:-7px;stroke-width:1.7}
.ability-ui{top:22%;left:3.4%}
.ability-product{top:18%;right:2.7%}
.main-work-heading{display:flex;justify-content:space-between;align-items:center;padding:0 0 26px;color:#888;font-size:10px;letter-spacing:1.6px}
.other-work{padding:56px 49px 106px;overflow:hidden}
.other-work-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-top:52px;border-top:1px solid var(--line)}
.section-eyebrow{font-size:10px;letter-spacing:1.6px;line-height:1.4;color:#888;margin:0 0 19px}
.other-work h2{font-size:44px;line-height:1.1;font-weight:400;letter-spacing:-1.8px;margin:0}
.other-work h2 span{color:#898787}
.rail-controls{display:flex;gap:10px;padding-bottom:2px}
.rail-controls button{height:42px;width:42px;border:1px solid #343434;border-radius:50%;background:transparent;font-size:23px;transition:background .2s,color .2s,opacity .2s}
.rail-controls button:hover:not(:disabled){background:var(--white);color:#111}
.rail-controls button:disabled{opacity:.28;cursor:default}
.project-rail{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:auto;scroll-snap-type:none;padding:24px 8px 22px;margin:0 -8px;isolation:isolate}
.project-rail::-webkit-scrollbar{display:none}
.small-project{display:block;flex:0 0 var(--project-preview-size,240px);scroll-snap-align:start;min-width:0;position:relative;transition:transform .35s cubic-bezier(.2,.65,.3,1);transform-origin:50% 50%;user-select:none;-webkit-user-drag:none}
.small-project-image{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#151515}
.small-project-image svg{display:block;width:100%;height:100%;pointer-events:none}
.small-project-meta{display:flex;justify-content:space-between;gap:8px;color:#888;font-size:9px;letter-spacing:1.1px;margin-top:18px}
.small-project h3{font-size:21px;font-weight:400;letter-spacing:-.4px;line-height:1.15;margin:11px 0 9px}
.small-project p{font-size:12px;line-height:1.45;color:#aaa;margin:0}
.small-project-open{position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:var(--white);color:#111;display:grid;place-items:center;font-size:24px;opacity:0;transform:translateY(5px);transition:.25s}
@media(hover:hover){.small-project:hover,.small-project:focus-visible{transform:translateY(-5px);z-index:2}.small-project:hover .small-project-open,.small-project:focus-visible .small-project-open{opacity:1;transform:translateY(0)}}
.project-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.project-rail.is-dragging .small-project{transform:none;pointer-events:none}
.rail-footer{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:8px;font-size:9px;letter-spacing:1.3px;color:#777}
.rail-progress{position:relative;flex:1;max-width:550px;height:1px;background:#282828}
.rail-progress span{position:absolute;height:1px;background:#a7a3a1;top:0;left:0;width:50%}
.case-detail{max-width:1440px;padding:0 49px;margin:auto}
.case-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:32px 0;font-size:10px;letter-spacing:1px;color:#aaa}
.case-nav a{padding:10px 0}
.case-intro{padding:100px 0 70px}
.case-intro h1{margin:0 0 30px;padding:0;font-size:76px;font-weight:400;line-height:1;letter-spacing:-3px;text-align:left}
.case-description{max-width:780px;margin:0;font-size:20px;line-height:1.5;letter-spacing:-.2px;color:#b5b2b0}
.detail-gallery{height:auto;display:grid;gap:48px}
.detail-gallery figure{margin:0}
.detail-gallery .artwork{width:100%;border-radius:8px;background:#101010}
.detail-gallery .artwork img{height:auto}
.detail-gallery figcaption{font-size:11px;line-height:1.5;color:#8f8d8b;padding-top:14px}
.case-pagination{display:flex;justify-content:space-between;gap:40px;border-top:1px solid var(--line);padding:45px 0;margin-top:90px}
.case-pagination a{font-size:24px;letter-spacing:-.6px}
.case-pagination a:last-child{text-align:right}
.case-pagination small{display:block;font-size:9px;letter-spacing:1.3px;color:#888;margin-bottom:13px}
.case-credit{font-size:9px;letter-spacing:1px;color:#777;margin:35px 0}
@media(max-width:1100px){
 .cover-heading{padding-top:92px;max-width:880px}
 .cover-heading h1{font-size:76px;letter-spacing:-3.8px}
 .cover-statement{font-size:38px;letter-spacing:-1.5px}
 .cover-statement .orbit{width:58px;height:34px;vertical-align:-6px}
 .ability-ui{left:1%;top:26%}.ability-product{right:0;top:23%}
 .other-work h2{font-size:36px}
}
@media(max-width:760px){
 .hero{height:1140px}
 .cover-heading{padding-top:85px;width:calc(100% - 40px)}
 .cover-heading h1{font-size:66px;letter-spacing:-3px}
 .cover-statement{margin-top:13px;font-size:clamp(23px,4.7vw,34px);letter-spacing:-1px;line-height:1.2}
 .cover-statement>span{white-space:normal}
 .cover-statement .orbit{width:44px;height:27px;margin-left:4px;vertical-align:-5px}
 .scene{top:355px}
 .ability-ui{top:257px;left:12px}.ability-product{top:273px;right:12px}
 .ability-aigc{top:783px}.ability-brand{top:808px}.ability-code{top:992px}
 .main-work-heading{font-size:9px;padding-bottom:22px;letter-spacing:1px}
 .other-work{padding:30px 24px 70px}
 .other-work-heading{padding-top:36px;align-items:flex-start;gap:16px}
 .other-work h2{font-size:31px;letter-spacing:-1px}
 .other-work h2 span{display:block;margin-top:3px}
 .section-eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:16px}
 .rail-controls{padding-top:30px;gap:7px}
 .rail-controls button{width:35px;height:35px;font-size:20px}
 .project-rail{gap:19px;padding-top:26px}
 .small-project{flex-basis:var(--project-preview-size,62vw);max-width:none}
 .small-project h3{font-size:20px}
 .small-project-open{opacity:1;transform:none;width:31px;height:31px;font-size:21px}
 .rail-footer{font-size:7px;letter-spacing:.7px;gap:15px}
 .rail-progress{max-width:140px}
 .case-detail{padding:0 24px}
 .case-nav{font-size:8px;letter-spacing:.6px;padding:20px 0}
 .case-intro{padding:64px 0 44px}
 .case-intro h1{font-size:46px;letter-spacing:-2px;line-height:1.05}
 .case-description{font-size:16px;line-height:1.5}
 .detail-gallery{display:grid;height:auto;gap:30px}
 .detail-gallery .artwork{max-width:none;flex:initial;scroll-snap-align:none}
 .detail-gallery figcaption{font-size:10px}
 .case-pagination{gap:22px;padding-top:34px;margin-top:54px}
 .case-pagination a{font-size:19px}
}
@media(max-width:430px){
 .hero{height:1055px}
 .cover-heading{padding-top:86px;width:calc(100% - 30px)}
 .cover-heading h1{font-size:58px;letter-spacing:-2.8px}
 .cover-statement{font-size:23px;letter-spacing:-.9px}
 .cover-statement .orbit{width:35px;height:24px}
 .scene{top:336px}
 .ability-ui{top:245px;left:9px}.ability-product{top:262px;right:2px}
 .ability-aigc{top:689px}.ability-brand{top:720px}.ability-code{top:920px}
}

/* Lead with a larger CrePal workspace crop; secondary previews retain their compositions. */
.gallery-crepal{grid-template-columns:1.77777778fr 1.36752137fr 1.25435540fr;height:auto;gap:16px;align-items:start}
.gallery-inkstone{grid-template-columns:2.70866142fr 1.33333333fr 1.5fr;height:auto;gap:16px;align-items:start}
.gallery-editorial{grid-template-columns:var(--gallery-columns);height:auto;gap:16px;align-items:start}
.project-preview-link{display:block;position:relative;overflow:hidden;border-radius:10px;aspect-ratio:var(--media-ratio);background:#111;min-width:0;isolation:isolate}
.project-preview-link img{width:100%;height:100%;object-fit:contain}
.gallery-crepal .project-preview-link:first-child img{object-fit:cover;object-position:50% 31%}
.project-preview-link:hover>.image-open,.project-preview-link:focus-visible>.image-open{opacity:1;transform:none}
.case-study-access{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:15px;color:#888;font-size:11px;line-height:1.5}
.case-study-access a{color:#ddd;padding:6px 0}
.case-study-access a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
 .gallery-crepal,.gallery-inkstone,.gallery-editorial{display:flex;align-items:start;height:auto;gap:12px;padding-bottom:8px}
 .gallery-crepal .project-preview-link,.gallery-inkstone .project-preview-link,.gallery-editorial .project-preview-link{flex:0 0 auto;width:auto;height:clamp(240px,64vw,360px);scroll-snap-align:start;border-radius:7px}
 .case-study-access{align-items:flex-start;font-size:10px;gap:12px}
 .case-study-access>span{max-width:50%}
 .case-study-access a{text-align:right;padding-top:0}
}

/* A shared language control for the cover and project pages. */
.edition-tools{display:flex;align-items:center;gap:26px}
.language-switch{display:flex;align-items:center;gap:8px;flex:none;font-size:11px;line-height:1.4;letter-spacing:.1px;text-transform:none}
.language-switch button{padding:6px 2px;background:none;color:#777;transition:color .18s;min-height:32px}
.language-switch button:hover,.language-switch button[aria-pressed="true"]{color:var(--white)}
.language-switch span{color:#444}
.case-nav .language-switch{margin-left:auto}
html[lang="zh-CN"] body{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
html[lang="zh-CN"] .cover-heading h1{font-family:inherit;letter-spacing:-2px}
html[lang="zh-CN"] .cover-statement{font-size:42px;letter-spacing:-1.1px;line-height:1.3}
html[lang="zh-CN"] .project h2{line-height:1.3;letter-spacing:-.5px}
html[lang="zh-CN"] .project-copy{line-height:1.8}
html[lang="zh-CN"] .ability-label{letter-spacing:.3px}
html[lang="zh-CN"] .goodbye{line-height:1.15;letter-spacing:-2px}
html[lang="zh-CN"] .case-description{line-height:1.9}
@media(max-width:760px){.edition-tools{gap:12px}.language-switch{font-size:10px;gap:6px}.case-nav{flex-wrap:wrap;gap:18px}.case-nav .language-switch{margin-left:0}html[lang="zh-CN"] .cover-statement{font-size:clamp(20px,4.2vw,31px);letter-spacing:-.5px}html[lang="zh-CN"] .other-work h2{line-height:1.25}}
@media(max-width:430px){.edition-tools{gap:8px}.language-switch{font-size:10px;gap:5px}.edition{align-items:center}.edition>span{max-width:54%}html[lang="zh-CN"] .cover-statement{font-size:20px;letter-spacing:-.5px}html[lang="zh-CN"] .cover-statement .orbit{width:36px;margin-left:3px}html[lang="zh-CN"] .project-copy{font-size:12px}}

.small-project-image>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Homepage-only cover composition. The case-study PDF and source long page stay intact. */
.gallery-inkstone .project-preview-link:first-child .inkstone-cover-ui{position:absolute;left:45.8%;top:11%;width:51%;height:80%;object-fit:contain;box-sizing:border-box;border:1px solid #c5c7bd;border-radius:7px;box-shadow:0 5px 14px #20251b24;pointer-events:none;background:#f5f4ef}

/* Feature the two red PDF excerpts, followed by the square-project rail. */
.other-featured-project{margin-top:36px;padding-bottom:42px;border-bottom:1px solid var(--line)}
.other-featured-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.other-featured-heading .section-eyebrow{margin-bottom:10px}
.other-featured-heading h3{font-size:30px;line-height:1.15;letter-spacing:-.8px;font-weight:400;margin:0}
.other-featured-heading>a,.featured-controls>a{font-size:11px;white-space:nowrap;padding:8px 0;color:#bbb}
.featured-controls{display:flex;align-items:center;gap:18px;flex-shrink:0}
.featured-controls .rail-controls{padding:0}
.featured-controls .rail-controls button{width:34px;height:34px;font-size:21px}
.other-featured-gallery{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.other-featured-gallery.is-dragging{cursor:grabbing}
.other-featured-gallery.is-dragging>a{pointer-events:none}
.other-featured-gallery img{user-select:none;-webkit-user-drag:none}
.other-featured-gallery::-webkit-scrollbar{display:none}
.other-featured-gallery>a{display:block;position:relative;flex:0 0 auto;width:auto;height:var(--project-preview-size,240px);aspect-ratio:var(--media-ratio);overflow:hidden;border-radius:10px;background:#42120e;min-width:0}
.other-featured-gallery img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s}
.other-featured-gallery a:hover img{transform:scale(1.015)}
.other-featured-gallery a>span{position:absolute;bottom:14px;right:14px;background:#f4f2f0;color:#111;border-radius:50%;height:30px;width:30px;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.other-featured-gallery a:hover>span,.other-featured-gallery a:focus-visible>span{opacity:1}
.featured-project-summary{font-size:11px;line-height:1.5;color:#888;margin:16px 0 0}
@media(max-width:760px){.featured-controls{width:100%;justify-content:space-between;gap:12px}}
.rail-subheading{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:36px}
.rail-subheading .section-eyebrow{margin:0}
@media(max-width:760px){.other-featured-project{margin-top:26px;padding-bottom:30px}.other-featured-heading{margin-bottom:18px;align-items:center}.other-featured-heading h3{font-size:25px}.other-featured-gallery{gap:12px}.other-featured-gallery a>span{opacity:1}.rail-subheading{padding-top:26px}.rail-subheading .rail-controls{padding-top:0}}

/* Fit the complete cover composition into the opening viewport. */
.hero{--cover-height:min(100svh,1080px);height:var(--cover-height);min-height:480px;max-height:none}
.hero .edition{top:clamp(16px,3.5svh,32px)}
.hero .cover-heading{width:calc(100% - 96px);max-width:1110px;padding-top:clamp(52px,11svh,118px)}
.hero .cover-heading h1{font-size:clamp(48px,9svh,88px);line-height:1.04;letter-spacing:-.05em}
.hero .scene{top:28%;left:50%;width:min(46%,calc(var(--cover-height)*.59),560px);height:auto;aspect-ratio:720/752;transform:translateX(-50%);transform-origin:center}
.hero .portrait{left:0;top:0;width:100%;height:100%;aspect-ratio:720/752}
.hero .ability{width:180px;gap:clamp(8px,1.5svh,14px)}
.hero .ability-label{font-size:clamp(11px,1.6svh,14px)}
.hero .ability-ui{left:10%;top:30%;--star-size:clamp(64px,12svh,128px)}
.hero .ability-product{right:9%;top:25%;--star-size:clamp(60px,10.5svh,112px)}
.hero .ability-aigc{left:6%;top:65%;--star-size:clamp(60px,10svh,108px)}
.hero .ability-brand{right:7%;top:62%;--star-size:clamp(64px,11svh,120px)}
.hero .ability-code{left:24%;top:80%;--star-size:clamp(44px,7svh,76px)}
@media(min-width:761px) and (max-width:1100px){
 .hero .ability{width:145px}
 .hero .ability-ui{left:6%}
 .hero .ability-aigc{left:3%}
 .hero .ability-product{right:6%}
 .hero .ability-brand{right:3%}
 .hero .ability-code{left:20%}
}
@media(max-width:760px){
 .hero{--cover-height:100svh;min-height:580px}
 .hero .edition{left:20px;right:20px;top:18px;align-items:center}
 .hero .cover-heading{width:calc(100% - 40px);padding-top:clamp(66px,10svh,94px)}
 .hero .cover-heading h1{font-size:clamp(44px,8svh,60px)}
 .hero .scene{top:30%;width:min(68%,42svh,390px)}
 .hero .ability{width:120px;gap:10px}
 .hero .ability-label{font-size:11px;letter-spacing:.1px}
 .hero .ability-ui{left:5%;top:21%;--star-size:clamp(46px,7.5svh,64px)}
 .hero .ability-product{right:5%;top:23%;--star-size:clamp(44px,7svh,60px)}
 .hero .ability-aigc{left:3%;top:67%;--star-size:clamp(50px,8svh,70px)}
 .hero .ability-brand{right:3%;top:65%;--star-size:clamp(52px,8.5svh,74px)}
 .hero .ability-code{left:calc(50% - 60px);top:84%;--star-size:clamp(42px,6.5svh,56px)}
}

/* Let the full bilingual project label wrap comfortably on narrow screens. */
@media(max-width:760px){.other-featured-heading{flex-direction:column;align-items:flex-start;gap:12px}}

/* Give the Chinese cover title more space between characters. */
html[lang="zh-CN"] .hero .cover-heading{transform:translateY(clamp(10px,1.8svh,18px))}
html[lang="zh-CN"] .hero .cover-heading h1{font-size:clamp(42px,7.8svh,76px);letter-spacing:.16em;text-indent:.16em}
@media(max-width:760px){html[lang="zh-CN"] .hero .cover-heading h1{font-size:clamp(38px,7svh,52px)}}

/* Fixed vector icons avoid emoji substitution and font-baseline shifts on iOS. */
svg.ui-icon{display:block;width:var(--icon-size,20px);height:var(--icon-size,20px);flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:none;pointer-events:none}
.rail-controls{align-items:center}
.rail-controls button{display:grid;place-items:center;padding:0;line-height:1;appearance:none;-webkit-appearance:none}
.rail-controls svg.ui-icon{--icon-size:24px}
.image-open,.small-project-open,.other-featured-gallery a>span{line-height:1;padding:0;place-items:center}
.image-open svg.ui-icon,.small-project-open svg.ui-icon,.other-featured-gallery a>span svg.ui-icon{--icon-size:18px}
.artwork:hover svg.ui-icon{transform:none}
.case-study-access a,.featured-controls>a,.footer-bottom a{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.case-study-access a svg.ui-icon,.featured-controls>a svg.ui-icon,.footer-bottom a svg.ui-icon{--icon-size:14px}
.lightbox-footer button,.case-nav>a{display:inline-flex;align-items:center;gap:7px}

/* Readable project summaries and full-size previews on phones and portrait tablets. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:1000px){
 .project-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;min-height:0;margin-bottom:28px}
 .project-lead{grid-column:1/-1;min-width:0}
 .project-copy{margin:0;max-width:none;font-size:14px;line-height:1.6}
 .tags{flex-wrap:wrap}
 .gallery-crepal,.gallery-inkstone,.gallery-editorial{display:flex;align-items:start;height:auto;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:8px}
 .gallery-crepal .project-preview-link,.gallery-inkstone .project-preview-link,.gallery-editorial .project-preview-link{flex:0 0 auto;width:auto;height:clamp(240px,64vw,360px);scroll-snap-align:start;border-radius:7px}
}
@media(max-width:600px){
 .project-top{grid-template-columns:minmax(0,1fr);gap:16px}
 .project h2,.other-featured-heading h3{text-wrap:balance}
 .project h2{font-size:clamp(25px,6.4vw,32px);line-height:1.16}
 html[lang="zh-CN"] .project h2{line-height:1.4}
 .project-copy,html[lang="zh-CN"] .project-copy{font-size:14px;line-height:1.7}
 .project-role{font-size:11px;line-height:1.6}
 .project-bottom{flex-wrap:wrap;gap:8px;line-height:1.6}
 .case-study-access{font-size:11px}
 .language-switch button{min-height:44px;min-width:30px}
 .rail-controls button,.featured-controls .rail-controls button{width:44px;height:44px}
 .featured-controls{flex-wrap:wrap}
 .footer-bio{font-size:16px;line-height:1.7}
 .footer-bottom{line-height:1.6}
}
@supports not (height:100svh){
 .hero{--cover-height:min(100vh,1080px)}
 .hero .edition{top:24px}
 .hero .cover-heading{padding-top:84px}
 .hero .ability{gap:10px}
 .hero .ability-ui{--star-size:88px}
 .hero .ability-product{--star-size:80px}
 .hero .ability-aigc{--star-size:76px}
 .hero .ability-brand{--star-size:84px}
 .hero .ability-code{--star-size:54px}
 @media(max-width:760px){
  .hero{--cover-height:100vh}
  .hero .scene{width:68%;max-width:390px}
  .hero .ability-ui,.hero .ability-product{--star-size:52px}
  .hero .ability-aigc,.hero .ability-brand{--star-size:60px}
  .hero .ability-code{--star-size:44px}
 }
}

/* Compact phone typography; tablet and desktop type rules stay unchanged. */
@media(max-width:600px){
 .hero .cover-heading h1{font-size:clamp(38px,10vw,48px)}
 html[lang="zh-CN"] .hero .cover-heading h1{font-size:clamp(34px,9.6vw,42px)}
 .project h2{font-size:clamp(20px,5.6vw,24px)}
 .project-copy,html[lang="zh-CN"] .project-copy{font-size:13px;line-height:1.7}
 .other-work h2{font-size:26px;line-height:1.2}
 .other-featured-heading h3{font-size:20px;line-height:1.35;letter-spacing:-.4px}
 .small-project h3{font-size:18px;line-height:1.3;letter-spacing:-.2px}
 .goodbye{font-size:40px;line-height:1.15;letter-spacing:-1.5px}
 .footer-bio{font-size:14px;line-height:1.7}
}