.project-visual {
  display: block;
  background: #171918;
  isolation: isolate;
}

.project-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 8, 8, .78) 100%);
  transform: none;
  transition: opacity .55s ease;
}

.project-visual::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.26);
  transform: none;
  pointer-events: none;
  transition: inset .55s cubic-bezier(.2,.7,.2,1), border-color .55s ease;
}

.project-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08) brightness(.83);
  transform: scale(1.015);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}

.project-b .project-visual img { object-position: center 42%; }
.project-c .project-visual img { object-position: center; }
.project-d .project-visual img { object-position: center 58%; }

.project-visual em {
  color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.7);
}

.project:hover .project-visual img {
  transform: scale(1.075);
  filter: saturate(.92) contrast(1.05) brightness(.92);
}

.project:hover .project-visual::before {
  transform: none;
  opacity: .72;
}

.project:hover .project-visual::after {
  transform: none;
  inset: 18px;
  border-color: rgba(255,255,255,.55);
}

.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4.5rem) 1.35rem; }
.project:nth-child(even) { margin-top: 0; }
.project-meta h3 { font-size: clamp(1.55rem, 2vw, 2rem); }
.portfolio-cta { min-height:100%; border:1px solid var(--kk-line); padding:clamp(1.5rem,3vw,3rem); grid-column:span 2; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; transition:background .3s ease,color .3s ease; }
.portfolio-cta::before { content:""; position:absolute; width:18rem; height:18rem; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-4rem; bottom:-8rem; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.portfolio-cta span { font-size:.7rem; letter-spacing:.2em; color:var(--kk-gray); }
.portfolio-cta strong { font:700 clamp(3rem,6vw,6.5rem)/.82 'Barlow Condensed',sans-serif; letter-spacing:-.025em; margin-top:4rem; }
.portfolio-cta i { position:absolute; right:1.75rem; top:1.5rem; font-style:normal; font-size:1.7rem; }
.portfolio-cta:hover { background:var(--kk-white); color:var(--kk-black); }
.portfolio-cta:hover::before { border-color:rgba(0,0,0,.18); transform:scale(1.16); }

.portfolio-main { padding:10rem var(--kk-pad) clamp(6rem,10vw,10rem); }
.portfolio-hero { max-width:1150px; padding:5rem 0 6rem; }
.portfolio-hero h1 { font:800 clamp(5rem,12vw,12rem)/.78 'Barlow Condensed',sans-serif; letter-spacing:-.035em; margin:1rem 0 2.5rem; }
.portfolio-hero h1 span { color:transparent; -webkit-text-stroke:1.5px var(--kk-white); }
.portfolio-hero>p:last-child { max-width:680px; color:#c9cac5; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.65; }
.portfolio-filters { position:sticky; top:72px; z-index:10; display:flex; flex-wrap:wrap; gap:.65rem; padding:1.2rem 0; border-block:1px solid var(--kk-line); background:rgba(11,13,12,.92); backdrop-filter:blur(16px); }
.portfolio-filters button { border:1px solid var(--kk-line); background:transparent; color:var(--kk-white); padding:.8rem 1.05rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:.25s; }
.portfolio-filters button:hover,.portfolio-filters button.active { background:var(--kk-white); color:var(--kk-black); }
.portfolio-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,4.5rem) 1.35rem; padding-top:4rem; }
.portfolio-list .project[hidden] { display:none; }

@media (max-width:1050px) {
  .project-grid,.portfolio-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-cta { grid-column:span 1; }
}

@media (max-width:650px) {
  .project-grid,.portfolio-list { grid-template-columns:1fr; }
  .portfolio-cta { min-height:25rem; }
  .portfolio-main { padding-top:7rem; }
  .portfolio-hero { padding:3rem 0 4rem; }
  .portfolio-hero h1 { font-size:clamp(4rem,20vw,7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .project-visual img,
  .project-visual::before,
  .project-visual::after { transition: none; }
}