/* =========================================================
   Nihon Infotech — Shared design system for modern inner pages
   Used by: web-development, ecommerce-development,
            mobile-app-development, UiUX, digital-marketing,
            portfolio
   Brand: #F46E2E / #f45e33→#f79823 | Navy #050748
   Namespaces: .nh-sv-* shared, .nh-pf-* portfolio only
   ========================================================= */

.nh-sv-hero,
.nh-sv-stats,
.nh-sv-intro,
.nh-sv-services,
.nh-sv-strategy,
.nh-sv-tech,
.nh-sv-process,
.nh-sv-why,
.nh-sv-faq,
.nh-sv-cta,
.nh-pf-work,
.nh-ab-values,
.nh-ab-journey,
.nh-cr-jobs,
.nh-bl-posts,
.nh-ct-channels,
.nh-ct-main {
	--nh-orange: #f46e2e;
	--nh-amber: #f79823;
	--nh-grad: linear-gradient(105deg, #f45e33 0%, #f79823 100%);
	--nh-navy: #050748;
	--nh-text: #5c5c7a;
	--nh-line: rgba(5, 7, 72, 0.1);
	--nh-soft: #fff6ef;
	--nh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Shared primitives ---------- */
.nh-sv-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nh-orange);
}

.nh-sv-eyebrow--light {
	color: #f9a950;
}

.nh-sv-head {
	max-width: 760px;
	margin-bottom: 52px;
}

.nh-sv-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.nh-sv-head h2 {
	margin: 0;
	font-size: clamp(30px, 3.9vw, 46px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-head h2 span {
	background: var(--nh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nh-sv-head p {
	margin: 16px 0 0;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--nh-text);
}

.nh-sv-head--center p {
	margin-left: auto;
	margin-right: auto;
}

.nh-sv-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.35s var(--nh-ease), box-shadow 0.35s var(--nh-ease), background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.nh-sv-btn span[aria-hidden] {
	display: inline-block;
	transition: transform 0.3s var(--nh-ease);
}

.nh-sv-btn:hover span[aria-hidden] {
	transform: translateX(4px);
}

.nh-sv-btn--primary {
	color: #fff !important;
	background: var(--nh-grad);
	box-shadow: 0 14px 30px rgba(244, 94, 51, 0.28);
}

.nh-sv-btn--primary:hover {
	transform: translateY(-2px);
	color: #fff !important;
	box-shadow: 0 20px 38px rgba(244, 94, 51, 0.38);
}

.nh-sv-btn--ghost {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
}

.nh-sv-btn--ghost:hover {
	transform: translateY(-2px);
	color: var(--nh-navy) !important;
	background: #fff;
	border-color: #fff;
}

.nh-sv-btn--outline {
	color: var(--nh-navy) !important;
	border-color: rgba(5, 7, 72, 0.16);
	background: #fff;
}

.nh-sv-btn--outline:hover {
	transform: translateY(-2px);
	color: var(--nh-orange) !important;
	border-color: rgba(244, 110, 46, 0.5);
	box-shadow: 0 16px 32px rgba(5, 7, 72, 0.08);
}

.nh-sv-btn--solid {
	color: var(--nh-orange) !important;
	background: #fff;
	box-shadow: 0 14px 30px rgba(5, 7, 72, 0.18);
}

.nh-sv-btn--solid:hover {
	transform: translateY(-2px);
	color: var(--nh-orange) !important;
	box-shadow: 0 20px 38px rgba(5, 7, 72, 0.26);
}

/* =========================================================
   HERO
   ========================================================= */
.nh-sv-hero {
	position: relative;
	overflow: hidden;
	padding: 170px 0 150px;
	background: #050748;
	isolation: isolate;
}

.nh-sv-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 70% 60% at 88% 8%, rgba(244, 94, 51, 0.38) 0%, transparent 58%),
		radial-gradient(ellipse 60% 55% at 6% 92%, rgba(247, 152, 35, 0.2) 0%, transparent 55%),
		linear-gradient(160deg, #070a52 0%, #050748 55%, #04052f 100%);
}

.nh-sv-hero__lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 78%);
}

.nh-sv-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
}

.nh-sv-hero__orb--1 {
	top: -80px;
	right: 12%;
	width: 340px;
	height: 340px;
	background: rgba(244, 94, 51, 0.6);
	animation: nh-sv-float 14s ease-in-out infinite;
}

.nh-sv-hero__orb--2 {
	bottom: -120px;
	left: -60px;
	width: 300px;
	height: 300px;
	background: rgba(247, 152, 35, 0.35);
	animation: nh-sv-float 18s ease-in-out infinite reverse;
}

.nh-sv-hero__inner {
	position: relative;
	z-index: 1;
}

.nh-sv-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(36px, 5vw, 70px);
	align-items: center;
}

.nh-sv-hero__copy {
	animation: nh-sv-rise 0.8s var(--nh-ease) both;
}

/* Centered variant for pages whose hero has no side visual. */
.nh-sv-hero--center {
	padding: 150px 0 130px;
}

.nh-sv-hero--center .nh-sv-hero__grid {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.nh-sv-hero--center .nh-sv-hero__copy {
	max-width: 800px;
}

.nh-sv-hero--center .nh-sv-hero__lead {
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}

.nh-sv-hero--center .nh-sv-hero__cta,
.nh-sv-hero--center .nh-sv-hero__points {
	justify-content: center;
}

.nh-sv-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 8px 16px 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.88);
}

.nh-sv-hero__pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
}

.nh-sv-hero__pulse::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid rgba(74, 222, 128, 0.6);
	animation: nh-sv-pulse 2s ease-out infinite;
}

.nh-sv-hero h1 {
	margin: 0;
	font-size: clamp(34px, 4.6vw, 58px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: #fff;
	text-transform: none;
}

/* nowrap keeps hyphenated terms ("E-Commerce") from splitting across lines. */
.nh-sv-hero h1 span {
	white-space: nowrap;
	background: linear-gradient(105deg, #ff9a5a 0%, #f9c74f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* responsive.css centers every <p> under 767px, so body copy sets its own alignment. */
.nh-sv-hero__lead {
	margin: 22px 0 0;
	max-width: 540px;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.75;
	text-align: left;
	color: rgba(255, 255, 255, 0.76);
}

.nh-sv-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.nh-sv-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin: 34px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	list-style: none;
}

.nh-sv-hero__points li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.74);
}

.nh-sv-hero__points i {
	font-size: 10px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(244, 110, 46, 0.9);
}

/* ---------- Hero visual: browser window ---------- */
.nh-sv-hero__stage {
	position: relative;
	animation: nh-sv-rise 0.9s 0.12s var(--nh-ease) both;
}

.nh-sv-hero__window {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(9, 11, 62, 0.72);
	backdrop-filter: blur(14px);
	box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
	overflow: hidden;
}

.nh-sv-hero__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
}

.nh-sv-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}

