/*
 * NGL v2 — Home v2 sections (Figma "Landing Page" 149:7269), top to bottom.
 * Desktop values match the 1440px frame; breakpoints: ≤1199 laptop/tablet, ≤1023 tablet, ≤767 phone.
 */

/* ==============================================================================================
 * Hero (149:7273) — V-cut bottom, blurred rotated photo, maaden-style load animation.
 * ============================================================================================ */

.nglv2-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(640px, 67.5vw, 972px);
	/* Padding centres the content 65.5px above the middle, as in Figma, and keeps it clear of the header and the V. */
	padding: calc(var(--nglv2-header-h) + 24px) var(--nglv2-pad) calc(var(--nglv2-header-h) + 24px + 131px);
	overflow: hidden;
	background: #262d3d;
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.nglv2-hero__media {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
}

/* The optional background video gets the image's treatment (the design's blur, the settling zoom). */
.nglv2 .nglv2-hero__img,
.nglv2 .nglv2-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: blur(5.45px);
	transform: scale(1.06);
	transition: transform 2.4s var(--nglv2-ease-out);
}

.nglv2-js .nglv2-hero .nglv2-hero__img,
.nglv2-js .nglv2-hero .nglv2-hero__video {
	transform: scale(1.16);
}

.nglv2-js .nglv2-hero.is-loaded .nglv2-hero__img,
.nglv2-js .nglv2-hero.is-loaded .nglv2-hero__video {
	transform: scale(1.06);
}

/* Over the image (its poster) and invisible until it actually plays, so it never flashes black. */
.nglv2 .nglv2-hero__video {
	opacity: 0;
	transition: transform 2.4s var(--nglv2-ease-out), opacity 0.8s ease-out;
}

.nglv2 .nglv2-hero__video.is-playing {
	opacity: 1;
}

.nglv2-hero__overlay {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: rgba(38, 45, 61, 0.57);
}

.nglv2-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: min(768px, 100%);
	text-align: center;
}

.nglv2 .nglv2-hero__badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	max-width: 100%;
	padding: 12px 24px;
	border: 1px solid #7f7f7f;
	border-radius: 62px;
	background: #7f7f7f;
	font-weight: 600;
	font-size: clamp(13px, calc(8px + 0.694vw), 18px);
	line-height: 1.4;
	color: #fff;
}

.nglv2-hero__sep {
	color: #6aa617;
}

.nglv2-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #6aa617;
}

.nglv2 .nglv2-hero__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 7px clamp(0px, 6vw, 86px);
	font-weight: 800;
	line-height: normal;
	color: #fff;
}

.nglv2-hero__line1 {
	display: block;
	margin-bottom: -8px;
	font-size: clamp(40px, calc(8px + 5vw), 80px);
	color: var(--nglv2-green);
}

.nglv2-hero__line2 {
	display: block;
	font-size: clamp(30px, calc(6px + 3.75vw), 60px);
}

.nglv2 .nglv2-hero__text {
	font-weight: 700;
	font-size: clamp(16px, calc(10px + 0.694vw), 20px);
	line-height: 1.5;
	color: #fff;
}

/* English/Arabic headlines run longer than the Persian design copy. */
html:not([lang|="fa"]) .nglv2-hero__content {
	width: min(980px, 100%);
}

html:not([lang|="fa"]) .nglv2 .nglv2-hero__title {
	padding-inline: 0;
}

html:not([lang|="fa"]) .nglv2-hero__line1 {
	font-size: clamp(36px, calc(8px + 4.2vw), 70px);
}

html:not([lang|="fa"]) .nglv2-hero__line2 {
	font-size: clamp(28px, calc(6px + 3.2vw), 54px);
}

.nglv2-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

/* Load sequence (maaden.com): rise 100px + fade, ease-out-cubic ~0.9s, staggered; buttons only fade. */
.nglv2-js .nglv2-hero__anim {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition: opacity 0.9s var(--nglv2-ease-out), transform 0.9s var(--nglv2-ease-out);
	transition-delay: var(--nglv2-delay, 0s);
}

.nglv2-js .nglv2-hero__anim--fade {
	transform: none;
	transition-duration: 1s;
}

.nglv2-js .nglv2-hero.is-loaded .nglv2-hero__anim {
	opacity: 1;
	transform: none;
}

/* ==============================================================================================
 * Services (149:7322) — adportsgroup.com-style: scroll-linked heading, parallax photos, hover zoom.
 * ============================================================================================ */

