:root{
  --blue:#0052ff;
  --navy:#1e3269;
  --paper:#ffffff;
  --mist:#eef2ff;
  --hair:#d7d7d7;
  --header-h:84px;
  --title-top:calc(50svh - 54px);
  --pin-top:250px;
  --ease:cubic-bezier(.6,.01,.05,.95);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
.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; }
body{
  font-family:"Inter","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300; color:var(--navy); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  width:100%; max-width:100%;
  min-height:100vh;
}
a:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }

.site-header{
  position:fixed; z-index:60; inset:0 0 auto 0;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(24px,6vw,120px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.logo{ display:flex; text-decoration:none; }
.logo svg{ height:30px; width:auto; display:block; }
.header-right{ display:flex; align-items:center; gap:clamp(16px,2.2vw,28px); }
.progress{
  position:fixed; right:0; top:var(--header-h); bottom:0;
  width:2px; z-index:50; background:transparent;
}
.progress i{
  display:block; width:100%; height:100%;
  background:var(--blue); transform:scaleY(0);
  transform-origin:top center;
}
.lang-switch{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Inter","Noto Sans TC",sans-serif; font-size:13px; font-weight:400;
  letter-spacing:.06em; color:#9a9a9a; text-decoration:none;
  transition:color .4s var(--ease);
}
.lang-switch svg{
  width:17px; height:17px; display:block; flex:none; stroke:currentColor;
  transition:stroke .4s var(--ease), transform .5s var(--ease);
}
.lang-switch:hover{ color:var(--navy); }
.lang-switch:hover svg{ stroke:var(--blue); transform:rotate(24deg); }
.header-mail{ display:inline-flex; color:var(--navy); transition:color .3s var(--ease); text-decoration:none; }
.header-mail svg{ width:22px; height:22px; display:block; }
.header-mail:hover{ color:var(--blue); }
.demo-nav{
  position:relative;
  display:flex; align-items:center;
  gap:clamp(16px,2vw,24px);
}
.nav-item{
  position:relative;
  white-space:nowrap; text-decoration:none;
  font-family:"Inter","Noto Sans TC",sans-serif;
  font-size:13px; font-weight:300; line-height:1;
  letter-spacing:.02em; color:var(--navy); opacity:.38;
  transition:opacity .35s var(--ease), color .35s var(--ease);
}
.nav-item:hover{ opacity:1; }
.nav-item.is-current{ opacity:1; }
.nav-item::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px;
  height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav-item.is-current::after{ transform:scaleX(1); }
.nav-item .short{ display:none; }
.nav-indicator{ display:none; }

.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
}
.crosshair{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease);
}
.crosshair.on{ opacity:1; }
.cross-v, .cross-h{ position:absolute; background:var(--hair); will-change:transform; }
.cross-v{ top:0; bottom:0; width:1px; left:0; }
.cross-h{ left:0; right:0; height:1px; top:0; }
.cross-v::after{
  content:""; position:absolute; left:-0.5px; width:2px; height:16%; top:-25%;
  background:linear-gradient(to bottom, transparent, var(--blue), transparent);
  opacity:0; animation:beamY 9s var(--ease) 1.5s infinite;
}
.cross-h::after{
  content:""; position:absolute; top:-0.5px; height:2px; width:16%; left:-25%;
  background:linear-gradient(to right, transparent, var(--blue), transparent);
  opacity:0; animation:beamX 11s var(--ease) 5s infinite;
}
@keyframes beamY{ 0%{ top:-25%; opacity:0; } 4%{ opacity:.8; } 30%{ top:110%; opacity:0; } 100%{ top:110%; opacity:0; } }
@keyframes beamX{ 0%{ left:-25%; opacity:0; } 4%{ opacity:.8; } 30%{ left:110%; opacity:0; } 100%{ left:110%; opacity:0; } }
.cross-dot{
  position:absolute; top:0; left:0; width:12px; height:12px;
  transform:translate(-50%,-50%); will-change:transform;
}
.cross-dot::before, .cross-dot::after{ content:""; position:absolute; background:var(--blue); }
.cross-dot::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.cross-dot::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }

