/* =====================================================================
   NEW HERO: a second hero design, on its own page (page-new-hero.php)
   =====================================================================
   Built from the owner's comp (1774 x 887): a four-line headline ending in
   "businesses grow.", a project dashboard with service chips floating round
   it, and a strip of platform marks underneath.

   COLOURS ARE THE LOGO'S, lightened: a brighter red (#EF4444; the logo itself
   is #E21F25, which read too dark here) everywhere the comp used green,
   its grey (#9E9E9E) where the comp used orange and peach. Everything else
   is ink on white.

   Sizes are in vw against the comp's 1774px width (1vw = 17.74px there),
   with px floors so nothing gets too small. The illustration is one box with
   the comp's proportions (874 x 630); everything in it is placed in percent
   of that box, so the arrangement holds at any width.

   Motion: entrance on load (lines rise, the swash draws, the dashboard
   swings in, chips pop, numbers count, bars and the goal ring fill), then a
   slow idle (chips float, dots travel the orbit) and a small tilt that
   follows the pointer. All of it stops for visitors who ask for reduced
   motion.

   Self-contained: the theme's main.css is dequeued on this page.
   ===================================================================== */

html:has(.nh-page) { overflow-x: hidden; }
.nh-page {
	--nh-bg:     #FFFFFF;
	--nh-ink:    #121518;
	--nh-body:   #4D545B;
	--nh-red:    #EF4444;
	--nh-red-d:  #EF4444;
	--nh-red-t:  #FDECEC;
	--nh-grey:   #9E9E9E;
	--nh-grey-d: #5E6166;
	--nh-grey-t: #F1F1F2;
	--nh-head:   'Inter', system-ui, sans-serif;
	--nh-sans:   'DM Sans', 'Inter', system-ui, sans-serif;
	--nh-ease:   cubic-bezier(.2, .72, .18, 1);
	--nh-pad:    clamp(16px, 4vw, 88px); /* side padding for every section */

	margin: 0;
	background: var(--nh-bg);
	color: var(--nh-ink);
	font-family: var(--nh-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.nh-page *, .nh-page *::before, .nh-page *::after { box-sizing: border-box; }
.nh-page a { text-decoration: none; }
.nh-page svg { display: block; }

/* The info strip, top bar and its menus live in assets/css/nh/chrome.css. */

/* ================================================================ BUTTONS */

.nh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: clamp(48px, 3.3vw, 60px);
	padding: 0 clamp(22px, 2vw, 36px);
	border-radius: 16px;
	font-family: var(--nh-sans);
	font-size: clamp(15px, 1.1vw, 19.5px);
	font-weight: 500;
	white-space: nowrap;
	transition: transform .25s var(--nh-ease), box-shadow .25s var(--nh-ease), background .2s;
}
.nh-btn svg { width: 1.05em; height: auto; transition: transform .25s var(--nh-ease); }
.nh-btn:hover { transform: translateY(-3px); }
.nh-btn:hover svg { transform: translateX(4px); }
.nh-btn--go {
	color: #fff;
	background: linear-gradient(180deg, #F35A5F 0%, var(--nh-red-d) 100%);
	box-shadow: 0 14px 28px -14px rgba(239, 68, 68, .8), inset 0 1px 0 rgba(255,255,255,.18);
}
.nh-btn--go:hover { box-shadow: 0 20px 36px -16px rgba(239, 68, 68, .85), inset 0 1px 0 rgba(255,255,255,.18); }
.nh-btn--ghost {
	color: var(--nh-ink);
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .08);
	box-shadow: 0 12px 30px -18px rgba(18, 21, 24, .35);
	font-weight: 600;
}
.nh-btn--ghost .nh-play { width: .7em; }

/* =================================================================== HERO */

.nh-hero {
	position: relative;
	overflow-x: clip;
	padding: 0 var(--nh-pad);
	display: flex;
	align-items: flex-start;
}

.nh-copy {
	position: relative;
	z-index: 3;
	width: 48vw;
	padding-top: clamp(40px, 5.9vw, 110px);
}

.nh-eyebrow {
	display: flex;
	align-items: center;
	gap: .8em;
	margin: 0;
	font-size: clamp(12px, .88vw, 16px);
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #5A6168;
}
.nh-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: #5A6168; flex: none; }
.nh-eyebrow .nh-eyebrow__dot { width: 10px; height: 10px; background: var(--nh-red); margin-right: .2em; }

.nh-title {
	margin: clamp(14px, 1.25vw, 24px) 0 0;
	font-family: var(--nh-head);
	font-size: clamp(36px, 3.68vw, 70px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.04em;
	color: var(--nh-ink);
}
.nh-ln { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.nh-ln > span { display: inline-block; }
.nh-title em, .nh-title em .nh-grow {
	font-style: normal;
	background: linear-gradient(95deg, #F35A5F 0%, var(--nh-red) 45%, var(--nh-red-d) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.nh-grow { position: relative; display: inline-block; }
.nh-swash {
	position: absolute;
	left: 8%;
	width: 92%;
	bottom: -.1em;
	height: .14em;
	color: #F3B6B8;
	overflow: visible;
}

.nh-sub {
	margin: clamp(14px, .75vw, 16px) 0 0;
	max-width: 36em;
	font-size: clamp(16px, 1.08vw, 20px);
	line-height: 1.55;
	color: var(--nh-body);
}

.nh-actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 1.55vw, 28px);
	margin-top: clamp(22px, 1.5vw, 30px);
}

.nh-tags {
	display: flex;
	flex-wrap: wrap;
	width: 56vw;
	gap: 6px 0;
	list-style: none;
	margin: clamp(20px, 1.6vw, 30px) 0 0;
	padding: 0;
	font-size: clamp(13.5px, .95vw, 17px);
	color: #5A6168;
}
.nh-tags li { display: inline-flex; align-items: center; }
.nh-tags li + li::before {
	content: "";
	width: 5px; height: 5px;
	margin: 0 .9em;
	border-radius: 50%;
	background: var(--nh-red);
	opacity: .75;
}
.nh-tags li:last-child { color: #262B30; font-weight: 500; }

/* ============================================================ PLATFORMS */

.nh-platforms {
	position: relative;
	z-index: 3;
	padding: clamp(28px, 2.4vw, 44px) var(--nh-pad) clamp(36px, 3vw, 56px);
}
.nh-platforms__t {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: clamp(11px, .72vw, 13px);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #767C83;
}
.nh-platforms__t::after { content: ""; width: 60px; height: 1px; background: rgba(18, 21, 24, .15); }
.nh-platforms ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 28px;
	list-style: none;
	margin: clamp(18px, 1.6vw, 28px) 0 0;
	padding: 0;
}
.nh-platforms li { display: flex; align-items: center; gap: 8px; }
.nh-mark {
	display: block;
	width: calc(var(--w) / 1774 * 100vw);
	min-width: calc(var(--w) * .6px);
	height: calc(var(--h) / 1774 * 100vw);
	min-height: calc(var(--h) * .6px);
	background: #8D9298;
	-webkit-mask: var(--src) no-repeat left center / contain;
	mask: var(--src) no-repeat left center / contain;
	transition: background .25s;
}
.nh-mark__txt { font-family: var(--nh-head); font-size: clamp(16px, 1.25vw, 23px); font-weight: 500; color: #8D9298; letter-spacing: -.01em; }
.nh-platforms li:hover .nh-mark { background: var(--nh-ink); }

/* ============================================================ ILLUSTRATION */

.nh-visual {
	position: absolute;
	z-index: 1;
	right: 0;
	top: clamp(0px, 1.2vw, 24px);
	width: 49.3vw;
	aspect-ratio: 874 / 630;
	container-type: inline-size;
	--rx: 0deg;
	--ry: 0deg;
}

.nh-blob {
	position: absolute;
	left: 1%;
	top: -6%;
	width: 98%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, #FEF5F5 0%, #FFF9F9 55%, rgba(255, 249, 249, .5) 80%, rgba(255, 255, 255, 0) 100%);
	animation: nh-breathe 12s ease-in-out infinite;
}
.nh-blob--edge {
	left: 86%;
	top: 20%;
	width: 30%;
	background: radial-gradient(closest-side, #FEF4F4 0%, rgba(255, 255, 255, 0) 100%);
	animation-delay: -5s;
}

.nh-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nh-orbit path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nh-draw 2.4s .9s var(--nh-ease) forwards; }

/* ---- the dashboard ---- */
.nh-tilt {
	position: absolute;
	left: 7.1%;
	top: 21.9%;
	width: 82.2%;
	perspective: 1700px;
	animation: nh-float 7s 2s ease-in-out infinite;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .5s var(--nh-ease);
	z-index: 2;
}
.nh-dash {
	container-type: inline-size;
	aspect-ratio: 718 / 412;
	display: grid;
	grid-template-columns: 20.5% 1fr;
	border-radius: 2.4cqw;
	background: #FFFFFF;
	border: 1px solid rgba(18, 21, 24, .06);
	box-shadow: 0 40px 80px -40px rgba(60, 30, 30, .4), 0 10px 30px -18px rgba(18, 21, 24, .2), inset 0 1px 0 #fff;
	transform: rotateY(-11deg) rotateX(5deg) rotateZ(-1.4deg);
	transform-origin: 30% 50%;
	animation: nh-dash-in 1.3s .45s var(--nh-ease) both;
	overflow: hidden;
}
.nh-dash__side { display: flex; flex-direction: column; gap: .3cqw; padding: 3.4cqw 1.6cqw 0; font-size: 1.5cqw; color: #4E555B; }
.nh-dash__mark { display: block; width: 6cqw; aspect-ratio: 1; margin: 0 0 3cqw 1.4cqw; background-size: 248% auto; background-position: 2% 50%; background-repeat: no-repeat; }
.nh-dash__side span:not(.nh-dash__mark) { display: flex; align-items: center; gap: 1.2cqw; padding: 1.15cqw 1.4cqw; border-radius: 1.3cqw; white-space: nowrap; }
.nh-dash__side svg { width: 1.8cqw; height: auto; flex: none; opacity: .75; }
.nh-dash__side .is-on { background: var(--nh-red-t); color: var(--nh-red-d); font-weight: 600; }
.nh-dash__side .is-on svg { opacity: 1; }
.nh-dash__main {
	margin: 2.4cqw 2.4cqw 2.4cqw 0;
	padding: 3.2cqw 3cqw;
	border-radius: 2cqw;
	background: rgba(255, 255, 255, .8);
	box-shadow: inset 0 0 0 1px rgba(18, 21, 24, .04);
	display: flex;
	flex-direction: column;
	gap: 2.2cqw;
}
.nh-dash__head { display: flex; justify-content: space-between; align-items: flex-start; }
.nh-dash__head strong { display: block; font-family: var(--nh-head); font-size: 2.6cqw; letter-spacing: -.03em; color: #14181B; }
.nh-dash__head small { display: block; margin-top: .5cqw; font-size: 1.3cqw; color: #61686E; }
.nh-dash__range { display: flex; align-items: center; gap: .9cqw; padding: 1cqw 1.6cqw; border-radius: 99px; border: 1px solid rgba(18, 21, 24, .1); font-size: 1.3cqw; color: #4E555B; background: #fff; }
.nh-dash__range svg { width: 1.7cqw; }
.nh-dash__range svg:last-child { width: 1.1cqw; margin-left: 1cqw; }

.nh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; }
.nh-stat {
	position: relative;
	padding: 1.9cqw 2cqw;
	border-radius: 1.6cqw;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .07);
	box-shadow: 0 10px 22px -18px rgba(18, 21, 24, .35);
	opacity: 0;
	animation: nh-up .7s var(--d, 1.4s) var(--nh-ease) forwards;
}
.nh-stat span { display: block; font-size: 1.32cqw; color: #4E555B; }
.nh-stat b { display: block; margin-top: 1.4cqw; font-family: var(--nh-head); font-size: 2.85cqw; letter-spacing: -.03em; color: #111518; }
.nh-stat i { position: absolute; right: 2cqw; top: 1.8cqw; width: 1.9cqw; color: var(--nh-red); }
.nh-stat em { position: absolute; right: 2cqw; bottom: 2.3cqw; font-style: normal; font-size: 1.25cqw; font-weight: 600; color: var(--nh-red); }
.nh-stat--g i, .nh-stat--g em { color: var(--nh-grey-d); }

.nh-dash__lower { display: grid; grid-template-columns: 1.95fr 1fr; gap: 1.8cqw; flex: 1; min-height: 0; }
.nh-chart, .nh-goal {
	border-radius: 1.6cqw;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .07);
	box-shadow: 0 10px 22px -18px rgba(18, 21, 24, .35);
	opacity: 0;
	animation: nh-up .7s var(--d, 1.7s) var(--nh-ease) forwards;
}
.nh-chart { display: flex; flex-direction: column; padding: 2cqw 2.2cqw 1.6cqw; }
.nh-chart__top { display: flex; justify-content: space-between; align-items: center; font-size: 1.4cqw; font-weight: 600; color: #1B2024; }
.nh-chart__top b { display: inline-flex; align-items: center; gap: .5cqw; padding: .6cqw 1.1cqw; border-radius: 1cqw; background: var(--nh-red-t); color: var(--nh-red-d); font-size: 1.35cqw; }
.nh-chart__top b svg { width: 1.4cqw; }
.nh-chart__bars { flex: 1; display: flex; align-items: flex-end; gap: 2.1cqw; margin-top: 1.4cqw; padding: 0 1.2cqw; border-left: 1px dashed rgba(18,21,24,.08); }
.nh-chart__bars i {
	flex: 1;
	height: calc(var(--h) * 100%);
	border-radius: 1cqw;
	background: linear-gradient(180deg, rgba(239, 68, 68, .62), rgba(239, 68, 68, .32));
	transform-origin: bottom;
	transform: scaleY(0);
	animation: nh-bar .9s var(--nh-ease) forwards;
}
.nh-chart__bars i:nth-child(n+6) { background: linear-gradient(180deg, #F35A5F, #EF4444); }
.nh-chart__bars i:nth-child(1) { animation-delay: 1.9s; }
.nh-chart__bars i:nth-child(2) { animation-delay: 1.96s; }
.nh-chart__bars i:nth-child(3) { animation-delay: 2.02s; }
.nh-chart__bars i:nth-child(4) { animation-delay: 2.08s; }
.nh-chart__bars i:nth-child(5) { animation-delay: 2.14s; }
.nh-chart__bars i:nth-child(6) { animation-delay: 2.2s; }
.nh-chart__bars i:nth-child(7) { animation-delay: 2.26s; }
.nh-chart__bars i:nth-child(8) { animation-delay: 2.32s; }
.nh-chart__bars i:nth-child(9) { animation-delay: 2.38s; }

.nh-goal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.6cqw; }
.nh-goal svg { width: 58%; }
/* the ring's gradient ends on the logo red, not a darker shade */
#nh-goal-g stop:last-child { stop-color: #EF4444; }
#nh-goal-g stop:first-child { stop-color: #F87171; }
.nh-goal__arc { stroke-dasharray: 100; stroke-dashoffset: 100; animation: nh-ring 1.6s 2s var(--nh-ease) forwards; }
.nh-goal b { position: absolute; top: 37%; left: 0; right: 0; text-align: center; font-family: var(--nh-head); font-size: 2.6cqw; letter-spacing: -.03em; color: #111518; }
.nh-goal > span { margin-top: 1.2cqw; font-size: 1.3cqw; font-weight: 600; color: #1B2024; }

/* ---- the floating chips ---- */
.nh-chip {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6%;
	padding: 2cqw 2.4cqw;
	border-radius: 2.2cqw;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .06);
	box-shadow: 0 26px 46px -28px rgba(60, 30, 30, .45), 0 6px 16px -10px rgba(18, 21, 24, .16);
	opacity: 0;
}
.nh-chip__ic { display: grid; place-items: center; flex: none; width: 5.6cqw; aspect-ratio: 1; border-radius: 1.4cqw; background: var(--nh-red-t); color: var(--nh-red); }
.nh-chip__ic svg { width: 52%; }
.nh-chip--g .nh-chip__ic { background: var(--nh-grey-t); color: var(--nh-grey-d); }
.nh-chip b { display: block; font-family: var(--nh-head); font-size: 1.85cqw; font-weight: 600; letter-spacing: -.02em; color: #14181B; white-space: nowrap; }
.nh-chip small { display: block; margin-top: .4cqw; font-size: 1.4cqw; color: #61686E; white-space: nowrap; }
.nh-chip--web { left: 10.3%; top: 6.3%;  width: 27.5%; rotate: -3deg; animation: nh-pop .8s 1.15s var(--nh-ease) forwards, nh-float2 6.4s 2.2s ease-in-out infinite; }
.nh-chip--ai  { left: 69.2%; top: 12%;   width: 24.4%; rotate: 4deg;  animation: nh-pop .8s 1.3s var(--nh-ease) forwards, nh-float 7.2s 2.3s ease-in-out infinite; }
.nh-chip--dm  { left: 7.4%;  top: 76%;   width: 25.7%; rotate: 4deg;  animation: nh-pop .8s 1.45s var(--nh-ease) forwards, nh-float 6.8s 2.4s ease-in-out infinite; }
.nh-chip--app { left: 61.4%; top: 81.7%; width: 27.2%; rotate: -1deg; animation: nh-pop .8s 1.6s var(--nh-ease) forwards, nh-float2 7.6s 2.5s ease-in-out infinite; }

/* ============================================================== KEYFRAMES */

.nh-in { opacity: 0; animation: nh-up .8s var(--d, 0s) var(--nh-ease) forwards; }
.nh-ln > span { transform: translateY(110%); animation: nh-rise 1s var(--d, 0s) var(--nh-ease) forwards; }
.nh-swash path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nh-ink 1s 1.1s var(--nh-ease) forwards; }

@keyframes nh-up     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes nh-rise   { to { transform: none; } }
@keyframes nh-ink    { to { stroke-dashoffset: 0; } }
@keyframes nh-draw   { to { stroke-dashoffset: 0; } }
@keyframes nh-bar    { to { transform: scaleY(1); } }
@keyframes nh-ring   { to { stroke-dashoffset: 28; } }
@keyframes nh-breathe{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes nh-float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes nh-float2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
@keyframes nh-pop    { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes nh-dash-in {
	from { opacity: 0; transform: rotateY(-30deg) rotateX(9deg) rotateZ(-2deg) translate3d(80px, 30px, 0); }
	to   { opacity: 1; transform: rotateY(-11deg) rotateX(5deg) rotateZ(-1.4deg); }
}

/* ============================================================= RESPONSIVE */

@media (max-width: 1100px) {
	.nh-hero { flex-direction: column; align-items: stretch; }
	.nh-copy { width: auto; max-width: 760px; }
	.nh-tags { width: auto; }
	.nh-visual { position: relative; top: auto; right: auto; width: 100%; max-width: 760px; margin: 48px auto 0; }
}

@media (max-width: 560px) {
	.nh-title { font-size: clamp(32px, 9.4vw, 46px); }
	.nh-actions .nh-btn { flex: 1 1 100%; }
	.nh-eyebrow { flex-wrap: wrap; gap: .6em; font-size: 11px; letter-spacing: .16em; }
	.nh-eyebrow span { white-space: nowrap; }
	.nh-tags { gap: 8px; }
	.nh-tags li { padding: 6px 12px; border-radius: 99px; background: var(--nh-grey-t); font-size: 13px; }
	.nh-tags li + li::before { display: none; }
	.nh-platforms ul { justify-content: flex-start; gap: 20px 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.nh-page *, .nh-page *::before, .nh-page *::after { animation: none !important; transition: none !important; }
	.nh-in, .nh-stat, .nh-chart, .nh-goal, .nh-chip { opacity: 1; }
	.nh-ln > span { transform: none; }
	.nh-swash path, .nh-orbit path { stroke-dashoffset: 0; }
	.nh-goal__arc { stroke-dashoffset: 28; }
	.nh-chart__bars i { transform: none; }
	.nh-tilt { transform: none; }
}