.nglv2-services__head {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 64px;
	will-change: opacity, transform;
}

.nglv2-services__title {
	max-width: 945px;
}

.nglv2-services__head .nglv2-lead {
	max-width: 897px;
}

.nglv2-services__grid {
	display: flex;
	align-items: stretch;
	gap: 21px;
}

.nglv2-services__col {
	display: flex;
	flex: 568 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.nglv2-services__col--main {
	flex: 611 1 0;
	gap: 64px;
}

.nglv2 .nglv2-scard {
	position: relative;
	isolation: isolate;
	display: block;
	height: 360px;
	overflow: hidden;
	border-radius: 2px;
	background: #1a1f28;
	color: #e8ecf0;
}

.nglv2 .nglv2-scard--lg {
	height: 520px;
}

.nglv2-scard__media {
	position: absolute;
	z-index: -3;
	inset: 0;
	overflow: hidden;
	background: #0f172b;
	transform: scale(var(--nglv2-zoom, 1));
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-scard__img {
	position: absolute;
	inset: -9% 0;
	width: 100%;
	height: 118%;
	max-width: none;
	object-fit: cover;
	transform: translate3d(0, var(--nglv2-parallax, 0%), 0);
	will-change: transform;
}

.nglv2 .nglv2-scard:hover,
.nglv2 .nglv2-scard:focus-visible {
	--nglv2-zoom: 1.07;
}

.nglv2-scard__shade {
	position: absolute;
	z-index: -2;
	inset: 0;
	background: linear-gradient(to top, #0a0d12 0%, rgba(10, 13, 18, 0.44) 60%, rgba(10, 13, 18, 0.08) 100%);
	transition: opacity 0.6s;
}

.nglv2-scard__bar {
	position: absolute;
	z-index: -1;
	top: 0;
	inset-inline: 0;
	height: 4px;
	background: rgba(109, 190, 69, 0.35);
}

.nglv2-scard__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--nglv2-green);
	transform: scaleX(0);
	transform-origin: var(--nglv2-bar-origin, right);
	transition: transform 0.6s var(--nglv2-ease);
}

html:not([dir="rtl"]) .nglv2-scard__bar::after {
	--nglv2-bar-origin: left;
}

.nglv2 .nglv2-scard:hover .nglv2-scard__bar::after {
	transform: scaleX(1);
}

.nglv2-scard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
}

.nglv2-scard__title {
	font-weight: 700;
	font-size: clamp(21px, calc(9px + 1.21vw), 26.4px);
	line-height: 1.375;
	color: #e8ecf0;
}

.nglv2-scard__text {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.43;
	color: rgba(232, 236, 240, 0.72);
}

.nglv2-scard__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-top: 20px;
	font-weight: 700;
	font-size: 18px;
	color: var(--nglv2-green);
}

.nglv2-scard__cta .nglv2-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.4s var(--nglv2-ease-out);
}

.nglv2 .nglv2-scard:hover .nglv2-scard__cta .nglv2-icon {
	transform: translateX(-8px);
}

html:not([dir="rtl"]) .nglv2 .nglv2-scard:hover .nglv2-scard__cta .nglv2-icon {
	transform: scaleX(-1) translateX(-8px);
}

.nglv2-testlist {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-inline: 24px;
}

