/* =====================================================================
   NEW HOME, CLIENT STORIES (template-parts/nh/stories.php)
   =====================================================================
   The owner's "Client stories" comp: heading at left, two overlapping quote
   cards with chips and handwritten notes at right, three testimonial cards,
   and a strip of the industries clients work in.
   Shares tokens with new-hero.css / new-home.css.
   ===================================================================== */

.nx-sts__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.nx-sts__copy .nw-sub { max-width: 38em; }

/* ---- art ---- */
.nx-sts__art {
	position: relative;
	margin: -3.4vw calc(2vw - var(--nh-pad)) 0 0;
	aspect-ratio: 874 / 420;
	container-type: inline-size;
	pointer-events: none;
}
.nx-sts__blob {
	position: absolute;
	left: 18%; top: 2%;
	width: 62%; height: 96%;
	border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%;
	background: radial-gradient(70% 70% at 50% 50%, #FDEEEE 0%, #FEF5F5 70%, rgba(255, 255, 255, 0) 100%);
	animation: nx-stmorph 15s ease-in-out infinite;
}
@keyframes nx-stmorph {
	0%, 100% { border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%; }
	50%      { border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%; }
}
.nx-sts__lines { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.nx-sts__scribble { fill: none; stroke: #5E6166; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-sts__scribble { animation: nh-draw 1s 1.8s var(--nh-ease) forwards; }
.nx-sts__burst { fill: none; stroke: var(--nh-red); stroke-width: 3; stroke-linecap: round; }
.nx-sts__hand { z-index: 3; left: 1%; top: 8%; font-size: 2.9cqw; transform: rotate(-14deg); transform-origin: left bottom; }
.nx-sts__hand span:nth-child(2) { padding-left: .3em; }
.nx-sts__hand span:nth-child(3) { padding-left: .6em; }

.nx-sts__back, .nx-sts__front {
	position: absolute;
	margin: 0;
	padding: 3cqw;
	border-radius: 2.6cqw;
	background: #fff;
	box-shadow: 0 40px 70px -40px rgba(60, 30, 30, .5), 0 0 0 1px rgba(18, 21, 24, .05);
	opacity: 0;
}
.nx-sts__back { z-index: 1; left: 46%; top: 4%; width: 34%; rotate: 4deg; padding-top: 4cqw; background: linear-gradient(160deg, #fff, #FAFAFB); }
.nx-sts__front { z-index: 2; left: 11%; top: 30%; width: 40%; rotate: -3deg; }
.is-in .nx-sts__back { animation: nh-pop .9s .6s var(--nh-ease) forwards, nh-float2 7.6s 1.6s ease-in-out infinite; }
.is-in .nx-sts__front { animation: nh-pop .9s .85s var(--nh-ease) forwards, nh-float 7s 1.8s ease-in-out infinite; }
.nx-sts__back blockquote, .nx-sts__front blockquote { margin: 0; font-size: 1.85cqw; line-height: 1.5; color: #2B3036; }
.nx-sts__front blockquote { font-family: var(--nh-head); font-size: 2.05cqw; font-weight: 500; letter-spacing: -.01em; color: var(--nh-ink); }
.nx-sts__q { position: absolute; left: -2.2cqw; top: -2.6cqw; display: grid; place-items: center; width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-red); color: #fff; box-shadow: 0 14px 26px -14px rgba(239, 68, 68, .8); }
.nx-sts__q svg { width: 46%; }
.nx-sts__back figcaption, .nx-sts__front figcaption { display: flex; align-items: center; gap: 1.4cqw; margin-top: 2.2cqw; padding-top: 2cqw; border-top: 1px solid rgba(18, 21, 24, .08); }
.nx-sts__back i, .nx-sts__front i { display: grid; place-items: center; width: 4.8cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-red-t); font-style: normal; font-size: 1.6cqw; font-weight: 700; color: var(--nh-red); }
.nx-sts__back i { background: var(--nh-grey-t); color: #3A3F45; }
.nx-sts__back b, .nx-sts__front b { display: block; font-size: 1.7cqw; color: var(--nh-ink); }
.nx-sts__back small, .nx-sts__front small { display: block; font-size: 1.45cqw; color: #6A7178; }

.nx-stchip {
	position: absolute; z-index: 4;
	display: flex; align-items: center; gap: 2cqw;
	padding: 2cqw 2.8cqw 2cqw 2.2cqw;
	border-radius: 2.4cqw;
	background: #fff;
	box-shadow: 0 26px 46px -28px rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .05);
	opacity: 0;
}
.nx-stchip i { display: grid; place-items: center; flex: none; width: 6.6cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-red-t); color: var(--nh-red); }
.nx-stchip.is-g i { background: var(--nh-grey-t); color: #3A3F45; }
.nx-stchip i svg { width: 48%; }
.nx-stchip b { display: block; font-family: var(--nh-head); font-size: 2.6cqw; font-weight: 800; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-stchip small { display: block; margin-top: .3cqw; font-size: 1.6cqw; color: #61686E; }
.nx-stchip--a { left: 44%; top: 80%; }
.nx-stchip--b { left: 68%; top: 40%; }
.is-in .nx-stchip--a { animation: nh-pop .8s 1.2s var(--nh-ease) forwards, nh-float 6.6s 2.2s ease-in-out infinite; }
.is-in .nx-stchip--b { animation: nh-pop .8s 1.35s var(--nh-ease) forwards, nh-float2 7.2s 2.3s ease-in-out infinite; }

/* ---- cards ---- */
.nx-sts__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 24px);
	margin: clamp(26px, 2vw, 36px) -1.2vw 0;
}
.nx-stc {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(20px, 1.8vw, 32px) clamp(20px, 1.9vw, 34px) clamp(18px, 1.5vw, 26px);
	border-radius: clamp(18px, 1.3vw, 24px);
	background: linear-gradient(165deg, #FFFFFF 55%, var(--nx-wash) 100%);
	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-stc:hover { translate: 0 -5px; border-color: color-mix(in srgb, var(--nx-a) 26%, transparent); box-shadow: 0 30px 56px -36px rgba(60, 30, 30, .42); }
.nx-stc__top { display: flex; align-items: center; justify-content: space-between; }
.nx-stc__top .nx-ic { width: clamp(48px, 3.6vw, 64px); }
.nx-stc__stars { display: flex; gap: 4px; color: #F2A31B; }
.nx-stc__stars svg { width: clamp(16px, 1.1vw, 20px); }
.nx-stc blockquote { flex: 1; margin: clamp(16px, 1.3vw, 24px) 0 0; font-size: clamp(15px, 1.08vw, 19px); line-height: 1.55; color: #3B4147; }
.nx-stc blockquote::before { content: "\201C"; }
.nx-stc blockquote::after { content: "\201D"; }
.nx-stc figcaption { display: flex; align-items: center; gap: 14px; margin-top: clamp(18px, 1.4vw, 26px); padding-top: clamp(16px, 1.2vw, 22px); border-top: 1px solid rgba(18, 21, 24, .08); }
.nx-stc figcaption > i { display: grid; place-items: center; flex: none; width: clamp(46px, 3.4vw, 60px); aspect-ratio: 1; border-radius: 50%; background: var(--nx-t); font-style: normal; font-size: clamp(14px, 1vw, 17px); font-weight: 700; color: var(--nx-a); }
.nx-stc figcaption b { display: block; font-size: clamp(15px, 1.05vw, 18.5px); font-weight: 600; color: var(--nh-ink); }
.nx-stc figcaption small { display: block; margin-top: 2px; font-size: clamp(13px, .86vw, 15px); color: #6A7178; }
.nx-stc__svc {
	margin-left: auto;
	padding: 6px 14px;
	border-left: 1px solid rgba(18, 21, 24, .1);
	font-size: clamp(13px, .86vw, 15px);
	font-weight: 600;
	color: var(--nx-a);
	white-space: nowrap;
}
.nx-stc__svc:hover { text-decoration: underline; }

/* ---- strip ---- */
.nx-sts__strip {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 36px);
	margin: clamp(26px, 2.2vw, 40px) -1.2vw 0;
	padding: clamp(18px, 1.5vw, 28px) 0 0;
	border-top: 1px solid rgba(18, 21, 24, .09);
}
.nx-sts__strip p { flex: none; max-width: 15em; margin: 0; font-size: clamp(11.5px, .8vw, 14px); font-weight: 600; letter-spacing: .2em; line-height: 1.6; text-transform: uppercase; color: #6A7178; }
.nx-sts__strip ul { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 0; list-style: none; margin: 0; padding: 0; }
.nx-sts__strip li { display: flex; align-items: center; gap: 10px; padding: 0 clamp(12px, 1.6vw, 30px); border-left: 1px solid rgba(18, 21, 24, .1); font-family: var(--nh-head); font-size: clamp(15px, 1.2vw, 21px); font-weight: 600; letter-spacing: -.01em; color: #2B3036; }
.nx-sts__strip li svg { width: 1.3em; color: var(--nh-red); }
.nx-sts__strip li:nth-child(even) svg { color: #4A5056; }
.nx-sts .nx-note .nx-more { margin-left: 8px; font-size: inherit; }

/* ---- responsive ---- */
@media (max-width: 1280px) {
	.nx-sts__cards, .nx-sts__strip { margin-inline: 0; }
	.nx-sts__strip { flex-direction: column; align-items: flex-start; }
	.nx-sts__strip p { max-width: none; }
	.nx-sts__strip ul { justify-content: flex-start; }
	.nx-sts__strip li:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 1100px) {
	.nx-sts__head { grid-template-columns: minmax(0, 1fr); }
	.nx-sts__art { margin: 18px auto 0; width: 100%; max-width: 720px; }
	.nx-sts__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.nx-sts__strip li { border-left: 0; padding-left: 0; width: 50%; }
	.nx-stc figcaption { flex-wrap: wrap; }
	.nx-stc__svc { margin-left: 0; border-left: 0; padding-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.nx-sts__back, .nx-sts__front, .nx-stchip { opacity: 1; }
	.nx-sts__scribble { stroke-dashoffset: 0; }
	.nx-sts__hand { clip-path: none; }
}