@charset "UTF-8";
/* KYNICLAB — Work case pages (Phase 1)
   All classes are wp- prefixed; global CSS variables come from style.css. */

.wp-wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 32px}

/* BACK LINK */
.wp-back{display:inline-flex;align-items:center;gap:8px;margin-top:104px;font-family:var(--fd);font-weight:500;font-size:.78rem;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .3s var(--eo)}
.wp-back:hover{color:#fff}
.wp-back svg{transition:transform .3s var(--eb)}
.wp-back:hover svg{transform:translate(-2px,2px)}

/* HERO */
.wp-hero{padding:64px 0 72px;border-bottom:1px solid var(--bl)}
.wp-hero-index{display:flex;align-items:baseline;gap:8px;font-family:var(--fd);font-weight:500;font-size:.82rem;letter-spacing:-.02em;color:rgba(255,255,255,.55);margin-bottom:32px}
.wp-hero-total{color:rgba(255,255,255,.22)}
.wp-title{font-family:var(--fdd);font-weight:500;font-size:clamp(3.2rem,10.5vw,10rem);line-height:.98;letter-spacing:-.045em;text-transform:uppercase;color:#fff;margin-bottom:64px}
.wp-char{display:inline-block;overflow:hidden;vertical-align:top}
.wp-char-i{display:inline-block;white-space:pre;transform:translateY(112%);transition:transform 1s var(--eo);transition-delay:calc(var(--i)*26ms + .5s);will-change:transform}
.wp-title.is-in .wp-char-i{transform:translateY(0)}

/* META GRID (Watson-style hairline rows) */
.wp-meta{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;border-top:1px solid var(--g4)}
.wp-meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:15px 0;border-bottom:1px solid var(--g4)}
.wp-meta-k{font-family:var(--fd);font-weight:500;font-size:.72rem;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.wp-meta-v{font-family:var(--fd);font-weight:500;font-size:.95rem;color:#fff;text-align:right}

/* KEY VISUAL */
.wp-visual{margin:72px 0 96px}
.wp-visual picture{display:block;overflow:hidden}
.wp-visual-img{width:100%;height:auto;transform:translate3d(0,var(--wp-shift,0px),0) scale(1.12);will-change:transform}
.wp-visual-cap{margin-top:14px;font-family:var(--fd);font-weight:400;font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.28)}

/* OVERVIEW */
.wp-overview{max-width:760px;margin-bottom:104px}
.wp-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--fd);font-weight:500;font-size:.68rem;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:28px}
.wp-eyebrow::after{content:'';width:40px;height:1px;background:rgba(255,255,255,.25)}
.wp-copy{font-family:var(--fb);font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.85;color:rgba(255,255,255,.55);margin-bottom:24px}
.wp-copy:last-child{margin-bottom:0}

/* DELIVERABLES */
.wp-deliverables{margin-bottom:104px}
.wp-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.wp-chip{font-family:var(--fd);font-weight:500;font-size:.72rem;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:8px 18px;transition:color .3s var(--eo),border-color .3s var(--eo)}
.wp-chip:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* EXTERNAL LINK */
.wp-ext{border-top:1px solid var(--bl);border-bottom:1px solid var(--bl);margin-bottom:0}
.wp-ext-link{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:44px 0;color:#fff}
.wp-ext-label{font-family:var(--fdd);font-weight:500;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.03em;transition:opacity .3s var(--eo)}
.wp-ext-link svg{flex-shrink:0;transition:transform .3s var(--eb)}
.wp-ext-link:hover .wp-ext-label{opacity:.6}
.wp-ext-link:hover svg{transform:translate(3px,-3px)}

/* NEXT PROJECT */
.wp-next{display:flex;flex-direction:column;padding:72px 0 96px}
.wp-next-label{font-family:var(--fd);font-weight:500;font-size:.72rem;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:20px}
.wp-next-name{display:inline-block;font-family:var(--fdd);font-weight:500;font-size:clamp(2.6rem,7vw,6.5rem);line-height:1.02;letter-spacing:-.045em;text-transform:uppercase;color:#fff;transition:transform .5s var(--eo),opacity .3s var(--eo)}
.wp-next-arrow{display:inline-block;margin-left:18px;font-family:var(--fdd);font-size:clamp(1.8rem,4.5vw,4rem);color:rgba(255,255,255,.35);transition:transform .5s var(--eo),color .3s var(--eo)}
.wp-next:hover .wp-next-name{transform:translateX(14px)}
.wp-next:hover .wp-next-arrow{transform:translateX(22px);color:#fff}

/* ENTRANCE — runs on load beneath the page curtain */
@keyframes wpFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes wpVisualReveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.wp-back{animation:wpFadeUp .9s var(--eo) .35s both}
.wp-hero-index{animation:wpFadeUp .9s var(--eo) .45s both}
.wp-meta-row{animation:wpFadeUp .8s var(--eo) both}
.wp-meta-row:nth-child(1){animation-delay:.55s}
.wp-meta-row:nth-child(2){animation-delay:.63s}
.wp-meta-row:nth-child(3){animation-delay:.71s}
.wp-meta-row:nth-child(4){animation-delay:.79s}
.wp-visual picture{animation:wpVisualReveal 1.2s var(--eo) .55s both}

/* MOBILE */
@media(max-width:768px){
  .wp-wrap{padding:0 20px}
  .wp-back{margin-top:88px}
  .wp-hero{padding:48px 0 56px}
  .wp-title{font-size:clamp(2.6rem,13.5vw,5rem);margin-bottom:48px}
  .wp-meta{grid-template-columns:1fr}
  .wp-visual{margin:56px 0 72px}
  .wp-overview,.wp-deliverables{margin-bottom:72px}
  .wp-next{padding:56px 0 72px}
}

/* REDUCED MOTION — everything static and visible */
@media(prefers-reduced-motion:reduce){
  .wp-char-i{transform:none!important;transition:none!important}
  .wp-visual-img{transform:none!important}
}