.nglv2-testlist__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nglv2 .nglv2-testlist__title {
	font-weight: 700;
	font-size: clamp(22px, calc(8px + 1.667vw), 32px);
	line-height: 1.365;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-testlist__desc {
	max-width: 321px;
	padding-top: 10px;
	font-size: 16px;
	line-height: 1.58;
	color: var(--nglv2-grey);
}

.nglv2-testlist .nglv2-btn {
	flex-shrink: 0;
	width: 189px;
}

/* ==============================================================================================
 * Differentiators (149:7380 + states 149:10776) — overlapping panels, hover opens one.
 * ============================================================================================ */

.nglv2-diff .nglv2-center-head {
	margin-bottom: 64px;
}

.nglv2-diff__stage {
	--nglv2-open: 60%;
	--nglv2-overlap: 5.3333%;
	--nglv2-closed: calc((100% - var(--nglv2-open) + (var(--nglv2-count) - 1) * var(--nglv2-overlap)) / (var(--nglv2-count) - 1));
	--nglv2-stage-w: min(var(--nglv2-container), 100vw - 2 * var(--nglv2-pad));
	display: flex;
	height: clamp(380px, 42.8vw, 616px);
	overflow: hidden;
}

.nglv2 .nglv2-diff__panel {
	position: relative;
	z-index: calc(20 - var(--nglv2-i));
	flex: 0 0 var(--nglv2-closed);
	margin-inline-end: calc(var(--nglv2-overlap) * -1);
	overflow: hidden;
	cursor: pointer;
	box-shadow: calc(var(--nglv2-dir) * -4px) 0 16px #192431;
	transition: flex-basis 0.75s var(--nglv2-ease);
	outline-offset: -3px;
}

.nglv2 .nglv2-diff__panel:last-child {
	margin-inline-end: 0;
	box-shadow: none;
}

/* The open panel sits above its neighbours (as in every Figma state) so its caption is never covered. */
.nglv2 .nglv2-diff__panel.is-active,
.nglv2 .nglv2-diff__panel.is-active:last-child {
	z-index: 30;
	flex-basis: var(--nglv2-open);
	cursor: default;
	box-shadow: 0 0 16px #192431;
}

.nglv2-diff__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* The photo keeps the open-panel width while panels resize, so opening reveals rather than rescales it. */
.nglv2 .nglv2-diff__img {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(var(--nglv2-stage-w) * 0.6);
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: translateX(-50%) scale(var(--nglv2-zoom, 1));
	transition: transform 1s var(--nglv2-ease);
}

/* Designer note: hovering zooms the photo slightly… */
.nglv2 .nglv2-diff__panel.is-active:hover {
	--nglv2-zoom: 1.07;
}

.nglv2-diff__shade {
	position: absolute;
	inset: 0;
	transition: opacity 0.6s;
}

.nglv2-diff__shade--closed {
	background: linear-gradient(to top, #203049 0%, rgba(32, 48, 73, 0.44) 60%, rgba(32, 48, 73, 0.08) 100%);
}

.nglv2-diff__shade--open {
	opacity: 0;
	background: linear-gradient(to top, #0a0d12 0%, rgba(10, 13, 18, 0.44) 60%, rgba(10, 13, 18, 0.08) 100%);
}

.nglv2-diff__panel.is-active .nglv2-diff__shade--closed {
	opacity: 0;
}

.nglv2-diff__panel.is-active .nglv2-diff__shade--open {
	opacity: 1;
}

.nglv2-diff__caption {
	position: absolute;
	inset-inline: 32px;
	bottom: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transform-origin: var(--nglv2-caption-origin, 100% 100%);
	transition: opacity 0.35s, transform 0.6s var(--nglv2-ease);
	pointer-events: none;
}

html:not([dir="rtl"]) .nglv2-diff__caption {
	--nglv2-caption-origin: 0 100%;
}

.nglv2-diff__panel.is-active .nglv2-diff__caption {
	opacity: 1;
	transform: none;
	transition-delay: 0.3s, 0.3s;
}

/* …and the caption grows slightly. */
.nglv2 .nglv2-diff__panel.is-active:hover .nglv2-diff__caption {
	transform: scale(1.05);
	transition-delay: 0s;
}

.nglv2-diff__bar {
	width: 112px;
	height: 12px;
	background: var(--nglv2-green);
}

.nglv2 .nglv2-diff__title {
	font-weight: 700;
	font-size: clamp(22px, 2.78vw, 40px);
	line-height: 1.4;
	color: #f7fcfe;
	white-space: nowrap;
}

/* ==============================================================================================
 * Standards & certificates (149:7397)
 * ============================================================================================ */

.nglv2-certs__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 96px;
}

.nglv2-certs__text {
	display: flex;
	flex: 0 1 573px;
	flex-direction: column;
	gap: 32px;
}

.nglv2-certs__slider {
	display: flex;
	flex: 0 0 532px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.nglv2-certs__swiper {
	width: 100%;
}

.nglv2-certs__slide {
	display: flex;
	justify-content: center;
}

.nglv2 .nglv2-certs__badge {
	width: 266px;
	height: 266px;
	object-fit: contain;
	transition: transform 0.6s var(--nglv2-ease);
}

.nglv2 .nglv2-certs__badge:hover {
	transform: scale(1.04) rotate(-1.5deg);
}

.nglv2-certs .nglv2-carousel-nav {
	justify-content: center;
}

/* ==============================================================================================
 * Dark pixel band — stats (149:7412) and testimonials (149:8630) share it
 * ============================================================================================ */

.nglv2-band {
	position: relative;
	margin-top: var(--nglv2-gap);
	color: var(--nglv2-navy);
}

.nglv2-band__cap,
.nglv2-band__tab {
	display: block;
	width: 100%;
	height: auto;
}

.nglv2-band__cap {
	aspect-ratio: 1440 / 140;
}

.nglv2-band__tab {
	aspect-ratio: 1440 / 62;
}

html:not([dir="rtl"]) .nglv2-band__cap,
html:not([dir="rtl"]) .nglv2-band__tab {
	transform: scaleX(-1);
}

/* The tab sits under the body, so order: cap, body, tab. */
.nglv2-band {
	display: flex;
	flex-direction: column;
}

.nglv2-band__cap {
	order: 1;
}

.nglv2-band__body {
	order: 2;
	background: var(--nglv2-navy);
	color: #fff;
}

.nglv2-band__tab {
	order: 3;
}

/* Stats */

.nglv2-stats__inner {
	padding-bottom: 79px;
}

.nglv2-stats__title {
	margin-bottom: 32px;
	text-align: center;
}

.nglv2-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: min(var(--nglv2-container), 100% - 2 * var(--nglv2-pad));
	margin-inline: auto;
}

/* Figma lays the cells out left-to-right even on the RTL page (tag left, icon right, text left). */
.nglv2-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 260px;
	padding: 24px 32px;
	border-block: 2px solid var(--nglv2-accent-30);
	border-inline-end: 2px solid var(--nglv2-accent-30);
	direction: ltr;
	text-align: left;
	transition: background-color 0.4s;
}

.nglv2-stat:first-child {
	border-inline-start: 2px solid var(--nglv2-accent-30);
}

.nglv2-stat:hover {
	background: rgba(109, 190, 69, 0.06);
}

.nglv2-stat__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nglv2-stat__tag {
	padding: 2px 4px;
	border-radius: 2px;
	background: rgba(232, 236, 240, 0.3);
	font: 400 12px/18px var(--nglv2-font-mono);
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-stat__icon {
	width: auto;
	height: 32px;
	color: var(--nglv2-accent);
}

.nglv2-stat__bottom {
	display: flex;
	flex-direction: column;
}

.nglv2-stat__num {
	display: block;
	/* Latin digits here, as in Figma (IRANSansX, not the FaNum variant). */
	font-feature-settings: normal;
	font-weight: 800;
	font-size: clamp(40px, 4.44vw, 64px);
	line-height: 1.3;
	color: var(--nglv2-accent);
	font-variant-numeric: tabular-nums;
}

.nglv2-stat__label {
	display: block;
	font-weight: 500;
	font-size: clamp(16px, 1.67vw, 24px);
	line-height: 1.5;
	color: #e8ecf0;
	unicode-bidi: plaintext;
	text-align: left;
}

@media (min-width: 1200px) {
	.nglv2-stat__label {
		white-space: nowrap;
	}
}

/* ==============================================================================================
 * Projects (149:8494)
 * ============================================================================================ */

.nglv2-row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 64px;
}

.nglv2-row-head .nglv2-h2 {
	max-width: 945px;
}

.nglv2-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.nglv2-pcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.nglv2 .nglv2-pcard__media {
	display: block;
	height: 231px;
	overflow: hidden;
	background: #eef1f6;
}

.nglv2 .nglv2-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-pcard:hover .nglv2-pcard__img {
	transform: scale(1.06);
}

.nglv2-pcard__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(#ececec 0% 25%, #f7f7f7 0% 50%) 0 0 / 28px 28px;
}

.nglv2-pcard__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 28px;
}

