body.portfolio-crisp-loading{
  overflow:hidden;
}

body.portfolio-crisp-loading .topbar{
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
}

body.portfolio-page .topbar{
  transition:opacity .2s ease,transform .2s ease,background-color .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}

body.portfolio-crisp-loading .progress{
  opacity:0;
  pointer-events:none;
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled){
  background:rgba(16,15,13,.08);
  border-bottom-color:rgba(255,255,255,.16);
  box-shadow:none;
  color:#fff;
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled) .brand img{
  filter:brightness(0) invert(1);
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled) .top-cta{
  background:#fff;
  border-color:#fff;
  color:#141412;
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled) .mobile-menu-button{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}

body.portfolio-page .topbar.menu-open{
  background:rgba(255,255,255,.985)!important;
  color:var(--ink)!important;
}

body.portfolio-page .topbar.menu-open .brand img{
  filter:none!important;
}

.portfolio-crisp{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  isolation:isolate;
  background:#f4f3ef;
  color:#fff;
}

.portfolio-crisp:focus{
  outline:none;
}

.portfolio-crisp img{
  user-select:none;
}

.portfolio-crisp__slides,
.portfolio-crisp__slide,
.portfolio-crisp__slide img,
.portfolio-crisp__shade,
.portfolio-crisp__loader{
  position:absolute;
  inset:0;
}

.portfolio-crisp__slides{
  z-index:0;
  overflow:hidden;
  background:#100f0d;
}

.portfolio-crisp.is-loading .portfolio-crisp__slides{
  visibility:hidden;
}

.portfolio-crisp__slide{
  margin:0;
  visibility:hidden;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateX(0);
}

.portfolio-crisp__slide.is-active{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

.portfolio-crisp__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
  transform:translateX(0);
  filter:saturate(1.03) contrast(1.02);
}

.portfolio-crisp__shade{
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 38%,rgba(0,0,0,.58)),
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.05) 48%,rgba(0,0,0,.36));
}

.portfolio-crisp.is-loading .portfolio-crisp__shade{
  visibility:hidden;
}

.portfolio-crisp__loader{
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f3ef;
  pointer-events:none;
  overflow:hidden;
}

.portfolio-crisp.is-ready .portfolio-crisp__loader{
  opacity:0;
  visibility:hidden;
  transition:opacity .2s linear,visibility .2s linear;
}

.portfolio-crisp__loader-window{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.portfolio-crisp__loader-window:before,
.portfolio-crisp__loader-window:after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:min(15vw,190px);
  pointer-events:none;
}

.portfolio-crisp__loader-window:before{
  left:0;
  background:linear-gradient(90deg,#f4f3ef 32%,rgba(244,243,239,0));
}

.portfolio-crisp__loader-window:after{
  right:0;
  background:linear-gradient(270deg,#f4f3ef 32%,rgba(244,243,239,0));
}

.portfolio-crisp__loader-track{
  position:relative;
  width:max-content;
  height:10em;
  font-size:clamp(14px,1.35vw,22px);
  overflow:visible;
  contain:layout;
}

.portfolio-crisp__loader-group{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  height:100%;
  border-radius:8px;
}

.portfolio-crisp__loader-group.is-duplicate{
  position:absolute;
  top:0;
  left:0;
}

.portfolio-crisp__loader-group.is-relative{
  left:100%;
}

.portfolio-crisp__loader-single{
  position:relative;
  flex:none;
  padding:0 1em;
  transform:translateX(500%);
  will-change:transform;
}

.portfolio-crisp__loader-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:10em;
  height:10em;
  overflow:hidden;
  border-radius:8px;
  background:#dfddd7;
  box-shadow:0 30px 80px rgba(45,39,31,.18),0 2px 8px rgba(45,39,31,.08);
  will-change:width,height,border-radius;
}

.portfolio-crisp__loader-media.is-scaling{
  border-radius:0;
  transition:border-radius .5s cubic-bezier(1,0,0,1);
}

.portfolio-crisp__loader-media.is-scaling.is-radius{
  border-radius:8px;
}

.portfolio-crisp__loader-media.is-primary{
  box-shadow:0 38px 110px rgba(45,39,31,.22),0 2px 8px rgba(45,39,31,.08);
}

.portfolio-crisp__loader-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  will-change:transform;
}

