/* ─── Work ────────────────────────────────────────────── */
.work {
  background: var(--navy);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.work-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  background: var(--navy-2);
  aspect-ratio: 16/9;
  cursor: pointer;
}
.work-card.wide { grid-column: span 2; }
.work-card .ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--navy-2), var(--navy-deep));
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  transition: transform .8s var(--ease);
}
.work-card .ph.image {
  display: block;
  font-size: 0;
}
.work-card .ph.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card:hover .ph { transform: scale(1.05); }
.work-card .meta-row {
  position: absolute;
  top: 24px; left: 24px; right: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  z-index: 2;
}
.work-card .meta-row .cat { color: var(--orange); }
.work-card .info {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
}
.work-card .info h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 8px;
  transform: translateY(8px);
  transition: transform .5s var(--ease);
}
.work-card .info p {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.work-card:hover .info h3 { transform: translateY(0); }
.work-card:hover .info p { opacity: 1; transform: translateY(0); }
.work-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15,31,51,.85) 100%);
  z-index: 1;
}
.work-card:has(.ph.image)::after {
  background:
    linear-gradient(180deg, rgba(15,31,51,.55) 0%, rgba(15,31,51,.15) 22%, rgba(15,31,51,.15) 55%, rgba(15,31,51,.92) 100%);
}
.work-card .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center;
  z-index: 2;
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.work-card .play-btn::before {
  content: "";
  width: 0; height: 0;
  border-left: 18px solid var(--white);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.work-card:hover .play-btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Video preview on hover + click-to-play */
.work-card .video-preview {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  background: var(--navy-deep);
}
.work-card .video-preview.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.work-card .video-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.work-card.is-previewing .play-btn { opacity: 0 !important; }
.work-card.is-previewing .meta-row,
.work-card.is-previewing .info { opacity: 0; transition: opacity .3s var(--ease); }
.work-card.is-previewing::after { opacity: 0; transition: opacity .3s var(--ease); }

/* Close button when video is playing */
.video-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 6;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .3s var(--ease), background .25s var(--ease);
}
.work-card.is-playing .video-close { opacity: 1; }
.video-close:hover { background: var(--orange); }

@media (max-width: 800px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.wide { grid-column: span 1; }
}

.work-cta {
  margin-top: 56px;
  display: flex; justify-content: center;
}
.btn-line {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 36px;
  border: 1px solid rgba(255,255,255,.2);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--white);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.btn-line .arrow {
  width: 28px; height: 1px; background: var(--orange);
  position: relative;
  transition: width .3s var(--ease);
}
.btn-line .arrow::after {
  content: "";
  position: absolute; right: -1px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px; height: 7px;
  border-top: 1px solid var(--orange);
  border-right: 1px solid var(--orange);
}
.btn-line:hover { border-color: var(--orange); background: rgba(235,95,53,.08); }
.btn-line:hover .arrow { width: 44px; }