.nh-sv-hero__dot:first-child { background: #ff5f57; }
.nh-sv-hero__dot:nth-child(2) { background: #febc2e; }
.nh-sv-hero__dot:nth-child(3) { background: #28c840; }

.nh-sv-hero__url {
	flex: 1;
	margin-left: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	font-size: 12px;
	font-style: normal;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nh-sv-hero__window-body {
	padding: 26px 24px 28px;
}

.nh-sv-hero__scores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	text-align: center;
}

.nh-sv-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.nh-sv-score__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: conic-gradient(#4ade80 calc(var(--val) * 1%), rgba(255, 255, 255, 0.1) 0);
}

.nh-sv-score__ring::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: #0a0c46;
}

.nh-sv-score__ring b {
	position: relative;
	z-index: 1;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.nh-sv-score__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.nh-sv-hero__lines-mock {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: grid;
	gap: 12px;
}

.nh-sv-hero__lines-mock span {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.09);
}

.nh-sv-hero__lines-mock span:nth-child(1) { width: 92%; background: linear-gradient(90deg, rgba(244, 94, 51, 0.6), rgba(247, 152, 35, 0.18)); }
.nh-sv-hero__lines-mock span:nth-child(2) { width: 74%; }
.nh-sv-hero__lines-mock span:nth-child(3) { width: 58%; }

/* Hero window variant: store dashboard */
.nh-sv-dash__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.nh-sv-dash__value {
	display: block;
	margin-top: 8px;
	font-size: clamp(30px, 3vw, 38px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

.nh-sv-dash__delta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #4ade80;
	background: rgba(74, 222, 128, 0.12);
}

.nh-sv-dash__delta i {
	font-size: 10px;
}

.nh-sv-chart {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	height: 96px;
	margin: 24px 0 0;
}

.nh-sv-chart span {
	flex: 1;
	height: var(--h, 40%);
	border-radius: 6px 6px 3px 3px;
	background: rgba(255, 255, 255, 0.12);
}

.nh-sv-chart span:nth-last-child(-n + 3) {
	background: linear-gradient(180deg, #f79823 0%, #f45e33 100%);
}

.nh-sv-dash__kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nh-sv-dash__kpi {
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.nh-sv-dash__kpi strong {
	display: block;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

.nh-sv-dash__kpi small {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.55);
}

/* Hero visual variant: design canvas */
.nh-sv-canvas {
	display: grid;
	gap: 20px;
}

.nh-sv-canvas__label {
	display: block;
	margin-bottom: 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.nh-sv-canvas__swatches {
	display: flex;
	gap: 8px;
}

.nh-sv-canvas__swatches span {
	flex: 1;
	height: 46px;
	border-radius: 12px;
	/* Outline keeps dark swatches legible against the dark window. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.nh-sv-canvas__type {
	display: grid;
	gap: 9px;
}

.nh-sv-canvas__type div {
	display: flex;
	align-items: baseline;
	gap: 12px;
	color: #fff;
}

.nh-sv-canvas__type b {
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.nh-sv-canvas__type i {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
}

.nh-sv-canvas__type div:nth-child(1) b { font-size: 26px; }
.nh-sv-canvas__type div:nth-child(2) b { font-size: 19px; }
.nh-sv-canvas__type div:nth-child(3) b { font-size: 14px; color: rgba(255, 255, 255, 0.6); }

.nh-sv-canvas__components {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.nh-sv-canvas__btn {
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--nh-grad);
	box-shadow: 0 8px 18px rgba(244, 94, 51, 0.3);
}

.nh-sv-canvas__field {
	flex: 1;
	min-width: 90px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.nh-sv-canvas__toggle {
	position: relative;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--nh-grad);
}

.nh-sv-canvas__toggle::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
}

/* Decorative last row: gives the floating chip something safe to overlap. */
.nh-sv-canvas__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.nh-sv-canvas__thumbs span {
	display: block;
	height: 66px;
	padding: 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.nh-sv-canvas__thumbs span::before {
	content: "";
	display: block;
	height: 8px;
	width: 62%;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.nh-sv-canvas__thumbs span::after {
	content: "";
	display: block;
	height: 22px;
	margin-top: 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
}

.nh-sv-canvas__thumbs span:first-child::after {
	background: var(--nh-grad);
	opacity: 0.65;
}

/* Hero visual variant: phone mockup */
.nh-sv-hero__stage--phone {
	display: flex;
	justify-content: center;
}

.nh-sv-phone-wrap {
	position: relative;
}

.nh-sv-phone {
	position: relative;
	z-index: 1;
	width: 300px;
	max-width: 100%;
	padding: 12px;
	border-radius: 46px;
	background: linear-gradient(160deg, #2b2e66 0%, #14163a 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.nh-sv-phone__notch {
	position: absolute;
	top: 24px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	width: 82px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
}

.nh-sv-phone__screen {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 36px 16px 14px;
	border-radius: 36px;
	background: #090b34;
	overflow: hidden;
}

.nh-sv-phone__banner {
	padding: 15px 16px;
	border-radius: 16px;
	background: var(--nh-grad);
	box-shadow: 0 10px 22px rgba(244, 94, 51, 0.3);
}

.nh-sv-phone__banner small {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.nh-sv-phone__banner strong {
	display: block;
	margin-top: 5px;
	font-size: 23px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

.nh-sv-phone__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.nh-sv-phone__tiles span {
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.nh-sv-phone__tiles span:first-child {
	background: rgba(244, 110, 46, 0.18);
	border-color: rgba(244, 110, 46, 0.32);
}

.nh-sv-phone__rows {
	display: grid;
	gap: 10px;
}

.nh-sv-phone__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nh-sv-phone__row i {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
}

.nh-sv-phone__row span {
	flex: 1;
	display: grid;
	gap: 6px;
}

.nh-sv-phone__row b {
	display: block;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
}

.nh-sv-phone__row b:last-child {
	width: 58%;
	background: rgba(255, 255, 255, 0.08);
}

.nh-sv-phone__nav {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding: 12px 4px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nh-sv-phone__nav span {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.09);
}

.nh-sv-phone__nav span:first-child {
	background: var(--nh-grad);
}

/* Offsets clear the phone's gradient banner so the mock stays readable. */
.nh-sv-hero__chip--rating {
	top: 208px;
	left: -56px;
	animation: nh-sv-float 7s ease-in-out infinite;
}

.nh-sv-hero__chip--downloads {
	right: -56px;
	bottom: 46px;
	animation: nh-sv-float 9s ease-in-out infinite reverse;
}

.nh-sv-hero__chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

.nh-sv-hero__chip i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	font-size: 15px;
	color: #fff;
	background: var(--nh-grad);
}

.nh-sv-hero__chip strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--nh-navy);
}

.nh-sv-hero__chip small {
	font-size: 12px;
	color: var(--nh-text);
}

/* --tl / --br are position-only variants for pages that reuse the window visual. */
.nh-sv-hero__chip--speed,
.nh-sv-hero__chip--tl {
	top: -26px;
	left: -30px;
	animation: nh-sv-float 7s ease-in-out infinite;
}

.nh-sv-hero__chip--secure,
.nh-sv-hero__chip--br {
	right: -24px;
	bottom: -28px;
	animation: nh-sv-float 9s ease-in-out infinite reverse;
}

@keyframes nh-sv-rise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes nh-sv-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes nh-sv-pulse {
	0% { opacity: 1; transform: scale(0.6); }
	100% { opacity: 0; transform: scale(1.6); }
}

/* =========================================================
   STATS (overlapping card)
   ========================================================= */
/* Top 80px stays transparent so the card floats over the dark hero. */
.nh-sv-stats {
	position: relative;
	z-index: 2;
	padding: 0;
	margin-top: -80px;
	background: linear-gradient(180deg, transparent 0, transparent 80px, #fff 80px, #fff 100%);
}

.nh-sv-stats__card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	padding: 36px 24px;
	border-radius: 24px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 26px 60px rgba(5, 7, 72, 0.1);
}

.nh-sv-stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 8px 12px;
	text-align: left;
}

.nh-sv-stat + .nh-sv-stat {
	border-left: 1px solid var(--nh-line);
}

.nh-sv-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: linear-gradient(160deg, #fff7ef 0%, #ffe8d4 100%);
	border: 1px solid rgba(244, 110, 46, 0.16);
}

.nh-sv-stat__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.nh-sv-stat__num {
	display: block;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--nh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nh-sv-stat p {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   INTRO / OVERVIEW
   ========================================================= */
.nh-sv-intro {
	padding: 100px 0 110px;
	background: #fff;
}

.nh-sv-intro__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

.nh-sv-intro__media {
	position: relative;
	margin: 0;
}

.nh-sv-intro__media::before {
	content: "";
	position: absolute;
	inset: 16% -7% -7% 16%;
	border-radius: 28px;
	background: var(--nh-grad);
	opacity: 0.9;
	z-index: 0;
}

.nh-sv-intro__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	border-radius: 28px;
}

.nh-sv-intro__float {
	position: absolute;
	z-index: 2;
	right: -18px;
	top: 22px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(5, 7, 72, 0.14);
}

.nh-sv-intro__float strong {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: var(--nh-navy);
}

.nh-sv-intro__float small {
	font-size: 12px;
	color: var(--nh-text);
}

.nh-sv-intro__float i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: #fff;
	background: var(--nh-grad);
}

.nh-sv-intro__content h2 {
	margin: 0 0 20px;
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-intro__content p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.78;
	text-align: left;
	color: var(--nh-text);
}

.nh-sv-intro__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 20px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.nh-sv-intro__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--nh-navy);
}

.nh-sv-intro__list i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	font-size: 10px;
	color: var(--nh-orange);
	background: rgba(244, 110, 46, 0.12);
}

.nh-sv-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* =========================================================
   SERVICES
   ========================================================= */
.nh-sv-services {
	padding: 100px 0;
	background:
		radial-gradient(circle at 12% 16%, rgba(249, 169, 80, 0.18) 0%, transparent 42%),
		radial-gradient(circle at 90% 82%, rgba(244, 94, 51, 0.1) 0%, transparent 44%),
		#fffaf6;
}

.nh-sv-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.nh-sv-service {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 26px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 10px 28px rgba(5, 7, 72, 0.05);
	overflow: hidden;
	transition: transform 0.4s var(--nh-ease), box-shadow 0.4s var(--nh-ease), border-color 0.35s ease;
}

.nh-sv-service--a { background: linear-gradient(180deg, #fff 0%, #fff7ef 100%); }
.nh-sv-service--b { background: linear-gradient(180deg, #fff 0%, #f3f6ff 100%); }
.nh-sv-service--c { background: linear-gradient(180deg, #fff 0%, #f2fbf4 100%); }
.nh-sv-service--d { background: linear-gradient(180deg, #fff 0%, #eef9ff 100%); }
.nh-sv-service--e { background: linear-gradient(180deg, #fff 0%, #fff4f8 100%); }
.nh-sv-service--f { background: linear-gradient(180deg, #fff 0%, #fff8ef 100%); }

.nh-sv-service::after {
	content: "";
	position: absolute;
	right: -34px;
	bottom: -34px;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: rgba(244, 110, 46, 0.07);
	transition: transform 0.45s var(--nh-ease), background 0.35s ease;
}

.nh-sv-service:hover {
	transform: translateY(-8px);
	border-color: rgba(244, 110, 46, 0.35);
	box-shadow: 0 26px 52px rgba(244, 94, 51, 0.15);
}

.nh-sv-service:hover::after {
	transform: scale(1.35);
	background: rgba(244, 110, 46, 0.13);
}

.nh-sv-service__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid rgba(244, 110, 46, 0.18);
	box-shadow: 0 8px 18px rgba(244, 94, 51, 0.1);
	transition: transform 0.4s var(--nh-ease), background 0.35s ease, border-color 0.35s ease;
}

.nh-sv-service__icon img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

/* Icon fonts are the fallback for services the theme has no SVG for. */
.nh-sv-service__icon i {
	font-size: 25px;
	line-height: 1;
	background: var(--nh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: -webkit-text-fill-color 0.35s ease, color 0.35s ease;
}

.nh-sv-service:hover .nh-sv-service__icon i {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.nh-sv-service:hover .nh-sv-service__icon {
	transform: scale(1.06) rotate(-3deg);
	background: var(--nh-grad);
	border-color: transparent;
}

.nh-sv-service:hover .nh-sv-service__icon img {
	filter: brightness(0) invert(1);
}

.nh-sv-service h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-service p {
	position: relative;
	z-index: 1;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.68;
	text-align: left;
	color: var(--nh-text);
}

.nh-sv-service__tags {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.nh-sv-service__tags li {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--nh-navy);
	background: rgba(5, 7, 72, 0.05);
}

.nh-sv-services__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 44px;
	padding: 30px 34px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid rgba(244, 110, 46, 0.22);
	box-shadow: 0 14px 34px rgba(5, 7, 72, 0.05);
}

.nh-sv-services__cta p {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--nh-navy);
}

.nh-sv-services__cta strong {
	background: var(--nh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------- Wide platform cards (2-up) ---------- */
.nh-sv-platforms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.nh-sv-platform {
	position: relative;
	display: grid;
	grid-template-columns: 148px 1fr;
	gap: 24px;
	align-items: start;
	padding: 28px 28px 26px;
	border-radius: 22px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 10px 28px rgba(5, 7, 72, 0.05);
	overflow: hidden;
	transition: transform 0.4s var(--nh-ease), box-shadow 0.4s var(--nh-ease), border-color 0.35s ease;
}

.nh-sv-platform--a { background: linear-gradient(160deg, #fff 0%, #f2fbf4 100%); }
.nh-sv-platform--b { background: linear-gradient(160deg, #fff 0%, #f7f3ff 100%); }
.nh-sv-platform--c { background: linear-gradient(160deg, #fff 0%, #fff7ef 100%); }
.nh-sv-platform--d { background: linear-gradient(160deg, #fff 0%, #eef7ff 100%); }

.nh-sv-platform:hover {
	transform: translateY(-8px);
	border-color: rgba(244, 110, 46, 0.32);
	box-shadow: 0 26px 52px rgba(244, 94, 51, 0.14);
}

.nh-sv-platform__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(5, 7, 72, 0.05);
}

.nh-sv-platform__media img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.45s var(--nh-ease);
}

.nh-sv-platform:hover .nh-sv-platform__media img {
	transform: scale(1.05);
}

.nh-sv-platform__body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.nh-sv-platform__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 14px 7px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: var(--nh-navy);
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.08);
	box-shadow: 0 6px 16px rgba(5, 7, 72, 0.05);
}

.nh-sv-platform__badge img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.nh-sv-platform h3 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-platform p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.7;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   TECH STACK (dark bento)
   ========================================================= */
.nh-sv-tech {
	position: relative;
	overflow: hidden;
	padding: 100px 0;
	background:
		radial-gradient(ellipse 80% 60% at 10% 0%, rgba(244, 94, 51, 0.26) 0%, transparent 55%),
		radial-gradient(ellipse 70% 50% at 90% 100%, rgba(247, 152, 35, 0.18) 0%, transparent 52%),
		#050748;
}

.nh-sv-tech .nh-sv-head h2 {
	color: #fff;
}

.nh-sv-tech .nh-sv-head p {
	color: rgba(255, 255, 255, 0.7);
}

.nh-sv-tech__bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.nh-sv-tech__card {
	padding: 24px 22px 20px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	transition: transform 0.35s var(--nh-ease), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.nh-sv-tech__card:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(249, 169, 80, 0.45);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.nh-sv-tech__card h3 {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
	text-transform: none;
}

.nh-sv-tech__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nh-sv-tech__list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px 8px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.25s ease, border-color 0.25s ease;
}

.nh-sv-tech__list li:hover {
	background: rgba(249, 169, 80, 0.16);
	border-color: rgba(249, 169, 80, 0.35);
}

.nh-sv-tech__list img {
	display: block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.nh-sv-tech__list span {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
   STRATEGY (dark split)
   ========================================================= */
.nh-sv-strategy {
	position: relative;
	overflow: hidden;
	padding: 100px 0;
	background:
		radial-gradient(ellipse 60% 55% at 92% 12%, rgba(244, 94, 51, 0.3) 0%, transparent 58%),
		radial-gradient(ellipse 55% 50% at 4% 88%, rgba(247, 152, 35, 0.16) 0%, transparent 55%),
		#050748;
}

.nh-sv-strategy__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(36px, 5vw, 70px);
	align-items: center;
}

.nh-sv-strategy h2 {
	margin: 0 0 14px;
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: #fff;
	text-transform: none;
}

.nh-sv-strategy h2 span {
	background: linear-gradient(105deg, #ff9a5a 0%, #f9c74f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nh-sv-strategy p.nh-sv-strategy__sub {
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	text-align: left;
	color: rgba(255, 255, 255, 0.86);
}

.nh-sv-strategy p {
	margin: 0;
	font-size: 16px;
	line-height: 1.78;
	text-align: left;
	color: rgba(255, 255, 255, 0.68);
}

.nh-sv-strategy__copy p + p {
	margin-top: 16px;
}

.nh-sv-strategy__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 22px;
	margin: 28px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	list-style: none;
}

.nh-sv-strategy__points li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.nh-sv-strategy__points i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	font-size: 9px;
	color: #fff;
	background: var(--nh-grad);
}

.nh-sv-strategy__cta {
	margin-top: 32px;
}

/* Strategy side panel, used where a page has a list instead of an image. */
.nh-sv-strategy__panel {
	padding: clamp(24px, 3vw, 34px);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(12px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32);
}

.nh-sv-strategy__panel h3 {
	margin: 0 0 20px;
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	text-transform: none;
}

.nh-sv-strategy__panel p {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	text-align: left;
	color: rgba(255, 255, 255, 0.72);
}

.nh-sv-strategy__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.nh-sv-strategy__panel-icon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/* Two panels stacked in the strategy column (mission / vision). */
.nh-sv-strategy__panels {
	display: grid;
	gap: clamp(18px, 2vw, 24px);
}

.nh-sv-strategy__panel ul {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nh-sv-strategy__panel li {
	position: relative;
	padding-left: 30px;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

.nh-sv-strategy__panel li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--nh-grad);
	box-shadow: 0 4px 10px rgba(244, 94, 51, 0.32);
}

.nh-sv-strategy__panel li::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 5.5px;
	width: 7px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.nh-sv-strategy__media {
	position: relative;
	margin: 0;
}

.nh-sv-strategy__media::before {
	content: "";
	position: absolute;
	inset: -14px -14px 14px 14px;
	border-radius: 28px;
	background: var(--nh-grad);
	opacity: 0.55;
	z-index: 0;
}

.nh-sv-strategy__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	border-radius: 24px;
}

/* =========================================================
   PROCESS
   ========================================================= */
.nh-sv-process {
	padding: 100px 0;
	background: var(--nh-soft);
}

.nh-sv-process__track {
	position: relative;
	display: grid;
	gap: 22px;
}

.nh-sv-process__track::before {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 33px;
	width: 2px;
	background: linear-gradient(180deg, rgba(244, 110, 46, 0.45) 0%, rgba(244, 110, 46, 0.12) 100%);
}

.nh-sv-step {
	position: relative;
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 26px;
	align-items: start;
}

.nh-sv-step__num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 20px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--nh-orange);
	background: #fff;
	border: 1px solid rgba(244, 110, 46, 0.22);
	box-shadow: 0 12px 26px rgba(244, 94, 51, 0.12);
	transition: transform 0.35s var(--nh-ease), background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.nh-sv-step__body {
	padding: 26px 28px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 10px 28px rgba(5, 7, 72, 0.05);
	transition: transform 0.35s var(--nh-ease), box-shadow 0.35s var(--nh-ease), border-color 0.35s ease;
}

.nh-sv-step:hover .nh-sv-step__num {
	transform: scale(1.05);
	color: #fff;
	background: var(--nh-grad);
	border-color: transparent;
}

.nh-sv-step:hover .nh-sv-step__body {
	transform: translateX(4px);
	border-color: rgba(244, 110, 46, 0.28);
	box-shadow: 0 20px 44px rgba(244, 94, 51, 0.12);
}

.nh-sv-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.nh-sv-step h3 {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-step__tag {
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nh-orange);
	background: rgba(244, 110, 46, 0.1);
}

.nh-sv-step p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   WHY CHOOSE
   ========================================================= */
.nh-sv-why {
	padding: 100px 0;
	background: #fff;
}

/* Tinted variant for pages where this section sits directly below the white intro. */
.nh-sv-why--soft {
	background: #fff9f4;
}

.nh-sv-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* Four reasons fit one row rather than leaving an orphan in a 3-up grid. */
.nh-sv-why__grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nh-sv-why__card {
	position: relative;
	padding: 30px 26px 28px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.07);
	box-shadow: 0 8px 24px rgba(5, 7, 72, 0.04);
	overflow: hidden;
	transition: transform 0.35s var(--nh-ease), box-shadow 0.35s var(--nh-ease), border-color 0.35s ease;
}

.nh-sv-why__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--nh-grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--nh-ease);
}

.nh-sv-why__card:hover {
	transform: translateY(-6px);
	border-color: rgba(244, 110, 46, 0.3);
	box-shadow: 0 22px 46px rgba(5, 7, 72, 0.1);
}

.nh-sv-why__card:hover::before {
	transform: scaleX(1);
}

.nh-sv-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	border-radius: 16px;
	background: linear-gradient(160deg, #fff7ef 0%, #ffe8d4 100%);
	border: 1px solid rgba(244, 110, 46, 0.16);
	transition: transform 0.35s var(--nh-ease), background 0.35s ease, border-color 0.35s ease;
}

.nh-sv-why__icon img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.nh-sv-why__card:hover .nh-sv-why__icon {
	transform: scale(1.06);
	background: var(--nh-grad);
	border-color: transparent;
}

.nh-sv-why__card:hover .nh-sv-why__icon img {
	filter: brightness(0) invert(1);
}

.nh-sv-why__card h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-why__card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.68;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   FAQ
   ========================================================= */
.nh-sv-faq {
	padding: 100px 0;
	background:
		radial-gradient(circle at 85% 12%, rgba(249, 169, 80, 0.14) 0%, transparent 42%),
		#fffaf6;
}

.nh-sv-faq__layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(32px, 4.5vw, 64px);
	align-items: start;
}

.nh-sv-faq__intro h2 {
	margin: 0 0 16px;
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-sv-faq__intro p {
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.7;
	text-align: left;
	color: var(--nh-text);
}

.nh-sv-faq__highlights {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.nh-sv-faq__highlights li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nh-navy);
}

.nh-sv-faq__highlights i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	font-size: 13px;
	color: var(--nh-orange);
	background: rgba(244, 110, 46, 0.12);
}

.nh-sv-faq .accordion-item {
	margin-bottom: 14px;
	border: 1px solid rgba(5, 7, 72, 0.08);
	border-radius: 16px !important;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(5, 7, 72, 0.04);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nh-sv-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
	border-color: rgba(244, 110, 46, 0.32);
	box-shadow: 0 18px 40px rgba(244, 94, 51, 0.1);
}

.nh-sv-faq .accordion-header {
	margin: 0;
}

.nh-sv-faq .accordion-button {
	padding: 22px 56px 22px 24px;
	border: 0;
	border-radius: 16px !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--nh-navy);
	background: transparent;
	box-shadow: none !important;
	text-transform: none;
	transition: color 0.3s ease;
}

.nh-sv-faq .accordion-button:not(.collapsed) {
	color: var(--nh-orange);
	background: transparent;
}

.nh-sv-faq .accordion-button::after {
	position: absolute;
	right: 20px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-image: none;
	background-color: rgba(244, 110, 46, 0.1);
	content: "\002B";
	font-size: 18px;
	font-weight: 700;
	color: var(--nh-orange);
	transition: transform 0.3s var(--nh-ease), background-color 0.3s ease, color 0.3s ease;
}

.nh-sv-faq .accordion-button:not(.collapsed)::after {
	transform: rotate(135deg);
	color: #fff;
	background-color: var(--nh-orange);
}

.nh-sv-faq .accordion-body {
	padding: 0 24px 24px;
}

.nh-sv-faq .accordion-body p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   CTA BAND
   ========================================================= */
.nh-sv-cta {
	position: relative;
	overflow: hidden;
	padding: 90px 0;
	background: var(--nh-grad);
	text-align: center;
}

.nh-sv-cta::before,
.nh-sv-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.nh-sv-cta::before {
	top: -110px;
	left: -70px;
	width: 280px;
	height: 280px;
}

.nh-sv-cta::after {
	right: -90px;
	bottom: -130px;
	width: 320px;
	height: 320px;
}

.nh-sv-cta .container {
	position: relative;
	z-index: 1;
}

.nh-sv-cta h2 {
	margin: 0 auto;
	max-width: 760px;
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #fff;
	text-transform: none;
}

.nh-sv-cta p {
	margin: 18px auto 0;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

.nh-sv-cta__btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 34px;
}

.nh-sv-cta__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   CONTACT (.nh-ct-*, contact template only)
   ========================================================= */
.nh-ct-channels {
	position: relative;
	z-index: 2;
	margin-top: -80px;
	padding: 0;
	background: linear-gradient(180deg, transparent 0, transparent 80px, #fff 80px, #fff 100%);
}

.nh-ct-channels__card {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 12px;
	border-radius: 28px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 28px 62px rgba(5, 7, 72, 0.13);
}

.nh-ct-channel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 22px;
	border-radius: 20px;
	transition: background 0.35s ease, transform 0.35s var(--nh-ease);
}

.nh-ct-channel + .nh-ct-channel {
	border-left: 1px solid rgba(5, 7, 72, 0.07);
}

.nh-ct-channel:hover {
	transform: translateY(-3px);
	background: var(--nh-soft);
}

.nh-ct-channel__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	font-size: 18px;
	color: #fff;
	background: var(--nh-grad);
	box-shadow: 0 10px 22px rgba(244, 94, 51, 0.26);
}

.nh-ct-channel__text {
	min-width: 0;
}

.nh-ct-channel__label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nh-orange);
}

.nh-ct-channel__value {
	display: block;
	margin: 5px 0 3px;
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	word-break: break-word;
}

.nh-ct-channel__meta {
	display: block;
	font-size: 12.5px;
	color: var(--nh-text);
}

/* ---------- Form + guidance ---------- */
.nh-ct-main {
	padding: clamp(64px, 7vw, 100px) 0 clamp(70px, 8vw, 110px);
	background: #fff;
}

.nh-ct-main__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(34px, 4vw, 62px);
	align-items: start;
}

.nh-ct-aside h2 {
	margin: 0 0 16px;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.035em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-ct-aside h2 span {
	background: var(--nh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nh-ct-aside > p {
	margin: 0;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.75;
	text-align: left;
	color: var(--nh-text);
}

.nh-ct-steps {
	margin: clamp(28px, 3vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

.nh-ct-step {
	position: relative;
	display: flex;
	gap: 16px;
	padding-bottom: 26px;
}

.nh-ct-step:last-child {
	padding-bottom: 0;
}

/* Threads the numbered markers together into a single sequence. */
.nh-ct-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 46px;
	bottom: 10px;
	left: 19px;
	width: 2px;
	background: linear-gradient(180deg, rgba(244, 110, 46, 0.38) 0%, rgba(244, 110, 46, 0) 100%);
}

.nh-ct-step__num {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: var(--nh-grad);
	box-shadow: 0 10px 20px rgba(244, 94, 51, 0.26);
}

.nh-ct-step h3 {
	margin: 0 0 7px;
	font-size: 17.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-ct-step p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	text-align: left;
	color: var(--nh-text);
}

.nh-ct-assure {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(26px, 3vw, 34px) 0 0;
	padding: 0;
	list-style: none;
}

.nh-ct-assure li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--nh-soft);
	border: 1px solid var(--nh-line);
	font-size: 13px;
	font-weight: 700;
	color: var(--nh-navy);
}

.nh-ct-assure i {
	font-size: 11.5px;
	color: var(--nh-orange);
}

/* Layout-only additions on top of the shared .nh-contact__form CF7 skin. */
.nh-ct-form {
	padding: clamp(26px, 3vw, 38px) !important;
	border-radius: 28px !important;
	box-shadow: 0 26px 60px rgba(5, 7, 72, 0.1) !important;
}

.nh-ct-form__head {
	margin-bottom: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(5, 7, 72, 0.07);
}

.nh-ct-form__head h3 {
	margin: 0 0 8px;
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-ct-form__head p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   BLOG (.nh-bl-*, blog template only)
   ========================================================= */
.nh-bl-search {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 540px;
	margin: 34px auto 0;
}

.nh-bl-search input[type="search"],
.nh-bl-search input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 54px;
	margin: 0;
	padding: 0 22px;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: rgba(255, 255, 255, 0.07) !important;
	font-size: 15px;
	color: #fff !important;
	box-shadow: none;
	transition: border-color 0.3s ease, background 0.3s ease;
}

.nh-bl-search input::placeholder {
	color: rgba(255, 255, 255, 0.52);
}

.nh-bl-search input:focus {
	outline: none;
	border-color: rgba(244, 152, 51, 0.6) !important;
	background: rgba(255, 255, 255, 0.11) !important;
}

.nh-bl-search button {
	flex-shrink: 0;
	height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(105deg, #f45e33 0%, #f79823 100%);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 14px 30px rgba(244, 94, 51, 0.32);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.nh-bl-search button:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(244, 94, 51, 0.42);
}

.nh-bl-posts {
	position: relative;
	z-index: 2;
	margin-top: -90px;
	padding: 0 0 clamp(70px, 8vw, 110px);
}

/* Ground starts where the hero ends, so the toolbar can float across the seam. */
.nh-bl-posts::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 90px 0 0;
	background:
		radial-gradient(ellipse 55% 45% at 8% 0%, rgba(244, 110, 46, 0.1) 0%, transparent 62%),
		radial-gradient(ellipse 45% 40% at 94% 32%, rgba(94, 92, 230, 0.07) 0%, transparent 58%),
		#fffaf6;
}

/* ---------- Cover story (lives in the hero) ---------- */
.nh-bl-cover {
	position: relative;
	padding: 14px;
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(16px);
	box-shadow: 0 34px 74px rgba(0, 0, 0, 0.42);
	animation: nh-sv-rise 0.9s 0.12s var(--nh-ease) both;
}

.nh-bl-cover::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 14% -7% -12% 5%;
	border-radius: 32px;
	background: linear-gradient(120deg, rgba(244, 94, 51, 0.5) 0%, rgba(247, 152, 35, 0.22) 100%);
	filter: blur(48px);
}

.nh-bl-cover__media {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
}

.nh-bl-cover__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.9s var(--nh-ease);
}

.nh-bl-cover:hover .nh-bl-cover__media img {
	transform: scale(1.04);
}

/* Bottom-left: these banners carry their own headline across the top. */
.nh-bl-cover__flag {
	position: absolute;
	bottom: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--nh-grad);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 10px 24px rgba(244, 94, 51, 0.36);
}

.nh-bl-cover__body {
	padding: 24px 12px 10px;
}

.nh-bl-cover__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.nh-bl-cover__meta strong {
	font-weight: 800;
	color: #ffb26b;
}

.nh-bl-cover h2 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 20px;
	font-size: clamp(21px, 1.9vw, 26px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-transform: none;
}

.nh-bl-cover h2 a {
	color: #fff;
	transition: color 0.3s ease;
}

.nh-bl-cover:hover h2 a {
	color: #ffb26b;
}

/* Turns the whole cover into one hit area without nesting links. */
.nh-bl-cover h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 28px;
}

.nh-bl-cover__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
}

.nh-bl-cover__link i {
	font-size: 12px;
	transition: transform 0.4s var(--nh-ease);
}

.nh-bl-cover:hover .nh-bl-cover__link i {
	transform: translateX(5px);
}

/* ---------- Floating toolbar ---------- */
.nh-bl-bar {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
	margin-bottom: clamp(38px, 4.5vw, 62px);
	padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
	border-radius: 26px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 28px 62px rgba(5, 7, 72, 0.13);
}

/* Shrinks so the pills keep the right-hand side of the bar to themselves. */
.nh-bl-bar__intro {
	flex: 1 1 320px;
	min-width: 0;
}

.nh-bl-bar h2 {
	margin: 8px 0 0;
	font-size: clamp(21px, 2vw, 27px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-bl-bar h2 span {
	background: var(--nh-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nh-bl-bar__note {
	max-width: 46ch;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	color: var(--nh-text);
}

.nh-bl-bar .nh-bl-filters {
	flex: 0 1 auto;
	margin: 0;
	justify-content: flex-end;
}

.nh-bl-filter {
	white-space: nowrap;
}

/* ---------- Post grid ---------- */
.nh-bl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.4vw, 30px);
}

.nh-bl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 14px 36px rgba(5, 7, 72, 0.05);
	transition: transform 0.5s var(--nh-ease), box-shadow 0.5s ease, border-color 0.4s ease;
}

.nh-bl-card:hover {
	transform: translateY(-8px);
	border-color: rgba(244, 110, 46, 0.26);
	box-shadow: 0 36px 72px rgba(5, 7, 72, 0.15);
}

/* Gradient hairline that draws across the top edge on hover. */
.nh-bl-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 3px;
	background: var(--nh-grad);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--nh-ease);
}

.nh-bl-card:hover::after {
	transform: scaleX(1);
}

.nh-bl-card__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--nh-soft);
}

/* 16:9 matches the landscape banners used as featured images, so nothing is cropped. */
.nh-bl-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.8s var(--nh-ease);
}

.nh-bl-card:hover .nh-bl-card__media img {
	transform: scale(1.06);
}

/* Scrim behind the chips, which sit low where the artwork has no text. */
.nh-bl-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 7, 72, 0.52) 0%, rgba(5, 7, 72, 0) 44%);
}

.nh-bl-chip {
	position: absolute;
	z-index: 1;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	box-shadow: 0 8px 18px rgba(5, 7, 72, 0.2);
}

.nh-bl-chip i {
	font-size: 10.5px;
}

.nh-bl-chip--cat {
	left: 14px;
	color: var(--nh-orange);
}

.nh-bl-chip--time {
	right: 14px;
	color: var(--nh-navy);
}

/* Branded stand-in when a post has no featured image. */
.nh-bl-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(circle at 78% 18%, rgba(244, 94, 51, 0.42) 0%, transparent 55%),
		linear-gradient(135deg, #050748 0%, #1d2168 100%);
	color: rgba(255, 255, 255, 0.4);
	font-size: 34px;
}

.nh-bl-cover__media .nh-bl-ph {
	font-size: 46px;
}

.nh-bl-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(22px, 2.3vw, 28px);
}