.portfolio-crisp__loader-img.is-scale-down{
  transform:scale(1);
}

.portfolio-crisp__content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:calc(var(--header) + 28px) var(--pad) clamp(24px,3vw,42px);
  pointer-events:none;
  text-shadow:none;
}

.portfolio-crisp__content .button-row,
.portfolio-crisp__controls{
  pointer-events:auto;
}

.portfolio-crisp.is-loading .portfolio-crisp__content{
  pointer-events:none;
}

.portfolio-crisp__center{
  width:min(1240px,94vw);
  text-align:center;
  transform:translateY(clamp(20px,4svh,44px));
  pointer-events:auto;
}

.portfolio-crisp__center .eyebrow{
  color:rgba(255,255,255,.78);
  margin:0 0 16px;
}

.portfolio-crisp__title{
  max-width:1180px;
  margin:0 auto;
  font-size:clamp(58px,10.6vw,158px);
  line-height:.88;
  letter-spacing:0;
  font-weight:390;
  text-wrap:balance;
  text-shadow:none;
}

.portfolio-crisp__title *{
  text-shadow:none;
}

.portfolio-crisp__center .portfolio-crisp__controls{
  justify-content:center;
  width:min(930px,92vw);
  margin:clamp(18px,2.2vw,28px) auto 0;
  padding:12px clamp(12px,1.4vw,18px);
  overflow-x:auto;
  overflow-y:visible;
}

.portfolio-crisp__word-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}

.portfolio-crisp__word{
  display:inline-block;
  will-change:transform;
}

.portfolio-crisp__bottom{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:clamp(24px,3vw,42px);
  display:grid;
  grid-template-columns:minmax(300px,.92fr) auto;
  gap:clamp(16px,2vw,28px);
  align-items:end;
  width:auto;
  text-align:left;
  pointer-events:auto;
}

.portfolio-crisp__description{
  max-width:660px;
  margin:0;
  color:rgba(255,255,255,.86);
  font-size:clamp(15.5px,1.2vw,20px);
  line-height:1.28;
  letter-spacing:0;
}

.portfolio-crisp__content .button-row{
  justify-content:flex-end;
  margin:0;
}

.portfolio-crisp__content .btn{
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.13);
  color:#fff;
  box-shadow:0 18px 54px rgba(0,0,0,.24);
}

.portfolio-crisp__content .btn.light{
  background:#fff;
  color:#141412;
  border-color:#fff;
}

.portfolio-crisp__controls{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.1vw,14px);
  max-width:100%;
  overflow-x:auto;
  padding:8px;
  margin:-8px;
  scrollbar-width:none;
}

.portfolio-crisp__controls::-webkit-scrollbar{
  display:none;
}

.portfolio-crisp__thumb{
  --thumb-size:clamp(46px,4.15vw,60px);
  flex:0 0 var(--thumb-size);
  width:var(--thumb-size);
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.4);
  border-radius:8px;
  padding:0;
  overflow:hidden;
  background:rgba(255,255,255,.12);
  cursor:pointer;
  opacity:.74;
  transform:translateY(0) scale(1);
  transform-origin:center;
  transition:opacity .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
  backdrop-filter:blur(10px);
}

.portfolio-crisp__thumb:hover,
.portfolio-crisp__thumb:focus-visible{
  opacity:1;
  transform:translateY(-2px) scale(1.08);
  border-color:rgba(255,255,255,.78);
  outline:none;
}

.portfolio-crisp__thumb.is-active{
  opacity:1;
  transform:translateY(-4px) scale(1.33);
  border-color:rgba(255,255,255,.94);
  outline:none;
  box-shadow:0 16px 44px rgba(0,0,0,.32);
  z-index:2;
}