.nglv2 .nglv2-pcard__title {
	font-weight: 700;
	font-size: clamp(26px, 2.78vw, 40px);
	line-height: 1.2;
}

.nglv2 .nglv2-pcard__title a {
	color: var(--nglv2-ink);
	transition: color 0.25s;
}

.nglv2 .nglv2-pcard__title a:hover {
	color: var(--nglv2-green-dark);
}

.nglv2 .nglv2-pcard__text {
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.3;
	color: var(--nglv2-grey);
}

.nglv2-pcard .nglv2-link-arrow {
	margin-top: 6px;
}

/* ==============================================================================================
 * Catalogs (149:8537) — addepto.com "Company insights" slider feel, one whole card at a time.
 * ============================================================================================ */

.nglv2-catalogs__inner {
	display: flex;
	align-items: stretch;
	min-height: 676px;
}

.nglv2-catalogs__panel {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-width: 0;
	padding: 64px 32px;
	background: var(--nglv2-navy);
}

.nglv2-catalogs__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2 .nglv2-catalogs__title {
	font-weight: 800;
	font-size: clamp(34px, 4.44vw, 64px);
	line-height: 1.328;
	color: #f7fcfe;
}

.nglv2 .nglv2-catalogs__desc {
	padding-inline: 16px;
	font-size: clamp(18px, 1.81vw, 26px);
	line-height: 1.14;
	color: var(--nglv2-grey);
}