.nh-bl-card__date {
	display: block;
	margin-bottom: 13px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(5, 7, 72, 0.45);
}

.nh-bl-card h3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 12px;
	font-size: clamp(17px, 1.6vw, 20px);
	font-weight: 800;
	line-height: 1.36;
	letter-spacing: -0.025em;
	text-transform: none;
}

.nh-bl-card h3 a {
	color: var(--nh-navy);
	transition: color 0.3s ease;
}

.nh-bl-card:hover h3 a {
	color: var(--nh-orange);
}

/* Stretches the title link over the card so the whole tile is clickable. */
.nh-bl-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.nh-bl-card__body p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.7;
	text-align: left;
	color: var(--nh-text);
}

.nh-bl-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 17px;
	border-top: 1px solid rgba(5, 7, 72, 0.07);
}

.nh-bl-card__cta {
	font-size: 14px;
	font-weight: 700;
	color: var(--nh-navy);
	transition: color 0.3s ease;
}

.nh-bl-card:hover .nh-bl-card__cta {
	color: var(--nh-orange);
}

.nh-bl-card__arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(5, 7, 72, 0.12);
	font-size: 12.5px;
	color: var(--nh-navy);
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s var(--nh-ease);
}

.nh-bl-card:hover .nh-bl-card__arrow {
	transform: translateX(3px);
	border-color: transparent;
	background: var(--nh-grad);
	color: #fff;
}