.portfolio-crisp__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}

@media(max-width:1180px){
  body.portfolio-page .topbar{
    grid-template-columns:auto minmax(0,1fr) auto;
  }

  body.portfolio-page .brand{
    grid-column:1;
  }

  body.portfolio-page .mobile-menu-button{
    grid-column:3;
    justify-self:end;
  }

  body.portfolio-page .nav{
    grid-column:1 / -1;
  }

  .portfolio-crisp{
    min-height:610px;
  }

  .portfolio-crisp__bottom{
    grid-template-columns:1fr auto;
    gap:16px;
  }

  .portfolio-crisp__content .button-row{
    grid-column:1/-1;
    justify-content:center;
  }

  .portfolio-crisp__center .portfolio-crisp__controls{
    justify-content:center;
    width:min(820px,92vw);
  }
}

@media(max-width:720px){
  .portfolio-crisp{
    min-height:560px;
  }

  .portfolio-crisp__content{
    padding:calc(var(--header) + 18px) var(--pad) 18px;
  }

  .portfolio-crisp__center{
    width:100%;
    transform:translateY(clamp(18px,3.5svh,30px));
  }

  .portfolio-crisp__center .portfolio-crisp__controls{
    justify-content:flex-start;
    width:100%;
    max-width:100%;
    margin-top:16px;
    padding:10px 14px 12px;
    scroll-padding-inline:44vw;
  }

  .portfolio-crisp__title{
    font-size:clamp(46px,16.5vw,82px);
    line-height:.9;
  }

  .portfolio-crisp__bottom{
    grid-template-columns:1fr;
    gap:12px;
    bottom:18px;
    text-align:left;
  }

  .portfolio-crisp__description{
    max-width:100%;
    font-size:15px;
    line-height:1.3;
  }

  .portfolio-crisp__content .button-row{
    justify-content:flex-start;
    gap:8px;
  }

  .portfolio-crisp__content .btn{
    min-height:40px;
    padding:11px 12px;
    font-size:10.5px;
  }

  .portfolio-crisp__controls{
    gap:8px;
    padding-bottom:12px;
  }

  .portfolio-crisp__thumb{
    --thumb-size:42px;
  }

  .portfolio-crisp__loader-track{
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .portfolio-crisp__slide,
  .portfolio-crisp__slide img,
  .portfolio-crisp__loader-single,
  .portfolio-crisp__loader-media,
  .portfolio-crisp__loader-img,
  .portfolio-crisp__thumb{
    transition:none!important;
    animation:none!important;
  }
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled){
  background:rgba(255,255,255,.965);
  border-bottom-color:rgba(22,20,17,.14);
  box-shadow:0 10px 34px rgba(22,20,17,.10);
  color:var(--ink);
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled) .brand img{
  filter:none;
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled) .top-cta{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

body.portfolio-page:not(.menu-active) .topbar:not(.is-scrolled) .mobile-menu-button{
  background:#fff;
  border-color:rgba(22,20,17,.28);
  color:var(--ink);
}

body.portfolio-page .thin-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:82;
  background:rgba(255,253,248,.88);
  border-top:1px solid rgba(22,20,17,.16);
  box-shadow:0 -16px 42px rgba(22,20,17,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transform:translateY(112%);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}

body.portfolio-page.portfolio-footer-visible .thin-footer{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.portfolio-v18{
  display:flex;
  flex-direction:column;
}

.portfolio-v18 .v18-portfolio-archive{
  order:1;
  min-height:100svh;
  padding-top:calc(var(--header) + clamp(8px,2vw,24px));
}

.portfolio-v18 .v18-portfolio-archive .v18-contained{
  padding-top:0;
}

.portfolio-v18 .portfolio-crisp{
  order:2;
}

.portfolio-v18 .v18-visual-room{
  order:3;
}

.portfolio-v18 .v18-portfolio-cta{
  order:4;
}

.v18-archive-head{
  max-width:min(100%,1280px);
  margin:0 0 24px;
}

.v18-archive-head h1{
  margin:0;
  font-size:clamp(44px,6.5vw,110px);
  line-height:.88;
  letter-spacing:-.075em;
  font-weight:430;
}

@media(min-width:980px){
  .v18-archive-head h1{
    white-space:nowrap;
  }
}

.v18-archive-head p:not(.eyebrow){
  max-width:min(100%,1040px);
  margin:18px 0 0;
  color:var(--muted);
  font-size:clamp(17px,1.45vw,23px);
  line-height:1.28;
}

.portfolio-v18 .v18-project-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.portfolio-v18 .v18-catalog-card{
  position:relative;
  min-height:210px;
  aspect-ratio:4/3;
  display:block;
  border:0;
  border-radius:8px;
  background:#111;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

.portfolio-v18 .v18-catalog-card:hover,
.portfolio-v18 .v18-catalog-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 48px rgba(22,20,17,.18);
  outline:none;
}

.portfolio-v18 .v18-catalog-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  transform:scale(1.01);
  transition:transform .55s var(--ease),filter .55s var(--ease);
}

.portfolio-v18 .v18-catalog-card:hover img,
.portfolio-v18 .v18-catalog-card:focus-visible img{
  transform:scale(1.06);
  filter:saturate(1.04) contrast(1.03);
}

.portfolio-v18 .v18-catalog-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.10) 38%,rgba(0,0,0,.76));
  pointer-events:none;
}

