/* ═══ PROJECTS ARCHIVE / FILTERING ═══ */
.archive-hero{padding:180px 0 60px;text-align:center;background:var(--white)}
.archive-hero h1{font-size:clamp(40px,6vw,80px);font-weight:500;letter-spacing:-.06em;line-height:1em;margin-bottom:24px}
.filter-row{display:flex;justify-content:center;gap:12px;margin-bottom:60px;flex-wrap:wrap}
.filter-tab{
  padding:12px 24px;border-radius:var(--r-pill);
  background:var(--badge-bg);color:var(--grey);
  font-size:15px;font-weight:500;letter-spacing:-.03em;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  cursor:pointer;border:1px solid transparent;
}
.filter-tab:hover{background:var(--border)}
.filter-tab.active{background:var(--dark);color:#fff}

/* ═══ PROJECTS GRID ═══ */
.proj-sec{background:var(--white);padding:160px 0}
.proj-grid{display:flex;flex-direction:column;gap:20px}
.proj-card{
  background:var(--badge-bg);border-radius:var(--r-xl);
  overflow:hidden;display:flex; height: 420px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;
}
.proj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-heavy)}
.proj-body{padding:28px;flex:1;display:flex;flex-direction:column;min-width:0}
.proj-icon{
  width:48px;height:48px;border-radius:10px;margin-bottom:16px;
  background:linear-gradient(180deg,rgb(251,166,60) 0%,rgb(178,79,21) 100%);
  box-shadow:var(--shadow-heavy);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.proj-icon img{width:100%;height:100%;object-fit:cover;}
.proj-body h3{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.2em;margin-bottom:8px}
.proj-body>p{font-size:16px;color:var(--grey);line-height:1.3em;letter-spacing:-.04em;margin-bottom:20px}
.proj-meta{display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.proj-meta-i{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-top:1px solid var(--border);
}
.proj-meta-i .ml{font-size:14px;color:var(--grey);letter-spacing:-.04em}
.proj-meta-i .mv{font-size:14px;font-weight:500;letter-spacing:-.04em;color:rgb(31,31,31)}
.proj-view{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 28px;border-radius:var(--r-lg);
  background:var(--dark);color:#fff;font-size:15px;font-weight:500;
  letter-spacing:-.03em;margin-top:auto;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;
  overflow:hidden;position:relative;
}
.proj-view:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.proj-view .btn-text{display:inline-flex;align-items:center;gap:6px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.proj-view:hover .btn-text{transform:translateX(-4px)}
.proj-view .arr{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.proj-view:hover .arr{transform:translateX(4px)}
.proj-img-wrap{
  width:60%;flex-shrink:0;position:relative;overflow:hidden;
}
.proj-card-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover .proj-card-img{transform:scale(1.03)}

/* ═══ PROJECT DETAIL — SPLIT LAYOUT ═══ */
.proj-split {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  min-height: 100vh;
}
.proj-left {
  width: 40%;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rem 0 12px 12px;
  flex-shrink: 0;
  overflow: clip;
}
.proj-left-inner {
  width: 100%;
  max-width: 420px;
  padding: 0 40px;
}
.proj-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--grey);
  letter-spacing: -.03em;
  margin-bottom: 32px;
  transition: color .2s;
}
.proj-back:hover {
  color: var(--dark)
}
.proj-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2
}
.proj-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-heavy);
}

.proj-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1em;
  margin-bottom: 14px;
}
.proj-desc {
  font-size: 16px;
  color: var(--grey);
  line-height: 1.3em;
  letter-spacing: -.04em;
  margin-bottom: 32px;
}
.proj-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px
}
.proj-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.proj-meta-row:last-child {
  border-bottom: 1px solid var(--border)
}
.proj-meta-label {
  font-size: 14px;
  color: var(--grey);
  letter-spacing: -.04em
}
.proj-meta-value {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.04em
}
.proj-process {
  font-size: 16px;
  color: var(--grey);
  line-height: 1.4em;
  letter-spacing: -.04em;
}