/* ---------- Pagination ---------- */
.nh-bl-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: clamp(42px, 5vw, 66px);
}

.nh-bl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 15px;
	border-radius: 15px;
	border: 1px solid var(--nh-line);
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: var(--nh-navy);
	transition: transform 0.35s var(--nh-ease), border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.35s ease;
}

.nh-bl-pagination .page-numbers:hover {
	transform: translateY(-2px);
	border-color: rgba(244, 110, 46, 0.42);
	color: var(--nh-orange);
}

.nh-bl-pagination .page-numbers.current {
	background: var(--nh-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px rgba(244, 94, 51, 0.28);
}

.nh-bl-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.nh-bl-pagination .page-numbers.dots:hover {
	transform: none;
	color: var(--nh-navy);
}

/* Inline "clear filter" links, which would otherwise fall back to the Bootstrap blue. */
.nh-bl-bar__note a,
.nh-bl-empty p a {
	font-weight: 700;
	color: var(--nh-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Empty state ---------- */
.nh-bl-empty {
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
	border-radius: 24px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.07);
	box-shadow: 0 18px 44px rgba(5, 7, 72, 0.07);
	text-align: center;
}

.nh-bl-empty i {
	font-size: 34px;
	color: var(--nh-orange);
}

.nh-bl-empty h3 {
	margin: 18px 0 10px;
	font-size: 22px;
	font-weight: 800;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-bl-empty p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--nh-text);
}

/* =========================================================
   CAREERS (.nh-cr-*, careers template only)
   ========================================================= */
/* Kept white so it separates from the tinted perks section above it. */
.nh-cr-jobs {
	padding: clamp(70px, 8vw, 120px) 0;
	background:
		radial-gradient(circle at 85% 8%, rgba(249, 169, 80, 0.12) 0%, transparent 40%),
		#fff;
}

.nh-cr-jobs__list {
	max-width: 980px;
	margin-inline: auto;
}

.nh-cr-job {
	margin-bottom: 16px;
	border: 1px solid rgba(5, 7, 72, 0.08);
	border-radius: 20px !important;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(5, 7, 72, 0.05);
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.nh-cr-job:has(.accordion-button:not(.collapsed)) {
	border-color: rgba(244, 110, 46, 0.32);
	box-shadow: 0 20px 46px rgba(244, 94, 51, 0.12);
}

.nh-cr-job .accordion-header {
	margin: 0;
}

.nh-cr-job .accordion-button {
	display: block;
	padding: 24px 74px 24px 26px;
	border: 0;
	border-radius: 20px !important;
	background: transparent;
	box-shadow: none !important;
	text-transform: none;
}

.nh-cr-job .accordion-button::after {
	position: absolute;
	top: 26px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-image: none;
	background-color: rgba(244, 110, 46, 0.1);
	content: "\002B";
	font-size: 19px;
	font-weight: 700;
	color: var(--nh-orange);
	transition: transform 0.4s var(--nh-ease), background-color 0.3s ease, color 0.3s ease;
}

.nh-cr-job .accordion-button:not(.collapsed)::after {
	transform: rotate(135deg);
	color: #fff;
	background-color: var(--nh-orange);
}

.nh-cr-job__title {
	display: block;
	margin-bottom: 12px;
	font-size: clamp(18px, 1.9vw, 22px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	transition: color 0.3s ease;
}

.nh-cr-job .accordion-button:not(.collapsed) .nh-cr-job__title {
	color: var(--nh-orange);
}

.nh-cr-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nh-cr-job__meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(5, 7, 72, 0.04);
	border: 1px solid rgba(5, 7, 72, 0.07);
	font-size: 13px;
	font-weight: 600;
	color: var(--nh-text);
}

.nh-cr-job__meta i {
	font-size: 12px;
	color: var(--nh-orange);
}

.nh-cr-job__meta span.nh-cr-job__meta--hot {
	background: rgba(244, 110, 46, 0.1);
	border-color: rgba(244, 110, 46, 0.24);
	color: var(--nh-orange);
}

.nh-cr-job .accordion-body {
	padding: 4px 26px 28px;
}

.nh-cr-job__grid {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
	padding-top: 22px;
	border-top: 1px solid var(--nh-line);
}

.nh-cr-job__grid h4 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nh-orange);
}

