@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500&display=swap");
#nprogress{pointer-events:none}
#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}
#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;transform:rotate(3deg) translateY(-4px)}
#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}
#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#29d transparent transparent #29d;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}
.nprogress-custom-parent{overflow:hidden;position:relative}
.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}
@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
*,:after,:before{box-sizing:border-box}
body{margin:0}
.hero{--aspect-ratio:0.75;--divisions:60;--max-width:480px;background:linear-gradient(hsl(0, 0%, 100%), hsl(268.2, 17.7%, 99.43%) 9.99%, hsl(268.24, 17.84%, 97.85%) 19.07%, hsl(268.31, 18.06%, 95.4%) 27.44%, hsl(268.41, 18.37%, 92.23%) 35.26%, hsl(268.55, 18.75%, 88.5%) 42.72%, hsl(268.72, 19.22%, 84.35%) 50%, hsl(268.92, 19.77%, 79.98%) 57.28%, hsl(269.17, 20.38%, 75.6%) 64.74%, hsl(269.44, 21.01%, 71.49%) 72.56%, hsl(269.71, 21.6%, 68.02%) 80.93%, hsl(269.92, 22.05%, 65.61%) 90.01%, hsl(270, 22.22%, 64.71%));font-size:calc(min(100vw, var(--max-width))/var(--divisions));overflow:hidden;position:relative}
.hero:before{top:0;right:0;bottom:0;left:0;position:absolute;background:#a591b9;content:"";transition:opacity 4s}
.hero.is-loaded:before{opacity:.4}
.hero__canvas{aspect-ratio:var(--aspect-ratio);margin:auto;max-width:var(--max-width);position:relative}
.hero__images{top:50%;left:50%;position:absolute;width:18em;height:12em}
.hero__images img{width:100%;height:100%;box-shadow:0 .4em 1.6em rgba(0,0,0,.2);filter:blur(.8em);font-size:1.6em;object-fit:cover;opacity:0;position:absolute;transform:translate(-50%,-50%)}
.hero__images img.image-1{inset:-34em auto auto 22em}
.hero__images img.image-2{inset:-32em auto auto -21em}
.hero__images img.image-3{inset:-32em auto auto 6em}
.hero__images img.image-4{inset:-23em auto auto -14em}
.hero__images img.image-5{inset:-22em auto auto 18em}
.hero__images img.image-6{inset:-16em auto auto 2em}
.hero__images img.image-7{inset:-13em auto auto -24em}
.hero__images img.image-8{inset:-13em auto auto 24em}
.hero__images img.image-9{inset:12em auto auto -26em}
.hero__images img.image-10{inset:14em auto auto 24em}
.hero__images img.image-11{inset:16em auto auto -2em}
.hero__images img.image-12{inset:23em auto auto -18em}
.hero__images img.image-13{inset:24em auto auto 18em}
.hero__images img.image-14{inset:30em auto auto 2em}
.hero__images img.image-15{inset:32em auto auto -24em}
.hero__images img.image-16{inset:34em auto auto 22em}
.hero__images .image-1{z-index:5}
.hero__images .image-2{z-index:2}
.hero__images .image-3{z-index:3}
.hero__images .image-4{z-index:4}
.hero__images .image-5{z-index:5}
.hero__images .image-6{z-index:6}
.hero__images .image-7{z-index:7}
.hero__images .image-8{z-index:10}
.hero__images .image-9{z-index:9}
.hero__images .image-10{z-index:10}
.hero__images .image-11{z-index:11}
.hero__images .image-12{z-index:12}
.hero__images .image-13{z-index:17}
.hero__images .image-14{z-index:10}
.hero__images .image-15{z-index:15}
.hero__images .image-16{z-index:16}
.is-loaded .hero__images img{animation:fadeIn 1.2s forwards}
@keyframes fadeIn{to{filter:none;font-size:1em;opacity:1}}
.hero__title{top:0;right:0;bottom:0;left:0;position:absolute;aspect-ratio:3/1;font-size:inherit;margin:auto;width:40em;z-index:100}
.hero__title span{display:none}
.hero__title svg{display:block}
.hero__title path{fill:#481c7b;opacity:0;transition:opacity .8s 2.4s}
.is-loaded .hero__title path{opacity:1}
#nprogress .bar{background:#481c7b;bottom:0;height:1px;margin:auto}
#nprogress .peg{display:none}

.project{overflow:hidden}
.project *{line-height:1.5}
.project__list{margin:auto;max-width:1068px;overflow:visible;padding:64px 0;position:relative;width:calc(100vw - 96px)}
.project__list:before{top:0;right:0;bottom:0;left:0;position:absolute;background:#481c7b;content:"";margin:0 calc(50% - 50vw);z-index:-1}
/*
.project__list:after,.project__list:before{top:0;right:0;bottom:0;left:0;position:absolute;background:#481c7b;content:"";margin:0 calc(50% - 50vw);z-index:-1}
.project__list:after{background:url(../img/home/project-bg.webp) 50%/cover;margin-left:auto;opacity:.4;width:60vw}
*/
.project__item{height:auto}
.project__link{background:#fff;border-radius:8px;box-shadow:0 8px 16px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:16px;height:100%;padding:16px;text-decoration:none}
/*
.project__link{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:hsla(0,0%,100%,.8);border-radius:8px;box-shadow:0 8px 16px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:16px;height:100%;padding:16px;text-decoration:none}
*/
.project__photo{aspect-ratio:3/2;border-radius:4px;flex-shrink:0;margin:0;overflow:hidden}
.project__photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s}
a:hover .project__photo img{transform:scale(1.1)}
.project__caption{display:flex;flex-direction:column;flex-grow:1;justify-content:center;margin:0;padding-bottom:48px;position:relative}
.project__number{font-size:24px;color:#481c7b;font-family:Barlow Condensed,sans-serif;font-weight:500;letter-spacing:.05em;margin:0 0 16px}
.project__text{font-size:16px;color:#343a40;font-weight:700;margin:0;text-align:justify}
.project__arrow{right:0;bottom:0;position:absolute;background:#481c7b;border-radius:100%;color:#fff;margin:0}
.project__arrow:before{background:currentColor;content:"";display:block;-webkit-mask:url(../img/home/project-arrow.svg) 50%/75% no-repeat;mask:url(../img/home/project-arrow.svg) 50%/75% no-repeat;padding:24px;transition:transform .4s}
a:hover .project__arrow:before{transform:translateX(10%)}
.project__pagination{align-items:center;color:#fff;display:flex;gap:16px;margin-top:16px}
.project__next,.project__prev{border-radius:100%;border:1px solid;margin:0;transition:opacity .4s}
.project__next:before,.project__prev:before{background:currentColor;content:"";display:block;-webkit-mask:url(../img/home/project-arrow.svg) 50%/75% no-repeat;mask:url(../img/home/project-arrow.svg) 50%/75% no-repeat;padding:16px;transition:transform .4s}
.project__next a:hover:before,.project__prev a:hover:before{transform:translateX(10%)}
.project__next.swiper-button-disabled,.project__prev.swiper-button-disabled{opacity:.4;pointer-events:none}
.project__prev{transform:scaleX(-1)}
.project__page{font-family:Barlow Condensed,sans-serif;font-size:24px;letter-spacing:.05em;line-height:1;margin:0}
@media (min-width:768px){.hero{--aspect-ratio:1.5;--divisions:80;--max-width:960px}
.hero.is-loaded:before{opacity:0}
.hero__images img.image-1{inset:-21em auto auto -4em}
.hero__images img.image-2{inset:-19em auto auto 26em}
.hero__images img.image-3{inset:-18em auto auto -24em}
.hero__images img.image-4{inset:-16em auto auto 12em}
.hero__images img.image-5{inset:-14em auto auto -38em}
.hero__images img.image-6{inset:-12em auto auto 36em}
.hero__images img.image-7{inset:-2em auto auto 44em}
.hero__images img.image-8{inset:0 auto auto -44em}
.hero__images img.image-9{inset:6em auto auto -28em}
.hero__images img.image-10{inset:8em auto auto 32em}
.hero__images img.image-11{inset:14em auto auto -7em}
.hero__images img.image-12{inset:16em auto auto -38em}
.hero__images img.image-13{inset:16em auto auto 20em}
.hero__images img.image-14{inset:20em auto auto 6em}
.hero__images img.image-15{inset:21em auto auto -18em}
.hero__images img.image-16{inset:21em auto auto 36em}
.project__link{flex-direction:row;gap:32px;padding:32px}
.project__photo{width:50%}
.project__number{font-size:40px}
.project__text{font-size:20px}
}

.header,
.headerpc {
  top: 0;
}

.hero {
  margin-top: 50px;
  z-index: 0;
}

.project__list{
  margin-top: 24px;
}

@media (min-width: 960px) {
  .hero {
    margin-top: 100px;
  }
  .project__list {
    margin-top: 40px;
  }
}