html.cursor-on, html.cursor-on a{ cursor:none; }
.cur-dot,.cur-ring{
  position:fixed; top:0; left:0; z-index:9999; border-radius:50%;
  pointer-events:none; transform:translate(-50%,-50%); will-change:transform;
}
.cur-dot{ width:6px; height:6px; background:var(--blue); }
.cur-ring{
  width:34px; height:34px; border:1.5px solid var(--blue);
  transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease), opacity .25s;
}
.cur-ring.hover{ width:58px; height:58px; background:rgba(0,82,255,.08); }
@media (hover:none),(pointer:coarse){ .cur-dot,.cur-ring{ display:none; } }

.orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; will-change:transform; filter:blur(90px); }
.orb.a{
  width:46vw; max-width:720px; aspect-ratio:1; left:-14vw; bottom:-12vw;
  background:var(--blue); opacity:.18; animation:drift1 22s ease-in-out infinite;
}
.orb.b{
  width:34vw; max-width:520px; aspect-ratio:1; right:-8vw; top:-6vw;
  background:#5b7cff; opacity:.14; animation:drift2 26s ease-in-out infinite; filter:blur(100px);
}
.orb.c{
  width:24vw; max-width:380px; aspect-ratio:1; right:14vw; bottom:4vw;
  background:var(--mist); opacity:.85; animation:drift3 30s ease-in-out infinite; filter:blur(70px);
}
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vw,-3.5vw) scale(1.08);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-2.5vw,3vw) scale(1.1);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-3vw,-2vw) scale(1.06);} }

.grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.mark-tilt{ padding:22px; display:inline-block; }
.mark-inner{ transform-style:preserve-3d; will-change:transform; transition:transform .12s var(--ease); }
.mark{
  width:clamp(96px,14vw,168px); height:auto; display:block;
  opacity:0; transform:translateY(10px) scale(.94); filter:blur(14px);
  animation:markReveal 1.3s var(--ease) forwards, markFloat 7s ease-in-out 1.6s infinite;
}
@keyframes markReveal{ to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0);} }
@keyframes markFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.p-main{ transform:translateY(20px); opacity:0; animation:pieceUp 1.1s var(--ease) .2s forwards; }
.p-wing{ transform:translateY(26px); opacity:0; animation:pieceUp 1.1s var(--ease) .5s forwards; }
@keyframes pieceUp{ to{ transform:translateY(0); opacity:1;} }

.brand-en{
  margin-top:34px; text-align:center; font-family:"Inter",sans-serif; font-weight:300;
  font-size:clamp(13px,1.4vw,16px); letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy); padding-left:.22em; opacity:0; transform:translateY(12px);
  animation:textUp 1s var(--ease) 1s forwards;
}
.services{
  margin-top:14px; text-align:center; font-family:"Inter",sans-serif; font-weight:400;
  font-size:clamp(12px,1.2vw,14px); letter-spacing:.14em; color:#8a8f9c;
  opacity:0; transform:translateY(12px); animation:textUp 1s var(--ease) 1.2s forwards;
}
.svc{
  position:relative; display:inline-block; cursor:pointer; color:var(--blue); padding-bottom:10px;
  transition:color .35s var(--ease);
}
.svc::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:currentColor; opacity:0; transform:scaleX(var(--svc-progress,0));
  transform-origin:left center;
  transition:opacity .25s var(--ease);
}
.svc::after{
  content:""; position:absolute; left:50%; right:50%; bottom:4px; height:1.5px;
  background:currentColor; transition:left .35s var(--ease), right .35s var(--ease);
}
.svc:hover::after{ left:0; right:0; }
.svc.is-playing::before{ opacity:.55; }
.svc-dot{ color:#c2c6d0; transition:color .35s var(--ease); }

.hero__bg{ position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.hbg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1); transition:opacity .7s var(--ease), transform 20s ease-out;
}
.hbg.is-on{ opacity:1; transform:scale(1.14); }
.hbg.is-hold{ opacity:0; transform:scale(1.14); }
.hero__mask{ position:absolute; inset:0; background:rgba(9,13,28,.66); }