.nh-cr-job__grid h4:not(:first-child) {
	margin-top: 24px;
}

.nh-cr-job__grid p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	text-align: left;
	color: var(--nh-text);
}

.nh-cr-job__panel {
	padding: clamp(22px, 2.4vw, 28px);
	border-radius: 18px;
	background: var(--nh-soft);
	border: 1px solid rgba(244, 110, 46, 0.14);
}

.nh-cr-job__panel ul {
	display: grid;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.nh-cr-job__panel li {
	display: flex;
	gap: 11px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--nh-navy);
}

.nh-cr-job__panel li i {
	flex-shrink: 0;
	margin-top: 4px;
	font-size: 11px;
	color: var(--nh-orange);
}

.nh-cr-job__panel .nh-sv-btn {
	width: 100%;
	justify-content: center;
}

/* =========================================================
   ABOUT (.nh-ab-*, about template only)
   ========================================================= */
/* Tinted so it reads apart from the white "why choose" block that follows. */
.nh-ab-values {
	padding: clamp(70px, 8vw, 120px) 0;
	background: #fff9f4;
}

.nh-ab-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.4vw, 32px);
}

.nh-ab-value {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.07);
	box-shadow: 0 18px 44px rgba(5, 7, 72, 0.07);
	transition: transform 0.5s var(--nh-ease), box-shadow 0.5s ease;
}