.nglv2-catalogs__slider {
	display: flex;
	flex: 0 0 786px;
	flex-direction: column;
	gap: 20px;
	max-width: 65.5%;
	min-width: 0;
	padding-block: 24px;
	padding-inline-start: 32px;
	overflow: hidden;
}

.nglv2-catalogs__swiper {
	width: 100%;
}

.nglv2 .nglv2-catalog {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: auto;
	opacity: 0.3;
	transition: opacity 0.8s ease-out;
}

.nglv2 .nglv2-catalog.swiper-slide-active {
	opacity: 1;
}

/* Figma "image 5": a 754 × 339 frame; keeping its ratio shows the whole banner at every width. */
.nglv2 .nglv2-catalog__media {
	position: relative;
	display: block;
	aspect-ratio: 754 / 339;
	overflow: hidden;
	border-radius: 32px;
	background: #fff;
}

.nglv2 .nglv2-catalog__img,
.nglv2 .nglv2-catalog__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nglv2 .nglv2-catalog__img {
	transition: transform 0.8s var(--nglv2-ease);
}

.nglv2 .nglv2-catalog__media:hover .nglv2-catalog__img {
	transform: scale(1.05);
}

/* A portrait PDF cover (no slide image yet): the whole page, over a blurred copy of itself. */
.nglv2 .nglv2-catalog__media--portrait .nglv2-catalog__img {
	object-fit: contain;
}

.nglv2 .nglv2-catalog__backdrop {
	filter: blur(28px);
	opacity: 0.6;
	transform: scale(1.2);
}

.nglv2-catalog__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/*
 * Figma gives the 32px title a 29.6px line box. The negative margin reproduces that spacing for the
 * one-line title of the design, while the real line-height keeps a title that wraps legible:
 * (29.6 / 32 − 1.3) / 2 = −0.1875em.
 */
.nglv2 .nglv2-catalog__title {
	margin-block: -0.1875em;
	font-weight: 700;
	font-size: clamp(20px, 2.22vw, 32px);
	line-height: 1.3;
	color: #000;
}

.nglv2 .nglv2-catalog__text {
	font-size: 16px;
	line-height: 1.85;
	color: #000;
}

/* ==============================================================================================
 * News (149:8560) — addepto.com "Customer stories" layout.
 * ============================================================================================ */

.nglv2-news .nglv2-center-head {
	margin-bottom: 64px;
}

.nglv2-news__list {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-bottom: 64px;
}

