/* neuk case study, built on the yap case-study classes (css/yap-case.css):
   problem cards, room sizes, phone strips, the 1920×1080 figure boards, and the reflection pair. */

/* Every neuk phone is the framed iPhone 16 Pro export (903×1867) */
body.case-page main .fig .phone.shot { aspect-ratio: 903 / 1867; }
body.case-page main .nk-strip .strip .mini.phone { width: 13.6cqw; }

/* ── Problem: three places to watch together, each giving something up ── */
body.case-page main .nk-place > img { position: absolute; inset: 17% 11%; width: 78%; height: 66%; object-fit: cover; border-radius: 14px !important; box-shadow: 0 18px 32px -18px rgba(28, 29, 28, .45); }
body.case-page main .nk-place--chat > img { inset: 9% 11% 41%; height: 50%; }
body.case-page main .nk-chat { position: absolute; left: 11%; right: 11%; bottom: 8%; display: flex; flex-direction: column; gap: 6px; }
body.case-page main .nk-chat span { max-width: 84%; padding: 7px 12px; border-radius: 16px; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.3; text-wrap: pretty; box-shadow: 0 6px 16px -8px rgba(28, 29, 28, .35); opacity: 0; transform: translateY(8px) scale(.96); animation: nk-chat 9s cubic-bezier(.34, 1.4, .64, 1) infinite; }
body.case-page main .nk-chat .is-in { align-self: flex-start; background: #e9e9eb; color: #1c1d1c; }
body.case-page main .nk-chat .is-out { align-self: flex-end; background: #1b8cfb; color: #fff; }
body.case-page main .nk-chat span:nth-child(2) { animation-delay: .9s; }
body.case-page main .nk-chat span:nth-child(3) { animation-delay: 1.8s; }
@keyframes nk-chat { 0%, 4% { opacity: 0; transform: translateY(8px) scale(.96); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.case-page main .nk-chat span { animation: none; opacity: 1; transform: none; } }

/* ── Solution: three room sizes, each card on the figure background ── */
body.case-page main .nk-room { display: grid; place-items: center; }
body.case-page main .nk-room > img { width: auto; height: 82%; max-width: 86%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 18px 26px rgba(28, 29, 28, .28)); }
body.case-page main .nt-section > h3.yap-subhead--section + .yap-problem { margin-top: 20px; }

/* Stats from the screener, set like a row of findings */
body.case-page main .nk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
body.case-page main .nk-stats div { display: flex; flex-direction: column; gap: 8px; }
body.case-page main .nk-stats strong { font-size: clamp(32px, 3.4vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--clr-text, #1c1d1c); }
body.case-page main .nk-stats span { font-size: 15px; line-height: 1.45; color: var(--clr-muted, #626b76); text-wrap: pretty; }
@media (max-width: 759px) { body.case-page main .nk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }

/* Iterations: each direction sits on the figure background at 16:9 */
body.case-page main .nk-dir { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: clamp(14px, 3vw, 40px); border-radius: var(--r-lg, 20px); background: #EFF1F3 radial-gradient(#D6D9DC .6px, transparent .9px) 0 0 / 10px 10px; }
body.case-page main .nk-dir img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; }
body.case-page main .yap-it__panel .yap-it__notes a, body.case-page main .nt-reading a.nk-link { color: var(--clr-text, #1c1d1c); text-decoration: underline; text-underline-offset: 3px; }

/* Low-fidelity strip: the yap screen rail, on the figure background */
body.case-page main .nk-rail .yap-rail__track { background: #EFF1F3 radial-gradient(#D6D9DC .6px, transparent .9px) 0 0 / 10px 10px; }
body.case-page main .nk-rail .yap-rail__inner { padding: clamp(14px, 2.4vw, 28px); }

/* ── Figure boards: laid out at 1920×1080 and scaled to the column by js/neuk.js ── */
body.case-page main .nkb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg, 20px); background: #EFF1F3 radial-gradient(#D6D9DC .6px, transparent .9px) 0 0 / 10px 10px; }
.nkb__stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; font-family: var(--ff, 'Instrument Sans', system-ui, sans-serif); color: #1c1d1c; line-height: 1.3; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
body.case-page main .nkb img { display: block; max-width: none; border-radius: 0 !important; }

/* The card every board uses (yap component library panel): title bar over a body */
.nkp { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e8eb; border-radius: 20px; overflow: hidden; }
.nkp__title { flex: none; padding: 18px 24px 16px; background: #f7f8fa; border-bottom: 1px solid #edeef1; font-size: 22px; font-weight: 600; line-height: normal; }
.nkp__body { flex: 1; min-height: 0; padding: 24px; display: flex; flex-direction: column; }
.nkp__frame { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 14px; background: #1a1a1a; overflow: hidden; }
/* case.css zeroes every border in main; the panels need theirs back */
.nkb .nkp { border-width: 1px !important; }
.nkb .nkp__title { border-width: 0 0 1px !important; }

/* Competitive landscape: four columns, the same five checks in each */
.nkl { position: absolute; inset: 96px 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.nkl .nkp__title { font-size: 26px; }
.nkl__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 400px; }
.nkb .nkl__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px !important; }
.nkb .nkl__photos img:only-child { grid-column: 1 / -1; }
.nkl__rows { display: flex; flex-direction: column; margin-top: 24px; }
.nkl__row { display: flex; align-items: center; gap: 18px; height: 66px; font-size: 26px; font-weight: 500; }
.nkl__row + .nkl__row { border-top: 1px solid #edeef1; }
.nkb .nkl__row + .nkl__row { border-width: 1px 0 0 !important; }
.nkl__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #e9ebee; color: #9aa0a8; }
.nkl__ic svg { width: 19px; height: 19px; }
.nkl__row.is-yes .nkl__ic { background: #6ab4ea; color: #fff; }
.nkl__row:not(.is-yes) { color: #9aa0a8; }
.nkl__col--neuk { background: #1a1a1a; border-color: #2c3a45 !important; color: #fffff2; box-shadow: 0 24px 48px -24px rgba(26, 26, 26, .55); }
.nkl__col--neuk .nkp__title { background: #222b30; border-color: #2c3a45 !important; display: flex; align-items: center; }
.nkl__col--neuk .nkp__title img { height: 26px; width: auto; }
.nkl__col--neuk .nkl__row { color: #fffff2; }
.nkl__col--neuk .nkl__row + .nkl__row { border-color: #2c3a45; }

/* Interviews: the screener and script beside the affinity map */
.nki { position: absolute; inset: 64px; display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 28px; }
.nki__map { grid-column: 2; grid-row: 1 / span 2; }
.nki .nkp__body { display: grid; place-items: center; background: #f4f5f7; }
.nkb .nki__doc { height: 330px; width: auto; box-shadow: 0 0 0 1px rgba(28, 29, 28, .06), 0 16px 32px -18px rgba(28, 29, 28, .35); }
.nkb .nki__map img { width: 100%; height: 100%; object-fit: contain; }

/* Personas: three people, who they came from, and what they need */
.nkpe { position: absolute; inset: 0 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 28px; }
.nkpe .nkp__body { padding: 48px; gap: 32px; }
.nkpe__top { display: flex; align-items: center; gap: 28px; }
.nkb .nkpe__top img { flex: none; width: 160px; height: 160px; border-radius: 32px !important; object-fit: cover; }
.nkpe__name { font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.nkpe__tags { display: flex; gap: 10px; margin-top: 18px; }
.nkpe__tags span { padding: 8px 18px; border-radius: 999px; font-size: 22px; font-weight: 600; }
.nkpe__tags span:nth-child(1) { background: #dfe8ff; }
.nkpe__tags span:nth-child(2) { background: #f3f8c9; }
.nkpe__label { margin-top: 8px; font-size: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8f98; }
.nkpe__needs { display: flex; flex-direction: column; gap: 14px; margin-top: -14px; }
.nkpe__needs span { align-self: flex-start; padding: 14px 24px; border-radius: 16px; background: #f4f5f7; font-size: 28px; font-weight: 500; }

/* Concept testing: three participants' sorted slides, vibe above food and drink */
.nkc { position: absolute; inset: 0 112px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 28px; }
.nkb .nkc img { width: 100%; height: auto; aspect-ratio: 572 / 321; object-fit: cover; border-radius: 14px !important; box-shadow: 0 0 0 1px rgba(28, 29, 28, .06), 0 18px 36px -20px rgba(28, 29, 28, .4); }

/* Brand: the system on one sheet */
.nkbr { position: absolute; inset: 64px; display: grid; grid-template-columns: 560px 300px 440px minmax(0, 1fr); grid-template-rows: 420px minmax(0, 1fr); gap: 28px; }
.nkbr__wordmark { grid-column: 1 / span 2; }
.nkbr__colors .nkp__body { justify-content: center; gap: 22px; padding: 32px; }
.nkbr__swatch { display: flex; align-items: center; gap: 20px; font-size: 26px; font-weight: 500; color: #1c1d1c; }
.nkbr__swatch i { flex: none; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 29, 28, .12); }
.nkbr__sketches .nkp__body { flex-direction: row; gap: 16px; align-items: center; justify-content: center; background: #f4f5f7; }
.nkb .nkbr__sketches img { height: 100%; width: auto; box-shadow: 0 14px 28px -18px rgba(28, 29, 28, .4); }
.nkbr__ui { grid-column: 2 / span 2; }
.nkbr__rooms .nkp__frame { display: flex; gap: 14px; padding: 24px; place-items: unset; align-items: center; justify-content: center; }
.nkb .nkbr__rooms img { height: 250px; width: auto; }

/* ── Reflection: before, a group chat that can't settle on a place; after, the couch ── */
body.case-page main .nk-reflect { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.333fr); gap: var(--gap-media, 12px); }
body.case-page main .nk-reflect__before { position: relative; display: grid; place-items: center; border-radius: var(--r-lg, 20px); background: #EFF1F3 radial-gradient(#D6D9DC .6px, transparent .9px) 0 0 / 10px 10px; }
body.case-page main .nk-reflect__before > img { width: auto; height: 86%; max-width: 80%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 18px 26px rgba(28, 29, 28, .22)); }
body.case-page main .nk-badge { position: absolute; right: 9%; top: 12%; width: 26%; aspect-ratio: 1; border-radius: 24%; background: linear-gradient(#5ff777, #0ec53a); display: grid; place-items: center; box-shadow: 0 14px 28px -12px rgba(28, 29, 28, .45); }
body.case-page main .nk-badge svg { width: 62%; }
body.case-page main .nk-badge b { position: absolute; right: -22%; top: -18%; padding: .2em .45em; border-radius: 999px; background: #ff3b30; color: #fff; font-size: clamp(12px, 1.4vw, 20px); font-weight: 600; line-height: 1.1; }
body.case-page main .nk-reflect__after { position: relative; }
body.case-page main .nk-reflect__after > img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg, 20px) !important; }
body.case-page main .nk-dnd { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 16px; border-radius: 999px; background: rgba(28, 26, 24, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: #fff; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
body.case-page main .nk-dnd svg { width: 26px; height: 26px; flex: none; }
body.case-page main .nk-dnd span { display: flex; flex-direction: column; font-size: clamp(12px, 1.2vw, 16px); font-weight: 600; line-height: 1.2; }
body.case-page main .nk-dnd small { font-size: .8em; font-weight: 400; color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) {
	body.case-page main .nk-reflect { grid-template-columns: minmax(0, 1fr); }
	body.case-page main .nk-reflect__before { aspect-ratio: 4 / 5; }
}
body.case-page main .nk-stats + .yap-calls { margin-top: 56px; }
/* Next steps: one "How might we…" over the three open questions */
body.case-page main .nt-section > .nk-hmw-label { margin: 48px 0 0; }
body.case-page main .nk-hmw-label + .yap-calls { margin-top: 20px; }
@media (max-width: 760px) {
	body.case-page main .nk-place > img { inset: 10% 14%; width: 72%; height: 80%; }
	body.case-page main .nk-place--chat > img { inset: 7% 14% 46%; height: 47%; }
	body.case-page main .nk-chat { left: 14%; right: 14%; bottom: 7%; }
}