/* Home — pixel values from Figma 157:1754 (1920 wide). `Nu` = N design px, scaled with viewport. */
@font-face{font-family:"Mr De Haviland";font-display:swap;src:url(../fonts/MrDeHaviland.woff) format("woff")}
:root{--u:calc(min(100vw,1920px)/1920);--ink:#000;--dark:#28282a}
.fx{margin:0;background:#fff;color:#000;font-family:Poppins,"Montserrat Cyr",system-ui,sans-serif;overflow-x:hidden}
.fx *{box-sizing:border-box}
.fx img{max-width:none;display:block}
.fx .page{width:100%;max-width:1920px;margin-inline:auto;position:relative}

/* ---------- Hero 1920x1080 ---------- */
.fx-hero{position:relative;height:calc(var(--u)*1080);overflow:hidden;container-type:inline-size}
.fx-hero .bg{position:absolute;left:0;top:-.03%;width:100%;height:100.14%;object-fit:cover}
.fx-hero .hw{position:absolute;white-space:nowrap;line-height:normal;margin:0;color:#000}
.fx-hero .yr{font-family:"Mr De Haviland",cursive;font-size:calc(var(--u)*280);top:calc(var(--u)*386)}
.fx-hero .y1{left:calc(var(--u)*479)}.fx-hero .y2{left:calc(var(--u)*1195)}
.fx-hero .t{font-weight:600;font-size:calc(var(--u)*180)}
.fx-hero .t-a{left:calc(50% - calc(var(--u)*685));top:calc(var(--u)*117)}
.fx-hero .t-b{left:calc(50% - calc(var(--u)*787));top:calc(var(--u)*700)}
.fx-head{position:absolute;left:calc(var(--u)*60);top:calc(var(--u)*50);width:calc(var(--u)*1800);height:calc(var(--u)*71);display:flex;justify-content:space-between;font:300 calc(var(--u)*20)/normal Inter,system-ui,sans-serif;z-index:6}
.fx-head a{transition:opacity .2s}.fx-head a:hover{opacity:.6}
.fx-head .who{display:block}.fx-head .who a,.fx-head .who span{display:block}
.fx-head .aside{width:calc(var(--u)*488);text-align:right}
.fx-frame{position:absolute;left:calc(var(--u)*397);top:calc(var(--u)*410);width:calc(var(--u)*1127);height:calc(var(--u)*267)}
.fx-frame img{width:100%;height:100%}
.fx-dot{position:absolute;width:calc(var(--u)*14);height:calc(var(--u)*14);background:#000}
.fx-fig{position:absolute;left:50%;top:calc(var(--u)*292);width:calc(var(--u)*528);height:calc(var(--u)*482);transform:translateX(-50%);z-index:3;pointer-events:none}
.fx-fig img{width:100%;height:100%;object-fit:fill}

/* ---------- Nav ---------- */
.fx-nav{position:fixed;left:50%;bottom:50px;transform:translateX(-50%);z-index:50;display:flex;gap:11px;align-items:center;padding:10px 20px;background:#171717;border-radius:18px;overflow:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility .3s}
.fx-nav.away{transform:translate(-50%,calc(100% + 60px));opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.fx-nav{transition:none}}
.fx-nav a{position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:31px;background:#262626;transition:background-color .2s,transform .16s cubic-bezier(.23,1,.32,1)}
.fx-nav a .ic{display:block;width:24px;height:24px;background:#d4d4d4;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;transition:background-color .2s}
.fx-nav a[aria-current] .ic{background:#171717}
.fx-nav a[aria-current]{background:#d4d4d4}
.fx-nav .pill{position:absolute;top:10px;left:0;width:50px;height:50px;border-radius:31px;background:#fafafa;mix-blend-mode:difference;pointer-events:none;z-index:3;opacity:0;transition:transform .45s cubic-bezier(.23,1,.32,1)}
.fx-nav.pl .pill{opacity:1}
.fx-nav.pl a[aria-current]{background:#262626}.fx-nav.pl a[aria-current] .ic{background:#d4d4d4}
@media(prefers-reduced-motion:reduce){.fx-nav .pill{transition:none}}
.fx-nav a:active{transform:scale(.94)}
@media(hover:hover){.fx-nav a:not([aria-current]):hover{background:#3a3a3a}}
.fx-nav a::after{content:attr(data-label);position:absolute;bottom:calc(100% + 18px);left:50%;transform:translate(-50%,4px);background:#171717;color:#fff;font:400 12px/1 Inter,sans-serif;padding:7px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
@media(hover:hover){.fx-nav a:hover::after{opacity:1;transform:translate(-50%,0)}}

/* ---------- Info + cases ---------- */
.fx-main{padding:calc(var(--u)*100) calc(var(--u)*113);display:flex;flex-direction:column;gap:calc(var(--u)*100);align-items:center}
.fx-info{display:flex;justify-content:space-between;width:100%}
.fx-info .lead{font-weight:400;font-size:calc(var(--u)*33);line-height:1.25;width:calc(var(--u)*1001);margin:0}
.fx-info .right{width:calc(var(--u)*458);display:flex;flex-direction:column;gap:calc(var(--u)*5);align-items:flex-end}
.fx-info .right p{font-weight:300;font-size:calc(var(--u)*22);line-height:1.25;color:#616161;text-align:right;width:calc(var(--u)*452);margin:0}
.fx-resume{display:flex;gap:calc(var(--u)*10);align-items:center;justify-content:flex-end;font:400 calc(var(--u)*32)/normal Inter,sans-serif;color:#000}
.fx-resume img{width:calc(var(--u)*48);height:calc(var(--u)*48);transition:transform .3s cubic-bezier(.23,1,.32,1)}
@media(hover:hover){.fx-resume:hover img{transform:translate(calc(var(--u)*4),calc(var(--u)*-4))}}
.fx-cases{display:flex;flex-direction:column;gap:calc(var(--u)*110);align-items:center;width:100%}
.fx-sec-head{display:flex;justify-content:space-between;align-items:flex-end;width:100%}
.fx-sec-head h2{white-space:nowrap;font-weight:500;font-size:calc(var(--u)*100);line-height:1.13;margin:0}
.fx-sec-head p{font-weight:300;font-size:calc(var(--u)*22);line-height:1.5;margin:0}
.fx-cases .sec-p{white-space:nowrap}
.fx-grid{display:grid;grid-template-columns:repeat(2,calc(var(--u)*825));column-gap:calc(var(--u)*48);row-gap:calc(var(--u)*100);justify-content:center}
.fx-card{position:relative;display:block;height:calc(var(--u)*435);border-radius:calc(var(--u)*25);color:#fff}
.fx-card .cbg{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--u)*25)}
.fx-card .cbg img{position:absolute;left:0;top:-.04%;width:100%;height:136.29%}
.fx-card .clip{position:absolute;top:calc(var(--u)*-60);height:calc(var(--u)*370);width:calc(var(--u)*414)}
.fx-card .clip.l{left:calc(var(--u)*205)}.fx-card .clip.c{left:calc(50% - .5px);transform:translateX(-50%)}
.fx-card .clip.w{width:calc(var(--u)*693);height:calc(var(--u)*397);left:50%;transform:translateX(-50%)}
.fx-card .clip>div{position:absolute;overflow:hidden;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.fx-card .clip>div>img{position:absolute}
@media(hover:hover){.fx-card:hover .clip>div{transform:scale(1.04)}}
.fx-card .bar{position:absolute;left:0;top:calc(var(--u)*283);width:100%;height:calc(var(--u)*152);background:#252525;border-radius:0 0 calc(var(--u)*25) calc(var(--u)*25);overflow:hidden}
.fx-card .bar .in{position:absolute;left:calc(var(--u)*40);top:calc(var(--u)*20);width:calc(var(--u)*745);display:flex;align-items:flex-end;justify-content:space-between}
.fx-card .txt{width:calc(var(--u)*506);display:flex;flex-direction:column;gap:calc(var(--u)*10);white-space:nowrap}
.fx-card .lab{font-weight:400;font-size:calc(var(--u)*16);line-height:1.5;color:#eeab8c}
.fx-card h3{font-weight:700;font-size:calc(var(--u)*24);line-height:1.5;margin:0}
.fx-card .sub{font-weight:400;font-size:calc(var(--u)*16);line-height:1.5;color:rgba(255,255,255,.7);margin-top:calc(var(--u)*8)}
.fx-card .ic{display:block;width:calc(var(--u)*76);height:calc(var(--u)*76);flex:none;background:#fff;border-radius:calc(var(--u)*20);transition:transform .3s cubic-bezier(.23,1,.32,1)}
.fx-card .ic svg{display:block;width:100%;height:100%}
.fx-card .ic .ar{transform-origin:38px 38px;transition:transform .45s cubic-bezier(.23,1,.32,1)}
@media(hover:hover){.fx-card:hover .ic .ar{transform:rotate(45deg)}}
.fx-card:active .ic{transform:scale(.95)}

/* ---------- Work ---------- */
.fx-work{padding:calc(var(--u)*66) calc(var(--u)*113);background:#fff}
.fx-work .in{display:flex;flex-direction:column;gap:calc(var(--u)*66)}
.fx-jobs{display:flex;flex-direction:column;gap:calc(var(--u)*25)}
.fx-job{display:flex;flex-direction:column;gap:calc(var(--u)*20)}
.fx-job .name{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;background:#f5f5f5;border-radius:calc(var(--u)*25);padding:calc(var(--u)*20) calc(var(--u)*25);color:var(--dark);cursor:pointer}
.fx-job .name .tt{display:flex;flex-direction:column;gap:calc(var(--u)*10)}
.fx-job .name b{font-size:calc(var(--u)*32);line-height:1.5;font-weight:600;white-space:nowrap}
.fx-job .name small{display:flex;align-items:center;gap:calc(var(--u)*10);font-size:calc(var(--u)*18);line-height:1.5;font-weight:400;color:#888}
.fx-job .name small i{width:calc(var(--u)*11.75);height:calc(var(--u)*11.75);border-radius:50%;background:#888}
.fx-job .fx-chev{background:var(--dark);border-radius:calc(var(--u)*20);padding:calc(var(--u)*20);display:grid;place-items:center;flex:none;transition:background-color .2s}
.fx-job .fx-chev img{width:calc(var(--u)*46);height:calc(var(--u)*46);transform:rotate(-90deg);transition:transform .35s cubic-bezier(.23,1,.32,1)}
.fx-job .name[aria-expanded=false] .fx-chev img{transform:rotate(90deg)}
.fx-job .name:active .chev{transform:scale(.96)}
@media(hover:hover){.fx-job .name:hover .chev{background:#000}}
.fx-job .body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.77,0,.175,1)}
.fx-job .body[hidden]{display:grid;grid-template-rows:0fr;visibility:hidden}
.fx-job .body>div{overflow:hidden}
.fx-job ul{display:flex;flex-direction:column;gap:calc(var(--u)*15);padding-left:calc(var(--u)*25);margin:0;list-style:none}
.fx-job li{display:flex;gap:calc(var(--u)*10);align-items:flex-start;font-weight:300;font-size:calc(var(--u)*22);line-height:1.5}
.fx-job li img{width:calc(var(--u)*16);height:calc(var(--u)*16);margin-top:calc(var(--u)*8.5);flex:none}

/* ---------- Footer ---------- */
.fx-foot{position:relative;background:var(--dark);height:calc(var(--u)*634);color:#fff;overflow:hidden}
.fx-foot .tx{position:absolute;left:calc(var(--u)*133);top:calc(var(--u)*66);width:calc(var(--u)*1000);height:calc(var(--u)*214);white-space:nowrap}
.fx-foot .tx p{position:absolute;left:0;margin:0}
.fx-foot .up{top:0;font:400 calc(var(--u)*20)/normal "IBM Plex Mono",monospace}
.fx-foot .mid{top:calc(var(--u)*28);font:400 calc(var(--u)*77)/1.2 Poppins,"Montserrat Cyr",sans-serif}
.fx-foot .down{top:calc(var(--u)*121);font:400 calc(var(--u)*77)/1.2 Poppins,"Montserrat Cyr",sans-serif}
.fx-foot .line{position:absolute;left:calc(var(--u)*133);top:calc(var(--u)*393);width:calc(var(--u)*1654);height:1px;background:#fff}
.fx-foot dl{position:absolute;left:calc(var(--u)*133);top:calc(var(--u)*506);margin:0;display:flex;gap:calc(var(--u)*57)}
.fx-foot dl>div{width:calc(var(--u)*414);height:calc(var(--u)*53);position:relative}
.fx-foot dt{position:absolute;top:calc(var(--u)*-4);left:0;font:400 calc(var(--u)*18)/1.5 Poppins,"Montserrat Cyr",sans-serif;color:#a3a3a3}
.fx-foot dd{position:absolute;top:calc(var(--u)*24);left:0;margin:0;font:400 calc(var(--u)*24)/normal Inter,sans-serif;white-space:nowrap}
.fx-btn{position:absolute;left:calc(var(--u)*1328);top:calc(var(--u)*252);width:calc(var(--u)*278);height:calc(var(--u)*278);display:block;transition:transform .35s cubic-bezier(.23,1,.32,1)}
.fx-btn img.a,.fx-btn img.b{position:absolute}
.fx-btn img.a{inset:0;width:100%;height:100%}
.fx-btn img.b{left:calc(var(--u)*15);top:calc(var(--u)*15);width:calc(var(--u)*248);height:calc(var(--u)*248)}
.fx-btn .t{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:calc(var(--u)*10);align-items:center;white-space:nowrap;font:500 calc(var(--u)*26)/normal Poppins,"Montserrat Cyr",sans-serif;color:var(--dark)}
.fx-btn .t img{width:calc(var(--u)*33);height:calc(var(--u)*33);transition:transform .3s cubic-bezier(.23,1,.32,1)}
@media(hover:hover){.fx-btn:hover{transform:scale(1.04)}.fx-btn:hover .t img{transform:translate(calc(var(--u)*3),calc(var(--u)*-3))}}
.fx-btn:active{transform:scale(.97)}

/* ---------- Motion ---------- */
.js .fx [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0)*80ms)}
.js .fx [data-reveal].is-in{opacity:1;transform:none}
@keyframes fx-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fx-fig{from{opacity:0;transform:translateX(-50%) translateY(40px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.js .fx-hero .t,.js .fx-hero .yr,.js .fx-frame,.js .fx-hero .fx-head{animation:fx-up .9s cubic-bezier(.23,1,.32,1) both}
.js .fx-hero .t-a{animation-delay:.05s}.js .fx-hero .yr{animation-delay:.15s}.js .fx-hero .t-b{animation-delay:.25s}.js .fx-frame{animation-delay:.2s}.js .fx-hero .fx-head{animation-delay:.4s}
.js .fx-fig{animation:fx-fig 1s .3s cubic-bezier(.23,1,.32,1) both}
html.is-leaving body{opacity:0;transition:opacity .23s}
@media(prefers-reduced-motion:reduce){.js .fx [data-reveal]{opacity:1;transform:none;transition:none}.js .fx *{animation:none!important;transition:none!important}}
.skip{position:absolute;left:12px;top:-60px;background:#000;color:#fff;padding:10px 16px;border-radius:10px;z-index:100}.skip:focus{top:12px}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.fx-foot :focus-visible,.fx-nav :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* hero fits the viewport height on short desktop windows (keeps the 16:9 composition clear of the dock) */
@media (min-width:1100px){
.fx-hero{--u:calc(min(100vw,1920px,100svh*16/9)/1920)}
.fx-hero .yr,.fx-hero .fx-head,.fx-hero .fx-frame{translate:calc((100cqw - 1920*var(--u))/2) 0}
}

/* ================= Mobile / tablet (<1100px) — Figma "Home · Mobile 390" ================= */
@media (max-width:1099px){
.fx-card{overflow:hidden}
.fx .page{max-width:720px}
.fx-hero{height:auto;display:flex;flex-direction:column;align-items:center;padding:24px 20px 24px;gap:14px;container-type:normal;overflow:hidden}
.fx-hero .bg{object-fit:cover}
.fx-hero .fx-head{display:contents;animation:none}
.fx-head .who{position:relative;z-index:6;order:0;align-self:center;text-align:center;margin:0;font:300 13px/16px Inter,sans-serif}
.fx-head .aside{position:relative;z-index:6;order:5;width:100%;max-width:350px;margin:0;text-align:center;font:300 12px/15px Inter,sans-serif}
.fx-hero .hw,.fx-hero .t{position:relative;left:auto;top:auto;font-size:38px;line-height:1.05;text-align:center;z-index:2}
.fx-hero .yr,.fx-frame{display:none}
.fx-hero .t-a{order:1;margin-top:0}
.fx-fig{position:relative;left:auto;top:auto;transform:none;order:2;width:clamp(210px,53.85vw,420px);height:auto;aspect-ratio:528/482;animation:none;margin-block:0}
.js .fx-fig{animation:fx-up .9s .3s cubic-bezier(.23,1,.32,1) both}
.fx-hero .t-b{order:3}
.fx-nav{bottom:16px;gap:8px;padding:8px 14px;border-radius:16px}
.fx-nav a{width:44px;height:44px}
.fx-nav a::after{display:none}

.fx-main{padding:32px 20px 32px;gap:32px}
.fx-info{flex-direction:column;align-items:center;gap:8px;padding:28px 0 8px}
.fx-info .lead{width:100%;max-width:332px;margin:0;text-align:center;font:400 14px/1.3 Poppins,"Montserrat Cyr",sans-serif}
.fx-info .right{width:100%;align-items:center;gap:8px}
.fx-info .right p{width:100%;max-width:303px;margin:0;text-align:center;font-size:12px;line-height:1.4}
.fx-resume{font-size:18px;line-height:normal;gap:8px;padding:0 16px;height:48px;justify-content:center}
.fx-resume img{width:48px;height:48px}
.fx-cases{gap:32px}
.fx-sec-head{flex-direction:column;align-items:flex-start;gap:0}
.fx-cases .fx-sec-head{align-items:center}.fx-cases .fx-sec-head .sec-p{display:none}
.fx-sec-head h2{font-size:44px;line-height:1.5;margin:0}.fx-work .fx-sec-head h2{font-size:32px}
.fx-sec-head p{font-size:16px;line-height:1.5;font-weight:300;margin:0}
.fx-grid{display:flex;flex-direction:column;gap:45px;width:100%;container-type:inline-size}
.fx-card{--u:calc(100cqw/825);width:100%;height:calc(var(--u)*283 + 64.5px);border-radius:10.6px}
.fx-card .cbg{border-radius:10.6px}
.fx-card .bar{border-radius:0 0 10.6px 10.6px;top:calc(var(--u)*283);height:64.5px}
.fx-card .bar .in{left:17px;right:17px;top:50%;transform:translateY(-50%);width:auto;align-items:center}
.fx-card .txt{width:auto;gap:2px;min-width:0;white-space:normal}
.fx-card .lab{font-size:8px;line-height:1.25}
.fx-card h3{font-size:12px;line-height:1.3}
.fx-card .sub{font-size:9px;line-height:1.3;margin-top:2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-card .ic{width:32px;height:32px;border-radius:8.5px}

.fx-work{padding:24px 20px}
.fx-work .in{gap:32px;padding:0 20px}
.fx-jobs{gap:24px}
.fx-job{gap:20px}
.fx-job .name{padding:16px;border-radius:25px;gap:0}
.fx-job .name b{font-size:18px;line-height:1.5;white-space:normal}.fx-job .name .tt{gap:6px}
.fx-job .name small{font-size:13px;line-height:1.5;gap:10px}
.fx-job .name small i{width:11.75px;height:11.75px}
.fx-job .fx-chev{padding:8px 10px;border-radius:14px}
.fx-job .fx-chev img{width:18px;height:18px}
.fx-job ul{gap:14px;padding:0 4px}
.fx-job li{font-size:15px;line-height:1.4;gap:10px}
.fx-job li img{width:16px;height:16px;margin-top:0}

.fx-foot{height:auto;display:flex;flex-direction:column;gap:32px;padding:24px 20px 24px}
.fx-foot .tx,.fx-foot .line,.fx-foot dl,.fx-btn{position:relative;left:auto;top:auto}
.fx-foot .tx{width:auto;height:auto;white-space:normal;display:flex;flex-direction:column;gap:0}
.fx-foot .tx p,.fx-foot .tx span{position:static!important}
.fx-foot .up{font-size:11px;line-height:1.2}
.fx-foot .mid,.fx-foot .down{font-size:26.9px;line-height:1.2;display:block!important}
.fx-foot h2{display:flex;flex-direction:column}
.fx-foot .line{width:auto}
.fx-foot dl{flex-direction:column;gap:32px}
.fx-foot dl>div{width:auto;height:auto;display:flex;flex-direction:column;gap:2px}
.fx-foot dt,.fx-foot dd{position:static;font-size:15.2px;line-height:1.5;margin:0}.fx-foot dt{margin-bottom:-3.4px}
.fx-foot dd{font-size:20.3px;line-height:25px}
.fx-btn{width:auto;height:52px;border-radius:26px;background:#fff;display:flex;align-items:center;justify-content:center;align-self:stretch}
.fx-btn img.a,.fx-btn img.b{display:none}
.fx-btn .t{position:static;transform:none;font-size:18px;gap:10px}
.fx-btn .t img{width:22px;height:22px}

.fx-card{--u:calc(100cqw/530)!important;height:calc(var(--u)*283 + 100.4px);border-radius:16.5px}
.fx-card .cbg{border-radius:16.5px}
.fx-card .bar{top:calc(var(--u)*283);height:100.4px;border-radius:0 0 16.5px 16.5px}
.fx-card .bar .in{left:26.4px;right:26.4px}
.fx-card .lab{font-size:11px;line-height:1.3}
.fx-card h3{font-size:16px;line-height:1.3}
.fx-card .sub{font-size:11px;line-height:1.3;margin-top:3px!important}
.fx-card .ic{width:40px;height:40px;border-radius:11px}

.fx-card .clip.kc{left:calc(50% - 1px)!important;transform:translateX(-50%)!important;top:calc(var(--u)*16.11)!important;width:calc(var(--u)*414)!important;height:calc(var(--u)*294)!important}
.fx-card .clip.kc>div{left:calc(var(--u)*31)!important;top:calc(var(--u)*-.11)!important;width:calc(var(--u)*352)!important;height:calc(var(--u)*414)!important;transform:none!important}
.fx-card .clip.kp{left:calc(50% + .5px)!important;transform:translateX(-50%)!important;top:0!important;width:calc(var(--u)*531)!important;height:calc(var(--u)*303)!important}
.fx-card .clip.kp>div{left:calc(var(--u)*8)!important;top:calc(var(--u)*17)!important;width:calc(var(--u)*517)!important;height:calc(var(--u)*297)!important;transform:none!important}
}
@media (max-width:1099px) and (min-width:600px){
.fx-hero .t{font-size:64px}.fx-fig{width:300px}
.fx-sec-head h2{font-size:56px}.fx-info .lead{font-size:26px}.fx-info .right p{font-size:17px}
.fx-card .lab{font-size:11px}.fx-card h3{font-size:16px}.fx-card .sub{font-size:12px}
.fx-job .name b{font-size:22px}.fx-job li{font-size:17px}

}