.portfolio-v18 .v18-catalog-card div{
  position:absolute;
  inset:0;
  z-index:2;
  padding:14px;
  display:block;
  overflow:hidden;
}

.portfolio-v18 .v18-catalog-card small{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  width:max-content;
  max-width:calc(100% - 24px);
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(0,0,0,.26);
  color:rgba(255,255,255,.86);
  font-size:9px;
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(10px);
}

.portfolio-v18 .v18-catalog-card h3,
.portfolio-v18 .v18-catalog-card p{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:2;
  color:#fff;
  margin:0;
  transition:transform .34s var(--ease),opacity .34s var(--ease);
}

.portfolio-v18 .v18-catalog-card h3{
  font-size:clamp(18px,1.7vw,25px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:520;
  text-align:right;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
}

.portfolio-v18 .v18-catalog-card p{
  max-width:100%;
  font-size:12.5px;
  line-height:1.28;
  color:rgba(255,255,255,.88);
  opacity:0;
  transform:translateX(112%);
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}

.portfolio-v18 .v18-catalog-card:hover h3,
.portfolio-v18 .v18-catalog-card:focus-visible h3{
  opacity:0;
  transform:translateX(-112%);
}

.portfolio-v18 .v18-catalog-card:hover p,
.portfolio-v18 .v18-catalog-card:focus-visible p{
  opacity:1;
  transform:translateX(0);
}

.portfolio-v18 .v18-catalog-card.is-load-hidden{
  display:none!important;
}

.v18-load-more-row{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.v18-load-more{
  border:1px solid rgba(22,20,17,.28);
  border-radius:8px;
  background:#111;
  color:#fff;
  padding:12px 16px;
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}

.v18-load-more:hover,
.v18-load-more:focus-visible{
  transform:translateY(-2px);
  background:#2a2926;
  border-color:#2a2926;
  outline:none;
}

.v18-load-more[hidden]{
  display:none;
}

@media(max-width:980px){
  .portfolio-v18 .v18-project-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .portfolio-v18 .v18-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .portfolio-v18 .v18-catalog-card{
    min-height:176px;
  }

  .portfolio-v18 .v18-catalog-card small{
    font-size:8px;
    letter-spacing:.11em;
  }

  .portfolio-v18 .v18-catalog-card h3{
    font-size:17px;
  }

  .portfolio-v18 .v18-catalog-card p{
    font-size:11.5px;
  }
}