.hero.is-field .hero__bg{ opacity:1; }
.hero.is-field .stage{ z-index:3; }
.hero.is-field .brand-en{ color:#fff; }
.hero.is-field .brand-zh{ color:rgba(255,255,255,.85); }
.hero.is-field .services{ color:rgba(255,255,255,.62); }
.hero.is-field .svc{ color:rgba(255,255,255,.82); }
.hero.is-field .svc.is-playing{ color:#fff; }
.hero.is-field .svc-dot{ color:rgba(255,255,255,.4); }
.hero.is-field .mark path{ fill:#fff; transition:fill .4s var(--ease); }
.hero.is-field .svc:hover{ color:#4d7fff; }
.hero.is-auto .svc{ cursor:default; }
.hero.is-auto .svc:hover::after{ left:50%; right:50%; }
.hero.is-field .orb, .hero.is-field .grain, .hero.is-field .crosshair{ opacity:0 !important; transition:opacity .5s var(--ease); }
.brand-zh{
  margin-top:30px; text-align:center; font-family:"Noto Sans TC",sans-serif; font-weight:200;
  font-size:clamp(15px,1.7vw,19px); letter-spacing:.34em; color:#9a9a9a; padding-left:.34em;
  opacity:0; transform:translateY(12px); animation:textUp 1s var(--ease) 1.4s forwards;
}
@keyframes textUp{ to{ opacity:1; transform:translateY(0);} }

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0;
  animation:cueIn 1s var(--ease) 1.8s forwards;
}
.scroll-cue span{ font-family:"Inter",sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#c0c0c0; }
.scroll-cue .line{ width:1px; height:44px; background:linear-gradient(to bottom, var(--hair), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--blue); animation:cueRun 2.2s var(--ease) infinite; }
@keyframes cueIn{ to{ opacity:1; } }
@keyframes cueRun{ 0%{ top:-40%;} 60%,100%{ top:100%;} }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.intro-sec{
  position:relative; z-index:2;
  padding:clamp(90px,16vh,180px) clamp(24px,6vw,120px) clamp(40px,8vh,90px);
  display:flex; flex-direction:column; align-items:center;
}
.intro-sec,.showcase,.detail-sec{ scroll-margin-top:calc(var(--header-h) + 24px); }
.intro-eyebrow{ font-family:"Inter",sans-serif; font-size:11px; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:#9a9a9a; margin-bottom:clamp(26px,4vh,40px); }
.intro-body{ max-width:56ch; }
.intro-body p{ font-family:"Noto Sans TC","Inter",sans-serif; font-weight:300; font-size:clamp(15px,1.35vw,17px); line-height:2.05; color:var(--navy); letter-spacing:.02em; }
.intro-body p + p{ margin-top:clamp(18px,2.4vh,26px); }
.intro-body .lead-name{ color:var(--blue); font-weight:400; }

.work-shot{
  position:absolute; display:block; border:0; border-radius:2px; background:#eef1f6;
  box-shadow:0 18px 42px rgba(30,50,105,.16);
  opacity:var(--o,0); filter:blur(var(--b,14px));
  transform:translateY(var(--sy,28px)) scale(var(--sc,.92));
  transition:opacity .18s linear, filter .22s linear, transform .18s linear;
  will-change:opacity,filter,transform;
}

.showcase{ position:relative; overflow:visible; }
.showcase,
.detail-sec,
.works-outro,
.site-footer{
  width:min(100%, var(--content-max, 1480px));
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.show-title{
  position:sticky; top:var(--title-top,100px); z-index:6; pointer-events:none;
  width:100%; text-align:center; will-change:transform, opacity;
  transition:opacity .24s linear;
}
.wc-kicker{ display:block; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); opacity:.55; font-weight:400; text-shadow:0 1px 14px rgba(255,255,255,.9); }
.wc-title{ display:block; margin-top:7px; font-size:clamp(15px,1.6vw,18px); font-weight:300; letter-spacing:.02em; line-height:1.1; color:var(--navy); text-shadow:0 2px 22px rgba(255,255,255,.92), 0 1px 4px rgba(255,255,255,.95); }
.works-flow{ position:relative; width:100%; max-width:100%; overflow:hidden; padding:0 clamp(24px,6vw,120px); }
.works-cta-wrap{
  position:relative;
  height:200vh;
}
.works-cta{
  position:sticky;
  top:0;
  z-index:4;
  width:min(100%, var(--content-max, 1480px));
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:100vh;
  padding:clamp(36px,8vh,92px) clamp(24px,6vw,120px) clamp(72px,14vh,140px);
}
/* text fades in from above */
.works-cta .works-more{
  opacity:0; transform:translateY(-24px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
/* button fades in from below, slight delay */
.works-cta .btn{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s .15s var(--ease), transform 1s .15s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.works-cta.in .works-more{
  opacity:.62; transform:none;
}
.works-cta.in .btn{
  opacity:1; transform:none;
  animation:btn-breathe 2.8s 1.2s ease-in-out infinite;
}
@keyframes btn-breathe{
  0%,100%{ box-shadow:0 18px 36px rgba(0,82,255,.16); }
  50%{ box-shadow:0 24px 52px rgba(0,82,255,.28); }
}

.works-outro{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(34px,8vh,96px) clamp(24px,6vw,120px) clamp(72px,16vh,180px);
}
.works-more{
  align-self:center; max-width:42ch;
  font-size:15px; font-weight:300; line-height:1.75;
  color:var(--navy); opacity:.62;
  padding-bottom:clamp(18px,3vh,28px);
}
.cta-progress{
  width:1px; height:40px;
  background:rgba(30,50,105,.1);
  border-radius:1px;
  margin-bottom:clamp(14px,2vh,20px);
  overflow:hidden;
}
.cta-progress-bar{
  display:block; width:100%; height:0;
  background:var(--blue);
  border-radius:1px;
  transition:none;
}
.btn{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(10px,2.4vh,24px);
  padding:20px 38px; border-radius:2px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-family:"Inter","Noto Sans TC",sans-serif;
  font-size:18px; font-weight:400; letter-spacing:.04em;
  box-shadow:0 18px 36px rgba(0,82,255,.16);
  transition:background-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), opacity .9s var(--ease);
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover{ background:var(--navy); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,82,255,.28); }
.btn:hover .arrow{ transform:translate(4px,-4px); }
.contact{ margin-top:clamp(20px,6vh,56px); }
.contact{
  width:min(100%, 960px);
  margin-inline:auto;
}
.contact-lead{
  font-size:clamp(16px,1.2vw,18px); line-height:1.95;
  color:var(--navy);
  max-width:40rem;
  text-align:center;
  margin-inline:auto;
  padding-bottom:clamp(22px,3vh,34px);
}
.contact-text{
  font-size:clamp(14px,1vw,16px);
  color:rgba(30,50,105,.7);
  line-height:1.9;
  max-width:40rem;
  text-align:center;
  margin-inline:auto;
  padding-top:clamp(22px,3vh,32px);
}
.contact-mail{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border:1.5px solid var(--blue); border-radius:2px;
  color:var(--blue); text-decoration:none;
  font-size:clamp(15px,1.1vw,17px); letter-spacing:.02em;
  margin-inline:auto;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.contact-mail svg{ width:18px; height:18px; flex:none; }
.contact-mail:hover{ background:var(--blue); color:#fff; }

.detail-sec{
  position:relative; z-index:2;
  padding:clamp(76px,12vh,132px) clamp(24px,6vw,120px) 0;
}
.cv-group{ margin-top:clamp(34px,5vh,58px); }
.cv-group:first-of-type{ margin-top:0; }
.cv-label{
  font-family:"Inter","Noto Sans TC",sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.16em;
  color:var(--blue); margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.cv-label::before{ content:""; width:22px; height:1px; background:var(--blue); }
.cv-row{
  display:grid; grid-template-columns:78px 1fr;
  gap:clamp(14px,2vw,30px); align-items:baseline;
  padding:11px 0; border-top:1px solid rgba(30,50,105,.10);
}
.cv-year{
  font-size:12px; letter-spacing:.02em;
  color:rgba(30,50,105,.5); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cv-desc{ font-size:clamp(14px,1vw,15.5px); line-height:1.7; color:var(--navy); }
.tag{
  display:inline-block; margin-left:10px; padding:1px 6px;
  border:1px solid rgba(30,50,105,.35); border-radius:5px;
  font-size:11px; letter-spacing:.08em; line-height:1.7;
  color:rgba(30,50,105,.6); vertical-align:middle; white-space:nowrap;
}
.clients{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  column-gap:clamp(16px,2vw,32px);
}
.clients span{
  display:block; padding:13px 2px;
  border-top:1px solid rgba(30,50,105,.10);
  font-size:clamp(14px,1vw,15.5px); line-height:1.5; color:var(--navy);
}
.site-footer{
  margin-top:clamp(56px,11vh,128px);
  padding:22px clamp(24px,6vw,120px) 32px;
  border-top:1px solid rgba(30,50,105,.1);
  font-size:12px; letter-spacing:.08em; color:rgba(30,50,105,.5);
}

@media (prefers-reduced-motion: reduce){
  .work-shot{ opacity:1!important; filter:none!important; transform:none!important; }
  .works-card{ opacity:1!important; transform:translateY(-50%)!important; }
}
@media (max-width:960px){
  .demo-nav{
    position:fixed; inset:auto 0 0 0; top:auto; z-index:70;
    justify-content:space-around; gap:0;
    padding:14px 18px max(14px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--hair);
  }
  .nav-indicator{
    display:block; position:absolute; top:0; left:0; right:100%;
    height:3px; background:var(--blue);
    border-radius:0 0 2px 2px; pointer-events:none;
    transition:left .18s cubic-bezier(.4,0,.2,1), right .18s cubic-bezier(.4,0,.2,1);
  }
  .site-footer{ padding-bottom:calc(108px + env(safe-area-inset-bottom)); }
}
@media (max-width:678px){
  :root{ --header-h:64px; }
  .progress{ display:none; }
  .demo-nav{
    position:fixed; inset:auto 0 0 0; top:auto; z-index:70;
    justify-content:space-around; gap:0;
    padding:14px 18px max(14px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--hair);
  }
  .nav-item{
    font-size:clamp(14px,3.6vw,16px);
    opacity:.4; padding-bottom:6px;
  }
  .nav-item.is-current{
    font-size:clamp(14px,3.6vw,16px);
    opacity:1; font-weight:300; letter-spacing:0;
  }
  .nav-item .full{ display:none; }
  .nav-item .short{ display:inline; }
  .nav-item::after{ display:none; }
  .nav-indicator{
    display:block; position:absolute; top:0; left:0; right:100%;
    height:3px; background:var(--blue);
    border-radius:0 0 2px 2px; pointer-events:none;
    transition:left .18s cubic-bezier(.4,0,.2,1), right .18s cubic-bezier(.4,0,.2,1);
  }
  .header-right{ gap:16px; }
  .works-flow{ margin:clamp(30px,5vh,60px) 0; }
  .works-card{ width:min(360px,90%); }
  .wc-title{ font-size:clamp(14px,4vw,17px); }
  .wc-kicker{ font-size:12px; }
  .cv-row{ grid-template-columns:60px 1fr; gap:14px; }
  .clients{ grid-template-columns:repeat(2,1fr); column-gap:16px; }
  .site-footer{ padding-bottom:calc(108px + env(safe-area-inset-bottom)); }
  .contact{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .mark,.brand-en,.brand-zh,.services,.scroll-cue{ opacity:1 !important; transform:none !important; filter:none !important; }
  .p-main,.p-wing{ opacity:1 !important; transform:none !important; }
  .crosshair{ opacity:1 !important; }
}