/* =====================================================================
   NEW HOME, 9. OUR WORK (template-parts/nh/work.php)
   =====================================================================
   The owner's "Our work" comp: heading at left, a handwritten note, a
   "View All Work" pill and two arrows at right, then a row of project cards
   that scrolls sideways. Each card has a device mockup on top (drawn in CSS,
   sized in cqw of the card) and the project's own figures underneath.
   Shares tokens with new-hero.css / new-home.css.
   ===================================================================== */

.nx-wks__head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: start;
}
.nx-wks__copy .nw-sub { max-width: 47em; }
.nx-wks__side {
	position: relative;
	display: grid;
	justify-items: end;
	align-content: start;
	gap: clamp(60px, 4.8vw, 86px);
	min-width: clamp(260px, 32vw, 600px);
	padding-top: clamp(44px, 2.8vw, 50px);
}
.nx-wks__hand {
	left: 0; top: 0;
	font-size: clamp(18px, 1.5vw, 27px);
	transform: rotate(-9deg);
	transform-origin: left bottom;
}
.nx-wks__hand span:nth-child(2) { padding-left: .1em; }
.nx-wks__hand span:nth-child(3) { padding-left: .2em; }
.is-in .nx-wks__hand { animation: nw-write 1.4s 1s steps(26) forwards; }
.nx-wks__deco { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; z-index: 0; }
.nx-wks__scribble { fill: none; stroke: #5E6166; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-wks__scribble { animation: nh-draw .9s 1.8s var(--nh-ease) forwards; }
.nx-wks__arc { fill: none; stroke: var(--nh-red); stroke-width: 1.4; opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-wks__arc { animation: nh-draw 2s .8s var(--nh-ease) forwards; }
.nx-wks__dot { fill: var(--nh-red); transform-box: fill-box; transform-origin: center; animation: nw-pulse 2.6s ease-in-out infinite; }

.nx-wks__all {
	position: relative;
	z-index: 1;
	border: 1.5px solid rgba(18, 21, 24, .18);
	background: #fff;
	border-radius: 99px;
	font-weight: 600;
	color: var(--nh-ink);
}
.nx-wks__all:hover { border-color: var(--nh-red); color: var(--nh-red); }
.nx-wks__nav { position: relative; z-index: 1; display: flex; gap: 14px; }
.nx-wks__btn {
	display: grid; place-items: center;
	width: clamp(46px, 3vw, 54px); aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(18, 21, 24, .12);
	background: #fff;
	color: var(--nh-ink);
	cursor: pointer;
	transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.nx-wks__btn svg { width: 38%; }
.nx-wks__btn.is-next { background: var(--nh-red-t); border-color: transparent; color: var(--nh-red); }
.nx-wks__btn:hover:not(:disabled) { background: var(--nh-red); border-color: var(--nh-red); color: #fff; }
.nx-wks__btn:disabled { opacity: .4; cursor: default; }
.nx-wks__btn:focus-visible { outline: 2px solid var(--nh-red); outline-offset: 3px; }

/* the row: four cards in view on desktop, the rest a scroll away */
.nx-wks__track {
	--gap: clamp(14px, 1.35vw, 24px);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
	column-gap: var(--gap);
	margin: clamp(28px, 2.4vw, 44px) -1.2vw 0;
	padding: 6px 1.2vw 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1.2vw;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.nx-wks__track::-webkit-scrollbar { display: none; }
.nx-wks__track:focus-visible { outline: 2px solid var(--nh-red); outline-offset: 4px; border-radius: 12px; }

.nx-wk {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: clamp(18px, 1.25vw, 22px);
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .085);
	transition: opacity .8s var(--nh-ease) calc(var(--i, 0) * 80ms), transform .9s var(--nh-ease) calc(var(--i, 0) * 80ms), translate .4s var(--nh-ease), box-shadow .4s var(--nh-ease), border-color .4s;
}
.nx-wk:hover { translate: 0 -6px; border-color: color-mix(in srgb, var(--nx-a) 26%, transparent); box-shadow: 0 34px 60px -38px rgba(60, 30, 30, .42); }
.nx-wk:has(:focus-visible) { outline: 2px solid var(--nx-a); outline-offset: 3px; }

/* ---- mockups ---- */
.nx-wk__shot {
	position: relative;
	aspect-ratio: 389 / 245;
	container-type: inline-size;
	overflow: hidden;
	background: linear-gradient(160deg, #F4F1EE 0%, #E9E4DF 100%);
}
.nx-wk__shot::after { /* the "desk" the device sits on */
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
	background: linear-gradient(180deg, #DCD5CE, #CFC7BF);
}
.nx-wk__shot.is-photo::after { content: none; }
.nx-wk__shot.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1s var(--nh-ease); }
.nx-wk:hover .nx-wk__shot.is-photo img { transform: scale(1.05); }
.nx-wk__shot--analytics, .nx-wk__shot--scoring { background: linear-gradient(160deg, #F1F2F4 0%, #E3E6EA 100%); }
.nx-wk__shot--analytics::after, .nx-wk__shot--scoring::after { background: linear-gradient(180deg, #D5D9DE, #C8CDD3); }
.nx-wk__shot--chat { background: radial-gradient(60% 70% at 70% 40%, #FBE3E3 0%, #EFE7E3 70%); }
.nx-wk__shot--fintech, .nx-wk__shot--shop { background: linear-gradient(160deg, #F6EDEA 0%, #EADBD5 100%); }

/* laptop */
.nx-lap {
	position: absolute; z-index: 1;
	left: 13%; top: 11%;
	width: 74%;
	transition: transform .6s var(--nh-ease);
}
.nx-wk:hover .nx-lap, .nx-wk:hover .nx-ph { transform: translateY(-2.5cqw); }
.nx-lap__scr {
	position: relative;
	display: flex;
	aspect-ratio: 16 / 10;
	padding: 2.6cqw;
	gap: 2.4cqw;
	border: 1.6cqw solid #1B1E21;
	border-bottom-width: 2cqw;
	border-radius: 2.4cqw 2.4cqw .6cqw .6cqw;
	background: #fff;
	overflow: hidden;
}
.nx-lap::after {
	content: "";
	display: block;
	width: 116%;
	height: 2.6cqw;
	margin-left: -8%;
	border-radius: 0 0 2cqw 2cqw;
	background: linear-gradient(180deg, #D9DCE0, #A9AEB4);
	box-shadow: 0 2.4cqw 3cqw -1.6cqw rgba(0, 0, 0, .35);
}
.nx-lap__side { display: flex; flex-direction: column; gap: 1.8cqw; width: 14%; padding-top: 1cqw; }
.nx-lap__side i { height: 1.4cqw; border-radius: 1cqw; background: #ECEDEF; }
.nx-lap__side i:first-child { background: var(--nh-red-t); }
.nx-lap__main { flex: 1; display: flex; flex-direction: column; gap: 2cqw; min-width: 0; }
.nx-lap__main > b { font-family: var(--nh-head); font-size: 3.2cqw; font-weight: 700; color: var(--nh-ink); }
.nx-lap__pills { display: flex; gap: 1.6cqw; }
.nx-lap__pills i { flex: 1; height: 7cqw; border-radius: 1.4cqw; border: 1px solid rgba(18, 21, 24, .08); background: linear-gradient(180deg, #fff, #FAFAFA); }
.nx-lap__pills i:first-child { background: linear-gradient(180deg, #FFF5F5, #FDECEC); }
.nx-lap__line { flex: 1; width: 100%; overflow: visible; }
.nx-lap__line path { fill: none; stroke: var(--nh-red); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.nx-lap__line .nx-lap__area { fill: rgba(239, 68, 68, .1); stroke: none; stroke-dasharray: none; opacity: 0; }
.is-in .nx-lap__line path { animation: nh-draw 1.6s 1.2s var(--nh-ease) forwards; }
.is-in .nx-lap__line .nx-lap__area { animation: nx-fade 1s 2s ease forwards; }
.nx-lap__bars { flex: 1; display: flex; align-items: flex-end; gap: 2cqw; }
.nx-lap__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .8cqw .8cqw 0 0; background: linear-gradient(180deg, #4A5056, #2A2F35); transform-origin: bottom; transform: scaleY(0); }
.nx-lap__bars i:nth-child(n+5) { background: linear-gradient(180deg, #F87171, var(--nh-red)); }
.is-in .nx-lap__bars i { animation: nh-bar .8s var(--nh-ease) forwards; animation-delay: calc(1.1s + var(--h) * .6s); }
.nx-lap__lead { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; border: 1px solid rgba(18, 21, 24, .07); }
.nx-lap__lead i { flex: 1; height: 1.4cqw; border-radius: 1cqw; background: #ECEDEF; }
.nx-lap__lead em { font-style: normal; font-size: 2.2cqw; font-weight: 700; padding: .4cqw 1.4cqw; border-radius: 99px; background: #FFF3E0; color: #B26A00; }
.nx-lap__lead em.is-hot { background: var(--nh-red-t); color: var(--nh-red); }
.nx-lap__lead em.is-cold { background: #EEF0F2; color: #6A7178; }

/* dark laptop with the support assistant */
.nx-lap--dark .nx-lap__scr { background: radial-gradient(70% 90% at 85% 50%, rgba(239, 68, 68, .45), transparent 70%), #121518; }
.nx-lap__chat { display: flex; flex-direction: column; justify-content: center; gap: 1.8cqw; width: 62%; }
.nx-lap__chat b { font-family: var(--nh-head); font-size: 3.4cqw; line-height: 1.15; color: #fff; }
.nx-lap__q, .nx-lap__a { padding: 1.4cqw 1.8cqw; border-radius: 1.6cqw; font-size: 2.1cqw; line-height: 1.35; }
.nx-lap__q { align-self: flex-start; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.nx-lap__a { background: var(--nh-red); color: #fff; }
.nx-lap__bot { position: absolute; right: 7%; top: 50%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; margin-top: -11%; border-radius: 30%; background: rgba(239, 68, 68, .25); color: #FF8A8E; box-shadow: 0 0 6cqw rgba(239, 68, 68, .55); animation: nh-float 5s ease-in-out infinite; }
.nx-lap__bot svg { width: 60%; }

/* phones */
.nx-ph {
	position: absolute; z-index: 2;
	left: 25%; top: 9%;
	width: 31%;
	aspect-ratio: 9 / 18;
	padding: 1.2cqw;
	border-radius: 5cqw;
	background: #15181B;
	box-shadow: 0 4cqw 6cqw -3cqw rgba(0, 0, 0, .45);
	rotate: -6deg;
	transition: transform .6s var(--nh-ease);
}
.nx-ph--back { z-index: 1; left: 52%; top: 15%; rotate: 7deg; }
.nx-ph__scr { display: flex; flex-direction: column; gap: 1.6cqw; height: 100%; padding: 4.4cqw 2cqw 2cqw; border-radius: 4cqw; background: #fff; overflow: hidden; }
.nx-ph__t { font-family: var(--nh-head); font-size: 2.8cqw; font-weight: 700; color: var(--nh-ink); }
.nx-ph__card { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2cqw; border-radius: 2cqw; background: linear-gradient(135deg, #F35A5F, var(--nh-red)); }
.nx-ph__card small { font-size: 1.8cqw; color: rgba(255, 255, 255, .8); }
.nx-ph__card i { height: 1.8cqw; width: 70%; border-radius: 1cqw; background: rgba(255, 255, 255, .9); }
.nx-ph__card i + i { width: 40%; height: 1.2cqw; background: rgba(255, 255, 255, .5); }
.nx-ph__acts { display: flex; justify-content: space-between; }
.nx-ph__acts i { width: 5cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-grey-t); }
.nx-ph__row { height: 4.6cqw; border-radius: 1.4cqw; background: #F4F4F5; }
.nx-ph__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.nx-ph__grid i { aspect-ratio: 1; border-radius: 1.6cqw; background: linear-gradient(160deg, #F2E8E4, #E6D7D0); }
.nx-ph__grid i:nth-child(2), .nx-ph__grid i:nth-child(3) { background: linear-gradient(160deg, #ECEDEF, #DADDE1); }
.nx-ph__cta { margin-top: auto; padding: 1.4cqw; border-radius: 99px; background: var(--nh-red); color: #fff; font-size: 2cqw; font-weight: 600; text-align: center; }

/* ---- card body ---- */
.nx-wk__body { flex: 1; display: flex; flex-direction: column; padding: clamp(18px, 1.25vw, 24px) clamp(18px, 1.25vw, 24px) clamp(16px, 1.1vw, 22px); }
.nx-wk__cat { align-self: flex-start; padding: 5px 14px; border-radius: 99px; background: var(--nx-t); color: var(--nx-a); font-size: clamp(12.5px, .82vw, 14.5px); font-weight: 600; }
.nx-wk h3 { margin: clamp(12px, .9vw, 16px) 0 0; font-family: var(--nh-head); font-size: clamp(17px, 1.18vw, 21px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-wk p { margin: 8px 0 0; font-size: clamp(14px, .93vw, 16.5px); line-height: 1.45; color: var(--nh-body); }
.nx-wk__foot {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 40px);
	margin-top: auto;
	padding-top: clamp(14px, 1vw, 18px);
	border-top: 1px solid rgba(18, 21, 24, .08);
}
.nx-wk p + .nx-wk__foot, .nx-wk__body > p { margin-bottom: clamp(16px, 1.2vw, 22px); }
.nx-wk__stat b { display: block; font-family: var(--nh-head); font-size: clamp(19px, 1.32vw, 24px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-wk__stat small { display: block; margin-top: 2px; font-size: clamp(12px, .78vw, 14px); color: #6A7178; }
.nx-wk__go {
	display: grid; place-items: center; flex: none;
	width: clamp(38px, 2.4vw, 44px); aspect-ratio: 1;
	margin-left: auto;
	border-radius: 50%;
	border: 1px solid rgba(18, 21, 24, .14);
	color: var(--nh-ink);
	transition: background .3s, color .3s, border-color .3s;
}
.nx-wk__go svg { width: 40%; }
.nx-wk__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nx-wk { position: relative; }
.nx-wk__go:focus-visible { outline: none; }
.nx-wk:hover .nx-wk__go { background: var(--nx-a); border-color: var(--nx-a); color: #fff; }

/* ---- responsive ---- */
@media (max-width: 1280px) {
	.nx-wks__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}
@media (max-width: 1100px) {
	.nx-wks__head { grid-template-columns: minmax(0, 1fr); }
	.nx-wks__side { justify-items: start; min-width: 0; padding-top: 0; gap: 18px; grid-auto-flow: column; align-items: center; justify-content: start; }
	.nx-wks .nx-wks__hand, .nx-wks .nx-wks__deco { display: none; }
	.nx-wks__track { grid-auto-columns: calc((100% - var(--gap)) / 2.15); }
}
@media (max-width: 720px) {
	.nx-wks__track { grid-auto-columns: 86%; margin-inline: calc(-1 * var(--nh-pad)); padding-inline: var(--nh-pad); scroll-padding-inline: var(--nh-pad); }
	.nx-wks__all { height: 44px; padding: 0 18px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.nx-wks__hand { clip-path: none; }
	.nx-wks__scribble, .nx-wks__arc, .nx-lap__line path { stroke-dashoffset: 0; }
	.nx-lap__line .nx-lap__area { opacity: 1; }
	.nx-lap__bars i { transform: none; }
	.nx-wks__track { scroll-behavior: auto; }
}