.nh-ab-value:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 72px rgba(5, 7, 72, 0.14);
}

.nh-ab-value__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--nh-soft);
}

.nh-ab-value__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	transition: transform 0.8s var(--nh-ease);
}

.nh-ab-value:hover .nh-ab-value__media img {
	transform: scale(1.05);
}

.nh-ab-value__step {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(5, 7, 72, 0.78);
	backdrop-filter: blur(8px);
	font-size: 14px;
	font-weight: 800;
	color: #fff;
}

.nh-ab-value__body {
	flex: 1;
	padding: clamp(22px, 2.3vw, 30px);
}

.nh-ab-value h3 {
	margin: 12px 0 12px;
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-ab-value p {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	text-align: left;
	color: var(--nh-text);
}

/* ---------- Journey timeline ---------- */
.nh-ab-journey {
	padding: clamp(70px, 8vw, 120px) 0;
	background: linear-gradient(180deg, #fff9f4 0%, #fff 100%);
}

.nh-ab-timeline {
	position: relative;
	display: grid;
	gap: clamp(16px, 1.8vw, 24px);
}

.nh-ab-timeline::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(244, 110, 46, 0.08) 0%, rgba(244, 110, 46, 0.45) 12%, rgba(244, 110, 46, 0.45) 88%, rgba(244, 110, 46, 0.08) 100%);
}

.nh-ab-step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
	align-items: start;
}

.nh-ab-step__marker {
	grid-column: 2;
	justify-self: center;
	position: relative;
	z-index: 1;
	width: 18px;
	height: 18px;
	margin-top: 26px;
	border-radius: 50%;
	background: var(--nh-grad);
	box-shadow: 0 0 0 6px #fff, 0 6px 16px rgba(244, 94, 51, 0.4);
}

.nh-ab-step__card {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	padding: clamp(22px, 2.2vw, 28px);
	border-radius: 22px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.07);
	box-shadow: 0 16px 40px rgba(5, 7, 72, 0.07);
	transition: transform 0.45s var(--nh-ease), box-shadow 0.45s ease, border-color 0.35s ease;
}

.nh-ab-step:nth-child(even) .nh-ab-step__card {
	grid-column: 3;
}

/* Short tick linking each card to the dot on the spine. */
.nh-ab-step__card::after {
	content: "";
	position: absolute;
	top: 34px;
	right: -26px;
	width: 26px;
	height: 2px;
	background: linear-gradient(90deg, rgba(244, 110, 46, 0.5) 0%, rgba(244, 110, 46, 0.85) 100%);
}

.nh-ab-step:nth-child(even) .nh-ab-step__card::after {
	right: auto;
	left: -26px;
	background: linear-gradient(90deg, rgba(244, 110, 46, 0.85) 0%, rgba(244, 110, 46, 0.5) 100%);
}

.nh-ab-step__card:hover {
	transform: translateY(-4px);
	border-color: rgba(244, 110, 46, 0.3);
	box-shadow: 0 26px 58px rgba(5, 7, 72, 0.12);
}

.nh-ab-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.nh-ab-step__year {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--nh-grad);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #fff;
	box-shadow: 0 8px 18px rgba(244, 94, 51, 0.28);
}

.nh-ab-step__tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nh-orange);
}

.nh-ab-step h3 {
	margin: 0 0 10px;
	font-size: clamp(18px, 1.7vw, 21px);
	font-weight: 800;
	line-height: 1.34;
	letter-spacing: -0.02em;
	color: var(--nh-navy);
	text-transform: none;
}

.nh-ab-step p {
	margin: 0;
	font-size: 15px;
	line-height: 1.72;
	text-align: left;
	color: var(--nh-text);
}

/* =========================================================
   PORTFOLIO (.nh-pf-*, portfolio template only)
   ========================================================= */
.nh-pf-work {
	padding: clamp(70px, 8vw, 120px) 0;
	background: linear-gradient(180deg, #fff 0%, #fff9f4 100%);
}

.nh-pf-filters,
.nh-bl-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 clamp(34px, 4vw, 54px);
	padding: 0;
	list-style: none;
}

.nh-pf-filter,
.nh-bl-filter {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--nh-line);
	background: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--nh-navy);
	cursor: pointer;
	transition: transform 0.35s var(--nh-ease), border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.35s ease;
}

.nh-pf-filter span,
.nh-bl-filter span {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(5, 7, 72, 0.06);
	font-size: 12px;
	color: var(--nh-text);
	transition: background 0.3s ease, color 0.3s ease;
}

.nh-pf-filter:hover,
.nh-bl-filter:hover {
	transform: translateY(-2px);
	border-color: rgba(244, 110, 46, 0.42);
	color: var(--nh-navy);
}

.nh-pf-filter[aria-pressed="true"],
.nh-bl-filter.is-active {
	background: var(--nh-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px rgba(244, 94, 51, 0.28);
}

.nh-pf-filter[aria-pressed="true"] span,
.nh-bl-filter.is-active span {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.nh-bl-filter.is-active:hover {
	color: #fff;
}

.nh-pf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 2.4vw, 32px);
	align-items: start;
}

.nh-pf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 26px;
	background: #fff;
	border: 1px solid rgba(5, 7, 72, 0.06);
	box-shadow: 0 18px 44px rgba(5, 7, 72, 0.07);
	transition: transform 0.5s var(--nh-ease), box-shadow 0.5s ease;
}

.nh-pf-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 74px rgba(5, 7, 72, 0.14);
}

.nh-pf-card[hidden] {
	display: none;
}

/* Script promotes the first visible card so the lead slot is never
   empty after filtering. */
.nh-pf-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	align-items: stretch;
}

.nh-pf-card__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--nh-soft);
}

.nh-pf-card__media a {
	display: block;
	position: relative;
	height: 100%;
}

.nh-pf-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.8s var(--nh-ease);
}

/* The featured image fills the full card height beside the copy. */
.nh-pf-card--featured .nh-pf-card__media img {
	height: 100%;
	min-height: 340px;
	aspect-ratio: auto;
}

.nh-pf-card:hover .nh-pf-card__media img {
	transform: scale(1.05);
}

.nh-pf-card__view {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--nh-grad);
	font-size: 0;
	color: #fff;
	box-shadow: 0 12px 26px rgba(244, 94, 51, 0.38);
	opacity: 0;
	transform: translateY(10px) scale(0.9);
	transition: opacity 0.4s ease, transform 0.45s var(--nh-ease);
}

.nh-pf-card__view i {
	font-size: 15px;
}

