:root{
  color-scheme:only light;
  --ground:#f9f7f3; --panel:#e9f1fb; --ink:#0b2546; --ink-soft:#3e5471; --link:#1c5094;
  --horizon:#ad7b37; --patch:#dcb77f; --gold:#86581d;
  --rule:rgba(11,37,70,.16);
  --veil:rgba(11,37,70,.34);
  --panel-wash:rgba(233,241,251,.7);
  --patch-wash:rgba(220,183,127,.13);
  --patch-mark:rgba(220,183,127,.55);
  --patch-press:#d2ab70;
  --grain:url(img/grain.png);
  --serif:'Newsreader','Source Serif 4','Noto Serif SC','Songti SC','STSong','SimSun',Georgia,'Times New Roman',serif;
  --serif-zh:'Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --leave:cubic-bezier(.55,0,.8,.3);
  --stroke:1.5px;
  --m:32px;
  --fs-caps:11px;  --lh-caps:16px;
  --fs-cap:13px;   --lh-cap:20px;
  --fs-text:16px;  --lh-text:26px;
  --fs-mid:20px;   --lh-mid:26px;
  --fs-lead:25px;  --lh-lead:36px;
  --H:max(100vh,640px);
  --iw:100vw;
  --ih:calc(var(--iw)*1.791667);
  --tx:calc(var(--iw)*.8177);
  --tl:calc(var(--iw)*.797);
  --hm:var(--m);
  --gap-max:52px;
  --up:4.21;
  --stack:0px;
  --wide:5.4;
  --fs-low:40px;
  --hdp:108px;
  --fs-disp:clamp(34px,min(14vw,calc((var(--H) - 318px - var(--hdp) - var(--ih)*.292)/var(--up)),calc((var(--tx) - var(--m) - 66px)/3.5)),48px);
  --fs-h:var(--fs-disp);
  --z-words:2; --z-top:3; --z-menu:30; --z-skip:50;
}
@supports (height:100svh){:root{--H:max(100svh,640px)}}
@media (min-resolution:3dppx){:root{--stroke:1.3334px}}
@media (max-width:379.98px){:root{--m:24px}}
@media (max-width:389.98px){:root{--hdp:104px}}
@media (max-width:339.98px){:root{--m:16px}}
@media (min-width:600px) and (max-width:899.98px){:root{--m:max(40px,calc(50vw - 260px))}}
html:lang(zh){--lh-text:28px;--lh-lead:40px;--up:6.35;--fs-low:32px}
html:lang(en){--wide:6}
html:lang(ar){
  --stack:264px;
  --fs-text:17px;--lh-text:32px;--fs-cap:15px;--lh-cap:26px;--fs-mid:22px;--lh-mid:36px;--lh-lead:44px;
  --serif:'Newsreader','Source Serif 4','Noto Naskh Arabic','Tajawal','Geeza Pro','Noto Sans Arabic',Georgia,serif;
  --sans:'Geist','Noto Naskh Arabic','Tajawal','Geeza Pro',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground);overflow-x:clip}
