/* =====================================================================
   NEW HOME, 12. WHY CHOOSE US (template-parts/nh/choose.php)
   =====================================================================
   The owner's "Why choose us" comp: centred heading with a pill eyebrow,
   three numbered cards either side of an orbit (logo on a lit block, five
   service nodes, dots travelling the ring), a strip of four facts below.
   Shares tokens with new-hero.css / new-home.css.
   ===================================================================== */

.nx-cho { overflow: hidden; }
.nx-cho__bg {
	position: absolute; inset: 0 -10% auto; height: 70%;
	background:
		radial-gradient(40% 50% at 92% 34%, rgba(239, 68, 68, .06), transparent 70%),
		radial-gradient(30% 40% at 4% 40%, rgba(18, 21, 24, .035), transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	pointer-events: none;
}
.nx-cho__head { position: relative; text-align: center; }
.nx-cho__head .nw-title { font-size: clamp(30px, 3.4vw, 64px); }
.nx-cho__head .nw-sub { max-width: 40em; margin-inline: auto; }
.nx-cho__pill {
	display: inline-flex; align-items: center; gap: 12px;
	margin: 0;
	padding: 10px 22px;
	border-radius: 99px;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .08);
	box-shadow: 0 12px 28px -20px rgba(18, 21, 24, .4);
	font-size: clamp(12px, .9vw, 16px);
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #3B4147;
}
.nx-cho__pill svg { width: 1.3em; color: var(--nh-red); }

.nx-cho__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(14px, 1.2vw, 24px);
	align-items: center;
	margin: clamp(4px, .5vw, 10px) -1.2vw 0;
}
.nx-cho__col { display: grid; gap: clamp(12px, 1vw, 18px); }
.nx-cho__col:first-child { margin-top: -1vw; }
.nx-choc {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.4vw, 26px);
	padding: clamp(18px, 1.4vw, 26px) clamp(18px, 1.4vw, 26px);
	border-radius: clamp(16px, 1.1vw, 20px);
	background: linear-gradient(110deg, var(--nx-wash) 0%, #FFFFFF 46%, #FFFFFF 100%);
	border: 1px solid rgba(18, 21, 24, .08);
	box-shadow: 0 20px 44px -40px rgba(18, 21, 24, .4);
	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-choc:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--nx-a) 26%, transparent); box-shadow: 0 28px 50px -34px rgba(60, 30, 30, .42); }