.nh-pf-card:hover .nh-pf-card__view {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.nh-pf-card__tags {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nh-pf-card__tags li {
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(5, 7, 72, 0.76);
	backdrop-filter: blur(8px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
}

.nh-pf-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(22px, 2.3vw, 30px);
}

.nh-pf-card--featured .nh-pf-card__body {
	justify-content: center;
	padding: clamp(26px, 3vw, 44px);
}

.nh-pf-card h3 {
	margin: 0 0 11px;
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	text-transform: none;
}

.nh-pf-card--featured h3 {
	font-size: clamp(23px, 2.4vw, 31px);
}

.nh-pf-card h3 a {
	color: var(--nh-navy);
	transition: color 0.3s ease;
}

.nh-pf-card h3 a:hover {
	color: var(--nh-orange);
}

.nh-pf-card__body > p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	text-align: left;
	color: var(--nh-text);
}

/* Clamping keeps tiles on a shared rhythm regardless of copy length. */
.nh-pf-card__body > p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nh-pf-card--featured .nh-pf-card__body > p {
	display: block;
	overflow: visible;
}

.nh-pf-quote {
	position: relative;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid rgba(5, 7, 72, 0.08);
}

.nh-pf-card--featured .nh-pf-quote {
	margin-top: 24px;
	padding: 22px 24px;
	border: 1px solid rgba(244, 110, 46, 0.16);
	border-radius: 18px;
	background: var(--nh-soft);
}

.nh-pf-quote::before {
	content: "\201C";
	position: absolute;
	top: 12px;
	right: 2px;
	font-size: 50px;
	line-height: 1;
	color: rgba(244, 110, 46, 0.24);
}

.nh-pf-card--featured .nh-pf-quote::before {
	top: 10px;
	right: 20px;
}

.nh-pf-quote p {
	position: relative;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding-right: 26px;
	font-size: 14px;
	font-style: italic;
	line-height: 1.65;
	text-align: left;
	color: var(--nh-text);
}

.nh-pf-card--featured .nh-pf-quote p {
	display: block;
	overflow: visible;
	font-size: 14.5px;
	line-height: 1.7;
}

.nh-pf-author {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 15px;
}

.nh-pf-card--featured .nh-pf-author {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(244, 110, 46, 0.16);
}

.nh-pf-author img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 4px 12px rgba(5, 7, 72, 0.14);
}

.nh-pf-card--featured .nh-pf-author img {
	width: 46px;
	height: 46px;
}

.nh-pf-author strong {
	display: block;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--nh-navy);
}

.nh-pf-author small {
	font-size: 12.5px;
	color: var(--nh-text);
}

.nh-pf-card__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--nh-orange);
	transition: gap 0.3s var(--nh-ease), color 0.3s ease;
}

.nh-pf-card__link:hover {
	gap: 14px;
	color: #d2551f;
}

/* =========================================================
   Legacy shared sections on this page
   ========================================================= */
.page-template-web-development .portfolio-section-nx,
.page-template-ecommerce-development .portfolio-section-nx,
.page-template-mobile-app-development .portfolio-section-nx,
.page-template-UiUX .portfolio-section-nx,
.page-template-digital-marketing .portfolio-section-nx {
	background: #fff;
}

.page-template-web-development .testinomial-section-app,
.page-template-ecommerce-development .testinomial-section-app,
.page-template-mobile-app-development .testinomial-section-app,
.page-template-UiUX .testinomial-section-app,
.page-template-digital-marketing .testinomial-section-app {
	background: #fff6ef;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {
	.nh-sv-hero__chip--speed,
	.nh-sv-hero__chip--tl { left: -8px; }

	.nh-sv-hero__chip--secure,
	.nh-sv-hero__chip--br { right: -6px; }
}

@media (max-width: 1100px) {
	.nh-sv-services__grid,
	.nh-sv-why__grid,
	.nh-ab-values__grid,
	.nh-bl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nh-sv-platforms {
		grid-template-columns: 1fr;
	}

	.nh-sv-stats__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.nh-sv-stat + .nh-sv-stat {
		border-left: 0;
	}

	.nh-sv-stat {
		justify-content: flex-start;
	}
}

