/* =====================================================================
   NEW HOME, 10. HOW WE WORK (template-parts/nh/how.php)
   =====================================================================
   The owner's "How we work" comp: heading at left with a team photograph,
   two chips and a handwritten note at right; four steps across the page,
   each a photo in an organic frame with a number, an icon on the frame's
   edge, copy and a checklist, joined by a curve; a strip of promises with a
   call to action underneath.
   Shares tokens with new-hero.css / new-home.css.
   ===================================================================== */

.nx-how__head {
	display: grid;
	grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.nx-how__copy .nw-sub { max-width: 40em; }
.nx-how .nw-title { font-size: clamp(30px, 3.3vw, 62px); }

/* ---- art ---- */
.nx-how__art {
	position: relative;
	margin: -3.6vw calc(2vw - var(--nh-pad)) 0 -4vw;
	aspect-ratio: 780 / 320;
	container-type: inline-size;
	pointer-events: none;
}
.nx-how__blob {
	position: absolute;
	left: 30%; top: -4%;
	width: 66%; height: 112%;
	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-howmorph 15s ease-in-out infinite;
}
@keyframes nx-howmorph {
	0%, 100% { border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%; }
	50%      { border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%; }
}
.nx-how__photo {
	position: absolute; z-index: 1;
	left: 34%; top: 6%;
	width: 52%; height: 96%;
	overflow: hidden;
	border-radius: 40% 60% 46% 54% / 46% 38% 62% 54%;
	box-shadow: 0 40px 70px -44px rgba(60, 30, 30, .5);
	animation: nx-howmorph2 17s ease-in-out infinite;
}
.nx-how__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); transition: transform 1.6s var(--nh-ease); }
.is-in .nx-how__photo img { transform: none; }
@keyframes nx-howmorph2 {
	0%, 100% { border-radius: 40% 60% 46% 54% / 46% 38% 62% 54%; }
	50%      { border-radius: 48% 52% 40% 60% / 40% 46% 54% 60%; }
}
.nx-how__lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.nx-how__scribble { fill: none; stroke: #5E6166; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-how__scribble { animation: nh-draw .9s 1.8s var(--nh-ease) forwards; }
.nx-how__burst { fill: none; stroke: var(--nh-red); stroke-width: 3; stroke-linecap: round; }
.nx-how__hand { z-index: 2; left: 4%; top: 8%; font-size: 3cqw; transform: rotate(-10deg); transform-origin: left bottom; }
.nx-how__hand span:nth-child(2) { padding-left: .1em; }

.nx-howchip {
	position: absolute; z-index: 3;
	display: flex; align-items: center; gap: 2cqw;
	padding: 2.2cqw 2.8cqw 2.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-howchip i { display: grid; place-items: center; flex: none; width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-red-t); color: var(--nh-red); }
.nx-howchip.is-g i { border-radius: 1.6cqw; background: var(--nh-grey-t); color: #3A3F45; }
.nx-howchip i svg { width: 50%; }
.nx-howchip b { display: block; font-family: var(--nh-head); font-size: 2.15cqw; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--nh-ink); }
.nx-howchip small { display: block; margin-top: .5cqw; font-size: 1.65cqw; line-height: 1.4; color: #61686E; }
.nx-howchip--a { left: 1%; top: 46%; }
.nx-howchip--b { left: 74%; top: 6%; }
.is-in .nx-howchip--a { animation: nh-pop .8s 1s var(--nh-ease) forwards, nh-float 7s 2s ease-in-out infinite; }
.is-in .nx-howchip--b { animation: nh-pop .8s 1.2s var(--nh-ease) forwards, nh-float2 6.6s 2.2s ease-in-out infinite; }

/* ---- steps ---- */
.nx-how__steps {
	--gap: clamp(18px, 1.6vw, 30px);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px var(--gap);
	list-style: none;
	margin: clamp(22px, 2.2vw, 40px) -1.6vw 0 0;
	padding: 0;
}
.nx-hows { position: relative; }
.nx-hows__media { position: relative; }
.nx-hows__img {
	position: relative; z-index: 1;
	width: 68%;
	margin-left: 5%;
	aspect-ratio: 1.42;
	overflow: hidden;
	box-shadow: 0 30px 50px -36px rgba(18, 21, 24, .5);
	transition: transform .6s var(--nh-ease);
}
.nx-hows__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--nh-ease); }
.nx-hows:hover .nx-hows__img img { transform: scale(1.06); }
.nx-hows__img--1 { border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; }
.nx-hows__img--2 { border-radius: 58% 42% 52% 48% / 40% 56% 44% 60%; }
.nx-hows__img--3 { border-radius: 42% 58% 60% 40% / 56% 40% 60% 44%; }
.nx-hows__img--4 { border-radius: 54% 46% 44% 56% / 46% 58% 42% 54%; }
.nx-hows__n {
	position: absolute; z-index: 2;
	left: 0; top: -4%;
	display: grid; place-items: center;
	width: clamp(50px, 3.9vw, 70px); aspect-ratio: 1;
	border-radius: 50%;
	background: var(--nx-t);
	border: 4px solid #fff;
	font-family: var(--nh-head);
	font-size: clamp(18px, 1.5vw, 28px);
	font-weight: 700;
	color: var(--nx-a);
	box-shadow: 0 10px 22px -16px rgba(18, 21, 24, .4);
}
.nx-hows__link {
	position: absolute; z-index: 0;
	left: 66%; top: 34%;
	width: calc(54% + var(--gap));
	height: 46%;
	overflow: visible;
}
.nx-hows__link path { fill: none; stroke: var(--nx-a); stroke-width: 1.8; vector-effect: non-scaling-stroke; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-hows__link path { animation: nh-draw 1.2s calc(.9s + var(--i, 0) * 150ms) var(--nh-ease) forwards; }
.nx-hows.is-g .nx-hows__link path { stroke: var(--nh-red); }
.nx-hows:not(.is-g) .nx-hows__link path { stroke: #4A5056; }

.nx-hows__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(12px, 1vw, 18px);
	align-items: start;
	padding-right: 4%;
}
.nx-hows__body .nx-ic {
	grid-row: 1 / span 3;
	position: relative; z-index: 2;
	width: clamp(52px, 3.9vw, 70px);
	margin-top: calc(-0.42 * clamp(52px, 3.9vw, 70px));
	border: 4px solid #fff;
	box-shadow: 0 10px 22px -14px rgba(18, 21, 24, .35);
}
.nx-hows:hover .nx-hows__body .nx-ic { background: var(--nx-a); color: #fff; }
.nx-hows h3 { margin: clamp(10px, .9vw, 16px) 0 0; font-family: var(--nh-head); font-size: clamp(18px, 1.3vw, 23px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-hows p { margin: 8px 0 0; font-size: clamp(14.5px, .98vw, 17px); line-height: 1.45; color: var(--nh-body); }
.nx-hows ul {
	list-style: none;
	margin: clamp(14px, 1.1vw, 20px) 0 0;
	padding: 4px clamp(12px, 1vw, 18px);
	border-radius: 12px;
	background: linear-gradient(160deg, #FAFAFB, var(--nx-wash));
	border: 1px solid rgba(18, 21, 24, .05);
}
.nx-hows li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: clamp(13.5px, .9vw, 16px); color: #3B4147; }
.nx-hows li + li { border-top: 1px solid rgba(18, 21, 24, .06); }
.nx-hows li svg { flex: none; width: 1.15em; color: var(--nx-a); }

/* ---- strip ---- */
.nx-how__strip {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 36px);
	margin: clamp(26px, 2vw, 38px) -1.2vw 0;
	padding: clamp(16px, 1.3vw, 24px) clamp(18px, 1.4vw, 26px) clamp(16px, 1.3vw, 24px) clamp(20px, 2.4vw, 44px);
	border-radius: clamp(18px, 1.3vw, 24px);
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .08);
	box-shadow: 0 24px 50px -40px rgba(18, 21, 24, .3);
}
.nx-how__strip ul { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.nx-how__strip li { display: flex; align-items: center; gap: clamp(12px, 1.1vw, 20px); padding-right: 12px; font-size: clamp(14.5px, 1.02vw, 18px); font-weight: 500; line-height: 1.3; color: var(--nh-ink); }
.nx-how__strip li + li { padding-left: clamp(14px, 2vw, 38px); border-left: 1px solid rgba(18, 21, 24, .09); }
.nx-how__strip .nx-ic { width: clamp(46px, 3.6vw, 64px); }
.nx-how__strip .nh-btn { flex: none; padding-inline: clamp(24px, 2.6vw, 48px); }

/* ---- responsive ---- */
@media (max-width: 1280px) {
	.nx-how__steps { margin-right: 0; }
	.nx-how__strip { flex-direction: column; align-items: stretch; margin-inline: 0; }
	.nx-how__strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
	.nx-how__strip li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1100px) {
	.nx-how__head { grid-template-columns: minmax(0, 1fr); }
	.nx-how__art { margin: 18px auto 0; width: 100%; max-width: 720px; }
	.nx-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.nx-how .nx-hows__link { display: none; }
}
@media (max-width: 720px) {
	.nx-how__steps { grid-template-columns: minmax(0, 1fr); }
	.nx-hows__img { width: 86%; }
	.nx-how__strip ul { grid-template-columns: minmax(0, 1fr); }
	.nx-how__strip li + li { padding-left: 0; border-left: 0; }
	.nx-how .nx-how__hand { display: none; }
	.nx-howchip--a { left: 0; top: 60%; }
	.nx-howchip--b { left: 68%; top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.nx-howchip { opacity: 1; }
	.nx-how__scribble, .nx-hows__link path { stroke-dashoffset: 0; }
	.nx-how__hand { clip-path: none; }
}