body{
  margin:0;background:var(--ground) var(--grain);color:var(--ink);overflow-x:clip;
  font:400 var(--fs-text)/var(--lh-text) var(--serif);font-synthesis:none;font-kerning:normal;font-variant-numeric:lining-nums;
  line-break:strict;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
html.side-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
img{max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{overflow-wrap:anywhere;min-width:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--patch-mark);color:var(--ink)}
.nb{white-space:nowrap}
.num{font-variant-numeric:lining-nums tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:square;stroke-linejoin:miter}
[dir=rtl] .ico.arw{transform:scaleX(-1)}
.skip{position:absolute;z-index:var(--z-skip);top:8px;inset-inline-start:8px;padding:12px 16px;background:var(--ground);color:var(--ink);font:500 14px/20px var(--sans);transform:translateY(-200%)}
.skip:focus{transform:none}
.label,.pl-k,.ledger dt,.gn-wrap small,.side-mail span{font:500 var(--fs-caps)/var(--lh-caps) var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
html:lang(zh) :is(.label,.pl-k,.ledger dt,.gn-wrap small,.side-mail span){font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:400;letter-spacing:.08em}
html:lang(ar) :is(.label,.pl-k,.ledger dt,.gn-wrap small,.side-mail span){font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:0}
.tl{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--link);font-size:var(--fs-text);line-height:20px;white-space:nowrap;text-decoration:none;transition:color .3s var(--ease),transform .3s var(--ease)}
.tl>span,.pl-v,.pl-wa>span:first-child,.ledger dd a>span:first-child,.ledger dd a>bdi,.lang-side button[aria-current] span{padding-bottom:4px;background:linear-gradient(var(--horizon),var(--horizon)) 0 100%/100% 1px no-repeat}
.tl .ico{transition:transform .45s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .tl:hover{color:var(--ink)}
  .tl:hover .ico{transform:translateX(4px)}
  [dir=rtl] .tl:hover .ico.arw{transform:scaleX(-1) translateX(4px)}
}
.tl:active{color:var(--ink);transform:translateY(1px)}
.top{position:absolute;z-index:var(--z-top);top:0;inset-inline:0;height:0}
.brand{--disc:64px;--gap:12px;--fz:26px;--lz:30px;--fe:15px;--le:18px;--ls:.06em;--fa:20px;--la:28px;--bt:29px;
  position:absolute;top:calc(var(--bt) + env(safe-area-inset-top));inset-inline-start:var(--m);display:flex;align-items:center;gap:var(--gap);min-width:44px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand-mark{display:grid;place-items:center;width:var(--disc);height:var(--disc);border-radius:50%;background:var(--ground);flex:none}
.brand-mark img{display:block;width:calc(var(--disc)*.6875);height:calc(var(--disc)*.6875)}
.brand-name{display:block;white-space:nowrap}
.brand-name>span{display:block}
.bn-zh{font:500 var(--fz)/var(--lz) 'Noto Serif SC Brand',var(--serif-zh);letter-spacing:0;text-align:justify;text-align-last:justify}
.bn-en{font:500 var(--fe)/var(--le) var(--sans);letter-spacing:var(--ls);text-transform:uppercase}
.bn-ar{font:500 var(--fa)/var(--la) 'Noto Naskh Arabic Brand','Noto Naskh Arabic','Tajawal','Geeza Pro',serif;letter-spacing:0}
@media (max-width:389.98px){.brand{--disc:60px;--gap:10px;--fz:24px;--lz:28px;--fe:14px;--le:17px;--fa:19px;--la:26px;--bt:30px}}
.lang{display:flex}
.lang button{min-width:44px;height:44px;padding:0 8px;border:0;background:none;color:var(--ink);font:400 14px/20px var(--sans);letter-spacing:.04em;transition:color .3s var(--ease)}
.lang button[lang=ar]{font-size:16px;letter-spacing:0}
.lang button[lang=zh]{letter-spacing:.06em}
.lang-top{position:absolute;top:calc(22px + env(safe-area-inset-top));inset-inline-end:calc(var(--m) + 34px)}
.lang-top button[aria-current]{display:none}
@media (max-width:599.98px){
  .lang-top{top:calc(69px + env(safe-area-inset-top));inset-inline-end:calc(var(--m) - 6px)}
  .lang-top button{min-width:0;padding:0 6px}
  .lang-top button{position:relative}
  .lang-top button::after{content:"";position:absolute;inset-block:0;inset-inline-start:min(0px,calc(100% - 44px));inset-inline-end:0}
  html:not(:lang(ar)) .lang-top button[lang=ar]::after,html:lang(ar) .lang-top button[lang=en]::after{inset-inline-start:0;inset-inline-end:min(0px,calc(100% - 44px))}
}
@media (max-width:389.98px){.lang-top{top:calc(67px + env(safe-area-inset-top))}}
@media (hover:hover) and (pointer:fine){.lang button:hover{color:var(--link)}}
.lang button:active{color:var(--link)}
.menu-btn{position:fixed;z-index:var(--z-menu);top:calc(22px + env(safe-area-inset-top));inset-inline-end:calc(var(--m) - 11px);width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid transparent;background:transparent;color:var(--ink);transition:background-color .4s var(--ease),border-color .4s var(--ease),color .3s var(--ease)}
.moved .menu-btn{background:var(--ground);border-color:var(--rule)}
.menu-ico{display:grid;gap:7px}
.menu-ico i{display:block;width:22px;height:var(--stroke);background:currentColor;transition:transform .45s var(--ease)}
@media (hover:hover) and (pointer:fine){.menu-btn:hover .menu-ico i:first-child{transform:translateX(-3px)}.menu-btn:hover .menu-ico i:last-child{transform:translateX(3px)}}
.menu-btn:active{color:var(--link)}
.hero{
  --hd:calc(var(--hdp) + env(safe-area-inset-top));
  --lift:24px;
  --top:max(calc(var(--hd) + 130px + var(--fs-disp)*var(--up) - var(--ih)*.468),calc(var(--hd) + 48px + var(--stack) - var(--ih)*.468),calc(var(--H) - 238px - var(--ih)*.76),calc(var(--H) - 88px - var(--ih)));
  --roof:calc(var(--top) + var(--ih)*.468);
  --pitch:min(calc(var(--fs-disp) + var(--gap-max)),calc((var(--tx) - var(--m) - var(--fs-disp)/2)/3));
  position:relative;height:var(--H);overflow:hidden;background:var(--ground) var(--grain);color:var(--ink)}
.hero-ph,.ph-drift{position:absolute;inset:0}
.hero-ph{overflow:hidden;background:linear-gradient(to right,#2999e3,#2c98e5,#3696e7) 0 0/100% max(0px,calc(var(--top) - var(--ih)*.218 + 1px)) no-repeat}
.hero-ph img{position:absolute;top:calc(var(--top) - var(--ih)*.21802);left:0;width:var(--iw);height:calc(var(--ih)*1.21802);max-width:none;transform-origin:81.77% 70%}
@media (max-width:599.98px) and (orientation:portrait){
  .hero-ph{-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--H) - 148px),rgba(0,0,0,.9) calc(var(--H) - 136px),rgba(0,0,0,.5) calc(var(--H) - 118px),rgba(0,0,0,.1) calc(var(--H) - 100px),transparent calc(var(--H) - 88px));mask-image:linear-gradient(to bottom,#000 calc(var(--H) - 148px),rgba(0,0,0,.9) calc(var(--H) - 136px),rgba(0,0,0,.5) calc(var(--H) - 118px),rgba(0,0,0,.1) calc(var(--H) - 100px),transparent calc(var(--H) - 88px))}
  [dir=rtl] .hero-in{inset-inline-start:calc(100vw - var(--tl) + 16px)}
  html:lang(en) .gates .nm{font-size:min(var(--fs-disp),calc((var(--tl) - var(--m) - 48px)/6.2))}
  html:lang(ar) .gates a .nm{font-size:min(calc(var(--fs-disp)*.84),calc((var(--tl) - var(--m) - 52px)/9.6));font-weight:500}
}
@media (min-width:600px),(orientation:landscape){
  :root{--cap:1789px;--ih:min(var(--H),var(--cap),76vw);--iw:calc(var(--ih)*.55814);--gap-max:48px;
    --avail:calc(100vw - var(--iw) - var(--hm) - 32px);
    --fs-disp:clamp(28px,min(calc((var(--H)*.543 - 125px - var(--hdp))/var(--up)),calc(var(--avail)/4.6)),48px)}
  .hero{--top:calc(var(--H) - var(--ih));--pitch:min(calc(var(--fs-disp) + var(--gap-max)),calc((var(--avail) - var(--fs-disp))/2))}
  .hero-ph{inset-inline-start:auto;width:var(--iw)}
  .hero .hero-in{inset-inline:var(--hm) auto;bottom:calc(var(--ih)*.365)}
  .hero .placard{inset-inline-start:var(--hm)}
  html:lang(en) .gates .nm{font-size:min(var(--fs-disp),calc((var(--avail) - 44px)/6.2))}
  html:lang(ar) .gates a .nm{font-size:min(calc(var(--fs-disp)*.84),calc((var(--avail) - 44px)/9.6))}
}
@media (min-width:600px) and (-webkit-min-device-pixel-ratio:1.5),(orientation:landscape) and (-webkit-min-device-pixel-ratio:1.5),(min-width:600px) and (min-resolution:1.5dppx),(orientation:landscape) and (min-resolution:1.5dppx){:root{--cap:894px}}
@media (min-width:600px) and (-webkit-min-device-pixel-ratio:2.5),(orientation:landscape) and (-webkit-min-device-pixel-ratio:2.5),(min-width:600px) and (min-resolution:2.5dppx),(orientation:landscape) and (min-resolution:2.5dppx){:root{--cap:596px}}
@media (min-width:600px) and (max-width:899.98px){
  :root{--hm:40px}
  .brand{inset-inline-start:var(--hm)}
}
.hero-in{position:absolute;z-index:var(--z-words);inset-inline:var(--m);bottom:calc(var(--H) - var(--roof) + var(--lift))}
.slogan{font:400 var(--fs-mid)/var(--lh-mid) var(--serif);letter-spacing:-.012em;text-wrap:balance}
html:lang(zh) .slogan{letter-spacing:.04em}
html:lang(ar) .slogan{letter-spacing:0}
.gates{margin-top:24px}
.gates ol{display:grid}
.gates a{position:relative;display:flex;align-items:center;gap:16px;min-height:56px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .3s var(--ease),transform .3s var(--ease)}
.gates .nm{font:300 var(--fs-disp)/1 var(--serif);letter-spacing:-.025em}
.gates .go{width:20px;height:20px;transition:transform .45s var(--ease)}
html:lang(ar) .gates .nm{font-weight:400;font-size:calc(var(--fs-disp)*.84);line-height:1.4;letter-spacing:0}
@media (hover:hover) and (pointer:fine){
  .gates a:hover{color:var(--link)}
  .gates a:hover .go{transform:translateX(4px)}
  [dir=rtl] .gates a:hover .go{transform:scaleX(-1) translateX(4px)}
  html:lang(zh) .gates a:hover .go{transform:translateX(4px)}
}
.gates a:active{color:var(--link);transform:translateY(1px)}
html:lang(zh) .gates ol{grid-template-columns:repeat(3,var(--pitch));justify-content:start;align-items:start}
html:lang(zh) .gates a{flex-direction:column;align-items:flex-start;gap:12px;min-height:0;width:var(--fs-disp)}
html:lang(zh) .gates a::before{content:"";position:absolute;inset-block:-12px -16px;inset-inline:calc((var(--pitch) - var(--fs-disp))/-2)}
html:lang(zh) .gates .go{order:-1}
html:lang(zh) .gates .nm{font-family:var(--serif-zh);writing-mode:vertical-rl;text-orientation:upright;line-height:1;letter-spacing:.07em;margin-bottom:-.07em}
html:lang(zh) .gates .nm{inline-size:calc(var(--up)*1em + .07em);text-align:justify;text-align-last:justify;text-justify:inter-character}
.placard{position:absolute;z-index:var(--z-words);inset-inline-start:var(--m);bottom:calc(24px + env(safe-area-inset-bottom));display:flex;max-width:calc(100% - 2*var(--m));min-height:48px;background:var(--ground) var(--grain);border:1px solid var(--rule)}
.placard a{display:flex;align-items:center;padding:0 12px;text-decoration:none;color:var(--ink);white-space:nowrap;transition:color .3s var(--ease),transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.placard a:hover{color:var(--link)}}
.placard a:active{color:var(--link);transform:translateY(1px)}
.pl-mail{min-width:0;gap:12px}
.pl-v{font-size:14px;line-height:18px}
.pl-wa{border-inline-start:1px solid var(--rule);font:500 14px/18px var(--sans);letter-spacing:.02em}
html:lang(ar) .pl-wa{font-size:16px;letter-spacing:0}
.hero-start{position:absolute;inset-inline:0;top:0;height:24px;pointer-events:none}
@media (max-width:899.98px){
  .pl-k{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:359.98px){.placard a{padding:0 8px}}
@media (max-width:339.98px){
  .placard{flex-direction:column}
  .placard a{min-height:44px;padding:0 12px}
  .pl-v{font-size:var(--fs-text)}
  .pl-wa{border-inline-start:0;border-top:1px solid var(--rule)}
  .brand-name{display:none}
  .brand{justify-content:center}
  .lang-top{top:calc(22px + env(safe-area-inset-top));inset-inline-end:calc(var(--m) + 38px)}
}
@media (prefers-reduced-motion:no-preference){
  .js .hero-ph img{animation:m-settle 2.4s var(--ease) both}
  .js .top,.js .menu-btn{animation:m-fade .9s var(--ease) .2s both}
  .js .slogan{animation:m-rise .9s var(--ease) .55s both}
  .js .gates li{animation:m-rise .9s var(--ease) both}
  html.js:lang(zh) .gates li{animation-name:m-stand;animation-duration:1.1s}
  .js .gates li:nth-child(1){animation-delay:.65s}
  .js .gates li:nth-child(2){animation-delay:.77s}
  .js .gates li:nth-child(3){animation-delay:.89s}
  .js .placard{animation:m-rise .9s var(--ease) 1.1s both}
  @supports (animation-timeline:scroll()){
    .ph-drift{animation:m-drift linear both;animation-timeline:scroll(root block);animation-range:0px var(--H)}
  }
}
@keyframes m-settle{from{opacity:0;transform:scale(1.035)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes m-stand{from{opacity:0;clip-path:inset(100% -24px -24px -24px);transform:translateY(16px)}to{opacity:1;clip-path:inset(-24px);transform:none}}
@keyframes m-drift{to{transform:translate3d(0,calc(var(--H)*.09),0)}}
.anim .frame .ph{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}
.anim .frame.in .ph{clip-path:inset(0 0 0 0)}
.anim .frame img{transform:scale(1.06);transition:transform 1.8s var(--ease)}
.anim .frame.in img{transform:none}
.anim .frame figcaption{opacity:0;transition:opacity .9s var(--ease) .5s}
.anim .frame.in figcaption{opacity:1}
.ln{position:relative}
.ln::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--rule);transform-origin:0 50%}
[dir=rtl] .ln::before{transform-origin:100% 50%}
.anim .ln::before{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.anim .ln.in::before{transform:none}
.about{padding:120px var(--m) 112px;background:radial-gradient(85% 34% at 100% 26%,var(--panel-wash),transparent 70%),radial-gradient(85% 34% at 0 66%,var(--patch-wash),transparent 70%)}
[dir=rtl] .about{background:radial-gradient(85% 34% at 0 26%,var(--panel-wash),transparent 70%),radial-gradient(85% 34% at 100% 66%,var(--patch-wash),transparent 70%)}
.about-in,.contact-in{max-width:1200px;margin-inline:auto}
.lead{margin-top:24px;font:400 var(--fs-lead)/var(--lh-lead) var(--serif);letter-spacing:-.015em;text-wrap:balance}
html:lang(zh) .lead{letter-spacing:.01em;text-wrap:wrap}
html:lang(ar) .lead{letter-spacing:0}
.lead bdi{white-space:nowrap}
.body{margin-top:24px;max-width:34em;text-wrap:pretty}
.tag{display:grid;gap:4px;margin-top:56px;padding-top:16px}
.tag-name{font:500 var(--fs-caps)/var(--lh-caps) var(--sans);letter-spacing:.14em}
.tag-place{font-size:max(14px,var(--fs-cap));line-height:var(--lh-cap);color:var(--ink-soft)}
.tag-lic{font-size:max(14px,var(--fs-cap));line-height:var(--lh-cap);color:var(--gold);font-variant-numeric:lining-nums tabular-nums}
.about .tl{margin-top:16px}
.works{position:relative}
.works-line{display:none}
.work{position:relative;padding-inline:var(--m);margin-top:128px}
.work:first-of-type{margin-top:8px}
.frame{min-width:0}
.frame .ph{overflow:hidden;background:var(--panel)}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.ph picture{display:contents}
.w1 .ph{aspect-ratio:2/3}  .w1 img{object-position:50% 40%}
.w2 .ph{aspect-ratio:4/5}  .w2 img{object-position:50% 48%}
.w3 .ph{aspect-ratio:5/4}  .w3 img{object-position:50% 44.5%}
.frame figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--ink-soft)}
html:lang(en) .cap{font-style:italic}
.cap{display:block;text-wrap:balance}
.work-tx{margin-top:32px}
.work h2{font:300 var(--fs-h)/1.08 var(--serif);letter-spacing:-.025em;color:var(--link)}
html:lang(zh) .work h2{font-family:var(--serif-zh);line-height:1.25;letter-spacing:.03em}
html:lang(ar) .work h2{font-weight:400;font-size:calc(var(--fs-h)*.84);line-height:1.5;letter-spacing:0}
.work-tx p{margin-top:12px;text-wrap:pretty}
.work .enter{margin-top:8px}
.work .enter::after{content:"";position:absolute;inset:0}
.w2{--fw:calc(100vw - 2*var(--m) - 88px);--fh:calc(var(--fw)*1.25);display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:24px}
.w2 .frame,.w2 .work-tx{grid-column:2}
.w2 .vt{display:none}
html:lang(zh) .w2 .vt{display:flex;align-items:flex-end;grid-column:1;grid-row:1;height:calc(var(--fh)*.618 - 16px);font:300 var(--fs-h)/1 var(--serif-zh);color:var(--link)}
html:lang(zh) .w2 .vt span{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.07em;white-space:nowrap;margin-bottom:-.07em}
html:lang(zh) .w2::before{content:"";position:absolute;top:calc(var(--fh)*.618);top:round(down,calc(var(--fh)*.618),1px);inset-inline-start:0;width:calc(var(--m) + 88px);height:1px;background:var(--horizon);transform-origin:0 50%}
html:lang(zh).anim .w2::before{transform:scaleX(0);transition:transform 1.2s var(--ease) .3s}
html:lang(zh).anim .w2.in::before{transform:none}
html:lang(zh) .w2 .work-tx h2{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:lang(zh) .w2 .work-tx{margin-top:24px}
html:lang(zh) .w2 .work-tx p{margin-top:0}
.w3 .work-tx{margin-top:0}
.w3 .frame{margin-top:32px;margin-inline-end:calc(var(--m)*-1)}
.w3 figcaption{padding-inline-end:var(--m)}
.contact{margin-top:136px;padding:0 var(--m) 112px;background:radial-gradient(90% 46% at 100% 50%,var(--patch-wash),transparent 70%)}
[dir=rtl] .contact{background:radial-gradient(90% 46% at 0 50%,var(--patch-wash),transparent 70%)}
.contact p{margin-top:24px}
.mail-big{position:relative;display:inline-block;padding:8px 0;min-height:44px;font:400 var(--fs-lead)/32px var(--serif);letter-spacing:-.015em;color:var(--ink);white-space:nowrap;text-decoration:none;transition:color .3s var(--ease),transform .3s var(--ease)}
.mail-big::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--horizon);transform-origin:0 50%}
[dir=rtl] .mail-big::after{transform-origin:100% 50%}
.anim .ln-mail .mail-big::after{transform:scaleX(0);transition:transform 1.4s var(--ease) .15s}
.anim .ln-mail.in .mail-big::after{transform:none}
@media (hover:hover) and (pointer:fine){.mail-big:hover{color:var(--link)}}
.mail-big:active{color:var(--link);transform:translateY(1px)}
@media (max-width:359.98px){.mail-big{font-size:var(--fs-mid)}}
.ledger{margin-top:56px}
.ledger>div{display:grid;grid-template-columns:minmax(104px,36%) minmax(0,1fr);column-gap:16px;padding-block:8px;border-bottom:1px solid var(--rule)}
.ledger dt{display:flex;align-items:center;min-height:44px;align-self:start}
.ledger dd{display:grid;justify-items:start;min-width:0}
.ledger dd a{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;color:var(--link);line-height:20px;white-space:nowrap;text-decoration:none;transition:color .3s var(--ease),transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.ledger dd a:hover{color:var(--ink)}}
.ledger dd a:active{color:var(--ink);transform:translateY(1px)}
.ledger .ico{width:16px;height:16px}
.foot{padding:24px var(--m) calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);font:400 14px/22px var(--sans);letter-spacing:.02em;color:var(--ink-soft)}
html:lang(ar) .foot{font-size:15px;line-height:26px;letter-spacing:0}
.legal{display:flex;flex-wrap:wrap;gap:0 24px}
html:lang(ar) .legal bdi{font-size:14px;letter-spacing:.02em}
@media (max-width:379.98px){.legal .nb{white-space:normal}}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:4px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-inline:10px;margin-inline:-10px;white-space:nowrap;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--horizon);transition:color .3s var(--ease)}
.foot-links a[aria-current]{color:var(--ink);text-decoration-color:transparent}
@media (hover:hover) and (pointer:fine){.foot-links a:hover{color:var(--ink)}}
.foot-links a:active{color:var(--ink)}
.side{position:fixed;inset:0;margin:0;margin-inline-start:auto;width:min(100% - 48px,420px);max-width:none;height:100%;max-height:none;padding:0;border:0;background:var(--panel);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;--dir:1}
[dir=rtl] .side{--dir:-1}
.side::backdrop{background:var(--veil)}
.side-top{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding-block:calc(16px + env(safe-area-inset-top)) 8px;padding-inline:calc(24px - 8px) calc(24px - 11px);background:var(--panel)}
.lang-side button{color:var(--ink-soft)}
.lang-side button[aria-current]{color:var(--ink)}
.close-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--ink);transition:color .3s var(--ease)}
.close-btn:active{color:var(--link)}
.close-ico{position:relative;width:22px;height:22px}
.close-ico i{position:absolute;top:50%;left:0;width:22px;height:var(--stroke);margin-top:calc(var(--stroke)/-2);background:currentColor;transform:rotate(45deg)}
.close-ico i:last-child{transform:rotate(-45deg)}
.side-body{padding:16px 24px calc(40px + env(safe-area-inset-bottom))}
.side-main{display:grid;gap:4px}
.side-main a{display:block;padding:12px 0;text-decoration:none;color:var(--ink);transition:color .3s var(--ease),transform .3s var(--ease)}
.side-main .n{display:block;font:400 var(--fs-lead)/32px var(--serif);letter-spacing:-.015em}
html:lang(zh) .side-main .n{font-family:var(--serif-zh);letter-spacing:.03em}
html:lang(ar) .side-main .n{line-height:40px;letter-spacing:0}
.side-main .d{display:block;margin-top:2px;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.side-main a:hover,.side-row:hover,.fold summary:hover,.fold li a:hover,.side-wa:hover{color:var(--link)}}
.side-main a:active,.side-row:active,.fold summary:active,.side-wa:active{color:var(--link)}
.side-main a:active{transform:translateY(1px)}
.side-h{margin-top:40px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.side-row,.fold summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);line-height:24px;cursor:pointer;list-style:none;transition:color .3s var(--ease)}
.fold summary::-webkit-details-marker{display:none}
.fold summary .ico{transition:transform .45s var(--ease)}
.fold[open] summary .ico{transform:rotate(45deg)}
.gn-wrap{display:grid}
.gn{line-height:24px}
.gn[lang=zh]{display:none}
html:lang(zh) .gn[lang=zh]{display:block}
html:lang(zh) .gn[lang=en]{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--ink-soft)}
.gn-wrap small{margin-top:2px}
.fold ul{padding:8px 0;border-bottom:1px solid var(--rule)}
.fold li a,.fold li .here{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink);transition:color .3s var(--ease)}
#companies li{font:400 var(--fs-caps)/var(--lh-caps) var(--sans);letter-spacing:.08em}
#network li{font-size:var(--fs-text)}
.here-tag{font:400 var(--fs-cap)/var(--lh-cap) var(--sans);letter-spacing:.04em;color:var(--gold);white-space:nowrap}
html:lang(ar) .here-tag{letter-spacing:0}
.fold-src{padding:12px 0;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.side-contact{display:grid;gap:0;margin-top:16px}
.side-mail{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:64px;padding:8px 16px;background:var(--patch);color:var(--ink);text-decoration:none;transition:background-color .3s var(--ease)}
.side-mail span{color:var(--ink)}
.side-mail bdi{font-size:var(--fs-text);line-height:20px}
@media (hover:hover) and (pointer:fine){.side-mail:hover{background:var(--patch-press)}}
.side-mail:active{background:var(--patch-press)}
.side-wa{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font:500 14px/20px var(--sans);letter-spacing:.02em;transition:color .3s var(--ease)}
.side-wa bdi{font:400 var(--fs-text)/20px var(--serif);letter-spacing:0}
html:lang(ar) .side-wa{font-size:16px;letter-spacing:0}
@media (prefers-reduced-motion:no-preference){
  .side[open]{animation:m-side-in .6s var(--ease)}
  .side[open]::backdrop{animation:m-fade .5s var(--ease)}
  .side.closing{animation:m-side-out .32s var(--leave) forwards}
  .side.closing::backdrop{animation:m-fade-out .32s var(--leave) forwards}
  .side[open] .side-body>*{animation:m-rise .7s var(--ease) both}
  .side[open] .side-body>:nth-child(2){animation-delay:.1s}
  .side[open] .side-body>:nth-child(3){animation-delay:.16s}
  .side[open] .side-body>:nth-child(4){animation-delay:.2s}
  .side[open] .side-body>:nth-child(5){animation-delay:.26s}
  .side[open] .side-body>:nth-child(6){animation-delay:.3s}
  .side[open] .close-ico i{animation:m-x1 .5s var(--ease) .1s both}
  .side[open] .close-ico i:last-child{animation-name:m-x2}
}
@keyframes m-side-in{from{transform:translateX(calc(100%*var(--dir)))}to{transform:none}}
@keyframes m-side-out{from{transform:none}to{transform:translateX(calc(100%*var(--dir)))}}
@keyframes m-fade-out{from{opacity:1}to{opacity:0}}
@keyframes m-x1{from{transform:translateY(-4px) rotate(0)}to{transform:rotate(45deg)}}
@keyframes m-x2{from{transform:translateY(4px) rotate(0)}to{transform:rotate(-45deg)}}
@media (min-width:900px){
  :root{--m:clamp(40px,5vw,72px);--H:max(100vh,760px);--gap-max:48px;
    --fs-text:18px;--lh-text:30px;--fs-mid:22px;--lh-mid:30px;--fs-lead:35px;--lh-lead:48px;--fs-h:48px;
    --hdd:140px;
    --fs-disp:clamp(32px,min(calc((var(--H)*.543 - 160px - var(--hdd))/var(--up)),calc(var(--avail)/4.6)),64px)}
  html:lang(zh){--lh-text:32px;--lh-lead:52px}
  html:lang(ar){--fs-text:19px;--lh-text:36px;--fs-mid:24px;--lh-mid:40px;--lh-lead:60px}
  .brand{--disc:80px;--gap:16px;--fz:36px;--lz:42px;--fe:19px;--le:24px;--ls:.1em;--fa:28px;--la:38px;--bt:35px}
  .lang-top{inset-inline-end:calc(var(--m) + 40px)}
  .lang-top,.menu-btn{top:34px}
  .hero-in{inset-inline-end:auto}
  .gates a{min-height:72px}
  .gates .go{width:24px;height:24px}
  html:lang(zh) .gates .go{width:20px;height:20px}
  .placard{bottom:40px;min-height:56px}
  .placard a{padding:0 16px}
  .pl-v{font-size:var(--fs-text);line-height:22px}
  .about{padding:184px var(--m) 176px}
  .about-in,.contact-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .about .label,.contact .label{grid-column:1/4;padding-top:16px}
  .about-tx,.contact-tx{grid-column:4/11;min-width:0}
  .lead{margin-top:0}
  .body{margin-top:32px}
  .tag{margin-top:72px;max-width:416px}
  .works{--W:min(100vw - 2*var(--m) - 16px,1200px);display:grid;grid-template-columns:minmax(0,38fr) minmax(0,30fr) minmax(0,24fr);column-gap:calc(var(--W)*.04);align-items:start;padding-inline:max(0px,calc((100% - var(--W))/2))}
  .works-line{display:block;position:absolute;top:calc(var(--W)*.35226);top:round(down,calc(var(--W)*.35226),1px);inset-inline:0;height:1px;background:var(--horizon);opacity:.55;transform-origin:0 50%}
  [dir=rtl] .works-line{transform-origin:100% 50%}
  .anim .works-line{transform:scaleX(0);transition:transform 1.8s var(--ease) .2s}
  .anim .works.in .works-line{transform:none}
  .work,.work:first-of-type{margin-top:0;padding-inline:0}
  .w2{display:block;margin-top:calc(var(--W)*.12051)}
  .w3{display:flex;flex-direction:column;margin-top:calc(var(--W)*.2336)}
  .w3 .frame{order:-1;margin:0}
  .w3 figcaption{padding-inline-end:0}
  .w3 .work-tx{margin-top:32px}
  html:lang(zh) .w2 .vt,html:lang(zh) .w2::before{display:none}
  html:lang(zh) .w2 .work-tx h2{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
  html:lang(zh) .w2 .work-tx{margin-top:32px}
  html:lang(zh) .w2 .work-tx p{margin-top:12px}
  .frame{position:relative}
  .contact{margin-top:200px;padding-bottom:168px}
  .contact p{margin-top:0}
  .mail-big{font-size:48px;line-height:56px;font-weight:300;letter-spacing:-.025em}
  .ledger{margin-top:72px}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-block:32px 40px}
  .foot-links{margin-top:-12px;margin-inline-end:auto}
  .foot-links:last-child{margin-inline:auto 0}
  .side{width:440px}
  .side-body{padding-inline:32px}
  .side-top{padding-inline:calc(32px - 8px) calc(32px - 11px)}
}
@media (min-width:900px) and (min-height:480px) and (orientation:landscape){
  :root{--H:max(100vh,600px)}
  @supports (height:100svh){:root{--H:max(100svh,600px)}}
  .hero{
    --hd:var(--hdd);
    --iw:max(100vw,calc(var(--H)*1.791667));
    --ih:calc(var(--iw)*.55814);
    --ix:calc((100vw - var(--iw))*.7);
    --tip:clamp(56px,calc(1466px - 100vw),80px);
    --top:max(calc(var(--H) - var(--ih)),clamp(calc(var(--tip) - 32px - var(--ih)*.1706),calc(var(--H) - var(--ih)*.86),calc(var(--tip) - var(--ih)*.1706)));
    --tl:calc(var(--ix) + var(--iw)*.759);
    --fsb:clamp(44px,min(calc(var(--H)*.09),calc((var(--iw)*.575 + var(--ix) - var(--m) - 48px)/var(--wide))),128px);
    --xr:calc(var(--m) + var(--fsb)*var(--wide) + 48px - var(--ix));
    --roof:calc(var(--top) + clamp(var(--ih)*.693,calc(var(--ih)*.737 - (var(--xr) - var(--iw)*.44)*.7017),var(--ih)*.737));
    --lift:24px;
    --feet:min(calc(var(--roof) - var(--lift)),calc(var(--H) - 144px));
    --fs-disp:clamp(var(--fs-low),calc((var(--feet) - var(--hd) - 96px - var(--lh-mid))/var(--up)),var(--fsb));
    --pitch:calc(var(--fs-disp)*2)}
  .hero-ph{inset-inline-start:0;width:auto;background:none}
  .hero-ph img{top:var(--top);left:var(--ix);width:var(--iw);height:var(--ih);transform-origin:77.69% 78%}
  .hero .hero-in{inset-inline:var(--m) auto;bottom:calc(var(--H) - var(--feet))}
  .hero .placard{inset-inline-start:var(--m)}
  .gates{margin-top:32px}
  .gates a{min-height:calc(var(--fs-disp)*1.2)}
  html:lang(en) .gates .nm{font-size:var(--fs-disp)}
  html:lang(ar) .gates a .nm{font-size:min(calc(var(--fs-disp)*.84),calc((var(--tl) - 48px - var(--m) - 40px)/9.6))}
  [dir=rtl] .hero{--roof:calc(var(--top) + var(--ih)*.611);--fs-disp:clamp(40px,calc((var(--feet) - var(--hd) - 64px - var(--lh-mid))/3.6),var(--fsb))}
  [dir=rtl] .hero .hero-in{inset-inline-start:calc(100% - var(--tl) + 48px)}
}
@media (min-width:900px) and (min-height:840px) and (orientation:landscape){
  .hero{--fs-mid:28px;--lh-mid:38px}
  html:lang(ar) .hero{--fs-mid:30px;--lh-mid:48px}
}
@media (min-width:900px) and (min-height:1200px) and (orientation:landscape){
  .hero{--fs-mid:35px;--lh-mid:48px}
  html:lang(ar) .hero{--fs-mid:38px;--lh-mid:60px}
}
@media (min-width:900px) and (min-height:480px) and (orientation:landscape){
  :root{
    --dk-mx:max(var(--m),calc(50vw - 888px));
    --dk-g:clamp(16px,1.6667vw,32px);
    --dk-pad:clamp(72px,11vh,128px);
    --dk-fs-cap:clamp(13px,.9722vw,16px);
    --dk-fs-text:clamp(18px,1.3889vw,22px);
    --dk-fs-mid:clamp(20px,1.5278vw,28px);
    --dk-fs-s:clamp(40px,min(3.8194vw,6.2vh),69px);
    --dk-fs-d:clamp(56px,min(5.9722vw,9.6vh),104px);
    --dk-fs-mail:clamp(48px,6.6vw,128px);
    --dk-bar:72px;
  }
  html{scroll-padding-top:var(--dk-bar)}
  .top{position:fixed}
  .top::before{content:"";position:absolute;top:0;inset-inline:0;height:var(--dk-bar);background:var(--ground) var(--grain);box-shadow:0 1px 0 var(--rule);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  .moved .top::before{opacity:1}
  .brand,.lang-top{transition:transform .5s var(--ease)}
  .menu-btn{transition:transform .5s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),color .3s var(--ease)}
  .brand{transform-origin:0 50%}
  [dir=rtl] .brand{transform-origin:100% 50%}
  .moved .brand{transform:translateY(-51px) scale(.55)}
  .moved .lang-top,.moved .menu-btn{transform:translateY(-20px)}
  .moved .menu-btn{background:transparent;border-color:transparent}
  .about{padding:var(--dk-pad) var(--dk-mx) calc(var(--dk-pad) + 16px)}
  .about-in,.contact-in{max-width:none;margin-inline:0;column-gap:var(--dk-g)}
  .about .label,.contact .label{grid-column:1/-1;padding-top:0}
  .about-tx,.contact-tx{display:contents}
  .about .lead{grid-column:1/9;grid-row:2;margin-top:clamp(20px,3.6vh,36px);font-size:var(--dk-fs-s);line-height:1.2;font-weight:300;letter-spacing:-.022em}
  html:lang(zh) .about .lead{line-height:1.36}
  html:lang(ar) .about .lead{font-weight:400;font-size:calc(var(--dk-fs-s)*.9);line-height:1.6}
  .about .body{grid-column:1/7;grid-row:3;margin-top:clamp(28px,4.4vh,44px);max-width:30em;font-size:var(--dk-fs-text);line-height:1.6}
  html:lang(zh) .about .body{line-height:1.8}
  html:lang(ar) .about .body{line-height:1.9}
  .about .tag{grid-column:10/13;grid-row:2/5;align-self:start;display:block;max-width:none;margin-top:calc(clamp(20px,3.6vh,36px) + var(--dk-fs-s)*.22);padding-top:0}
  .about .tag p{padding-block:14px;border-bottom:1px solid var(--rule);text-wrap:balance}
  .about .tag-name{font-size:12px;line-height:20px}
  .about .tag-place{font-size:var(--dk-fs-text);line-height:1.4;color:var(--ink)}
  .about .tag-lic{font-size:max(14px,var(--dk-fs-cap));line-height:1.55}
  .about-tx>p:last-child{grid-column:1/7;grid-row:4;margin-top:clamp(16px,2.6vh,28px)}
  .about .tl{margin-top:0;font-size:var(--dk-fs-text)}
  .works{--fs-h:var(--dk-fs-d);display:block;padding-inline:var(--dk-mx)}
  .works-line{display:none}
  .work,.work:first-of-type{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(32px,1fr) auto;column-gap:var(--dk-g);margin:0;padding:clamp(48px,8vh,80px) 0 clamp(96px,14vh,144px)}
  .work::after{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--horizon);transform-origin:0 50%}
  [dir=rtl] .work::after{transform-origin:100% 50%}
  .work .work-tx{display:contents}
  .work .frame{grid-row:1/4;align-self:start;order:0;margin:0}
  .w1 .frame{grid-column:6/13}
  .w2 .frame{grid-column:1/9}
  .w3 .frame{grid-column:4/13}
  .work .ph{width:100%;max-height:min(calc(100vh - 168px),1100px);min-height:280px}
  .w1 .ph{aspect-ratio:4/5}  .w1 img{object-position:50% 32%}
  .w2 .ph{aspect-ratio:3/2}  .w2 img{object-position:55% 50%}
  .w3 .ph{aspect-ratio:2/1}  .w3 img{object-position:62% 50%}
  .work figcaption{position:absolute;top:100%;inset-inline:0;margin-top:12px;font-size:var(--dk-fs-cap);line-height:1.5}
  .work .work-tx h2{grid-row:1;align-self:start;line-height:.98;letter-spacing:-.03em}
  html:not(:lang(zh)) .work .work-tx h2{width:min-content;overflow-wrap:break-word}
  html:lang(zh) .work .work-tx h2{justify-self:start;writing-mode:vertical-rl;text-orientation:upright;line-height:1;letter-spacing:.07em;white-space:nowrap}
  html:lang(zh) .w2 .work-tx h2{justify-self:end}
  html:lang(ar) .work .work-tx h2{line-height:1.3;letter-spacing:0}
  .w1 .work-tx h2,.w1 .work-tx p{grid-column:1/5}
  .w3 .work-tx h2,.w3 .work-tx p{grid-column:1/4}
  .w2 .work-tx h2,.w2 .work-tx p{grid-column:10/13;justify-self:end;text-align:end}
  .work .work-tx p,html:lang(zh) .w2 .work-tx p{grid-row:3;align-self:end;margin:0;max-width:12em;font-size:var(--dk-fs-mid);line-height:1.36;text-wrap:balance}
  html:lang(zh) .work .work-tx p{line-height:1.5}
  html:lang(ar) .work .work-tx p{line-height:1.6}
  .work .enter{grid-row:1/4;align-self:end;justify-self:start;z-index:1;min-height:56px;margin:0 24px 24px;padding-inline:20px;background:var(--ground) var(--grain);border:1px solid var(--rule);font-size:var(--dk-fs-text)}
  .w1 .enter{grid-column:6/13;margin-inline-start:calc(max(0px,100% - var(--cap,100%)) + 24px)}
  .w1 .frame{width:100%;max-width:var(--cap,none);justify-self:end}
  @media (-webkit-min-device-pixel-ratio:1.75),(min-resolution:1.75dppx){.w1{--cap:889px}}
  @media (-webkit-min-device-pixel-ratio:2.5),(min-resolution:2.5dppx){.w1{--cap:593px}}
  .w2 .enter{grid-column:1/9;justify-self:end}
  .w3 .enter{grid-column:4/13}
  .contact{position:relative;margin-top:0;padding:var(--dk-pad) var(--dk-mx) calc(var(--dk-pad) + 24px)}
  .contact::before{content:"";position:absolute;top:0;inset-inline:var(--dk-mx);height:1px;background:var(--horizon);transform-origin:0 50%}
  [dir=rtl] .contact::before{transform-origin:100% 50%}
  .contact .ln-mail{grid-column:1/-1;margin-top:clamp(12px,2.4vh,24px)}
  .mail-big{padding:0 0 .1em;font-size:var(--dk-fs-mail);line-height:1.16;letter-spacing:-.035em}
  .ledger{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--dk-g);margin-top:clamp(48px,8.8vh,88px);padding-top:20px}
  .ledger>div{display:block;padding:0;border:0}
  .ledger>div:first-child{grid-column:1/9}
  .ledger>div:last-child{grid-column:10/13}
  .ledger dt{min-height:0}
  .ledger dd{display:flex;flex-wrap:wrap;gap:0 clamp(24px,2.8vw,48px);margin-top:8px}
  .ledger dd a{min-height:48px;font-size:var(--dk-fs-mid)}
  .ledger .ico{width:18px;height:18px}
  .foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--dk-g);row-gap:2px;align-items:start;justify-content:normal;padding:36px var(--dk-mx) 44px;font-size:14px;line-height:22px}
  .legal{display:contents}
  .legal>span:nth-child(1){grid-column:1/5;grid-row:1}
  .legal>span:nth-child(2){grid-column:5/9;grid-row:1}
  .legal>span:nth-child(3){grid-column:5/9;grid-row:2}
  .foot .foot-links,.foot .foot-links:last-child{grid-column:9/13;grid-row:1/3;justify-content:flex-end;margin:-11px 0 0}
  html:lang(ar) .foot .foot-links{margin-top:-9px}
  @media (max-width:1199.98px){
    .legal>span:nth-child(1){grid-column:1/7}
    .legal>span:nth-child(2),.legal>span:nth-child(3){grid-column:7/13}
    .foot .foot-links,.foot .foot-links:last-child{grid-column:1/13;grid-row:3;justify-content:flex-start;margin-top:4px}
  }
  .side{width:100%;margin:0}
  .side-top{padding-block:24px 4px;padding-inline:calc(var(--m) - 8px) calc(var(--m) - 11px)}
  .side-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;column-gap:var(--dk-g);align-items:start;padding:clamp(20px,5vh,56px) var(--dk-mx) 64px}
  .side-main{grid-column:1/7;grid-row:1/5;gap:0}
  .side-main li+li{border-top:1px solid var(--rule)}
  .side-main a{padding-block:clamp(14px,3.6vh,40px)}
  .side-main li:first-child a{padding-top:0}
  .side-main .n{font-size:var(--dk-fs-d);line-height:1.12;font-weight:300;letter-spacing:-.028em;transition:transform .45s var(--ease)}
  html:lang(zh) .side-main .n{line-height:1.25}
  html:lang(ar) .side-main .n{font-weight:400;font-size:calc(var(--dk-fs-d)*.84);line-height:1.5}
  .side-main .d{margin-top:6px;font-size:var(--dk-fs-text);line-height:1.5}
  .side-body>.side-h,.side-grp,.side-contact{grid-column:8/13}
  .side-body>h3:nth-of-type(1){grid-row:1;margin-top:0}
  .side-grp{grid-row:2}
  .side-body>h3:nth-of-type(2){grid-row:3}
  .side-contact{grid-row:4}
  @media (hover:hover) and (pointer:fine){
    .side-main a:hover .n{transform:translateX(8px)}
    [dir=rtl] .side-main a:hover .n{transform:translateX(-8px)}
  }
  @media (prefers-reduced-motion:no-preference){
    .side[open]{animation:m-fade .45s var(--ease)}
    .side.closing{animation:m-fade-out .28s var(--leave) forwards}
  }
  html.anim .works .work .work-tx h2{opacity:0;clip-path:inset(100% -24px -24px -24px);transform:translateY(16px);transition:opacity 1.1s var(--ease) .15s,clip-path 1.1s var(--ease) .15s,transform 1.1s var(--ease) .15s}
  html.anim .works .work.in .work-tx h2{opacity:1;clip-path:inset(-24px);transform:none}
  .anim .work .enter{opacity:0;transition:opacity .9s var(--ease) .6s,color .3s var(--ease),transform .3s var(--ease)}
  .anim .work.in .enter{opacity:1}
  .anim .work::after,.anim .contact::before{transform:scaleX(0);transition:transform 1.6s var(--ease)}
  .anim .work.in::after,.anim .contact.in::before{transform:none}
  html.anim.fine .work:hover .frame.in img{transform:scale(1.02)}
}