@media (max-width: 991px) {
	.nh-sv-hero {
		padding: 140px 0 120px;
	}

	.nh-sv-hero__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.nh-sv-hero__lead {
		max-width: 100%;
	}

	.nh-sv-hero__stage {
		max-width: 520px;
		margin: 0 auto;
	}

	.nh-sv-intro__grid,
	.nh-sv-faq__layout {
		grid-template-columns: 1fr;
	}

	.nh-pf-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The timeline rail moves to the left edge and cards share one column. */
	.nh-ab-timeline::before {
		left: 19px;
		transform: none;
	}

	.nh-ab-step {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.nh-ab-step__marker {
		grid-column: 1;
		justify-self: start;
		margin-left: 10px;
	}

	.nh-ab-step__card,
	.nh-ab-step:nth-child(even) .nh-ab-step__card {
		grid-column: 2;
	}

	.nh-ab-step__card::after,
	.nh-ab-step:nth-child(even) .nh-ab-step__card::after {
		right: auto;
		left: -12px;
		width: 12px;
		background: rgba(244, 110, 46, 0.75);
	}

	.nh-sv-strategy__panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nh-cr-job__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nh-bl-bar {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	/* Stacked, the intro must not grow along the (now vertical) main axis. */
	.nh-bl-bar__intro {
		flex: 0 0 auto;
		width: 100%;
	}

	/* One scrollable row beats a five-line stack of pills on narrow screens. */
	.nh-bl-bar .nh-bl-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: 100%;
		padding-bottom: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.nh-bl-bar .nh-bl-filters::-webkit-scrollbar {
		display: none;
	}

	.nh-bl-bar .nh-bl-filter {
		flex-shrink: 0;
	}

	.nh-bl-posts {
		margin-top: -70px;
	}

	.nh-bl-posts::before {
		inset: 70px 0 0;
	}

	.nh-ct-channels {
		margin-top: -70px;
		background: linear-gradient(180deg, transparent 0, transparent 70px, #fff 70px, #fff 100%);
	}

	.nh-ct-channels__card {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked rows read better flush-left than centred. */
	.nh-ct-channel {
		justify-content: flex-start;
	}

	/* Stacked, the separator has to run along the top instead of the side. */
	.nh-ct-channel + .nh-ct-channel {
		border-left: 0;
		border-top: 1px solid rgba(5, 7, 72, 0.07);
	}

	.nh-ct-main__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nh-ct-aside > p {
		max-width: none;
	}

	/* The featured card drops to the same stacked shape as the tiles. */
	.nh-pf-card--featured {
		grid-column: auto;
		display: flex;
		flex-direction: column;
	}

	/* Single column makes square crops too tall to scroll past. */
	.nh-pf-card__media img,
	.nh-pf-card--featured .nh-pf-card__media img {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 12;
	}

	.nh-pf-card--featured .nh-pf-card__body {
		padding: clamp(22px, 2.3vw, 30px);
	}

	/* Without hover on touch, the visit affordance has to stay visible. */
	.nh-pf-card__view {
		opacity: 1;
		transform: none;
	}

	.nh-sv-strategy {
		padding: 80px 0;
	}

	.nh-sv-strategy__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.nh-sv-strategy__media {
		max-width: 520px;
	}

	.nh-sv-intro__media {
		max-width: 460px;
	}

	.nh-sv-intro__media::before {
		inset: 12% -6% -6% 12%;
	}

	.nh-sv-tech__bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nh-sv-services,
	.nh-sv-tech,
	.nh-sv-process,
	.nh-sv-why,
	.nh-sv-faq {
		padding: 80px 0;
	}

	.nh-sv-intro {
		padding: 80px 0;
	}
}

@media (max-width: 767px) {
	.nh-sv-hero {
		padding: 120px 0 100px;
	}

	.nh-sv-hero--center {
		padding: 120px 0 100px;
	}

	.nh-sv-hero__points {
		gap: 10px 18px;
	}

	.nh-pf-filters,
	.nh-bl-filters {
		gap: 8px;
	}

	.nh-pf-filter,
	.nh-bl-filter {
		padding: 9px 15px;
		font-size: 13.5px;
	}

	.nh-pf-card--featured .nh-pf-quote {
		padding: 18px;
	}

	.nh-pf-card__media img,
	.nh-pf-card--featured .nh-pf-card__media img {
		aspect-ratio: 16 / 13;
	}

	.nh-sv-hero__cta .nh-sv-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.nh-sv-hero__chip {
		padding: 11px 14px;
	}

	.nh-sv-hero__chip--speed,
	.nh-sv-hero__chip--tl { top: -20px; left: -6px; }

	.nh-sv-hero__chip--secure,
	.nh-sv-hero__chip--br { right: -4px; bottom: -20px; }
	.nh-sv-hero__chip--rating { top: 176px; left: -14px; }
	.nh-sv-hero__chip--downloads { right: -14px; bottom: 72px; }

	.nh-sv-phone {
		width: 272px;
	}

	.nh-sv-hero__window-body {
		padding: 22px 18px 24px;
	}

	.nh-sv-score__ring {
		width: 64px;
		height: 64px;
	}

	.nh-sv-score__ring b {
		font-size: 17px;
	}

	.nh-sv-stats {
		margin-top: -60px;
		background: linear-gradient(180deg, transparent 0, transparent 60px, #fff 60px, #fff 100%);
	}

	.nh-sv-stats__card {
		padding: 26px 18px;
	}

	.nh-sv-services__grid,
	.nh-sv-why__grid,
	.nh-sv-tech__bento,
	.nh-sv-intro__list,
	.nh-sv-strategy__points,
	.nh-sv-strategy__panels,
	.nh-ab-values__grid,
	.nh-bl-grid {
		grid-template-columns: 1fr;
	}

	.nh-bl-posts {
		padding-bottom: 70px;
	}

	.nh-ct-channel {
		padding: 18px;
	}

	.nh-ct-channel__value {
		font-size: 15.5px;
	}

	.nh-bl-cover__body {
		padding: 22px 6px 6px;
	}

	.nh-bl-search {
		flex-direction: column;
		gap: 12px;
	}

	.nh-bl-search button {
		width: 100%;
	}

	.nh-bl-pagination .page-numbers {
		min-width: 42px;
		height: 42px;
		padding: 0 12px;
		font-size: 14px;
	}

	.nh-ab-values,
	.nh-ab-journey {
		padding: 70px 0;
	}

	.nh-ab-step {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.nh-ab-step__marker {
		width: 14px;
		height: 14px;
		margin-top: 24px;
		margin-left: 6px;
		box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(244, 94, 51, 0.4);
	}

	.nh-ab-timeline::before {
		left: 13px;
	}

	.nh-cr-jobs {
		padding: 70px 0;
	}

	.nh-cr-job .accordion-button {
		padding: 20px 62px 20px 18px;
	}

	.nh-cr-job .accordion-button::after {
		top: 22px;
		right: 16px;
		width: 30px;
		height: 30px;
	}

	.nh-cr-job .accordion-body {
		padding: 0 18px 22px;
	}

	.nh-cr-job__meta span {
		padding: 5px 10px;
		font-size: 12.5px;
	}

	.nh-sv-platform {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 24px 22px;
	}

	.nh-sv-platform__media {
		max-width: 160px;
	}

	.nh-sv-chart {
		height: 76px;
		gap: 5px;
	}

	.nh-sv-dash__kpis {
		gap: 10px;
	}

	.nh-sv-services__cta {
		padding: 24px 20px;
		justify-content: center;
		text-align: center;
	}

	.nh-sv-services__cta p {
		font-size: 19px;
	}

	.nh-sv-step {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.nh-sv-process__track::before {
		display: none;
	}

	.nh-sv-step__num {
		width: 56px;
		height: 56px;
		margin-bottom: -20px;
		margin-left: 20px;
		font-size: 18px;
		border-radius: 16px;
	}

	.nh-sv-step__body {
		padding: 34px 22px 24px;
	}

	.nh-sv-step:hover .nh-sv-step__body {
		transform: none;
	}

	.nh-sv-faq .accordion-button {
		padding: 18px 52px 18px 18px;
		font-size: 16px;
	}

	.nh-sv-faq .accordion-body {
		padding: 0 18px 20px;
	}

	.nh-sv-cta {
		padding: 70px 0;
	}

	.nh-sv-cta__btns .nh-sv-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

@media (max-width: 479px) {
	.nh-sv-stats__card {
		grid-template-columns: 1fr;
	}

	/* Narrow screens need the wrap back more than they need the term intact. */
	.nh-sv-hero h1 span {
		white-space: normal;
	}
}

/* =========================================================
   DARK MODE
   ========================================================= */
.active-dark .nh-sv-intro,
.active-dark .nh-sv-why,
.active-dark .nh-sv-why--soft,
.active-dark .nh-ab-values {
	background: #0d0f2b;
}

.active-dark .nh-ab-journey {
	background: #0a0c22;
}

.active-dark .nh-sv-stats {
	background: linear-gradient(180deg, transparent 0, transparent 80px, #0d0f2b 80px, #0d0f2b 100%);
}

.active-dark .nh-sv-services,
.active-dark .nh-sv-process,
.active-dark .nh-sv-faq,
.active-dark .nh-cr-jobs {
	background: #0a0c22;
}

.active-dark .nh-bl-posts::before {
	background: #0b0d2c;
}

.active-dark .nh-ct-main {
	background: #0b0d2c;
}

.active-dark .nh-ct-channels {
	background: linear-gradient(180deg, transparent 0, transparent 80px, #0b0d2c 80px, #0b0d2c 100%);
}

.active-dark .nh-ct-channel:hover {
	background: rgba(255, 255, 255, 0.05);
}

.active-dark .nh-ct-channel + .nh-ct-channel {
	border-color: rgba(255, 255, 255, 0.09);
}

.active-dark .nh-sv-stats__card,
.active-dark .nh-sv-service,
.active-dark .nh-sv-platform,
.active-dark .nh-sv-step__body,
.active-dark .nh-sv-step__num,
.active-dark .nh-sv-why__card,
.active-dark .nh-sv-services__cta,
.active-dark .nh-sv-faq .accordion-item,
.active-dark .nh-pf-card,
.active-dark .nh-pf-filter,
.active-dark .nh-ab-value,
.active-dark .nh-ab-step__card,
.active-dark .nh-cr-job,
.active-dark .nh-bl-bar,
.active-dark .nh-bl-card,
.active-dark .nh-bl-empty,
.active-dark .nh-bl-filter,
.active-dark .nh-bl-pagination .page-numbers,
.active-dark .nh-ct-channels__card,
.active-dark .nh-ct-assure li {
	background: #14163a;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

.active-dark .nh-bl-card__foot {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.active-dark .nh-bl-card__date {
	color: rgba(255, 255, 255, 0.45);
}

.active-dark .nh-bl-card__arrow {
	border-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.active-dark .nh-bl-filter.is-active,
.active-dark .nh-bl-pagination .page-numbers.current {
	background: var(--nh-grad);
	border-color: transparent;
}

.active-dark .nh-bl-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

.active-dark .nh-cr-job__panel {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.09);
}

.active-dark .nh-cr-job__meta span {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.72);
}

.active-dark .nh-ab-step__marker {
	box-shadow: 0 0 0 6px #0a0c22, 0 6px 16px rgba(244, 94, 51, 0.4);
}

.active-dark .nh-pf-work {
	background: #0b0d2c;
}

.active-dark .nh-pf-filter,
.active-dark .nh-pf-card h3 a,
.active-dark .nh-pf-author strong {
	color: #fff;
}

.active-dark .nh-pf-filter[aria-pressed="true"] {
	background: var(--nh-grad);
}

.active-dark .nh-pf-quote {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

.active-dark .nh-sv-head h2,
.active-dark .nh-sv-intro__content h2,
.active-dark .nh-sv-faq__intro h2,
.active-dark .nh-sv-service h3,
.active-dark .nh-sv-platform h3,
.active-dark .nh-sv-step h3,
.active-dark .nh-sv-why__card h3,
.active-dark .nh-sv-faq .accordion-button,
.active-dark .nh-sv-services__cta p,
.active-dark .nh-sv-intro__list li,
.active-dark .nh-sv-faq__highlights li,
.active-dark .nh-ab-value h3,
.active-dark .nh-ab-step h3,
.active-dark .nh-cr-job__title,
.active-dark .nh-cr-job__panel li,
.active-dark .nh-bl-bar h2,
.active-dark .nh-bl-card h3 a,
.active-dark .nh-bl-card__cta,
.active-dark .nh-bl-empty h3,
.active-dark .nh-bl-filter,
.active-dark .nh-bl-pagination .page-numbers,
.active-dark .nh-ct-aside h2,
.active-dark .nh-ct-step h3,
.active-dark .nh-ct-channel__value,
.active-dark .nh-ct-assure li {
	color: #fff;
}

.active-dark .nh-sv-head p,
.active-dark .nh-sv-intro__content p,
.active-dark .nh-sv-faq__intro p,
.active-dark .nh-sv-service p,
.active-dark .nh-sv-platform p,
.active-dark .nh-sv-step p,
.active-dark .nh-sv-why__card p,
.active-dark .nh-sv-stat p,
.active-dark .nh-sv-faq .accordion-body p,
.active-dark .nh-pf-card__body > p,
.active-dark .nh-pf-quote p,
.active-dark .nh-ab-value p,
.active-dark .nh-ab-step p,
.active-dark .nh-cr-job__grid p,
.active-dark .nh-bl-card__body p,
.active-dark .nh-bl-empty p,
.active-dark .nh-bl-bar__note,
.active-dark .nh-ct-aside > p,
.active-dark .nh-ct-step p,
.active-dark .nh-ct-channel__meta {
	color: rgba(255, 255, 255, 0.66);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.nh-sv-hero__copy,
	.nh-sv-hero__stage,
	.nh-sv-hero__orb,
	.nh-sv-hero__chip,
	.nh-sv-hero__pulse::after,
	.nh-sv-service,
	.nh-sv-platform,
	.nh-sv-platform__media img,
	.nh-sv-why__card,
	.nh-sv-step__body,
	.nh-sv-step__num,
	.nh-sv-tech__card,
	.nh-sv-btn,
	.nh-pf-card,
	.nh-pf-card__media img,
	.nh-pf-card__view,
	.nh-pf-filter,
	.nh-ab-value,
	.nh-ab-value__media img,
	.nh-ab-step__card,
	.nh-cr-job,
	.nh-cr-job__title,
	.nh-bl-card,
	.nh-bl-card__media img,
	.nh-bl-card__arrow,
	.nh-bl-card::after,
	.nh-bl-cover,
	.nh-bl-cover__media img,
	.nh-bl-filter,
	.nh-bl-pagination .page-numbers,
	.nh-ct-channel {
		animation: none !important;
		transition: none !important;
	}
}