.nglv2-news-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nglv2-news-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.nglv2-news-item__text {
	display: flex;
	flex: 0 1 806px;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.nglv2 .nglv2-news-item__title {
	font-weight: 800;
	font-size: clamp(22px, 2.22vw, 32px);
	line-height: 2;
}

.nglv2 .nglv2-news-item__title a {
	color: var(--nglv2-ink);
	transition: color 0.25s;
}

.nglv2 .nglv2-news-item__title a:hover {
	color: var(--nglv2-green-dark);
}

.nglv2 .nglv2-news-item__excerpt {
	max-width: 736px;
	margin-bottom: 30px;
	font-weight: 500;
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.48;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-news-item__quote {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
	border: 0;
	background: none;
}

.nglv2-news-item__mark {
	flex-shrink: 0;
	height: 64px;
	font-family: "NGL Quote", Georgia, serif;
	font-weight: 700;
	font-size: 128px;
	line-height: 64px;
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-news-item__quote p {
	max-width: 667px;
	font-weight: 300;
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.48;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-news-item__more {
	align-self: flex-end;
	padding-inline: 64px;
}

.nglv2 .nglv2-news-item__media {
	position: relative;
	display: block;
	flex: 0 0 394px;
	height: 403px;
}

.nglv2-news-item__block {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 266px;
	background: var(--nglv2-navy);
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-news-item__img {
	position: absolute;
	top: 37.5px;
	inset-inline-end: 66px;
	width: 328px;
	height: 328px;
	object-fit: cover;
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-news-item:hover .nglv2-news-item__img {
	transform: translate3d(calc(var(--nglv2-dir) * 8px), -8px, 0);
}

.nglv2 .nglv2-news-item:hover .nglv2-news-item__block {
	transform: translate3d(calc(var(--nglv2-dir) * -6px), 6px, 0);
}

.nglv2-news-item__rule {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nglv2-news-item__rule span:first-child {
	flex: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.25);
}

.nglv2-news-item__rule span:last-child {
	flex: 0 0 226px;
	height: 1px;
	background: var(--nglv2-accent);
}

/* ==============================================================================================
 * Testimonials (149:8630)
 * ============================================================================================ */

.nglv2-testi .nglv2-band__body {
	padding-block: 80px;
}

.nglv2-testi__inner {
	display: flex;
	align-items: center;
}

.nglv2-testi .nglv2-carousel-nav--vertical {
	flex-shrink: 0;
	margin-inline-end: 48px;
}

.nglv2-testi__intro {
	flex: 0 1 441px;
	min-width: 0;
}

.nglv2-testi__inner--solo .nglv2-testi__intro {
	flex-basis: 640px;
}

.nglv2 .nglv2-testi__title {
	font-weight: 800;
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.4;
	color: #fff;
}

.nglv2 .nglv2-testi__desc {
	margin-top: 24px;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.6;
	color: #f3f3f3;
	text-align: justify;
}

.nglv2 .nglv2-testi__rule {
	height: 1px;
	margin: 26px 0;
	border: 0;
	background: rgba(243, 243, 243, 0.28);
}

.nglv2-testi__stats {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.nglv2-testi__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.nglv2-testi__num {
	font-weight: 700;
	font-size: clamp(24px, 2.08vw, 30px);
	line-height: 1.3;
	color: #f3f3f3;
	font-variant-numeric: tabular-nums;
}

.nglv2-testi__label {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: #e5e5e5;
}

.nglv2-testi__slider {
	position: relative;
	flex: 0 1 545px;
	min-width: 0;
	margin-inline-start: auto;
}

.nglv2-testi__glow {
	position: absolute;
	inset: 0;
	border-radius: 32px;
	background: linear-gradient(to left, #334e8f, #235a35);
	filter: blur(12.6px);
}

html:not([dir="rtl"]) .nglv2-testi__glow {
	background: linear-gradient(to right, #334e8f, #235a35);
}

.nglv2-testi__swiper {
	position: relative;
	height: 340px;
	border-radius: 32px;
}

.nglv2 .nglv2-tcard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	height: 100%;
	margin: 0;
	padding: 32px 48px;
	border-radius: 32px;
	background: var(--nglv2-navy);
}

.nglv2-tcard__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nglv2-tcard__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 73px;
	height: 73px;
	overflow: hidden;
	border: 3px solid #c6c9cf;
	border-radius: 50%;
	background: #fff;
}

.nglv2 .nglv2-tcard__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nglv2-tcard__initial {
	font-weight: 800;
	font-size: 28px;
	color: var(--nglv2-navy);
}

.nglv2-tcard__who {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.nglv2-tcard__name {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.nglv2-tcard__role {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: #ccc;
}

.nglv2 .nglv2-tcard__quote-icon {
	width: 45px;
	height: auto;
	margin-inline-start: auto;
}

.nglv2 .nglv2-tcard__text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.nglv2 .nglv2-tcard__text p {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.7;
	color: #f3f3f3;
	text-align: justify;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.nglv2-tcard__stars {
	display: flex;
	gap: 4px;
}

.nglv2-tcard__stars .nglv2-icon {
	width: 26px;
	height: 26px;
	color: #ffd400;
}

.nglv2-tcard__stars .nglv2-icon.is-off {
	color: rgba(255, 255, 255, 0.2);
}

/* ==============================================================================================
 * Equipment (149:8682) — two endless rows in opposite directions.
 * ============================================================================================ */

.nglv2-equip__head {
	margin-bottom: 64px;
}

.nglv2-equip__accent {
	position: relative;
	display: inline-block;
}

.nglv2 .nglv2-swoosh--short {
	position: absolute;
	inset-inline-start: 0;
	bottom: -6px;
	width: 160px;
	margin: 0;
}

.nglv2-marquee {
	display: flex;
	flex-direction: column;
	gap: 64px;
	overflow: hidden;
	padding-block: 6px;
}

.nglv2-marquee__track {
	display: flex;
	gap: 30px;
	width: max-content;
	animation: nglv2-marquee-rtl var(--nglv2-marquee-duration, calc(var(--nglv2-marquee-items, 5) * 8s)) linear infinite;
}

html:not([dir="rtl"]) .nglv2-marquee__track {
	animation-name: nglv2-marquee-ltr;
}

.nglv2-marquee__row--reverse .nglv2-marquee__track {
	animation-direction: reverse;
	animation-delay: calc(var(--nglv2-marquee-items, 5) * -3s);
}

.nglv2-marquee:hover .nglv2-marquee__track,
.nglv2-marquee.is-paused .nglv2-marquee__track {
	animation-play-state: paused;
}

/* One copy + one gap = 50% + 15px of the doubled track. */
@keyframes nglv2-marquee-rtl {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(50% + 15px), 0, 0);
	}
}

@keyframes nglv2-marquee-ltr {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-50% - 15px), 0, 0);
	}
}

/* 320px as in the design; longer real names widen the card instead of wrapping out of its fixed height. */
.nglv2-ecard {
	display: flex;
	flex: 0 0 auto;
	min-width: 320px;
	max-width: 560px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	height: 135px;
	padding: 32px;
	border-radius: 32px;
	background: #fff;
	transition: box-shadow 0.3s, transform 0.3s var(--nglv2-ease);
}

.nglv2-ecard:hover {
	box-shadow: 0 14px 34px rgba(25, 36, 49, 0.1);
	transform: translateY(-4px);
}

.nglv2-ecard__name {
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: var(--nglv2-ink);
}

.nglv2-ecard__area {
	font-size: 20px;
	line-height: 30px;
	color: var(--nglv2-accent);
}

.nglv2-ecard__name,
.nglv2-ecard__area {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.nglv2-marquee__row {
		overflow-x: auto;
	}

	.nglv2-marquee__track {
		animation: none;
	}

	.nglv2-marquee__track > [aria-hidden="true"] {
		display: none;
	}
}

/* ==============================================================================================
 * Call to action (149:8728)
 * ============================================================================================ */

.nglv2-cta .nglv2-container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2 .nglv2-cta__title {
	font-family: var(--nglv2-font-cta);
	font-weight: 800;
	font-size: clamp(24px, 2.78vw, 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

/* ==============================================================================================
 * Responsive
 * ============================================================================================ */

@media (max-width: 1199px) {
	.nglv2-certs__inner {
		gap: 48px;
	}

	.nglv2-certs__slider {
		flex-basis: 440px;
	}

	.nglv2 .nglv2-certs__badge {
		width: 220px;
		height: 220px;
	}

	.nglv2-news-item__media {
		flex-basis: 330px;
	}

	.nglv2-testi .nglv2-carousel-nav--vertical {
		margin-inline-end: 28px;
	}

	.nglv2-testi__slider {
		margin-inline-start: 40px;
	}
}

@media (max-width: 1023px) {
	.nglv2 .nglv2-scard--lg {
		height: 440px;
	}

	.nglv2 .nglv2-scard {
		height: 300px;
	}

	.nglv2-services__col--main {
		gap: 32px;
	}

	.nglv2-testlist {
		flex-direction: column;
		align-items: flex-start;
	}

	.nglv2 .nglv2-diff__title {
		white-space: normal;
	}

	.nglv2-certs__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.nglv2-certs__text {
		flex-basis: auto;
	}

	.nglv2-certs__slider {
		flex-basis: auto;
	}

	.nglv2-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.nglv2-stat {
		height: 220px;
		border-inline-start: 2px solid var(--nglv2-accent-30);
	}

	.nglv2-stat:nth-child(n + 3) {
		border-top: 0;
	}

	.nglv2-stat:nth-child(2n) {
		border-inline-start: 0;
	}

	.nglv2-projects__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.nglv2-catalogs__inner {
		flex-direction: column;
		min-height: 0;
	}

	.nglv2-catalogs__slider {
		flex-basis: auto;
		max-width: none;
		padding-inline-start: 0;
		padding-top: 32px;
	}

	.nglv2-news-item__row {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	/* Its children are absolutely positioned, so the box needs an explicit width once the row stacks. */
	.nglv2 .nglv2-news-item__media {
		align-self: flex-end;
		flex: 0 0 auto;
		width: min(394px, 100%);
	}

	.nglv2-testi__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.nglv2-testi .nglv2-carousel-nav--vertical {
		flex-direction: row;
		order: 3;
		justify-content: center;
		margin: 0;
	}

	.nglv2-testi__slider {
		flex-basis: auto;
		width: min(545px, 100%);
		margin-inline: auto;
	}

	.nglv2-testi__intro {
		flex-basis: auto;
	}
}

@media (max-width: 767px) {
	.nglv2-hero {
		clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
		padding-bottom: calc(var(--nglv2-header-h) + 40px);
	}

	.nglv2-hero__content {
		gap: 24px;
	}

	.nglv2-hero__actions {
		flex-direction: column;
		width: 100%;
		gap: 14px;
	}

	.nglv2 .nglv2-btn--hero,
	.nglv2 .nglv2-btn--glass {
		width: 100%;
		max-width: 320px;
		height: 56px;
		font-size: 17px;
	}

	.nglv2-services__head,
	.nglv2-row-head,
	.nglv2-diff .nglv2-center-head,
	.nglv2-news .nglv2-center-head,
	.nglv2-equip__head {
		margin-bottom: 36px;
	}

	.nglv2-services__grid {
		flex-direction: column;
		gap: 16px;
	}

	.nglv2 .nglv2-scard,
	.nglv2 .nglv2-scard--lg {
		height: 320px;
	}

	.nglv2-testlist {
		padding-block: 8px;
	}

	/* Differentiators become a vertical accordion. */
	.nglv2-diff__stage {
		flex-direction: column;
		gap: 10px;
		height: auto;
	}

	.nglv2 .nglv2-diff__panel,
	.nglv2 .nglv2-diff__panel.is-active,
	.nglv2 .nglv2-diff__panel.is-active:last-child {
		flex: 0 0 auto;
		height: 96px;
		margin: 0;
		box-shadow: none;
		transition: height 0.6s var(--nglv2-ease);
	}

	.nglv2 .nglv2-diff__panel.is-active,
	.nglv2 .nglv2-diff__panel.is-active:last-child {
		height: 340px;
	}

	.nglv2 .nglv2-diff__img {
		left: 0;
		width: 100%;
		transform: scale(var(--nglv2-zoom, 1));
	}

	.nglv2-diff__caption {
		inset-inline: 20px;
		bottom: 20px;
		gap: 14px;
	}

	.nglv2-diff__bar {
		width: 72px;
		height: 8px;
	}

	.nglv2 .nglv2-certs__badge {
		width: min(266px, 70vw);
		height: auto;
		aspect-ratio: 1;
	}

	.nglv2-stats__inner {
		padding-bottom: 48px;
	}

	.nglv2-stats__grid {
		grid-template-columns: 1fr 1fr;
	}

	.nglv2-stat {
		height: auto;
		min-height: 170px;
		gap: 18px;
		padding: 18px 16px;
	}

	.nglv2-stat__label {
		font-size: 14px;
	}

	.nglv2-projects__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.nglv2-pcard__body {
		padding: 20px 4px 0;
		gap: 14px;
	}

	.nglv2-catalogs__panel {
		padding: 36px 20px;
	}

	.nglv2 .nglv2-catalog__media {
		border-radius: 20px;
	}

	.nglv2 .nglv2-btn--sm {
		width: 100%;
	}

	.nglv2-news__list {
		gap: 40px;
	}

	.nglv2 .nglv2-news-item__media {
		flex-basis: auto;
		width: min(394px, 100%);
		height: auto;
		aspect-ratio: 394 / 403;
	}

	.nglv2-news-item__block {
		width: 67.5%;
	}

	.nglv2 .nglv2-news-item__img {
		top: 9.3%;
		inset-inline-end: 16.75%;
		width: 83.25%;
		height: auto;
		aspect-ratio: 1;
	}

	.nglv2 .nglv2-news-item__title {
		line-height: 1.6;
	}

	.nglv2 .nglv2-news-item__excerpt {
		margin-bottom: 16px;
	}

	.nglv2-news-item__mark {
		font-size: 88px;
		line-height: 48px;
		height: 48px;
	}

	.nglv2 .nglv2-news-item__more {
		padding-inline: 0;
	}

	.nglv2-testi .nglv2-band__body {
		padding-block: 48px;
	}

	.nglv2 .nglv2-tcard {
		padding: 24px;
	}

	.nglv2-testi__swiper {
		height: 380px;
	}

	.nglv2-marquee {
		gap: 24px;
	}

	.nglv2-ecard {
		min-width: 250px;
		height: 110px;
		padding: 24px;
		border-radius: 24px;
	}

	.nglv2-ecard__name {
		font-size: 19px;
	}

	.nglv2-ecard__area {
		font-size: 16px;
	}

	.nglv2 .nglv2-btn--lg {
		width: 100%;
		max-width: 320px;
		height: 60px;
	}
}