@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/manrope-medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./assets/fonts/inter.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zalando Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/zalando-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--paper:#fff;--ink:#0e0e0e;--muted:#777;--line:#d9d9d9;--gutter:20px;--u:min(1.333333px,calc(100vw / 1440));--media-u:calc(100vw / 1440);font-family:'Manrope',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;font-weight:500;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button,a,input,textarea{touch-action:manipulation}button{color:inherit}button:disabled{cursor:default}img,video{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}h1,h2,h3,h4,h5,h6,b,strong{font-weight:500}ul{margin:0;padding-left:1.25em}button{border:0;background:none;padding:0}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:5px}::selection{background:#a6dbff;color:#111}[hidden]{display:none!important}.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}.skip-link{position:fixed;top:8px;left:20px;transform:translateY(-200%);z-index:4000;background:#fff;color:#000;padding:12px}.skip-link:focus{transform:none}.tag,.nav-link,.text-link,.site-footer,.small-button{font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.tag{text-transform:uppercase}.site-header{position:fixed;top:16px;left:20px;right:20px;z-index:1000;mix-blend-mode:difference;color:#fff;display:grid;grid-template-columns:24.14% 21.14% 22.71% 1fr auto;align-items:start;font-family:Inter,Arial,sans-serif;font-size:14px;line-height:14px;font-weight:500;letter-spacing:-.02em}.site-header a,.site-header button{width:fit-content}.site-header .nav-groups{display:contents}.nav-group{display:flex;flex-direction:column;align-items:flex-start}.nav-right{text-align:right;white-space:nowrap}.language-switch{display:flex;justify-content:flex-end;gap:5px;margin-top:2px}.opacity-link{transition:opacity .2s}.opacity-link:hover{opacity:.5}.square-link{position:relative}.square-link:before{content:'';width:9px;height:9px;background:currentColor;position:absolute;left:-13px;top:2px;opacity:0;transition:opacity .15s}.square-link:hover:before,.square-link[aria-current]:before{opacity:1}.menu-toggle{display:none}.mobile-backdrop{display:none}.text-link{display:inline-flex;gap:7px;align-items:center;text-transform:uppercase}.arrow,.section-arrow{display:inline-block;flex:none;background-color:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;vertical-align:middle}.arrow{width:14px;height:14px;mask-image:url("/assets/icons/flecha2.svg")}.text-link:hover .arrow,.text-link:focus-visible .arrow{mask-image:url("/assets/icons/flecha1.svg")}.section-arrow{width:18px;height:18px;mask-image:url("/assets/icons/flecha1.svg")}.arrow-back{transform:scaleX(-1)}.site-footer{display:flex;justify-content:space-between;align-items:end;padding:20px;min-height:56px;gap:20px;color:#111;background:#fff}.footer-links{display:flex;gap:24px}.cookie-settings-link{font-size:14px;opacity:.65}.home-main{isolation:isolate;overflow-anchor:none}.home-hero{height:780px;position:sticky;top:0;z-index:0;background:var(--paper)}.home-main>.home-dark,.home-main>.home-personal{position:relative;z-index:1}.home-personal{background:var(--paper)}.home-hero h1{position:absolute;left:50.55%;top:244px;font-size:228px;line-height:1;letter-spacing:-.07em;font-weight:500}.hero-intro{position:absolute;left:65.14%;top:491px;width:236px;font-size:16px;line-height:21px;color:#929292;text-indent:22px}.home-dark{background:#0e0e0e;color:#eee;border-radius:16px 16px 0 0;padding:60px 20px 100px;overflow:hidden}.home-about{display:grid;grid-template-columns:1fr 1fr;gap:16px}.about-content{padding-left:0}.about-copy{font-size:28px;line-height:34px;letter-spacing:-.025em}.about-copy p+p{margin-top:18px}.about-portraits{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;margin-top:80px}.about-portraits img{width:100%;object-fit:cover}.experience{width:100%;border-collapse:collapse;margin-top:76px;font-family:Inter,Arial,sans-serif;font-size:12px;line-height:16px;text-align:left;font-weight:500;letter-spacing:-.02em}.experience th{font-weight:500;color:#8b8b8b}.experience td,.experience th{padding:7px 0;border-bottom:1px solid #282828;vertical-align:top}.experience th:first-child{width:34%}.experience th:nth-child(2){width:34%}.project-strip{display:flex;gap:16px;margin:140px -20px 0;padding:0 20px 16px;overflow:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.project-strip::-webkit-scrollbar{display:none}.project-card{position:relative;display:block;overflow:hidden;isolation:isolate;scroll-snap-align:start}.project-strip .project-card{flex:0 0 338px;height:338px}.project-card img{width:100%;height:100%;object-fit:cover}.project-card:after{position:absolute;inset:0;content:'';background:#000;opacity:0;transition:opacity .3s}.card-caption{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);z-index:1;color:#fff;opacity:0;transition:opacity .3s;font-size:20px;line-height:1.25}.card-caption small{display:block;font-size:14px;margin-top:2px}.project-card:hover:after,.project-card:focus-visible:after{opacity:.55}.project-card:hover .card-caption,.project-card:focus-visible .card-caption{opacity:1}.skills{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:88px}.skill-group{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:36px 0;border-bottom:1px solid #292929}.skill-group:first-child{padding-top:20px}.skill-heading h3{font-size:24px;line-height:29px;letter-spacing:-.02em}.skill-heading p{margin-top:8px;color:#a3a3a3;font-size:16px;line-height:20px}.skill-table{padding-top:130px}.skill-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-bottom:1px solid #292929;padding:8px 0;font-size:16px;line-height:21px}.skill-row:last-child{border:0}.skill-row .tag{font-size:14px;padding-top:2px}.skill-row p{color:#a3a3a3}.tools-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:74px}.tool-link{display:flex;align-items:center;gap:12px;border-bottom:1px solid #292929;padding:8px 0;font-size:16px}.tool-link img{object-fit:contain;width:16px;height:16px}.home-personal{padding:140px 20px 120px;overflow:hidden}.personal-intro>p{max-width:870px;font-size:28px;line-height:34px;letter-spacing:-.02em}.photo-strip{display:flex;gap:16px;margin-top:60px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.photo-strip img{width:420px;height:560.4375px;flex:none;object-fit:cover;scroll-snap-align:start}.works-main{padding:250px 20px 180px}.works-main>h1{font-size:80px;line-height:1.05;letter-spacing:-.05em;font-weight:500;margin-bottom:20px}.work-row{display:grid;grid-template-columns:41% 1fr;gap:16px;padding:24px 0;border-top:1px solid #929292;min-height:800px}.work-cover img{width:100%;height:100%;object-fit:cover}.work-summary{position:relative;display:flex;flex-direction:column}.work-description{font-size:28px;line-height:31px;letter-spacing:-.025em;max-width:470px;margin-top:16px}.work-preview{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;margin-top:auto;margin-bottom:auto;min-height:250px}.work-preview .text-link{align-self:start}.work-preview .demo{width:300px;height:196px}.work-preview .portrait-preview{width:170px;height:367px;justify-self:end}.work-preview video{width:100%;height:100%;object-fit:contain}.work-meta{display:grid;gap:22px}.work-meta p{margin-top:5px;color:#909090;font-family:Inter,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:-.02em}.demo{position:relative;overflow:hidden;background:#eee}.demo video{width:100%;height:100%;object-fit:cover}.demo .play-toggle{position:absolute;bottom:8px;right:8px;background:rgba(255,255,255,.9);color:#111;border-radius:50%;width:28px;height:28px;font-family:Inter,sans-serif;font-size:14px;opacity:0;transition:opacity .2s;z-index:2;font-weight:500;letter-spacing:-.02em}.demo:hover .play-toggle,.demo:focus-within .play-toggle,.demo.is-paused .play-toggle{opacity:1}.mockup{position:relative;aspect-ratio:344/712;overflow:hidden;border-radius:12% / 6%;background:#000;padding:2.7%}.mockup video{border-radius:10% / 5%;object-fit:cover;width:100%;height:100%}.mockup-frame{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.mockup .play-toggle{bottom:20px;right:20px}.project-page{overflow:hidden}.related-projects{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid #e5e5e5}.related-item>.tag{display:block;margin-bottom:16px}.related-item .project-card{aspect-ratio:1/1}.contact-main{min-height:945px;padding:240px 20px 100px;display:grid;grid-template-columns:53% 47%;gap:0}.contact-content{padding-right:0}.contact-content>h1{font-size:24px;line-height:28px;font-weight:500;letter-spacing:-.02em;max-width:640px}.contact-form{margin-top:62px}.form-field{margin-bottom:32px}.form-field label{display:block;font-size:20px;margin-bottom:12px}.form-field input,.form-field textarea{border:0;border-bottom:1px solid #d0d0d0;border-radius:0;background:transparent;width:100%;padding:10px 0;color:#111;font-size:16px;line-height:20px}.form-field textarea{min-height:100px;resize:vertical;padding-top:52px}.form-field input::placeholder,.form-field textarea::placeholder{color:#929292}.privacy-consent{display:flex;align-items:flex-start;gap:8px;font-size:16px;line-height:21px;color:#818181}.privacy-consent input{margin:3px 0 0;accent-color:#111}.privacy-consent a{border-bottom:1px solid #ccc}.contact-form>.text-link{margin-top:60px}.form-status{font-size:16px;margin-top:20px;line-height:1.4;max-width:600px}.form-status a{text-decoration:underline}.contact-email{margin-top:22px;font-size:14px;color:#777}.privacy-main{padding:240px 20px 100px}.legal-section{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:80px;margin-bottom:80px;border-bottom:1px solid #d9d9d9}.legal-section:last-child{border:0;margin-bottom:0;padding-bottom:0}.legal-section h1,.legal-section h2{font-weight:500;font-size:32px;letter-spacing:-.025em;line-height:1.2}.legal-copy{font-size:20px;line-height:26px}.legal-copy p+p{margin-top:20px}.legal-copy a{text-decoration:underline;text-underline-offset:3px}.cookie-banner{position:fixed;z-index:2000;bottom:20px;left:20px;width:min(620px,calc(100vw - 40px));background:#111;color:#fff;padding:24px;box-shadow:0 6px 40px #0002;font-size:15px;line-height:1.45}.cookie-banner p{max-width:550px}.cookie-actions{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px}.cookie-actions button{font-family:Inter,sans-serif;font-size:14px;border-bottom:1px solid #999;padding-bottom:4px;font-weight:500;letter-spacing:-.02em}.cookie-banner a{text-decoration:underline}.cookie-dialog{border:1px solid #ddd;padding:32px;max-width:560px;width:calc(100vw - 40px);color:#111;background:#fff}.cookie-dialog::backdrop{background:#0005}.cookie-dialog h2{font-size:28px;font-weight:500;margin-bottom:24px}.cookie-option{display:flex;gap:16px;justify-content:space-between;padding:20px 0;border-top:1px solid #ddd;font-size:17px}.cookie-option p{font-size:14px;color:#666;margin-top:8px;line-height:1.5}.cookie-option input{accent-color:#111;flex:none;width:18px}.cookie-dialog .cookie-actions{justify-content:space-between}.reveal{animation:enter .6s ease both}.js-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}.js-reveal.is-visible{opacity:1;transform:none}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1441px){.home-hero{height:calc(780 * var(--u))}.home-hero h1{font-size:calc(228 * var(--u));top:calc(244 * var(--u))}.hero-intro{top:calc(491 * var(--u));font-size:calc(16 * var(--u));line-height:1.32;width:calc(236 * var(--u))}.home-dark{padding-top:calc(60 * var(--u))}.about-copy{font-size:calc(28 * var(--u));line-height:1.22}.about-portraits{margin-top:calc(80 * var(--u))}.project-strip .project-card{flex-basis:calc(338 * var(--u));height:calc(338 * var(--u))}}
@media(max-width:1150px) and (min-width:801px){.home-hero h1{font-size:16vw}.home-hero{height:620px}.home-hero h1{top:210px}.hero-intro{top:390px;left:62%;width:240px}.home-about,.skills{grid-template-columns:40% 60%}.about-copy{font-size:25px;line-height:31px}.skill-group{grid-template-columns:1fr}.skill-table{padding-top:30px}.work-preview{grid-template-columns:1fr;gap:25px;margin:40px 0}.work-preview .demo{justify-self:end}.work-description{font-size:25px}.work-row{min-height:650px}.contact-main{grid-template-columns:40% 60%}}
@media(max-width:800px){:root{--gutter:20px;--u:1px}.site-header{top:18px;grid-template-columns:1fr auto;font-size:14px;line-height:16px}.menu-toggle{display:block;justify-self:end}.site-header .nav-groups{display:none}.site-header.is-open .nav-groups{display:grid;position:absolute;left:0;right:0;top:78px;gap:32px;font-size:14px;line-height:1.6}.site-header.is-open .nav-right{text-align:left}.site-header.is-open .language-switch{justify-content:flex-start;gap:16px}.site-header.is-open time{font-size:14px}.mobile-backdrop.is-open{display:block;position:fixed;inset:0;background:#fff;z-index:990}.square-link:before{width:9px;height:9px;top:8px}.site-header>.opacity-link{font-size:14px}.site-footer{font-size:10px;align-items:start;gap:28px;padding:20px;flex-direction:column}.footer-links{width:100%;justify-content:space-between}.home-hero{height:650px}.home-hero h1{left:20px;right:20px;top:200px;font-size:clamp(100px,24vw,190px);letter-spacing:-.065em}.hero-intro{left:auto;right:20px;top:360px;width:235px;font-size:16px;line-height:21px}.home-dark{padding:40px 20px 70px;border-radius:12px 12px 0 0}.home-about,.skills{display:block}.home-about>.tag{display:block;margin-bottom:32px}.about-copy{font-size:24px;line-height:30px}.about-portraits{margin-top:40px;gap:12px}.experience{font-size:10px;line-height:15px;margin-top:36px}.experience td{padding:9px 4px 9px 0}.project-strip{margin-top:70px}.project-strip .project-card{flex-basis:76vw;height:76vw;max-height:380px;max-width:380px}.skills{margin-top:55px}.skills>.tag{display:block;margin-bottom:20px}.skill-group{display:block;padding:30px 0}.skill-heading p{max-width:320px}.skill-table{padding-top:30px}.skill-row{grid-template-columns:1fr 1fr;font-size:15px;line-height:20px;gap:14px;padding:13px 0}.skill-row .tag{font-size:14px}.tools-row{margin-top:25px}.home-personal{padding:70px 20px 80px}.personal-intro>p{font-size:24px;line-height:30px}.photo-strip{margin-top:35px}.photo-strip img{width:min(75vw,420px);height:auto;aspect-ratio:320/427;max-width:420px;max-height:none}.works-main{padding:170px 20px 80px}.works-main>h1{font-size:54px;line-height:1.1}.work-row{display:block;padding:20px 0 40px;min-height:0}.work-cover{display:block;aspect-ratio:574/751;margin-bottom:24px}.work-description{font-size:24px;line-height:28px;max-width:none}.work-preview{grid-template-columns:1fr;gap:30px;margin:30px 0;min-height:0}.work-preview .demo{width:100%;height:auto;aspect-ratio:1.55}.work-preview .portrait-preview{width:170px;aspect-ratio:1180/2556;justify-self:center}.work-meta{grid-template-columns:1fr 1fr;gap:20px}.related-projects{padding:35px 20px;gap:12px}.related-item>.tag{font-size:14px;min-height:24px}.card-caption{left:12px;font-size:17px}.card-caption small{font-size:12px}.related-item .project-card{aspect-ratio:3/4}.contact-main{display:block;min-height:0;padding:170px 20px 90px}.contact-main>h2{margin-bottom:32px}.contact-content>h1{font-size:24px;line-height:29px}.contact-form{margin-top:45px}.form-field{margin-bottom:28px}.contact-form>.text-link{margin-top:36px}.privacy-consent{font-size:14px;line-height:20px}.privacy-main{padding:170px 20px 65px}.legal-section{display:block;padding-bottom:45px;margin-bottom:45px}.legal-section h1,.legal-section h2{font-size:28px;margin-bottom:28px}.legal-copy{font-size:17px;line-height:24px}.cookie-banner{left:12px;bottom:12px;width:calc(100vw - 24px);padding:20px;font-size:14px}.cookie-actions{gap:18px 22px}.cookie-dialog{padding:24px}.project-card:focus-visible{outline-offset:-4px}}
@media(hover:none){.project-card:after{opacity:.28}.card-caption{opacity:1;top:auto;bottom:18px;transform:none}.demo .play-toggle{opacity:1}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-reveal{opacity:1;transform:none}}
h4,dl,dd{margin:0}.work-meta dd{margin-top:5px;color:#909090;font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.3;font-weight:500;letter-spacing:-.02em}.experience td,.experience th{padding:5px 0;line-height:14px}.skill-group h4{font-weight:500}#about{scroll-margin-top:80px}
/* Case studies use shared responsive grids. Minimum section heights preserve the
   spacing of the 1440px exports, while longer translations can grow naturally. */
.case-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;padding:calc(260 * var(--u)) 20px 60px;min-height:calc(var(--min-height) * var(--u))}.case-hero h1{font-size:80px;line-height:.95;font-weight:500;letter-spacing:-.055em}.case-summary{font-size:20px;line-height:26px;max-width:660px;margin-top:22px;letter-spacing:-.015em}.case-meta{margin-top:76px;display:grid;gap:14px}.case-meta>div{display:grid;grid-template-columns:48% 52%;gap:0}.case-meta dd{font-weight:500}.case-hero-copy>.text-link{margin-top:84px}.case-hero-images{display:grid;gap:16px}.case-hero-images>img{width:100%;height:auto}.hero-demo-tile{width:100%;aspect-ratio:1;background:#f7f7f7;display:grid;place-items:center}.hero-demo-tile>.mockup{width:28.4%}.case-section{padding:60px 20px;min-height:calc(var(--min-height) * var(--u));position:relative}.case-heading-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.case-heading-grid>h2{font-size:12px;line-height:14px;padding-top:2px}.case-copy{font-size:20px;line-height:26px;letter-spacing:-.015em}.case-copy>p+p{margin-top:20px}.case-wide img{width:100%;height:auto}.case-subtitle{font-weight:500;font-size:20px;line-height:25px;letter-spacing:-.02em;margin-top:60px;margin-bottom:30px}.case-issue{border-top:1px solid #ddd;padding:20px 0}.case-issue:last-child{border-bottom:1px solid #ddd}.case-issue h4{font-size:20px;line-height:25px;font-weight:500;letter-spacing:-.02em}.case-issue h4 span{margin-right:6px}.case-issue p{color:#7b7b7b;font-size:16px;line-height:21px;margin-top:7px;letter-spacing:-.015em}.has-rule:before{position:absolute;content:'';left:20px;right:20px;top:30px;height:1px;background:#e1e1e1}.case-solution>.tag{padding-top:2px}.solution-lead{margin-top:20px;width:49.4%;font-size:24px;line-height:29px;letter-spacing:-.025em}.solution-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:80px}.solution-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.solution-card{background:#f7f7f7;min-height:calc(var(--solution-card-height) * var(--u));padding:24px;display:flex;flex-direction:column}.card-number{display:block;font-size:48px;line-height:58px;letter-spacing:-.045em}.solution-card h3{font-size:20px;line-height:25px;font-weight:500;letter-spacing:-.025em;margin-top:88px}.solution-card p{font-size:16px;line-height:20px;letter-spacing:-.015em;color:#777;margin-top:8px}.solution-card.span-two{grid-column:1/-1}.solution-card.span-two h3{margin-top:42px}.project-tpc .solution-card h3{margin-top:42px}.solution-media{display:flex;align-items:center;justify-content:center;background:#f7f7f7;overflow:hidden}.solution-media>img{width:100%}.solution-phone-pair{width:100%;display:flex;gap:40px;justify-content:center;align-items:center}.solution-phone-pair>*{width:33.1%;height:auto}.project-shantai .solution-card,.project-shantai .solution-media{background:#faf7f4}.project-rn .solution-card,.project-rn .solution-media{background:#faf6f3}.case-lead{font-size:32px;line-height:37px;letter-spacing:-.025em}.research-lead{font-size:24px;line-height:29px}.research-table{margin-top:60px}.research-row{display:grid;grid-template-columns:30% 70%;gap:0;border-top:1px solid #d5d5d5;min-height:100px;padding:24px 0}.research-row:last-child{border-bottom:1px solid #d5d5d5}.research-row h3{font-size:20px;font-weight:500;line-height:25px}.research-row ul{padding-left:16px;color:#777;font-size:14px;line-height:18px}.research-row:has(li:nth-child(3)){min-height:120px}.insight-title{margin-top:60px;margin-bottom:24px}.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.insight-card{padding:24px;background:#f7f7f7;min-height:192px;display:flex;flex-direction:column;justify-content:space-between}.insight-card .card-number{font-size:40px;line-height:48px}.insight-card p{font-size:16px;line-height:20px;letter-spacing:-.015em;color:#777;margin-top:32px}.project-shantai .insight-card{background:#faf7f4}.case-gallery{position:relative;height:calc(var(--gallery-height) * var(--u));overflow:hidden}.gallery-item{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}.gallery-item>img{width:100%;height:100%;object-fit:contain}.gallery-item video{object-fit:cover}.case-bridge{padding:160px 20px 120px;min-height:calc(var(--min-height) * var(--u))}.case-bridge>h2{max-width:692px;font-size:32px;line-height:37px;font-weight:500;letter-spacing:-.025em}.bridge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;margin-top:60px;grid-auto-flow:column;grid-template-rows:auto auto}.bridge-grid article{padding:20px 0;border-top:1px solid #d5d5d5;border-bottom:1px solid #e5e5e5;min-height:128px}.bridge-grid h3{font-weight:500;font-size:20px;line-height:25px}.bridge-grid p{font-size:16px;line-height:21px;color:#929292;margin-top:8px}.case-decisions{padding:calc(var(--decision-top) * var(--u)) 20px 16px;min-height:calc(var(--decision-min) * var(--u))}.case-decisions .case-heading-grid{position:relative}.case-decisions .case-heading-grid:before{content:'';position:absolute;height:1px;background:#ddd;top:-40px;left:0;right:0}.decision-intro{font-size:16px;line-height:21px;color:#888;margin-top:20px;letter-spacing:-.015em}.decisions-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:80px}.decision-card{padding:24px;min-height:calc(var(--decision-height) * var(--u));background:#f7f7f7;display:flex;flex-direction:column;min-width:0}.decision-card .card-number{font-size:56px;line-height:67px}.decision-card h3{font-size:24px;line-height:28px;font-weight:500;letter-spacing:-.03em;margin-top:120px;overflow-wrap:break-word}.decision-card>p{font-size:16px;line-height:21px;color:#777;margin-top:8px;letter-spacing:-.015em}.decision-evidence{border-top:1px solid #d6d6d6;margin-top:14px;padding-top:10px}.decision-evidence>.tag{color:#929292;font-size:14px}.decision-evidence>p{font-size:14px;line-height:18px;margin-top:7px}.phone-band{margin:0 20px;padding:80px 60px;display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:507px;background:#f7f7f7}.phone-band-item{flex:0 1 167px;min-width:0}.phone-band-item>img{width:100%;height:auto}.phone-band-item>.demo{width:100%}.case-conclusion{padding:calc(var(--conclusion-top) * var(--u)) 20px 80px;min-height:calc(var(--min-height) * var(--u))}.learnings-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}.learnings-grid h4{font-size:20px;line-height:25px;font-weight:500;letter-spacing:-.02em}.learnings-grid p{font-size:16px;line-height:21px;color:#858585;margin-top:10px}.case-related{padding:20px}.case-related>h2{padding:0 0 25px;border-bottom:1px solid #ddd}.case-related .related-projects{padding:16px 0 0;border:0}.case-related .related-item .project-card{aspect-ratio:1}.case-related .related-item>.tag{font-family:Inter,Arial,sans-serif;font-size:14px;text-transform:none}.case-related .related-item:last-child>.tag{text-align:right}.architecture{margin-top:65px}.architecture-row{display:grid;grid-template-columns:12% 88%;gap:0;margin-bottom:8px;align-items:center}.architecture-row>.tag{color:#929292;font-size:14px}.architecture-cards{display:flex;gap:8px}.architecture-cards>div{background:#f7f7f7;padding:20px;flex:1;min-width:0}.architecture-cards h4{font-size:20px;line-height:25px;font-weight:500}.architecture-cards p{font-size:14px;line-height:18px;color:#888;margin-top:8px}.case-personas{padding:190px 20px 120px;min-height:calc(var(--min-height) * var(--u))}.personas-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:80px}.persona-card{padding:32px;background:#f7f7f7;min-width:0}.persona-top{display:grid;grid-template-columns:184px 1fr;gap:32px}.persona-top>img{width:184px;height:223px;object-fit:cover}.persona-top .card-number{font-size:56px;line-height:67px}.persona-type{margin-top:22px;color:#666;font-size:14px}.persona-top h3{font-size:32px;line-height:38px;font-weight:500;margin-top:8px;letter-spacing:-.03em}.persona-top h3+p{font-size:14px;line-height:18px;color:#666;margin-top:14px}.persona-need{margin-top:32px}.persona-need>.tag{font-size:14px;color:#777}.persona-need>p{font-size:28px;line-height:33px;letter-spacing:-.03em;margin-top:10px}.persona-intro{font-size:16px;line-height:21px;margin-top:32px}.persona-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0}.persona-meta .tag{color:#999;font-size:14px}.persona-meta p{font-size:16px;line-height:21px;margin-top:10px}.persona-section{border-top:1px solid #ddd;padding:28px 0 18px}.persona-section h4{font-size:20px;line-height:25px;font-weight:500;margin-bottom:12px}.persona-section ul{font-size:14px;line-height:22px;padding-left:20px}.persona-end{padding:24px 0 10px;border-top:1px solid #ddd;color:#999;font-size:12px}
@media(min-width:801px) and (max-width:1150px){.case-hero h1{font-size:65px}.case-summary{font-size:18px;line-height:24px}.case-meta{margin-top:50px}.case-meta dt,.case-meta dd{font-size:10px}.solution-card{padding:18px}.solution-card h3{margin-top:50px}.case-lead{font-size:28px;line-height:33px}.research-lead{font-size:22px;line-height:27px}.decision-card{padding:18px}.decision-card h3{font-size:21px;line-height:25px;margin-top:80px}.phone-band{padding:60px 35px;gap:24px}.persona-top{grid-template-columns:35% 1fr;gap:20px}.persona-top>img{width:100%;height:auto}.persona-card{padding:24px}.architecture-cards>div{padding:14px}.architecture-cards h4{font-size:18px}}
@media(max-width:800px){.case-hero{display:flex;flex-direction:column;gap:50px;padding:170px 20px 50px;min-height:0}.case-hero h1{font-size:56px;line-height:1;max-width:100%;letter-spacing:-.05em}.case-summary{font-size:20px;line-height:26px;margin-top:24px}.case-meta{margin-top:40px;gap:15px}.case-meta>div{grid-template-columns:43% 57%;gap:0}.case-meta .tag{font-size:14px;line-height:15px}.case-hero-copy>.text-link{margin-top:40px}.case-hero-images{width:100%}.hero-demo-tile>.mockup{width:35%}.case-section{padding:45px 20px;min-height:0}.case-heading-grid{display:block}.case-heading-grid>h2{margin-bottom:30px}.case-copy{font-size:18px;line-height:25px}.case-copy>p+p{margin-top:20px}.case-subtitle{margin-top:40px;font-size:20px;margin-bottom:20px}.case-issue{padding:18px 0}.case-issue h4{font-size:18px;line-height:24px}.case-issue p{font-size:16px;line-height:22px}.has-rule:before{top:0}.solution-lead{width:100%;font-size:24px;line-height:29px;margin-top:25px}.solution-layout{display:flex;flex-direction:column;margin-top:36px;gap:20px}.solution-cards{grid-template-columns:1fr 1fr;gap:12px}.solution-card{padding:18px;min-height:270px}.card-number{font-size:40px;line-height:48px}.solution-card h3{font-size:18px;line-height:23px;margin-top:45px}.solution-card p{font-size:15px;line-height:20px}.solution-card.span-two{min-height:220px}.solution-media{padding:30px 0;min-height:300px}.solution-phone-pair{gap:20px}.solution-phone-pair>*{width:36%;max-width:220px}.project-tpc .solution-media{padding:0;min-height:0}.case-lead{font-size:25px;line-height:31px}.research-lead{font-size:22px;line-height:28px}.research-table{margin-top:35px}.research-row{grid-template-columns:32% 68%;padding:20px 0;min-height:0!important;gap:12px}.research-row h3{font-size:18px;line-height:23px}.research-row ul{font-size:14px;line-height:20px;padding-left:16px}.insights-grid{gap:12px}.insight-card{padding:18px;min-height:220px}.insight-card p{font-size:15px;line-height:21px;margin-top:28px}.case-gallery{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;padding:35px 20px;align-items:center}.gallery-item{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--ratio,1.65)}.gallery-item>img{height:auto;max-height:none;object-fit:contain}.case-gallery.nuddi-collage{height:440px;display:block;padding:0}.nuddi-collage .gallery-item{position:absolute;left:calc(var(--x) / 1440 * 100vw);top:calc(var(--y) / 800 * 440px);width:calc(var(--w) / 1440 * 100vw);height:calc(var(--h) / 800 * 440px);aspect-ratio:auto}.nuddi-collage .gallery-item>img{height:100%;object-fit:cover}.case-bridge{padding:65px 20px;min-height:0}.case-bridge>h2{font-size:25px;line-height:31px}.bridge-grid{display:grid;grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;margin-top:35px;gap:0}.bridge-grid article{min-height:0;padding:20px 0}.bridge-grid h3{font-size:19px;line-height:25px}.bridge-grid p{font-size:16px;line-height:22px}.case-decisions{padding:65px 20px 20px;min-height:0}.case-decisions .case-heading-grid:before{top:-30px}.decision-intro{font-size:16px;line-height:22px;margin-top:20px}.decisions-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:35px}.decision-card{padding:18px;min-height:360px}.decision-card .card-number{font-size:44px;line-height:53px}.decision-card h3{font-size:20px;line-height:25px;margin-top:50px}.decision-card>p{font-size:15px;line-height:21px}.decision-evidence>p{font-size:13px;line-height:18px}.phone-band{display:grid;grid-template-columns:1fr 1fr;gap:30px 25px;min-height:0;padding:35px 25px;margin:0 20px}.phone-band-item{width:100%;max-width:180px;justify-self:center}.case-conclusion{padding:65px 20px;min-height:0}.learnings-grid{gap:30px 20px}.learnings-grid h4{font-size:18px;line-height:24px}.learnings-grid p{font-size:15px;line-height:21px}.case-related{padding:30px 20px}.case-related .related-item>.tag{font-size:14px}.case-related .related-item .project-card{aspect-ratio:3/4}.architecture{margin-top:35px}.architecture-row{display:block;margin-bottom:25px}.architecture-row>.tag{margin-bottom:12px}.architecture-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.architecture-row:first-child .architecture-cards{grid-template-columns:1fr}.architecture-cards>div{padding:16px}.architecture-cards h4{font-size:18px;line-height:23px}.architecture-cards p{font-size:14px;line-height:19px}.case-personas{padding:65px 20px;min-height:0}.personas-grid{grid-template-columns:1fr;gap:25px;margin-top:35px}.persona-card{padding:24px}.persona-top{grid-template-columns:35% 1fr;gap:20px}.persona-top>img{width:100%;height:auto}.persona-top .card-number{font-size:44px;line-height:53px}.persona-type{margin-top:15px;font-size:13px}.persona-top h3{font-size:28px;line-height:33px}.persona-top h3+p{font-size:13px;line-height:18px;margin-top:10px}.persona-need>p{font-size:25px;line-height:31px}.persona-intro{font-size:16px;line-height:23px}.persona-section{padding:22px 0 18px}.persona-section ul{font-size:14px;line-height:22px}.persona-meta p{font-size:14px;line-height:20px}.case-summary,.case-copy,.solution-lead,.case-lead,.decision-intro,.decision-card,.persona-card{overflow-wrap:anywhere}}
@media(max-width:380px){.solution-cards,.decisions-grid,.insights-grid,.learnings-grid{grid-template-columns:1fr}.solution-card,.decision-card{min-height:0;padding:24px}.solution-card h3,.decision-card h3{margin-top:35px}.decision-card .decision-evidence{margin-top:20px}.persona-card{padding:20px}.case-hero h1{font-size:48px}.research-row{display:block}.research-row ul{margin-top:15px}}
/* Visual alignment corrections after comparison against the exported screens. */
@media(min-width:801px){.case-hero h1{letter-spacing:-.07em}.case-summary{letter-spacing:-.02em}.case-lead{font-size:28px;line-height:34px}.research-lead{font-size:24px;line-height:29px}.decision-card h3{font-size:20px;line-height:25px}.case-meta{gap:0;width:min(100%,644px)}.case-meta>div{padding:6px 0;border-bottom:1px solid #ddd;grid-template-columns:min(328px,48%) 1fr}.case-meta dt{color:#969696}.case-hero-copy>.text-link{margin-top:80px}.case-copy .case-subtitle{margin-top:52px}}
@media(min-width:801px){.home-hero h1{left:49.3%;letter-spacing:-.047em}.hero-intro{letter-spacing:-.025em}}
@media(max-width:800px){:root{--u:calc(100vw / 1440)}.case-gallery.nuddi-collage{height:calc(3200 * var(--u))}.nuddi-collage .gallery-item{left:calc((var(--x) - 720) * 2 * var(--u));top:calc((var(--y) + 800) * 2 * var(--u));width:calc(var(--w) * 2 * var(--u));height:calc(var(--h) * 2 * var(--u))}.nuddi-collage .gallery-item:first-child{left:0;top:0}}
.legal-copy{overflow-wrap:anywhere}
.photo-strip:focus-visible,.project-strip:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(min-width:801px) and (max-width:1100px){.phone-band{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;min-height:0}.phone-band-item{width:100%;max-width:167px;justify-self:center}}
@media(min-width:801px){.site-footer{min-height:28px;padding:7px 20px;line-height:14px;align-items:center}.case-related{padding:28px 20px 140px}.case-related .related-projects{padding-top:52px}.project-rn .case-issue{padding:18px 0}.contact-main{min-height:973px;padding-bottom:60px}}
.form-status:empty{display:none}
.hero-demo-tile{aspect-ratio:684/650;background:linear-gradient(#ddd,#f3f3f3)}
@media(min-width:801px){.project-strip{margin-top:120px}.project-strip .project-card{flex-basis:400px;height:400px;max-width:none;max-height:none}.skills{margin-top:100px}.home-dark{padding-bottom:104px}.home-personal{padding-bottom:140px}}
.project-card:hover:after,.project-card:focus-visible:after{opacity:.5}
@media(min-width:801px){.card-caption{font-size:24px;line-height:30px}.card-caption small{font-size:16px;line-height:20px}}
@media(hover:none){.project-card:after{opacity:.5}}
/* Decorative, responsive R&N background supplied with the Shantai assets. */
.case-gallery>.gallery-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
/* Each ticker repeats a measured group; the viewport remains scrollable by touch or keyboard. */
.ticker{display:block;position:relative;overflow:visible;scroll-snap-type:none}
.ticker-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto;overflow-anchor:none}
.ticker-viewport::-webkit-scrollbar{display:none}
.ticker-track{display:flex;width:max-content;gap:0}
.ticker-group{display:flex;flex:none;align-items:center;gap:16px;padding-right:16px}
.ticker .project-card{scroll-snap-align:none}
.ticker.is-reduced .ticker-clone{display:none}

/* Constrain content independently of full-width backgrounds and media. */
.home-hero,.home-about,.skills,.personal-intro,.works-main,.contact-main,.privacy-main,.case-hero,.case-section,.case-bridge,.case-personas,.case-decisions,.case-conclusion,.case-related{width:100%;max-width:1920px;margin-inline:auto}
.home-dark,.home-personal{padding-inline:0}
.home-about,.skills,.personal-intro{padding-inline:20px}
.site-header{left:max(20px,calc((100% - 1880px) / 2));right:max(20px,calc((100% - 1880px) / 2))}
.site-footer{width:100%;max-width:1920px;margin-inline:auto}
.phone-band{width:calc(100% - 40px);max-width:1880px;margin-inline:auto}
.case-gallery{--u:var(--media-u)}
.project-strip.ticker,.photo-strip.ticker{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.about-copy,.personal-intro>p{font-size:24px;letter-spacing:-.04em;line-height:1.2}
.about-copy{font-family:"Manrope",Arial,sans-serif;font-weight:500;font-variation-settings:normal}
.personal-intro>p{width:100%;max-width:720px;font-weight:500}
.hero-intro{font-family:"Manrope",Arial,sans-serif;font-weight:500;font-variation-settings:normal;font-size:16px;letter-spacing:-.02em;line-height:1.1}

/* Shared control scale and the pinned project introduction. */
button,.tag,.text-link,.nav-link,.small-button,.footer-links,.case-heading-grid>h2,.work-meta dd{font-size:14px;line-height:1.2}
.site-header{font-size:14px;line-height:1.2}
.card-caption,.card-caption small{font-weight:500;font-variation-settings:normal}
.case-meta dt{color:#767676}
.case-meta .tag{font-size:14px;line-height:1.2}
.project-page{overflow:clip}
@media(min-width:801px){
 .case-hero{min-height:0;padding-top:160px;align-items:start}
 .case-hero-copy{position:sticky;top:var(--copy-top,160px);align-self:start}
 .case-meta{margin-top:clamp(28px,5vh,64px)}
 .case-hero-copy>.text-link{margin-top:clamp(24px,5vh,60px)}
 
}
@media(min-width:801px) and (max-width:1100px){.site-header{grid-template-columns:22% 19% 20% 1fr auto}}
@media(max-width:800px){.case-hero-copy{position:static}}
@media(prefers-reduced-motion:no-preference){
 .js-reveal{transform:translateY(var(--reveal-shift,18px));transition-duration:var(--reveal-duration,.7s);transition-timing-function:cubic-bezier(.22,.61,.36,1);transition-delay:var(--reveal-delay,0ms)}
 .js-reveal.is-visible{transform:none}
 .portrait-reveal-left{--reveal-shift:56px;--reveal-duration:1s}
 .portrait-reveal-right{--reveal-shift:56px;--reveal-duration:1.5s;--reveal-delay:.25s}
 .project-card img,.work-cover img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
 .work-cover{overflow:hidden}
 .project-card:hover img,.project-card:focus-visible img,.work-cover:hover img,.work-cover:focus-visible img{transform:scale(1.018)}
 .text-link .arrow{transition:translate .25s ease}
 .text-link:hover .arrow,.text-link:focus-visible .arrow{translate:2px 0}
 .form-field input,.form-field textarea{transition:border-color .25s ease}
 .form-field input:focus,.form-field textarea:focus{border-color:#111}
}


/* Inter always uses Medium and Figma tracking of -2%. */
.experience th,.experience td,.case-meta dd,.skill-group h4.tag{font-weight:500;letter-spacing:-.02em}
.case-related .related-item>.tag{font-weight:500;letter-spacing:-.02em}
.footer-links{letter-spacing:-.02em}

/* Anchor the section's outer edge below the fixed menu, including its padding. */
.square-link:before{top:50%;transform:translateY(-50%)}


/* The experience table uses the same typography as buttons and tags. */
.experience{font-size:14px;line-height:1.2;table-layout:fixed}
.experience th,.experience td{font-size:inherit;font-weight:500;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere;padding-right:12px}
@media(max-width:800px){.experience th:first-child{width:40%}.experience th:nth-child(2){width:32%}.experience th:last-child,.experience td:last-child{padding-right:0}}
.about-copy .scroll-word{opacity:var(--word-opacity,1)}

/* Decorative desktop trail; only active images get their own compositor layer. */
.hero-trail{position:absolute;inset:0;z-index:2;overflow:clip;pointer-events:none}
.hero-trail-image{position:absolute;left:0;top:0;width:var(--trail-size,180px);height:auto;max-width:none;opacity:0;pointer-events:none;user-select:none;transform-origin:center}
.hero-trail-image.is-active{opacity:1;will-change:transform}
.hero-title-inner{display:block}
.hero-letter{display:inline-block}
@media(prefers-reduced-motion:no-preference){
 .hero-letter{animation:hero-letter-in .7s cubic-bezier(.25,.46,.45,.94) calc(.18s + var(--letter-index) * .15s) both}
 .home-hero .hero-intro{animation:hero-copy-in .85s cubic-bezier(.16,1,.3,1) .65s both}
 .home-main:has(#about:target) .hero-letter,.home-main:has(#about:target) .hero-intro{animation:none}
}
@keyframes hero-letter-in{
 from{opacity:0;filter:blur(.12em)}
 20%{opacity:.5;filter:blur(.09em)}
 to{opacity:1;filter:blur(0)}
}
@keyframes hero-copy-in{
 from{opacity:0;transform:translate3d(0,20px,0);filter:blur(4px)}
 to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@media(max-width:800px),(hover:none),(prefers-reduced-motion:reduce){.hero-trail{display:none}}

/* Native document transitions preserve links, history and scroll restoration. */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition{background:#fff}
 .transition-exit-dark::view-transition{background:#0e0e0e}
 ::view-transition-group(root){animation-duration:1.3s}
 ::view-transition-image-pair(root){isolation:isolate}
 ::view-transition-old(root){mix-blend-mode:normal;animation:page-leave .4s cubic-bezier(.55,0,1,.45) both}
 ::view-transition-new(root){mix-blend-mode:normal;animation:page-arrive .7s cubic-bezier(.16,1,.3,1) .6s both}
 .page-arriving .hero-letter,.page-arriving .home-hero .hero-intro{animation-play-state:paused}
}
@keyframes page-leave{
 from{opacity:1;transform:translate3d(0,0,0)}
 to{opacity:0;transform:translate3d(0,-25vh,0)}
}
@keyframes page-arrive{
 from{opacity:0;transform:translate3d(0,60vh,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}

/* Shared project card: preserve the ticker footprint while revealing its caption. */
.project-card{display:grid;grid-template-rows:minmax(0,1fr) auto;--caption-color:var(--ink);--caption-muted:#777}
.home-dark .project-card{--caption-color:#eee;--caption-muted:#8b8b8b}
.project-card:after{content:none}
.card-visual{position:relative;display:block;height:100%;width:auto;aspect-ratio:1;max-width:100%;min-height:0;justify-self:start;overflow:hidden}
.project-card .card-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.project-card .card-caption{position:static;display:block;max-height:0;padding-top:0;overflow:hidden;opacity:0;transform:translateY(6px);color:var(--caption-color);font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:20px;letter-spacing:-.04em;line-height:1.2;transition:max-height .45s cubic-bezier(.22,.61,.36,1),padding-top .45s cubic-bezier(.22,.61,.36,1),opacity .3s,transform .45s cubic-bezier(.22,.61,.36,1)}
.project-card .card-caption small{display:block;font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--caption-muted);margin-top:2px}
.project-card:hover .card-caption,.project-card:focus-visible .card-caption{max-height:110px;padding-top:8px;opacity:1;transform:none}
.project-card:hover img,.project-card:focus-visible img{transform:none}
@media(max-width:800px),(hover:none){
 .project-card .card-caption{max-height:110px;padding-top:8px;opacity:1;transform:none}
}

/* One rhythm between major sections; internal component spacing remains local. */
:root{--section-space:200px}
.home-dark{margin-top:0;padding-top:60px;padding-bottom:var(--section-space);overflow:clip;--section-bg:#0e0e0e}
.project-strip.ticker{margin-top:var(--section-space);padding-block:0}
.skills{position:relative;margin-top:var(--section-space);padding-top:40px;--tag-start:40px}
.skills:before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:#292929}
.home-personal{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.photo-strip.ticker{margin-top:60px}
.works-main{padding-bottom:var(--section-space)}
.works-main>h1{margin-bottom:var(--section-space)}
.work-row{padding-block:0;min-height:0}
.work-row+.work-row{margin-top:var(--section-space)}
.contact-main,.privacy-main{padding-bottom:var(--section-space)}
.legal-section{padding-bottom:0;margin-bottom:0}
.legal-section+.legal-section{margin-top:var(--section-space)}
.project-page>article{display:flex;flex-direction:column;gap:0}
.project-page>article>*+*{margin-top:var(--section-space)}
/* Text sections following full-width media have a tighter 80px boundary. */
.project-page>article>:is(.case-wide,.case-gallery,.phone-band)+section{margin-top:80px}
.project-page>article>:is(.case-hero,.case-section,.case-bridge,.case-personas,.case-decisions,.case-conclusion){padding-block:0;min-height:0}
.project-page>article>.case-hero{padding-top:160px}
.project-page>article>.has-rule,.project-page>article>.case-decisions{padding-top:40px;--tag-start:40px}
.has-rule:before{top:0}
.case-decisions:before{position:absolute;content:'';top:0;left:20px;right:20px;height:1px;background:#ddd}
.case-decisions .case-heading-grid:before{content:none}
.phone-band{margin-block:0}
.case-related{margin-top:var(--section-space);padding-top:0;padding-bottom:var(--section-space)}
.case-related>.section-tag-slot{height:42px;border-bottom:1px solid #ddd}

/* Section labels stay at the start of their section and scroll naturally. */
.home-about,.skills,.case-section,.case-personas,.case-decisions,.case-conclusion,.case-related,.contact-main{position:relative}
.case-personas>.case-heading-grid,.case-decisions>.case-heading-grid,.case-architecture>.case-heading-grid{position:static}
.section-tag-rail{position:absolute;left:20px;right:20px;top:var(--tag-start,0px);bottom:0;z-index:4;pointer-events:none}
.section-tag-rail>.tag{position:static;top:auto;width:fit-content;max-width:calc(50% - 8px);font-size:14px;line-height:1.2;font-weight:500;letter-spacing:-.02em;background:var(--section-bg,#fff);pointer-events:auto}
.section-tag-slot{height:16.8px;min-width:0}
.work-summary>.section-tag-rail{left:0;right:0}
.work-summary>.section-tag-rail>.tag{max-width:100%}
.contact-main{--tag-start:240px}
@media(max-width:800px){
 .home-about>.section-tag-slot{margin-bottom:32px}
 .skills>.section-tag-slot{margin-bottom:20px}
 .case-heading-grid>.section-tag-slot{margin-bottom:30px}
 .contact-main{--tag-start:170px}
 .contact-main>.section-tag-slot{margin-bottom:32px}
 .section-tag-rail>.tag{max-width:100%}
}

/* Both tickers support trackpad scrolling and mouse dragging. */
.project-strip .ticker-group{gap:16px;padding-right:16px}
.ticker .ticker-viewport{overscroll-behavior-x:contain;user-select:none;cursor:grab}
.project-strip .project-card{cursor:grab}
.ticker.is-dragging .ticker-viewport,.project-strip.is-dragging .project-card{cursor:grabbing}

/* A fixed 340 x 390 footprint keeps every neighbour exactly 16px away.
   Only the image height changes: portrait by default, square on hover/focus. */
.project-strip .project-card{width:340px;height:390px;flex:0 0 340px;max-width:none;max-height:none;aspect-ratio:340/390;grid-template-rows:minmax(0,1fr) 0px;transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1)}
.project-strip .card-visual{width:100%;height:100%;aspect-ratio:auto;justify-self:stretch}
.project-strip .project-card .card-caption{width:100%;height:50px;max-height:none;padding-top:4.8px;justify-self:stretch}
.project-strip .project-card:hover,.project-strip .project-card:focus-visible{grid-template-rows:minmax(0,1fr) 50px}
@media(max-width:800px),(hover:none){
 .project-strip .project-card{grid-template-rows:minmax(0,1fr) 50px}
}

/* Compact skill pairs and tools follow the updated home reference. */
.skills{color:#fff}
.site-header .nav-group .language-switch{justify-content:flex-start;margin-top:2px}
.skills .skill-groups{display:flex;flex-direction:column;gap:80px}
.skills .skill-group{display:block;padding:24px 0 0;border-bottom:0;border-top:1px solid #292929}
.skills .skill-group:first-child{padding-top:0;border-top:0}
.skills .skill-heading h3{font-family:"Manrope",Arial,sans-serif;font-weight:500;font-variation-settings:normal}
.skills .skill-heading p{max-width:240px;font-family:"Manrope",Arial,sans-serif;font-weight:500;font-variation-settings:normal;line-height:1.2;color:#9f9f9f}
.skills .skill-group:nth-child(2) .skill-heading p{max-width:270px}
.skills .skill-group:last-child .skill-heading p{max-width:232px}
.skills .skill-table,.skills .tools-row{list-style:none;width:max(70%,508px);max-width:100%;margin:32px 0 0 auto;padding:0}
.skills .skill-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:48px;padding:15px 0;border-bottom:1px solid #292929;align-items:start}
.skills .skill-row .tag{padding:0;font-size:14px;line-height:1.2;font-weight:500;letter-spacing:-.02em}
.skills .tools-row{display:grid;grid-template-columns:1fr;gap:0}
.skills .tool-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;border-bottom:1px solid #292929}
.skills .tool-link{border:0;padding:8px 0;font-size:16px;line-height:1.2}
@media(max-width:800px){
 .skills .skill-table,.skills .tools-row{width:100%;margin-top:24px}
 .skills .skill-heading p,.skills .skill-group:nth-child(2) .skill-heading p,.skills .skill-group:last-child .skill-heading p{max-width:300px}
}

/* Keep a sliver of the next section visible at every viewport height.
   The title also respects short windows, without overlapping its introduction. */
.home-hero{--hero-peek:clamp(28px,4.5vh,50px);--hero-height:calc(100vh - var(--hero-peek));--hero-title-size:min(229px,40vh,calc((100vw - 40px) / 3.15));height:var(--hero-height)}
@supports(height:100svh){
 .home-hero{--hero-peek:clamp(28px,4.5svh,50px);--hero-height:calc(100svh - var(--hero-peek));--hero-title-size:min(229px,40svh,calc((100vw - 40px) / 3.15))}
}
/* Preserve the greeting's visual height as its type metrics change;
   the description remains 16px below the heading's line box. */
.home-hero h1{top:calc(var(--hero-height) * .34 + var(--hero-title-size) * .05);font-size:var(--hero-title-size);letter-spacing:-.045em;line-height:.9}
.home-hero .hero-title-inner{white-space:nowrap}
.home-hero .hero-intro{top:calc(var(--hero-height) * .34 + var(--hero-title-size) * .95 + 16px);font-size:16px;font-weight:500;font-variation-settings:normal;line-height:1.1}
@media(min-width:801px){
 .home-hero h1{left:auto;right:20px;width:max-content;max-width:calc(100% - 40px)}
}
@media(max-width:800px){
 .home-hero{--hero-title-size:min(clamp(100px,24vw,190px),calc((100vw - 40px) / 3.15),24vh)}
 .home-hero .hero-title-inner{white-space:nowrap}
}

/* Entrance transforms are released after playing, so section labels stay sticky.
   Scrolling or opening navigation cancels the entrance immediately. */
@media(prefers-reduced-motion:no-preference){
 .home-entry .site-header{animation:home-menu-in 2s cubic-bezier(.22,.61,.36,1) backwards}
 .home-entry .home-dark{animation:home-section-in 3s cubic-bezier(.22,.61,.36,1) backwards}
 .page-arriving.home-entry .site-header,.page-arriving.home-entry .home-dark{animation-play-state:paused}
}
@keyframes home-menu-in{from{opacity:0;transform:translate3d(0,-90px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes home-section-in{from{transform:translate3d(0,90px,0)}to{transform:translate3d(0,0,0)}}

/* Shared 16px reading style. Smaller mobile card copy keeps its own scale. */
.skills .skill-heading p,.skills .tool-link,
.form-field input,.form-field textarea,.form-status,.contact-form noscript,
.case-issue p,.insight-card p,.bridge-grid p,.decision-intro,.learnings-grid p,.persona-intro,
.project-card .card-caption small{letter-spacing:-.01em;line-height:1.3}
@media(min-width:801px){
 .solution-card p,.decision-card>p,.persona-meta p,.privacy-consent{letter-spacing:-.01em;line-height:1.3}
}
.home-hero .hero-intro{letter-spacing:-.01em;line-height:1.2}
/* 24px title + 2px margin + 20.8px body fit the existing 50px caption. */
.project-strip .project-card .card-caption{padding-top:3.2px}

/* Install the initial reveal state without fading content out first. */
.reveal-preparing .js-reveal{transition:none!important}

/* Manrope scale supplied by the designer. Controls keep their existing Inter rules. */
:root{
 --type-display:72px;--type-lead:28px;--type-title:24px;--type-copy:20px;--type-body:16px;--type-small:14px;
 font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:16px;letter-spacing:0;line-height:1.4
}
.works-main>h1,.case-hero h1,
:is(.solution-card,.insight-card,.decision-card,.persona-top) .card-number{
 font-size:var(--type-display);letter-spacing:-.04em;line-height:.9
}
.work-description,.case-lead,.case-bridge>h2,.legal-section h1,.legal-section h2,
.persona-top h3,.persona-need>p,.cookie-dialog h2{
 font-size:var(--type-lead);letter-spacing:-.04em;line-height:1.1
}
.about-copy,.personal-intro>p,.home-personal h2.sr-only,.skills .skill-heading h3,.contact-content>h1,
.solution-lead,.case-lead.research-lead{
 font-size:var(--type-title);letter-spacing:-1px;line-height:1.3
}
.project-card .card-caption,.case-copy,.case-copy .case-subtitle,.case-subtitle,
.case-issue h4,.solution-card h3,.research-row h3,.bridge-grid h3,.decision-card h3,
.learnings-grid h4,.architecture-cards h4,.persona-section h4,.form-field label,.legal-copy{
 font-size:var(--type-copy);letter-spacing:-.01em;line-height:1.3
}
.case-summary,.home-hero .hero-intro,.skills .skill-heading p,.skills .tool-link,
.project-card .card-caption small,.case-issue p,.solution-card p,.insight-card p,.bridge-grid p,
.decision-intro,.decision-card>p,.learnings-grid p,.persona-intro,.persona-meta p,
.form-field input,.form-field textarea,.privacy-consent,.form-status,.contact-form noscript,
.cookie-banner,.cookie-option{
 font-size:var(--type-body);letter-spacing:0;line-height:1.4
}
.cookie-option p,.research-row ul,.decision-evidence>p,.architecture-cards p,
.persona-type,.persona-top h3+p,.persona-section ul,.contact-email{
 font-size:var(--type-small);letter-spacing:0;line-height:1.4
}
/* 26px title + 22.4px copy + 1.6px padding retain the 50px caption area. */
.project-strip .project-card .card-caption{padding-top:1.6px}
.project-strip .project-card .card-caption small{margin-top:0}
/* Preserve the original greeting face; -3% opens the L/A pair to match the reference. */
.home-hero h1,.contact-thanks-title{font-family:'Zalando Sans',Arial,sans-serif;font-weight:400;font-variation-settings:normal;letter-spacing:-.03em}
@media(max-width:800px){
 .works-main>h1,.case-hero h1{font-size:var(--type-lead);letter-spacing:-.04em;line-height:1.1}
 :is(.solution-card,.insight-card,.decision-card,.persona-top) .card-number{font-size:var(--type-lead);letter-spacing:-.04em;line-height:1.1}
}

/* Match Figma's lighter edge rendering on macOS while retaining real Medium. */
:root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Keep the existing rendering of Inter controls and the Zalando greeting. */
.site-header,.tag,.nav-link,.text-link,.site-footer,.small-button,.experience,
.work-meta p,.work-meta dd,.demo .play-toggle,.cookie-actions button,
.home-hero h1{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}

/* Shared section introductions across every case study and language. */
.project-page .case-copy>p,.project-page .solution-lead,.project-page .case-lead{
 font-size:var(--type-title);letter-spacing:-1px;line-height:1.3
}

/* Equal padding centres the text between the two row separators. */
.experience{border-collapse:collapse;border-spacing:0}
.experience th,.experience td{padding-block:8px;vertical-align:middle}

@media(max-width:800px){.personal-line-break{display:none}}

/* Project index returns to natural document scrolling. */
.work-row{display:block}
.work-stage{display:grid;grid-template-columns:40% minmax(0,1fr);gap:16px;padding-block:24px}
.work-cover{display:block;min-height:0;overflow:hidden}
.work-summary{min-width:0}
.work-preview-action{display:flex;align-items:flex-start}
@media(min-width:801px){
 .work-stage{height:calc(100svh - 80px);min-height:700px}
 .work-cover{height:100%}
}
@media(max-width:800px){.work-stage{display:block}}

/* Menu follows scroll direction; translate is independent of its entrance. */
.site-header,.site-header a,.site-header button,.site-header .nav-groups,.site-header time,.site-header>.opacity-link,.site-header.is-open .nav-groups,.site-header.is-open time{font-size:13px;line-height:1.2}
.site-header{translate:0 0;transition:translate .5s cubic-bezier(.22,.61,.36,1),opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
.site-header.is-scroll-hidden{translate:0 calc(-100% - 28px)}
.site-header.is-open,.site-header:has(:focus-visible){translate:0 0}
.site-header .square-link:before{top:50%;transform:translateY(-50%)}

/* Keep the exact 28px scale consistent across desktop and mobile. */
.work-description,.case-bridge>h2,.legal-section h1,.legal-section h2,.persona-top h3,.persona-need>p,.cookie-dialog h2{letter-spacing:-.04em;line-height:1.1}
@media(max-width:800px){
 .works-main>h1,.case-hero h1,:is(.solution-card,.insight-card,.decision-card,.persona-top) .card-number{letter-spacing:-.04em;line-height:1.1}
}

/* Every case starts at 240px; copy and image share the initial top edge. */
.project-page>article>.case-hero{padding-top:240px}
.case-summary{margin-top:24px;color:var(--muted)}
.case-meta{margin:80px 0 0}
.case-hero-copy>.text-link{display:flex;width:fit-content;margin-top:80px}

/* Retain the 390px default image and a square hover image with a 12px caption gap. */
.project-strip .project-card{height:402px;row-gap:12px}
.project-strip .card-visual{max-height:390px}
.project-strip .project-card .card-caption{height:50px;padding-top:0}
.project-strip .project-card:hover,.project-strip .project-card:focus-visible{grid-template-rows:minmax(0,1fr) 50px}
@media(max-width:800px),(hover:none){.project-strip .project-card{grid-template-rows:minmax(0,1fr) 50px}}

/* Legal content has 80px before its separator and 80px after it. */
.privacy-main{padding-bottom:0}
.legal-section{padding-bottom:80px;margin-bottom:0}
.legal-section+.legal-section{margin-top:80px}
.legal-section:last-child{padding-bottom:80px}

/* Fixed arrow footprint: crossfade the two glyphs without translating them. */
.text-link .arrow,.text-link:hover .arrow,.text-link:focus-visible .arrow{position:relative;background:none;mask-image:none;translate:0 0;transition:none}
.text-link .arrow:before,.text-link .arrow:after{content:'';position:absolute;inset:0;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;transition:opacity .25s ease}
.text-link .arrow:before{mask-image:url('/assets/icons/flecha2.svg');opacity:1}
.text-link .arrow:after{mask-image:url('/assets/icons/flecha1.svg');opacity:0}
.text-link:hover .arrow:before,.text-link:focus-visible .arrow:before{opacity:0}
.text-link:hover .arrow:after,.text-link:focus-visible .arrow:after{opacity:1}
@media(prefers-reduced-motion:reduce){.site-header,.text-link .arrow:before,.text-link .arrow:after{transition:none}}

/* Tighter caption leading aligns its body with neighbouring 390px images. */
.project-strip .project-card .card-caption{line-height:20px}
.project-strip .project-card .card-caption small{line-height:18px;margin-top:0}
/* Cookies closes the legal page with the larger section rhythm. */
.legal-section.legal-cookies{padding-bottom:var(--section-space)}
/* The shared section gap ends at the context rule; text starts 24px below it. */
.project-page>article>.case-context{padding-top:24px;--tag-start:24px}

/* Keep the original full-width frame while its image moves at 80% scroll speed. */
.case-wide.has-parallax{position:relative;overflow:clip;aspect-ratio:var(--wide-ratio)}
.case-wide.has-parallax>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--parallax-y,0px),0) scale(var(--parallax-scale,1));transform-origin:center;will-change:transform}
@media(prefers-reduced-motion:reduce){.case-wide.has-parallax>img{transform:none;will-change:auto}}

/* Revised project index: measurements follow the 1440px design export. */
.works-main{padding-top:240px;padding-bottom:var(--section-space)}
.works-main>h1{margin-bottom:40px}
.work-row{position:relative;border:0;margin:0;padding:0}
.work-row+.work-row{margin-top:0}
.work-row:before,.work-row:last-child:after{content:'';position:absolute;left:calc((100vw - 100%) / -2);right:calc((100vw - 100%) / -2);height:1px;background:#e6e6e6}
.work-row:before{top:0}
.work-row:last-child:after{bottom:0}
.work-stage{display:grid;grid-template-columns:minmax(0,478fr) minmax(0,478fr) minmax(0,404fr);gap:20px;align-items:start;padding:40px 0;height:auto;min-height:0}
.work-cover{width:100%;height:auto;aspect-ratio:1;margin:0}
.work-cover img{width:100%;height:100%;object-fit:cover}
.work-summary{position:static;display:block;min-width:0}
.work-description{max-width:none;margin-top:16px}
.work-meta{display:grid;grid-template-columns:1fr;gap:18px;margin:60px 0 0}
.work-heading>.tag,.work-meta .tag,.work-meta dd,.work-preview .text-link{font-size:12px;line-height:14px}
.work-meta dd{margin:6px 0 0;color:#909090}
.work-preview{display:flex;flex-direction:column;align-items:stretch;gap:40px;justify-self:end;width:calc(100% * 367 / 606);margin:0;min-height:0}
.work-preview .demo{width:100%;height:auto;aspect-ratio:var(--ratio,367/221);justify-self:auto}
.work-preview .demo video{object-fit:contain}
.work-preview.is-portrait{width:calc(100% * 211 / 606)}
.work-preview .portrait-preview{width:100%;height:auto;aspect-ratio:211/437}
.work-preview-action{display:flex;align-items:flex-start}
@media(max-width:800px){
 .works-main{padding-top:160px}
 .work-stage{grid-template-columns:1fr;gap:24px}
 .work-preview{width:min(100%,300px);gap:24px}
 .work-preview.is-portrait{width:140px}
}

/* Contact page follows the supplied 1440px layout. */
.contact-main{display:block;min-height:max(1010px,calc(100svh - 28px));padding:240px 20px 80px}
.contact-main>h1{font-size:var(--type-display);letter-spacing:-.04em;line-height:.9;padding-bottom:20px;border-bottom:1px solid var(--line)}
.contact-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;padding-top:20px}
.contact-intro{font-size:var(--type-body);letter-spacing:0;line-height:1.4;color:#929292}
.contact-form{min-width:0;margin-top:0;padding-right:80px}
.contact-form .form-field{margin-bottom:40px}
.contact-form .form-field label{margin-bottom:24px}
.contact-form .form-field input{height:35px;padding:6px 0}
.contact-form .form-field textarea{height:82px;min-height:82px;padding:54px 0 4px}
.contact-form .privacy-consent{font-size:var(--type-small);line-height:1.4;letter-spacing:0;color:#929292}
.contact-form .privacy-consent input{appearance:none;flex:none;width:12px;height:12px;margin:3px 0 0;border:1px solid #929292;border-radius:0}
.contact-form .privacy-consent input:checked{appearance:auto;accent-color:#111}
.contact-form>.text-link{margin-top:60px;font-size:12px;line-height:14px}
.contact-form .form-status:empty{margin:0}
body:has(.contact-main) .site-footer{font-size:12px}
@media(max-width:800px){
 .contact-main{min-height:calc(100svh - 56px);padding:160px 20px 80px}
 .contact-main>h1{font-size:48px}
 .contact-content{grid-template-columns:1fr;gap:40px}
 .contact-form{padding-right:0}
}

/* Keep decision cards and their mobile examples in one visual group. */
.project-page>article>.case-decisions+.phone-band{margin-top:16px}
/* Success stays beneath the shared navigation and above the contact form. */
.contact-thanks{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.9);display:flex;justify-content:center;align-items:flex-end;padding:80px 20px 60px;cursor:pointer;animation:contact-thanks-in .45s ease both}
.contact-thanks-title{font-size:min(229px,calc((100vw - 40px) / 4.8));line-height:.9;color:#fff;white-space:nowrap;outline:none;cursor:default;animation:contact-thanks-title-in .7s cubic-bezier(.22,.61,.36,1) both;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
html[lang=en] .contact-thanks-title{font-size:min(229px,calc((100vw - 40px) / 5.9))}
.contact-success-open{overflow:hidden}
.contact-success-open .site-header{translate:0 0}
.thanks-close:focus-visible{position:absolute;top:80px;right:20px;left:auto;width:auto;height:auto;margin:0;padding:8px;overflow:visible;clip:auto;white-space:normal;color:#fff;font:13px Inter,sans-serif}
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-form[aria-busy=true] button[type=submit]{opacity:.5;cursor:wait}
@keyframes contact-thanks-in{from{opacity:0}to{opacity:1}}
@keyframes contact-thanks-title-in{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@media(max-width:800px){.contact-thanks{padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){.contact-thanks,.contact-thanks-title{animation:none}}

/* Learning cards use the backgrounds sampled from the original screens. */
.learnings-grid{gap:16px}
.learnings-grid>article{background:#f7f7f7;padding:24px;min-width:0}
.project-shantai .learnings-grid>article{background:#faf7f5}
.project-rn .learnings-grid>article{background:#faf6f4}
@media(max-width:600px){.learnings-grid{grid-template-columns:1fr}}

/* The TPC analysis introduction keeps the larger gap after its gallery. */
.project-page>article>.case-gallery+.case-bridge{margin-top:var(--section-space)}

/* The sticky hero fades beneath About while its copy travels at 70% scroll. */
.home-hero{opacity:var(--hero-scroll-opacity,1)}
.hero-scroll-copy{position:absolute;inset:0;translate:0 var(--hero-scroll-y,0px);will-change:translate}
@media(prefers-reduced-motion:reduce){.home-hero{opacity:1}.hero-scroll-copy{translate:0 0;will-change:auto}}

/* Related projects reuse the project-index image treatment, with names above. */
.case-related .related-projects{padding-top:80px}
.case-related .related-item{display:block;min-width:0}
.related-project-name{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-family:Manrope,Arial,sans-serif;font-size:var(--type-copy);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.case-related .work-cover{display:block;width:100%;height:auto;aspect-ratio:1;margin:0;overflow:hidden}
.case-related .related-item:is(:hover,:focus-visible) .work-cover img{transform:scale(1.018)}
@media(max-width:800px){.case-related .related-projects{padding-top:40px}}

/* Rectangular media never receive rounded presentation corners. Device masks remain physical phone outlines. */
img,video,.mockup video,.demo:not(.mockup),.gallery-item,.work-cover,.card-visual{border-radius:0}
/* Subsection labels sit 16px above the first divider of their list. */
.case-subtitle:has(+.case-issue),.case-copy .case-subtitle:has(+.case-issue){margin-bottom:16px}
/* The document transition supplies the arrival motion; avoid a second nested reveal. */
.page-arriving .js-reveal{transition:none!important}

/* Keep the shared menu independent of every sliding page snapshot. */
.site-header{view-transition-name:fixed-menu;background:transparent}
.about-menu-fixed .site-header,.page-leaving .site-header,.page-arriving .site-header{animation:none!important;transition:none!important;translate:0 0!important;transform:none!important;opacity:1!important;background:transparent}
.menu-no-entry .site-header{animation:none!important}
::view-transition-group(fixed-menu){animation:none!important;z-index:2;mix-blend-mode:difference;background:transparent}
::view-transition-image-pair(fixed-menu){isolation:auto}
::view-transition-old(fixed-menu){animation:none!important;opacity:1}
::view-transition-new(fixed-menu){animation:none!important;opacity:0;mix-blend-mode:normal}

@media(max-width:800px){#about{scroll-margin-top:64px}}

/* These supplied videos already include the phone and its transparent outline. */
.demo.transparent-mockup{background:transparent;padding:0;border-radius:0;aspect-ratio:var(--ratio);overflow:visible}
.demo.transparent-mockup video{object-fit:contain;border-radius:0;background:transparent}

/* Footer keeps the email centered independently of the side labels. */
.site-footer{position:relative;padding-bottom:16px}
.footer-email{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.footer-privacy{margin-left:auto}
.legal-cookie-settings{margin-top:60px;font-size:12px;line-height:1.2}
@media(max-width:800px){
 .site-footer{display:grid;grid-template-columns:1fr auto;gap:18px;padding-bottom:16px}
 .footer-email{position:static;transform:none;grid-column:1/-1;grid-row:2}
 .footer-privacy{grid-column:2;grid-row:1}
}

.not-found-links{display:flex;flex-wrap:wrap;gap:12px 32px}