/* Right images column */
.proj-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 72px 24px 24px;
  min-width: 0;
}
.proj-right img {
  width: 100%;
  height: auto;
  border-radius: 40px;
  object-fit: contain;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
.proj-right img:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* ═══ MORE PROJECTS ═══ */
.more-sec {
  padding: 200px 0;
  background: var(--bg)
}
.more-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px
}
.more-title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1.2em;
  margin-bottom: 40px;
}
.more-grid {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.more-card {
  background: var(--bg);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
}
.more-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-heavy)
}
.more-card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0
}
.more-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-heavy);
}
.more-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.more-card-body h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.2em;
  margin-bottom: 8px
}
.more-card-body>p {
  font-size: 16px;
  color: var(--grey);
  line-height: 1.3em;
  letter-spacing: -.04em;
  margin-bottom: 20px
}
.more-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px
}
.more-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.more-card-meta-row .ml {
  color: var(--grey);
  letter-spacing: -.04em
}
.more-card-meta-row .mv {
  font-weight: 500;
  letter-spacing: -.04em
}
.more-card-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: var(--r-lg);
  background: var(--dark);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.03em;
  margin-top: auto;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}
.more-card-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2)
}
.more-card-img {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden
}
.more-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}
.more-card:hover .more-card-img img {
  transform: scale(1.03)
}

/* ═══ WORKING ON (PROJECT RELATED) ═══ */
.wk-sec{background:var(--white);padding:160px 0 0}
.wk-slides{display:flex;flex-direction:column;gap:60px}
.wk-slide{
  position:relative;min-height:520px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:var(--r-xl);
}
.wk-bg{
  position:absolute;inset:0;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
/*   gap:12px; */
	padding:20px;opacity:.5;
  transition:opacity .6s;
}
.wk-slide:hover .wk-bg{opacity:.2}
.wk-bg img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);
}
.wk-card{
  position:relative;z-index:2;
  background:var(--white);border-radius:var(--r-xl);
  padding:36px;max-width:440px;width:100%;
  box-shadow:var(--shadow-heavy);
  opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.wk-slide.v .wk-card{opacity:1;transform:translateY(0)}
.wk-status{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--grey);margin-bottom:14px;letter-spacing:-.04em}
.wk-dot{width:6px;height:6px;border-radius:50%}
.wk-dot.g{background:#63c58f}.wk-dot.b{background:rgb(0,153,255)}
.wk-card h3{font-size:clamp(20px,2.5vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1.2em;margin-bottom:10px}
.wk-card p{font-size:16px;color:var(--grey);line-height:1.3em;letter-spacing:-.04em;margin-bottom:20px}
.wk-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 28px;border-radius:var(--r-lg);
  background:var(--dark);color:#fff;font-size:15px;font-weight:500;
  letter-spacing:-.03em;transition:opacity .2s;width:100%;justify-content:center;
}
.wk-cta:hover{opacity:.85}
.wk-cta-icon{width:20px;height:20px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1199px){
  .proj-sec{padding:100px 0}
  .proj-body h3{font-size:20px}
}

@media(max-width:900px){
  .proj-split {
    flex-direction: column
  }
  .proj-left {
    width: 100%;
    height: auto;
    position: relative;
    padding: 84px 40px 40px
  }
  .proj-left-inner {
    max-width: 100%;
    padding: 0
  }
  .proj-right {
    padding: 0 40px 40px
  }
  .more-card {
    flex-direction: column
  }
  .more-card-img {
    width: 100%;
    height: 260px
  }
  .proj-card{flex-direction:column}
  .proj-img-wrap{width:100%;height:280px}
}

@media(max-width:600px){
  .wk-slide{min-height:360px;border-radius:var(--r-lg)}
  .wk-card{max-width:90%;padding:24px}
  .wk-card h3{font-size:18px}
  .wk-card p{font-size:14px}
  .wk-bg{padding:10px;gap:6px}
  .proj-card{border-radius:var(--r-lg)}
  .proj-img-wrap{height:220px}
  .proj-body{padding:20px}
  .proj-body h3{font-size:18px}
  .proj-icon{width:40px;height:40px}
  .proj-view{padding:14px 20px;font-size:14px;border-radius:var(--r-md)}
  .proj-left {
    padding: 76px 20px 32px
  }
  .proj-right {
    padding: 0 20px 20px
  }
  .more-inner {
    padding: 0 20px
  }
  .more-sec {
    padding: 100px 0
  }
}