@font-face{font-family:PKPBarlow;src:url('Barlow-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PKPBarlow;src:url('Barlow-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:PKPBarlow;src:url('Barlow-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:PKPBarlow;src:url('Barlow-700.ttf') format('truetype');font-weight:700;font-display:swap}

.pkp-portfolio{--pkp-orange:#eb652d;width:100%;max-width:1180px;margin-inline:auto;font-family:PKPBarlow,Arial,sans-serif}
.pkp-portfolio,.pkp-portfolio *{box-sizing:border-box}
.pkp-portfolio-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:10px 17px!important;
  border:0!important;
  border-radius:999px!important;
  background:#242428!important;
  background-image:none!important;
  box-shadow:none!important;
  color:#f7f5f3!important;
  font-family:PKPBarlow,Arial,sans-serif!important;
  font-size:13px!important;
  font-style:normal!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-decoration:none!important;
  text-shadow:none!important;
  text-transform:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background-color .2s ease,transform .2s ease!important;
}
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter::before,
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter::after{content:none!important;display:none!important}
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter:hover{background:#343438!important;transform:translateY(-2px)}
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter[aria-pressed="true"],
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter[aria-pressed="true"]:hover{background:var(--pkp-orange)!important;color:#fff!important}
.pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter:focus-visible{outline:2px solid var(--pkp-orange)!important;outline-offset:3px}

.pkp-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  font-family:PKPBarlow,Arial,sans-serif;
}
.pkp-portfolio-grid,.pkp-portfolio-grid *{box-sizing:border-box}
.pkp-portfolio-item{min-width:0}
.pkp-portfolio-item[hidden]{display:none!important}
.pkp-portfolio-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  isolation:isolate;
  border:0;
  border-radius:16px;
  background:#211a31;
  color:#fff;
  text-decoration:none!important;
  box-shadow:0 15px 35px #0007;
  transition:transform .35s ease,box-shadow .35s ease;
}
.pkp-portfolio-card:hover,.pkp-portfolio-card:focus-visible{
  transform:translateY(-7px);
  box-shadow:0 32px 70px #000b;
  border:0;
  outline:0;
  color:#fff;
}
.pkp-portfolio-cover,.pkp-portfolio-placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.pkp-portfolio-cover{object-fit:cover;transition:transform .55s ease}
.pkp-portfolio-card:hover .pkp-portfolio-cover{transform:scale(1.045)}
.pkp-portfolio-placeholder{
  background:radial-gradient(circle at 70% 25%,#a57ce98a,transparent 27%),
    radial-gradient(circle at 22% 65%,#6247a5,transparent 38%),
    linear-gradient(145deg,#29203a,#101016 77%);
}
.pkp-portfolio-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#09070c75 0%,transparent 28%,transparent 45%,#09070c40 60%,#08080cd9 100%);
}
.pkp-portfolio-top,.pkp-portfolio-bottom{position:absolute;z-index:1;left:18px;right:18px}
.pkp-portfolio-top{top:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pkp-portfolio-label{
  display:inline-block;
  padding:8px 10px;
  border-radius:6px;
  background:#0b0b0fc7;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:none;
}
.pkp-portfolio-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  background:#f6f4fa;
  color:#121017;
  transition:background-color .3s ease,color .3s ease,transform .3s ease;
}
.pkp-portfolio-icon svg{display:block;width:18px;height:18px}
.pkp-portfolio-card:hover .pkp-portfolio-icon,.pkp-portfolio-card:focus-visible .pkp-portfolio-icon{
  background:var(--pkp-orange);
  color:#fff;
  transform:translate(2px,-2px);
}
.pkp-portfolio-bottom{bottom:18px;display:block}
.pkp-portfolio-kicker{
  display:block;
  color:var(--pkp-orange);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.pkp-portfolio-name{
  display:block;
  margin:9px 0 16px;
  color:#fff;
  font-size:clamp(29px,3vw,52px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.055em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.pkp-portfolio-rule{display:block;height:1px;margin-bottom:13px;background:var(--pkp-orange)}
.pkp-portfolio-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pkp-portfolio-footer>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pkp-portfolio-footer svg{display:block;width:13px;height:13px;flex:none}
.pkp-portfolio-flag{display:block;width:29px;height:20px;object-fit:cover;border-radius:3px}
.pkp-portfolio-grid.pkp-motion-on .pkp-portfolio-item{
  opacity:0;
  filter:blur(8px);
  transform:translateY(var(--reveal-y,24px)) scale(.97);
  transition:opacity .62s ease,filter .62s ease,transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay,0ms);
}
.pkp-portfolio-grid.pkp-motion-on .pkp-portfolio-item.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0) scale(1);
}
.pkp-portfolio-grid.pkp-motion-on .pkp-portfolio-item.pkp-filter-exit{opacity:0!important;filter:blur(6px)!important;transform:scale(.97)!important;transition-duration:.18s!important;transition-delay:0ms!important}
@media(max-width:767px){
  .pkp-portfolio-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding:2px 2px 5px}
  .pkp-portfolio-filters::-webkit-scrollbar{display:none}
  .pkp-portfolio .pkp-portfolio-filters button.pkp-portfolio-filter{font-size:11px!important;padding:9px 13px!important}
  .pkp-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pkp-portfolio-top{left:8px;right:8px;top:8px}
  .pkp-portfolio-bottom{left:10px;right:10px;bottom:10px}
  .pkp-portfolio-label{padding:6px;font-size:8px}
  .pkp-portfolio-icon{width:23px;height:23px}
  .pkp-portfolio-icon svg{width:13px;height:13px}
  .pkp-portfolio-kicker{font-size:7px}
  .pkp-portfolio-name{font-size:clamp(19px,5vw,28px);margin:5px 0 8px}
  .pkp-portfolio-rule{margin-bottom:8px}
  .pkp-portfolio-footer{font-size:0}
  .pkp-portfolio-action-text{display:none}
  .pkp-portfolio-flag{width:25px;height:17px}
}
@media(prefers-reduced-motion:reduce){
  .pkp-portfolio *{transition:none!important}
  .pkp-portfolio-grid.pkp-motion-on .pkp-portfolio-item{opacity:1;filter:none;transform:none}
}