.nx-choc .nx-ic { width: clamp(60px, 4.9vw, 90px); }
.nx-choc:hover .nx-ic { background: var(--nx-a); color: #fff; }
.nx-choc__n { display: block; font-size: clamp(13px, .9vw, 16px); color: #6A7178; }
.nx-choc h3 { margin: 4px 0 0; font-family: var(--nh-head); font-size: clamp(17px, 1.3vw, 23px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-choc p { margin: 6px 0 0; font-size: clamp(14px, .98vw, 17px); line-height: 1.42; color: var(--nh-body); }

/* ---- orbit ---- */
.nx-cho__orbit {
	position: relative;
	aspect-ratio: 600 / 560;
	container-type: inline-size;
}
.nx-cho__glow {
	position: absolute; left: 14%; top: 18%; width: 72%; height: 72%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(239, 68, 68, .12), rgba(239, 68, 68, .03) 60%, transparent);
	animation: nx-chopulse 5s ease-in-out infinite;
}
@keyframes nx-chopulse { 0%, 100% { opacity: .7; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
.nx-cho__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-cho__ring ellipse { fill: none; stroke: rgba(239, 68, 68, .32); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.nx-cho__ring .nx-cho__ring2 { stroke: rgba(18, 21, 24, .08); stroke-dasharray: none; stroke-width: 1; }
.nx-cho__ring circle { fill: var(--nh-red); }
.nx-cho__ring circle.is-g { fill: #4A5056; }

.nx-cho__stage { position: absolute; left: 22%; top: 56%; width: 56%; aspect-ratio: 2.6; }
.nx-cho__stage span { position: absolute; inset: 0; border-radius: 50%; }
.nx-cho__stage span:nth-child(1) { background: radial-gradient(closest-side, rgba(239, 68, 68, .38), rgba(239, 68, 68, 0)); inset: -18% -10%; filter: blur(8px); }
.nx-cho__stage span:nth-child(2) { background: linear-gradient(180deg, #FFFFFF, #F1F1F3); box-shadow: 0 1.6cqw 0 #E3E4E8, 0 3cqw 5cqw -2cqw rgba(18, 21, 24, .35); }
.nx-cho__stage span:nth-child(3) { inset: 18% 14%; border: 1px solid rgba(239, 68, 68, .4); background: radial-gradient(closest-side, rgba(250, 205, 207, .95), rgba(253, 236, 236, .5)); box-shadow: 0 0 3cqw rgba(239, 68, 68, .35); }

.nx-cho__box {
	position: absolute; z-index: 2;
	left: 30%; top: 34%;
	width: 40%; aspect-ratio: 1.3;
	display: grid; place-items: center;
	padding: 4cqw;
	border-radius: 5cqw;
	background: linear-gradient(150deg, #353A41 0%, #1E2227 55%, #121518 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .14),
		inset 0 -1.2cqw 2cqw rgba(0, 0, 0, .35),
		0 2.2cqw 0 #0E1013,
		0 2.6cqw 0 #08090B,
		0 5cqw 7cqw -2cqw rgba(239, 68, 68, .45),
		0 0 0 1px rgba(255, 255, 255, .06);
	transform: perspective(900px) rotateX(16deg) rotate(-8deg);
	animation: nx-chobox 7s ease-in-out infinite;
}
.nx-cho__box img { width: 100%; height: auto; }
@keyframes nx-chobox { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.4cqw; } }

.nx-cho__node {
	position: absolute; z-index: 3;
	display: grid; justify-items: center; gap: 1.2cqw;
	width: 16%;
	opacity: 0;
}
.is-in .nx-cho__node { animation: nh-pop .7s calc(.6s + var(--d) * 120ms) var(--nh-ease) forwards, nh-float calc(6s + var(--d) * .5s) calc(1.6s + var(--d) * .3s) ease-in-out infinite; }
.nx-cho__node i {
	display: grid; place-items: center;
	width: 100%; aspect-ratio: 1;
	border-radius: 28%;
	background: linear-gradient(160deg, #FFFFFF, #F7F7F9);
	box-shadow: 0 2cqw 4cqw -2cqw rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .05);
	color: var(--nh-red);
}
.nx-cho__node.is-g i { color: #2A2F35; }
.nx-cho__node svg { width: 46%; }
.nx-cho__node b { font-size: 2.7cqw; font-weight: 600; color: #2B3036; white-space: nowrap; }
.nx-cho__node--a { left: 42%; top: 0; }
.nx-cho__node--b { left: 80%; top: 22%; }
.nx-cho__node--b b { rotate: 18deg; }
.nx-cho__node--c { left: 72%; top: 66%; }
.nx-cho__node--c b { rotate: 14deg; }
.nx-cho__node--d { left: 12%; top: 66%; }
.nx-cho__node--d b { rotate: -14deg; }
.nx-cho__node--e { left: 4%; top: 22%; }
.nx-cho__node--e b { rotate: -12deg; }

/* ---- strip ---- */
.nx-cho__strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: clamp(20px, 1.6vw, 30px) -1.2vw 0;
	padding: clamp(16px, 1.3vw, 24px) clamp(20px, 3vw, 56px);
	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-cho__strip li { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.1vw, 20px); padding: 0 12px; }
.nx-cho__strip li + li { border-left: 1px solid rgba(18, 21, 24, .09); }
.nx-cho__strip svg { flex: none; width: clamp(32px, 2.6vw, 48px); color: var(--nh-red); }
.nx-cho__strip li.is-g svg { color: #3A3F45; }
.nx-cho__strip b { display: block; font-family: var(--nh-head); font-size: clamp(20px, 1.6vw, 30px); font-weight: 800; letter-spacing: -.03em; color: var(--nh-ink); }
.nx-cho__strip small { display: block; margin-top: 2px; font-size: clamp(13.5px, .95vw, 17px); color: #5E656C; }

/* ---- responsive ---- */
@media (max-width: 1280px) {
	.nx-cho__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-inline: 0; }
	.nx-cho__orbit { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 560px; margin: 0 auto; }
	.nx-cho__col:first-child { margin-top: 0; }
	.nx-cho__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; margin-inline: 0; }
	.nx-cho__strip li { justify-content: flex-start; }
	.nx-cho__strip li:nth-child(3) { border-left: 0; }
}
@media (max-width: 720px) {
	.nx-cho__grid { grid-template-columns: minmax(0, 1fr); }
	.nx-choc { align-items: flex-start; }
	.nx-cho__strip { grid-template-columns: minmax(0, 1fr); }
	.nx-cho__strip li + li { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.nx-cho__node { opacity: 1; }
	.nx-cho__box, .nx-cho__glow { animation: none; }
}