/* NexaPress Elementor Widgets — full-bleed + header + editor helpers */

/* Prevent horizontal scroll caused by the bleed trick below. */
body.elementor-page,
body.elementor-template-canvas {
	overflow-x: hidden;
}

/* Image logos keep their intrinsic ratio until a widget style control
   intentionally sets a width/height. */
.npw-logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	flex: 0 0 auto;
}

/*
 * Each widget lives inside an Elementor container (full width). To let the
 * section's background fill the full viewport width (matching the original
 * full-bleed design) we break the root element out of the column.
 */
.npw-bleed {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 0;
	margin-left: -50vw;
}

/* The global footer is already rendered in a full-width root container.
 * Avoid 100vw here because it includes the vertical scrollbar on archive and
 * single templates, creating a small horizontal page overflow. */
.site-footer.npw-bleed {
	width: 100%;
	max-width: 100%;
	left: 0;
	right: auto;
	margin-left: 0;
}

/* The theme's reveal animation hides elements until scrolled into view.
   Inside the Elementor EDITOR we always show them so the content is editable. */
body.elementor-editor-active .reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* Editor: disable bleed so layout editing is predictable. */
body.elementor-editor-active .npw-bleed {
	width: 100% !important;
	max-width: 100% !important;
	left: 0 !important;
	margin-left: 0 !important;
}

/* -------------------------------------------------------------------------
 * Floating glass header — boxed, transparent, sticky (fixed), glassmorphism.
 * Overrides the theme's absolute full-width header so it blends with the hero.
 * ---------------------------------------------------------------------- */
.site-header,
.site-header.npw-bleed {
	position: fixed !important;
	top: 14px;
	left: 50% !important;
	transform: translateX(-50%);
	width: min(calc(100% - 28px), 1280px) !important;
	max-width: 1280px;
	margin: 0 !important;
	padding: 9px 22px !important;
	border-radius: 999px;
	z-index: 1000;
	/* Transparent at the very top (no bar, no shadow). The glass + shadow appear
	   once the page is scrolled (.is-scrolled, toggled by assets/js/npew.js). */
	background: transparent !important;
	border: 1px solid transparent;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	box-shadow: none;
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
/* Glass + shadow once the page is scrolled. */
.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.42) !important;
	border-color: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	box-shadow: 0 14px 40px rgba(9, 31, 23, 0.14);
}

.site-header .nav-wrap {
	gap: 24px;
}
.site-header .nav-cta {
	white-space: nowrap;
}

/* Make sure the floating header stays above the side progress rail. */
.section-rail {
	z-index: 900;
}

/* Anchor jumps should clear the floating header. */
section[id],
[id="top"] {
	scroll-margin-top: 96px;
}

/* The hero content needs to clear the floating header (≈78px tall + 14px top). */
.elementor-widget-npew-hero .hero {
	padding-top: 130px;
}
@media (max-width: 700px) {
	.elementor-widget-npew-hero .hero {
		padding-top: 96px;
	}
	.site-header,
	.site-header.npw-bleed {
		top: 8px;
		padding: 8px 14px !important;
	}
}

/* Keep the floating controls clear of WordPress' frontend admin toolbar.
 * The core variable is 32px on desktop and 46px on narrow screens. */
body.admin-bar .site-header,
body.admin-bar .site-header.npw-bleed {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 8px);
}

/* Keep the Elementor widget wrapper from adding its own spacing. */
.elementor-widget-npew-hello .elementor-widget-container {
	margin: 0;
}

/* =========================================================================
 * Work / Case cards — Mac browser window + hover scroll + STICKY STACK.
 * Cards live in a normal vertical list (visible from the first). Each card is
 * position:sticky with the SAME `top` — so as you scroll they pin ONE BY ONE
 * (card 0 first, last card last). Crucially, because every card shares the same
 * sticky top, they all RELEASE at the same instant => the finished stack lifts
 * up TOGETHER at the end (no peeling, no re-stacking, no JS override needed).
 * The layered look comes from a per-card translateY offset (--off) + a shrink to
 * --scale once a card has pinned (class toggled by npew.js): 1st card smallest,
 * last card full size.
 * ====================================================================== */

/* Sticky needs the section to NOT clip overflow. */
.elementor-widget-npew-work .section,
.npew-work .section {
	overflow: visible !important;
}

/* The list of cards (normal flow). npew.js adds padding-bottom for hold room. */
.elementor-widget-npew-work .case-list,
.npew-work .case-list {
	display: block;
}

/* Every card pins at the SAME top (=> they release together = lift together).
   --off (translateY) spaces them into a layered stack; full size until pinned. */
.elementor-widget-npew-work .case-card,
.npew-work .case-card {
	position: sticky;
	top: 108px;
	z-index: 1;
	transform: translateY(var(--off, 0px)) scale(1);
	transform-origin: center top; /* shrink anchors at the top edge so layers nest */
	transition: transform 0.45s cubic-bezier(0.16, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

/* Once a card has pinned it shrinks to its layer size (1st card smallest). */
.elementor-widget-npew-work .case-card.is-pinned,
.npew-work .case-card.is-pinned {
	transform: translateY(var(--off, 0px)) scale(var(--scale, 1));
}

/* A touch more shadow on the front (last) card for depth. */
.elementor-widget-npew-work .case-card:last-child,
.npew-work .case-card:last-child {
	box-shadow: 0 26px 60px rgba(15, 42, 33, 0.18);
}

/* Elementor editor: predictable, editable list (no sticky/shrink). */
body.elementor-editor-active .elementor-widget-npew-work .case-card,
body.elementor-editor-active .npew-work .case-card { position: relative; top: auto; transform: none; }

/* Turn the preview frame into a Mac browser window. */
.elementor-widget-npew-work .case-preview-frame,
.npew-work .case-preview-frame {
	position: relative;
	display: block;
	overflow: hidden;
	padding-top: 30px;
	min-height: 320px;
	height: 340px;
	border-radius: 14px;
	border: 1px solid #c9d6ce;
	background: #fff;
	box-shadow: 0 20px 44px rgba(15, 42, 33, 0.16);
}

/* Browser chrome top bar with traffic-light dots. */
.elementor-widget-npew-work .case-preview-frame::before,
.npew-work .case-preview-frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 30px;
	z-index: 3;
	background:
		radial-gradient(circle 5px at 18px 15px, #ff5f57 4px, transparent 5px),
		radial-gradient(circle 5px at 38px 15px, #febc2e 4px, transparent 5px),
		radial-gradient(circle 5px at 58px 15px, #28c840 4px, transparent 5px),
		linear-gradient(#f2f6f3, #e8eee9);
	border-bottom: 1px solid #d4ddd7;
}

/* Browser address-bar pill. */
.elementor-widget-npew-work .case-preview-frame::after,
.npew-work .case-preview-frame::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 84px;
	right: 16px;
	height: 16px;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #dde4df;
	z-index: 3;
}

/* The screenshot image is taller than the window so it can scroll on hover. */
.elementor-widget-npew-work .case-preview,
.npew-work .case-preview {
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 0;
	display: block;
	border-radius: 0;
	transform: translateY(0);
	transition: transform 4s cubic-bezier(0.16, 0.62, 0.18, 1);
	will-change: transform;
}

/* On hover, smoothly scroll the page top → bottom. */
.elementor-widget-npew-work .case-card:hover .case-preview,
.npew-work .case-card:hover .case-preview {
	transform: translateY(-170px);
}

@media (max-width: 1024px) {
	.elementor-widget-npew-work .case-preview-frame,
	.npew-work .case-preview-frame {
		height: 300px;
	}
	.elementor-widget-npew-work .case-preview,
	.npew-work .case-preview {
		height: auto;
	}
	.elementor-widget-npew-work .case-card:hover .case-preview,
	.npew-work .case-card:hover .case-preview {
		transform: translateY(-150px);
	}
}

@media (max-width: 767px) {
	/* No sticky stack on mobile — a plain stacked list with row gap. */
	.elementor-widget-npew-work .case-list,
	.npew-work .case-list {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.elementor-widget-npew-work .case-card,
	.npew-work .case-card {
		position: relative;
		top: auto;
		transform: none !important;
	}
	.elementor-widget-npew-work .case-preview-frame,
	.npew-work .case-preview-frame {
		height: 240px;
		min-height: 240px;
	}
	.elementor-widget-npew-work .case-preview,
	.npew-work .case-preview {
		height: 360px;
	}
	.elementor-widget-npew-work .case-card:hover .case-preview,
	.npew-work .case-card:hover .case-preview {
		transform: translateY(-120px);
	}
}

/* =========================================================================
 * Projects archive (/projects/) — hero + category filter + 2-column grid.
 * Cards reuse the Work .case-card markup; the Mac browser-window + hover
 * scroll rules below are re-scoped to .npew-projects-grid so the archive cards
 * match the homepage (the widget-scoped rules above only apply there).
 * ====================================================================== */

.npew-projects-hero {
	position: relative;
	padding: 150px 0 78px;
	background:
		radial-gradient(circle at 78% 18%, rgba(200, 245, 62, .18), transparent 27%),
		linear-gradient(135deg, #0b2119 0%, #12382b 58%, #0e2d23 100%);
	color: var(--paper, #edf5ef);
	overflow: hidden;
}
.npew-projects-hero::before {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(237, 245, 239, .12) .7px, transparent .7px);
	background-size: 17px 17px;
	mask-image: linear-gradient(90deg, black, transparent 72%);
	content: "";
	opacity: .35;
	pointer-events: none;
}
.npew-projects-hero-shell {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
	align-items: center;
	gap: clamp(54px, 7vw, 100px);
}
.npew-projects-hero-copy { max-width: 720px; }
.npew-projects-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 19px;
	color: var(--accent, #c8f53e);
	font-family: var(--sans, inherit);
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.npew-projects-hero .eyebrow::before { display: none; }
.npew-projects-hero .eyebrow > span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 6px rgba(200, 245, 62, .1);
}
.npew-projects-hero .section-title {
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(50px, 6vw, 82px);
	line-height: .96;
	letter-spacing: -.045em;
	margin: 0 0 24px;
	color: var(--paper, #edf5ef);
	font-weight: 600;
}
.npew-projects-hero .section-title em {
	display: block;
	color: var(--accent, #c8f53e);
	font-style: italic;
	font-weight: 500;
}
.npew-projects-hero .npw-body {
	max-width: 610px;
	color: rgba(237, 245, 239, .7);
	font-size: 16px;
	line-height: 1.75;
	margin: 0;
}
.npew-projects-hero-meta {
	display: flex;
	gap: 10px;
	margin-top: 30px;
}
.npew-projects-hero-meta > span {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .055);
	color: rgba(237, 245, 239, .67);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.npew-projects-hero-meta strong { color: var(--accent, #c8f53e); font-size: 14px; }

.npew-projects-hero-visual {
	position: relative;
	min-height: 360px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 26px;
	background: rgba(255, 255, 255, .075);
	box-shadow: 0 34px 80px rgba(0, 0, 0, .28);
	backdrop-filter: blur(16px);
	transform: rotate(1.5deg);
}
.npew-projects-visual-top {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 2px 2px 17px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.npew-projects-visual-top > span { width: 7px; height: 7px; border-radius: 50%; background: rgba(237,245,239,.28); }
.npew-projects-visual-top > span:first-child { background: var(--accent, #c8f53e); }
.npew-projects-visual-top small { margin-left: auto; color: rgba(237,245,239,.48); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.npew-projects-visual-list { display: grid; gap: 8px; padding: 18px 0; }
.npew-projects-visual-list > div {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 10px 13px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: rgba(5, 21, 15, .24);
}
.npew-projects-visual-list span { color: var(--accent, #c8f53e); font-size: 9px; font-weight: 800; }
.npew-projects-visual-list strong { overflow: hidden; color: var(--paper, #edf5ef); font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.npew-projects-visual-list i { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.npew-projects-visual-list i::after { display: block; width: 5px; height: 5px; margin: 6px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); content: ""; transform: rotate(45deg); }
.npew-projects-visual-stamp { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; color: rgba(237,245,239,.42); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.npew-projects-visual-stamp strong { color: rgba(237,245,239,.72); font-size: 9px; }

.npew-projects-body {
	padding: 30px 0 110px;
	background: #fff;
}

/* Filter pills. */
.npew-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}
.npew-filter-btn {
	border: 1px solid var(--line, #d8e0db);
	border-radius: 999px;
	padding: 9px 18px;
	background: #fff;
	color: var(--ink, #0e2b21);
	font-family: var(--sans, inherit);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.npew-filter-btn:hover { transform: translateY(-1px); }
.npew-filter-btn.is-active {
	background: var(--ink, #0e2b21);
	color: var(--paper, #edf5ef);
	border-color: var(--ink, #0e2b21);
}

/* 2-column grid. */
.npew-projects-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

/* Vertical card: number + text on top, the big screenshot sits BELOW it
   (full card width) so it reads large. */
.npew-projects-grid .case-card {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	min-height: 0;
	padding: 24px;
	overflow: hidden;
}
.npew-projects-grid .case-number { display: none; } /* reference design has no number */
.npew-projects-grid .case-info { padding: 0 0 24px 0; }
.npew-projects-grid .case-info h3 { font-size: 26px; line-height: 1.15; margin-bottom: 10px; }

/* Tinted "result / highlight" box (light green) like the reference card. */
.npew-projects-grid .case-info .case-highlight {
	background: #ecf6ed;
	border-left: 3px solid var(--accent-2, #6b9b3a);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 16px 0 0;
}
.npew-projects-grid .case-highlight strong {
	display: block;
	color: #4f7a32;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.npew-projects-grid .case-highlight span {
	display: block;
	color: #2f4d28;
	font-size: 13px;
	line-height: 1.45;
}

/* Mac browser window + hover scroll for archive cards (re-scoped, full width). */
.npew-projects-grid .case-preview-frame {
	position: relative;
	display: block;
	overflow: hidden;
	padding-top: 28px;
	min-height: 340px;
	height: 340px;
	border: 1px solid #e6ece8;
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
}
.npew-projects-grid .case-preview-frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 28px;
	z-index: 3;
	background:
		radial-gradient(circle 5px at 18px 14px, #ff5f57 4px, transparent 5px),
		radial-gradient(circle 5px at 38px 14px, #febc2e 4px, transparent 5px),
		radial-gradient(circle 5px at 58px 14px, #28c840 4px, transparent 5px),
		linear-gradient(#f2f6f3, #e8eee9);
	border-bottom: 1px solid #d4ddd7;
}
.npew-projects-grid .case-preview-frame::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 80px;
	right: 14px;
	height: 16px;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #dde4df;
	z-index: 3;
}
/* The screenshot is shown at its natural aspect ratio (full width). JS pans it
   to its own bottom on hover, so the whole uploaded image is reachable. */
.npew-projects-grid .case-preview {
	position: absolute;
	top: 28px;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
	transform: translateY(0);
	transition: transform 1.4s cubic-bezier(0.25, 0.6, 0.3, 1);
	will-change: transform;
}

/* Filter show/hide. */
.npew-project-card { transition: opacity .25s ease; }
.npew-project-card.is-hidden { display: none; }

.npew-projects-empty {
	color: var(--muted, #6e7e75);
	font-size: 16px;
	padding: 16px 0;
}

@media (max-width: 880px) {
	.npew-projects-grid { grid-template-columns: 1fr; }
	.npew-projects-hero { padding: 126px 0 64px; }
	.npew-projects-hero-shell { grid-template-columns: 1fr; gap: 38px; }
	.npew-projects-hero-visual { min-height: 320px; transform: none; }
	.npew-projects-grid .case-card > .case-preview-frame { grid-column: auto !important; width: 100%; }
}
@media (max-width: 620px) {
	.npew-projects-hero { padding: 112px 0 54px; }
	.npew-projects-hero .section-title { font-size: clamp(44px, 13vw, 62px); }
	.npew-projects-hero-meta { flex-wrap: wrap; }
	.npew-projects-hero-visual { min-height: 292px; padding: 14px; border-radius: 20px; }
	.npew-projects-visual-list > div { min-height: 52px; }
	.npew-projects-visual-stamp { right: 14px; bottom: 14px; left: 14px; }
	.npew-projects-grid .case-preview-frame { height: 240px; min-height: 240px; }
	.npew-projects-grid .case-preview { height: auto !important; min-height: 0; }
	.npew-projects-grid .case-number { padding: 18px 18px 0; }
	.npew-projects-grid .case-info { padding: 4px 18px 16px; }
}

body.post-type-archive-np_project:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.post-type-archive-np_project:not(.nav-open) .site-header:not(.is-scrolled) .brand-name { color: var(--paper, #edf5ef); }
body.post-type-archive-np_project:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image { filter: brightness(0) invert(1); }
body.post-type-archive-np_project:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta { background: var(--accent, #c8f53e); color: var(--ink, #0f2a21); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
body.post-type-archive-np_project:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span { background: var(--paper, #edf5ef); }

/* Shared dark page-header treatment for Projects, Blog archives and articles. */
body.blog:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.category:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.tag:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.author:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.date:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.single-post:not(.nav-open) .site-header:not(.is-scrolled) .site-nav a,
body.blog:not(.nav-open) .site-header:not(.is-scrolled) .brand-name,
body.category:not(.nav-open) .site-header:not(.is-scrolled) .brand-name,
body.tag:not(.nav-open) .site-header:not(.is-scrolled) .brand-name,
body.author:not(.nav-open) .site-header:not(.is-scrolled) .brand-name,
body.date:not(.nav-open) .site-header:not(.is-scrolled) .brand-name,
body.single-post:not(.nav-open) .site-header:not(.is-scrolled) .brand-name { color: var(--paper, #edf5ef); }
body.blog:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image,
body.category:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image,
body.tag:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image,
body.author:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image,
body.date:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image,
body.single-post:not(.nav-open) .site-header:not(.is-scrolled) .npw-logo-image { filter: brightness(0) invert(1); }
body.blog:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta,
body.category:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta,
body.tag:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta,
body.author:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta,
body.date:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta,
body.single-post:not(.nav-open) .site-header:not(.is-scrolled) .nav-cta { background: var(--accent, #c8f53e); color: var(--ink, #0f2a21); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
body.blog:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span,
body.category:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span,
body.tag:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span,
body.author:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span,
body.date:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span,
body.single-post:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span { background: var(--paper, #edf5ef); }

/* Improved single-article hero and reading surface. */
.np-article-hero .np-article-hero-inner { max-width: none; text-align: left; }
.np-article-hero .np-article-hero-copy { max-width: 760px; }
.np-article-hero .np-article-breadcrumbs { justify-content: flex-start; margin-bottom: 24px; color: rgba(237,245,239,.52); }
.np-article-hero .np-article-breadcrumbs a:hover { color: var(--accent, #c8f53e); }
.np-article-hero .section-title { font-size: clamp(48px, 5.6vw, 76px); line-height: .98; }
.np-article-hero .np-article-deck { max-width: 650px; margin: 0; color: rgba(237,245,239,.68); font-size: 15px; }
.np-article-brief {
	position: relative;
	min-height: 360px;
	padding: 18px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 26px;
	background: rgba(255,255,255,.075);
	box-shadow: 0 34px 80px rgba(0,0,0,.28);
	backdrop-filter: blur(16px);
}
.np-article-brief-author { display: flex; align-items: center; gap: 13px; padding: 23px 4px 20px; }
.np-article-brief-author img { border: 2px solid rgba(255,255,255,.2); border-radius: 50%; }
.np-article-brief-author small { display: block; color: rgba(237,245,239,.46); font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.np-article-brief-author strong { display: block; margin-top: 3px; color: var(--paper, #edf5ef); font-family: var(--serif, Georgia, serif); font-size: 21px; font-weight: 600; }
.np-article-brief dl { display: grid; margin: 0; border-top: 1px solid rgba(255,255,255,.1); }
.np-article-brief dl > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.np-article-brief dt { color: rgba(237,245,239,.44); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.np-article-brief dd { margin: 0; color: var(--paper, #edf5ef); font-size: 10px; font-weight: 700; text-align: right; }
.np-article-brief > a { position: absolute; right: 22px; bottom: 20px; color: var(--accent, #c8f53e); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.np-article .np-article-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(230px, 270px); align-items: start; justify-content: center; gap: clamp(28px, 4vw, 54px); width: min(1200px, calc(100% - 48px)); max-width: 1200px; padding-top: 66px; padding-bottom: 110px; }
.np-article .np-article-content { padding: clamp(34px, 6vw, 68px); border: 1px solid var(--line, rgba(15,42,33,.16)); border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(15,42,33,.09); }
.np-article .np-article-featured { margin-top: 48px; }
.np-article-content :is(h2,h3) { scroll-margin-top: 115px; }
.np-article-toc { min-width: 0; }
.np-article-toc-card {
	position: sticky;
	top: 108px;
	padding: 18px;
	border: 1px solid var(--line, rgba(15,42,33,.16));
	border-radius: 20px;
	background: rgba(255,255,255,.86);
	box-shadow: 0 20px 55px rgba(15,42,33,.08);
	backdrop-filter: blur(14px);
}
.np-article-toc-card summary { position: relative; display: grid; gap: 4px; padding: 2px 34px 16px 2px; border-bottom: 1px solid var(--line, rgba(15,42,33,.16)); cursor: pointer; list-style: none; }
.np-article-toc-card summary::-webkit-details-marker { display: none; }
.np-article-toc-card summary span { color: #668052; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.np-article-toc-card summary strong { color: var(--ink, #0f2a21); font-family: var(--serif, Georgia, serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.np-article-toc-card summary i { position: absolute; top: 7px; right: 3px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line, rgba(15,42,33,.16)); border-radius: 50%; color: #668052; font-style: normal; transition: transform .2s ease; }
.np-article-toc-card[open] summary i { transform: rotate(45deg); }
.np-article-toc-card ol { display: grid; gap: 3px; margin: 14px 0 0; padding: 0; list-style: none; }
.np-article-toc-card li { margin: 0; }
.np-article-toc-card a { display: grid; grid-template-columns: 23px minmax(0,1fr); gap: 8px; align-items: start; padding: 9px 8px; border-radius: 10px; color: #5f7068; font-size: 11px; font-weight: 700; line-height: 1.45; transition: background .18s ease, color .18s ease, transform .18s ease; }
.np-article-toc-card a span { color: #8b9a91; font-size: 8px; letter-spacing: .06em; }
.np-article-toc-card a:hover,.np-article-toc-card a.is-active { background: #eef5e6; color: var(--ink, #0f2a21); transform: translateX(2px); }
.np-article-toc-card a.is-active span { color: #66852d; }
.np-article-toc-card .np-toc-level-3 a { padding-left: 18px; font-size: 10px; }

@media (max-width: 880px) {
	.np-article-hero .np-article-hero-inner { grid-template-columns: 1fr; }
	.np-article-brief { min-height: 330px; }
	.np-article .np-article-layout { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
	.np-article-toc { grid-row: 1; }
	.np-article-toc-card { position: static; }
}
@media (max-width: 620px) {
	.np-article-hero .section-title { font-size: clamp(43px, 13vw, 60px); }
	.np-article-brief { min-height: 320px; padding: 15px; border-radius: 20px; }
	.np-article .np-article-layout { width: min(100% - 28px, 900px); padding-top: 42px; padding-bottom: 80px; }
	.np-article .np-article-content { padding: 25px 22px; border-radius: 18px; }
	.np-article-toc-card { padding: 15px; border-radius: 17px; }
}

/* =========================================================================
 * Homepage journal — dynamic WordPress posts in a premium editorial grid.
 * ====================================================================== */

.npew-blog-section {
	background:
		radial-gradient(circle at 88% 14%, rgba(200,245,62,.13), transparent 24%),
		linear-gradient(180deg, #f7fbf7 0%, #edf5ef 100%);
}
.npew-blog-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
	align-items: end;
	gap: clamp(42px, 7vw, 90px);
	margin-bottom: 52px;
}
.npew-blog-heading h2 { max-width: 780px; font-size: clamp(44px, 5vw, 70px); }
.npew-blog-heading-side { display: grid; gap: 18px; justify-items: start; }
.npew-blog-heading-side p { margin: 0; color: var(--muted, #6c7c74); }
.npew-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.npew-blog-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	border: 1px solid var(--line, rgba(15,42,33,.16));
	border-radius: 22px;
	background: rgba(255,255,255,.72);
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(15,42,33,.07);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.npew-blog-card:hover { transform: translateY(-6px); border-color: rgba(111,141,49,.42); box-shadow: 0 28px 70px rgba(15,42,33,.13); }
.npew-blog-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); }
.npew-blog-card-media { position: relative; display: block; min-height: 255px; overflow: hidden; background: var(--ink, #0f2a21); }
.npew-blog-card:first-child .npew-blog-card-media { min-height: 410px; }
.npew-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,.7,.2,1); }
.npew-blog-card:hover .npew-blog-card-media img { transform: scale(1.035); }
.npew-blog-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 28px;
	background:
		radial-gradient(circle at 78% 22%, rgba(200,245,62,.32), transparent 23%),
		linear-gradient(145deg, #102d23, #204c3a);
	color: var(--paper, #edf5ef);
}
.npew-blog-placeholder::after {
	position: absolute;
	right: 30px;
	bottom: 28px;
	width: 105px;
	height: 105px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 50%;
	box-shadow: 0 0 0 24px rgba(255,255,255,.025), 0 0 0 49px rgba(255,255,255,.018);
	content: "";
}
.npew-blog-placeholder small { color: var(--accent, #c8f53e); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.npew-blog-placeholder strong { font-family: var(--serif, Georgia, serif); font-size: 32px; font-weight: 500; }
.npew-blog-card-body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 27px; }
.npew-blog-card:first-child .npew-blog-card-body { justify-content: center; padding: clamp(32px, 5vw, 58px); }
.npew-blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; color: #688153; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.npew-blog-card h3 { margin-bottom: 14px; font-family: var(--serif, Georgia, serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.08; }
.npew-blog-card:first-child h3 { font-size: clamp(35px, 4vw, 52px); }
.npew-blog-card h3 a { transition: color .2s ease; }
.npew-blog-card h3 a:hover { color: #66862d; }
.npew-blog-card-body > p { color: var(--muted, #6c7c74); font-size: 13px; line-height: 1.7; }
.npew-blog-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line, rgba(15,42,33,.16)); color: var(--muted, #6c7c74); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.npew-blog-card-foot a { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--ink, #0f2a21); color: var(--paper, #edf5ef); font-size: 14px; transition: transform .2s ease, background .2s ease; }
.npew-blog-card-foot a:hover { background: #6f8d31; transform: rotate(8deg); }
.npew-blog-empty { display: flex; align-items: center; gap: 15px; padding: 28px; border: 1px dashed var(--line, rgba(15,42,33,.16)); border-radius: 18px; background: rgba(255,255,255,.55); }
.npew-blog-empty span { color: #6f8d31; font-size: 24px; }
.npew-blog-empty p { margin: 0; color: var(--muted, #6c7c74); }

@media (max-width: 900px) {
	.npew-blog-heading { grid-template-columns: 1fr; gap: 22px; }
	.npew-blog-card:first-child { grid-template-columns: 1fr; }
	.npew-blog-card:first-child .npew-blog-card-media { min-height: 330px; }
}
@media (max-width: 680px) {
	.npew-blog-heading { margin-bottom: 34px; }
	.npew-blog-heading h2 { font-size: clamp(39px, 12vw, 54px); }
	.npew-blog-grid { grid-template-columns: 1fr; gap: 18px; }
	.npew-blog-card:first-child { grid-column: auto; }
	.npew-blog-card-media,
	.npew-blog-card:first-child .npew-blog-card-media { min-height: 235px; }
	.npew-blog-card:first-child .npew-blog-card-body,
	.npew-blog-card-body { padding: 24px; }
	.npew-blog-card:first-child h3 { font-size: 34px; }
}

/* =========================================================================
 * About / Partnership — glowing Bangladesh coverage map.
 * Natore is the always-on origin (steady glow + radar ripple); every other
 * city lights up one-by-one (staggered --d delay) so the service reads as
 * spreading outward from Natore. Travelling signal pulses run along each spoke.
 * ====================================================================== */

.globe-card--map { padding: 16px; }
.globe-card--map::after { display: none; } /* keep the map clean */

.bd-map {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	border-radius: 16px;
}
.bd-map .bd-outline {
	fill: rgba(95, 191, 111, 0.07);
	stroke: #5fbf6f;
	stroke-width: 2.2;
	stroke-linejoin: round;
	filter: url(#bd-glow);
	animation: bd-outline-pulse 4s ease-in-out infinite;
}
@keyframes bd-outline-pulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
}
.bd-map .bd-link { stroke: rgba(120, 235, 140, 0.5); stroke-width: 1.3; stroke-linecap: round; filter: url(#bd-glow); }
.bd-map .bd-signal { fill: #c8f9d2; filter: url(#bd-glow); }

.bd-map .bd-pin .bd-core {
	fill: #76f08a;
	filter: url(#bd-glow);
	opacity: 0;
	animation: bd-pin-lightup 6.8s linear infinite;
	animation-delay: var(--d, 0s);
	animation-fill-mode: both;
}
.bd-map .bd-pin .bd-ring {
	fill: none;
	stroke: #76f08a;
	stroke-width: 1.5;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: bd-pin-ring 6.8s linear infinite;
	animation-delay: var(--d, 0s);
	animation-fill-mode: both;
}
.bd-map .bd-pin .bd-label {
	fill: rgba(232, 255, 236, 0.78);
	font-size: 10px;
	font-weight: 700;
	opacity: 0;
	animation: bd-pin-lightup 6.8s linear infinite;
	animation-delay: var(--d, 0s);
	animation-fill-mode: both;
}

@keyframes bd-pin-lightup {
	0%, 2% { opacity: 0; }
	6% { opacity: 1; }
	16% { opacity: 1; }
	26% { opacity: 0.28; }
	42%, 100% { opacity: 0.18; }
}
@keyframes bd-pin-ring {
	0%, 2% { opacity: 0; transform: scale(1); }
	6% { opacity: 0.8; }
	20% { opacity: 0; transform: scale(3.6); }
	100% { opacity: 0; transform: scale(3.6); }
}

/* Origin (Natore): always on + continuous radar ripple. */
.bd-map .bd-pin.bd-origin .bd-core { fill: #c2f9cd; opacity: 1; animation: none; }
.bd-map .bd-pin.bd-origin .bd-ring { opacity: 0.55; animation: bd-origin-ring 2.4s ease-out infinite; }
.bd-map .bd-pin.bd-origin .bd-label { fill: #e6fff0; opacity: 1; font-size: 11.5px; animation: none; }
@keyframes bd-origin-ring {
	0% { opacity: 0.55; transform: scale(1); }
	100% { opacity: 0; transform: scale(4.4); }
}

@media (prefers-reduced-motion: reduce) {
	.bd-map * { animation: none !important; }
	.bd-map .bd-pin .bd-core,
	.bd-map .bd-pin .bd-label { opacity: 0.55; }
	.bd-map .bd-pin.bd-origin .bd-core { opacity: 1; }
}

/* Glowing dot field filling Bangladesh (video-style neon particles). */
.bd-map .bd-field { filter: drop-shadow(0 0 3px rgba(130, 255, 95, 0.85)); }
.bd-map .bd-field .bd-dot {
	fill: #9bff4f;
	opacity: 0.35;
	animation: bd-twinkle 3.6s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes bd-twinkle {
	0%, 100% { opacity: 0.12; }
	50% { opacity: 0.95; }
}

/* =========================================================================
 * Bangladesh map — image base + WordPress-logo hotspots + curved ball arcs.
 * ====================================================================== */
.globe-card--map,
.section-dark .globe-card--map {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important; /* reveal's transform would isolate the screen-blend */
}
.globe-card--map::after { display: none; } /* no caption chip on the map */

/* Map floats transparent on the dark section, bigger. The image is a
   transparent PNG (no background), so it sits on the section naturally. */
.bd-map-wrap {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
.bd-map-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bd-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Curved (ball-like) connecting arcs from Natore + the travelling ball. */
.bd-overlay .bd-arc {
	fill: none;
	stroke: rgba(150, 255, 100, 0.5);
	stroke-width: 1.4;
	stroke-linecap: round;
	filter: drop-shadow(0 0 2px rgba(150, 255, 100, 0.6));
}
.bd-overlay .bd-ball {
	fill: #d8ff8e;
	filter: drop-shadow(0 0 5px rgba(190, 255, 110, 0.95));
}

/* WordPress-logo hotspots. */
.bd-overlay .bd-hot {
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(150, 255, 90, 0.7));
	animation: bd-hot-in 6.8s linear infinite;
	animation-delay: var(--d, 0s);
	animation-fill-mode: both;
}
@keyframes bd-hot-in {
	0%, 2% { opacity: 0; }
	6%, 100% { opacity: 1; }
}
.bd-overlay .bd-origin {
	opacity: 1 !important;
	animation: none !important;
}
.wp-badge { fill: #0b1e15; stroke: #b6f24a; stroke-width: 1.3; }
.wp-w { fill: none; stroke: #eafff0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bd-origin .wp-badge { fill: #0e2b21; stroke: #d8ff7a; stroke-width: 1.9; }
.bd-overlay .bd-label { fill: rgba(232, 255, 236, 0.82); font-size: 11px; font-weight: 700; }
.bd-overlay .bd-label-origin { fill: #eafff0; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
	.bd-overlay .bd-hot { animation: none; opacity: 1; }
}

/* =========================================================================
 * About the Developer — premium two-column section (portrait + map bg).
 * ====================================================================== */
.about-dev { padding-top: 150px; padding-bottom: 130px; }

.about-dev-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.95fr; /* ~55% / 45% */
	gap: 90px;
	align-items: center;
}

/* Eyebrow with a thin leading rule. */
.about-dev-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.about-dev-rule { width: 38px; height: 1px; background: rgba(237, 245, 239, 0.25); }
.about-dev-eyebrow .eyebrow { margin: 0; }

.about-dev-title { margin-bottom: 26px; }
.about-dev-title .npw-hl,
.npw-hl { color: var(--accent, #c8f53e); }

.about-dev .npw-body { color: rgba(237, 245, 239, 0.74); }

.about-dev-loc {
	color: rgba(237, 245, 239, 0.88);
	font-size: 14px;
	font-weight: 600;
	margin: 6px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.about-dev-loc::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--accent, #c8f53e);
	box-shadow: 0 0 8px rgba(200, 245, 62, 0.7);
	flex: 0 0 auto;
}

/* Outlined expertise tags. */
.about-dev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; }
.about-dev-tags span {
	border: 1px solid rgba(237, 245, 239, 0.18);
	color: rgba(237, 245, 239, 0.84);
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

/* CTAs — understated text links. */
.about-dev-ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.text-link-ghost {
	color: rgba(237, 245, 239, 0.58);
	font-size: 13px;
	font-weight: 700;
	transition: color .2s ease;
}
.text-link-ghost:hover { color: rgba(237, 245, 239, 0.9); }

/* Right visual: the supplied artwork already contains its own designed frame.
   Keep the outer layout frameless so it never reads as an image placed on top
   of a second card. A soft ambient glow provides separation from the section. */
.about-dev-visual {
	position: relative;
	isolation: isolate;
	padding: 8px 0 22px;
}
.about-dev-visual::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 12%;
	right: 8%;
	top: 16%;
	bottom: 8%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 48%, rgba(200, 245, 62, 0.12), rgba(17, 55, 40, 0.06) 48%, transparent 72%);
	filter: blur(28px);
	pointer-events: none;
}
.about-dev-mapbg {
	position: absolute;
	right: -10%;
	top: -8%;
	width: 82%;
	opacity: 0.055;
	pointer-events: none;
	z-index: 0;
}
.about-dev-portrait {
	position: relative;
	z-index: 1;
	width: min(96%, 540px);
	margin-inline: auto;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	background: transparent;
}
.about-dev-portrait img,
.elementor .about-dev-portrait img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.28));
}

.about-dev-label {
	position: absolute;
	z-index: 3;
	background: rgba(8, 24, 17, 0.86);
	border: 1px solid rgba(200, 245, 62, 0.3);
	color: rgba(237, 245, 239, 0.94);
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.about-dev-label-1 { top: 7%; left: -5%; }
.about-dev-label-2 { top: 46%; right: -7%; }
.about-dev-label-3 { bottom: 9%; left: 7%; }

/* Tablet / mobile. */
@media (max-width: 1180px) {
	.about-dev-grid { gap: 60px; }
}
@media (max-width: 980px) {
	.about-dev-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
	.about-dev { padding-top: 120px; }
}
@media (max-width: 820px) {
	.about-dev-grid { grid-template-columns: 1fr; gap: 44px; }
	.about-dev-copy { order: 1; }
	.about-dev-visual { order: 2; max-width: 440px; margin: 0 auto; width: 100%; }
	.about-dev-label { font-size: 10px; padding: 6px 10px; }
	.about-dev-label-1 { left: 0; }
	.about-dev-label-2 { right: 0; }
}
@media (max-width: 560px) {
	.about-dev { padding-top: 96px; }
	.about-dev-label { display: none; } /* avoid horizontal overflow on small phones */
	.about-dev-visual { padding-bottom: 12px; }
	.about-dev-portrait { width: min(100%, 420px); aspect-ratio: auto; }
}

/* =========================================================================
 * "Built around your needs" — stage cards (Launch / Improve / Ongoing).
 * Light mint section, deep dark-green cards (1 & 2) + one light card (3),
 * lime accents, thin borders. A slim shared CTA panel sits below the grid.
 * ====================================================================== */
.stages { background: #f1f7ee; }
.stages-head { max-width: 780px; margin: 0 0 52px; }
.stages-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.stages-rule { width: 38px; height: 1px; background: rgba(15, 42, 33, 0.22); }
.stages-eyebrow .eyebrow { margin: 0; }
.stages-title { margin-bottom: 18px; }
.stages .npw-hl { color: #5c9b22; } /* readable lime-green on the light bg */
.stages-intro { color: #51635a; font-size: 17px; }

.stages-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.stage-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 26px;
	border-radius: 18px;
	border: 1px solid rgba(15, 42, 33, 0.10);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Hover: restrained lime accent line at the top edge. */
.stage-card::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: var(--accent, #c8f53e);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s ease;
}
.stage-card:hover::before { transform: scaleX(1); }
.stage-card:hover { border-color: rgba(15, 42, 33, 0.18); box-shadow: 0 16px 40px rgba(15, 42, 33, 0.08); }

.stage-card--dark { background: var(--ink, #0e2b21); color: rgba(237, 245, 239, 0.85); border-color: rgba(255, 255, 255, 0.06); }
.stage-card--light { background: #ffffff; color: #2b3f37; }

.stage-card-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.stage-num { font-family: var(--serif, Georgia, serif); font-size: 30px; font-weight: 600; line-height: 1; }
.stage-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; }
.stage-card--dark .stage-num, .stage-card--dark .stage-label { color: var(--accent, #c8f53e); }
.stage-card--light .stage-num, .stage-card--light .stage-label { color: #5c9b22; }

.stage-heading { font-family: var(--serif, Georgia, serif); font-size: 25px; font-weight: 600; line-height: 1.18; margin-bottom: 10px; }
.stage-card--dark .stage-heading { color: #f3f8f1; }
.stage-card--light .stage-heading { color: var(--ink, #0e2b21); }

.stage-desc { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.stage-card--dark .stage-desc { color: rgba(237, 245, 239, 0.72); }
.stage-card--light .stage-desc { color: #5a6e64; }

.stage-block { margin-bottom: 18px; }
.stage-block-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 9px; }
.stage-card--dark .stage-block-title { color: rgba(237, 245, 239, 0.5); }
.stage-card--light .stage-block-title { color: #8a9c92; }
.stage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.4; }
.stage-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; }
.stage-card--dark .stage-list li::before { background: var(--accent, #c8f53e); }
.stage-card--light .stage-list li::before { background: #5c9b22; }

.stage-engagement { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 14px 0 4px; margin: 4px 0 18px; border-top: 1px solid rgba(15, 42, 33, 0.08); }
.stage-card--dark .stage-engagement { border-top-color: rgba(255, 255, 255, 0.10); }
.stage-eng-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.stage-eng-val { font-size: 14px; font-weight: 700; }
.stage-card--dark .stage-eng-val { color: #f3f8f1; }
.stage-card--light .stage-eng-val { color: var(--ink, #0e2b21); }

/* CTA pinned to the bottom so all three cards align. */
.stage-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
.stage-card--dark .stage-cta { color: var(--accent, #c8f53e); }
.stage-card--light .stage-cta { color: var(--ink, #0e2b21); }
.stage-arrow { font-style: normal; transition: transform .25s ease; }
.stage-card:hover .stage-arrow { transform: translate(3px, -3px); }

/* Shared CTA panel. */
.stages-panel {
	display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
	margin-top: 36px; padding: 26px 30px;
	border: 1px solid rgba(15, 42, 33, 0.12); border-radius: 16px;
	background: #ffffff;
}
.stages-panel-copy h3 { font-family: var(--serif, Georgia, serif); font-size: 22px; font-weight: 600; color: var(--ink, #0e2b21); margin-bottom: 5px; }
.stages-panel-copy p { color: #5a6e64; font-size: 14px; margin: 0; max-width: 620px; }
.stages-panel-btn { white-space: nowrap; }

@media (max-width: 1180px) { .stages-grid { gap: 18px; } .stage-card { padding: 26px 22px; } }
@media (max-width: 980px) {
	.stages-grid { grid-template-columns: 1fr 1fr; }
	.stages-grid .stage-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
	.stages-grid { grid-template-columns: 1fr; }
	.stages-grid .stage-card:last-child { grid-column: auto; }
	.stages-panel { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
 * Testimonials — dark client-voices section (matches the site identity).
 * ====================================================================== */
.testimonials-head { max-width: 720px; margin: 0 0 46px; }
.testimonials-head .eyebrow { color: var(--accent, #c8f53e); }
.testimonials-head .npw-heading { color: #f3f8f1; }
.testimonials-head .npw-body { color: rgba(237, 245, 239, 0.7); }

.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.testimonial-card {
	position: relative;
	display: flex; flex-direction: column;
	padding: 30px 28px 26px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.testimonial-card:hover { border-color: rgba(200, 245, 62, 0.3); background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); }

.t-quote-mark { font-family: var(--serif, Georgia, serif); font-size: 56px; line-height: 0.5; color: var(--accent, #c8f53e); display: block; margin-bottom: 10px; }
.t-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.t-star { color: rgba(255, 255, 255, 0.18); font-size: 14px; }
.t-star--on { color: var(--accent, #c8f53e); }
.t-quote { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: rgba(237, 245, 239, 0.9); font-family: var(--serif, Georgia, serif); font-style: italic; }
.t-author { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.t-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(200, 245, 62, 0.35); }
.t-avatar--initials { display: flex; align-items: center; justify-content: center; background: rgba(200, 245, 62, 0.12); color: var(--accent, #c8f53e); font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 600; }
.t-author-meta strong { display: block; color: #f3f8f1; font-size: 14px; font-weight: 700; }
.t-author-meta em { font-style: normal; color: rgba(237, 245, 239, 0.55); font-size: 12px; }

@media (max-width: 980px) {
	.testimonials-grid { grid-template-columns: 1fr 1fr; }
	.testimonials-grid .testimonial-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
	.testimonials-grid { grid-template-columns: 1fr; }
	.testimonials-grid .testimonial-card:last-child { grid-column: auto; }
}

/* Default main-heading scale for the whole site:
   desktop 4rem / tablet 3rem / mobile 2.5rem. (.npw-heading covers every
   section heading + the hero h1; an Elementor typography override still wins.) */
.npw-heading { font-size: 4rem; line-height: 1.1; }
@media (max-width: 1024px) { .npw-heading { font-size: 3rem; } }
@media (max-width: 767px) { .npw-heading { font-size: 2.5rem; line-height: 1.15; } }

/* FAQ accordion — smooth open/close (grid-template-rows trick). */
.accordion .faq-item { border-bottom: 1px solid var(--line, #d8e0db); }
.accordion .faq-q {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
	font-family: var(--serif, Georgia, serif); font-size: 27px; font-weight: 600; color: inherit;
}
.accordion .faq-q:focus-visible { outline: 2px solid var(--accent, #c8f53e); outline-offset: 4px; }
.accordion .faq-q span { font-family: var(--sans, inherit); font-size: 22px; font-weight: 400; transition: transform .3s ease; }
.accordion .faq-item.is-open .faq-q span { transform: rotate(45deg); }
.accordion .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.accordion .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.accordion .faq-a-inner { overflow: hidden; }
.accordion .faq-a-inner p { padding: 0 55px 22px 0; color: var(--muted, #6e7e75); font-size: 13px; line-height: 1.6; margin: 0; }
@media (max-width: 767px) { .accordion .faq-q { font-size: 20px; } .accordion .faq-a-inner p { padding-right: 24px; } }

/* =========================================================================
 * Contact popup form (modal) — site-matched, modern.
 * ====================================================================== */
.npew-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.npew-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.npew-modal::before { content: ""; position: absolute; inset: 0; background: rgba(7, 22, 16, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.npew-modal-card { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: #ffffff; border-radius: 20px; border: 1px solid rgba(15, 42, 33, 0.08); box-shadow: 0 30px 80px rgba(7, 22, 16, 0.4); padding: 0; transform: translateY(12px) scale(.98); transition: transform .3s cubic-bezier(0.16, 0.7, 0.2, 1); }
.npew-modal.is-open .npew-modal-card { transform: none; }
.npew-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer; color: #eaf3ee; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.npew-modal-close:hover { background: var(--accent, #c8f53e); color: #0e2b21; border-color: var(--accent, #c8f53e); }
.npew-modal-banner { position: relative; padding: 26px 30px 22px; background: var(--ink, #0e2b21); background-image: radial-gradient(rgba(200, 245, 62, 0.16) 1px, transparent 1.4px); background-size: 16px 16px; background-position: 0 0; border-radius: 20px 20px 0 0; overflow: hidden; }
.npew-modal-tag { display: inline-block; color: #0e2b21; background: var(--accent, #c8f53e); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin: 0 0 12px; }
.npew-modal-title { font-family: var(--serif, Georgia, serif); font-size: 26px; font-weight: 600; color: #f3f8f1; margin: 0 0 8px; line-height: 1.18; padding-right: 40px; }
.npew-modal-sub { color: rgba(237, 245, 239, 0.74); font-size: 14px; margin: 0; }
.npew-contact-form { display: flex; flex-direction: column; gap: 14px; }
.npew-field { display: flex; flex-direction: column; gap: 5px; }
.npew-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.npew-field label { font-size: 12px; font-weight: 700; color: #2b3f37; }
.npew-field input, .npew-field select, .npew-field textarea { width: 100%; padding: 11px 13px; border: 1px solid #dde4df; border-radius: 10px; font-size: 14px; font-family: inherit; color: #1c2b25; background: #fbfdfb; transition: border-color .2s, box-shadow .2s; }
.npew-field textarea { resize: vertical; }
.npew-field input:focus, .npew-field select:focus, .npew-field textarea:focus { outline: none; border-color: #5c9b22; box-shadow: 0 0 0 3px rgba(92, 155, 34, 0.12); }
.npew-form-msg { font-size: 13px; }
.npew-form-msg:empty { display: none; }
.npew-form-msg.is-error { color: #b42318; background: #fdf3f2; border: 1px solid #f2c8c4; padding: 10px 12px; border-radius: 10px; }
.npew-form-msg.is-error div { margin: 2px 0; }
.npew-form-msg.is-success { color: #1f6e3a; background: #eef8f0; border: 1px solid #c9e8d1; padding: 10px 12px; border-radius: 10px; }
.npew-modal-body { padding: 24px 30px 26px; }
.npew-form-submit { align-self: stretch; justify-content: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 13px 20px; font-size: 15px; cursor: pointer; }
.npew-modal-foot { margin: 14px 0 0; font-size: 11.5px; color: #8a9c92; text-align: center; letter-spacing: 0.02em; }
.npew-form-submit.is-loading { opacity: .7; pointer-events: none; cursor: wait; }
body.npew-modal-open { overflow: hidden; }
@media (max-width: 560px) {
	.npew-modal-card { padding: 22px; }
	.npew-field-row { grid-template-columns: 1fr; }
	.npew-form-submit { align-self: stretch; justify-content: center; }
}

/* =========================================================================
 * Global footer — premium dark closing surface with fully readable metadata.
 * ====================================================================== */
.elementor-widget-npew-footer .site-footer {
	position: relative;
	isolation: isolate;
	padding: clamp(72px, 7vw, 104px) 0 24px;
	border-top: 1px solid rgba(15,42,33,.12);
	background:
		radial-gradient(circle at 10% 5%, rgba(200,245,62,.2), transparent 27%),
		radial-gradient(circle at 92% 78%, rgba(88,139,98,.14), transparent 29%),
		linear-gradient(145deg, #f7fbf6 0%, #edf5ef 58%, #e7f1e9 100%) !important;
	color: var(--ink, #0f2a21);
	overflow: hidden;
}
.elementor-widget-npew-footer .footer-landscape {
	position: absolute;
	inset: 0;
	z-index: -1;
	height: auto;
	background-image:
		linear-gradient(rgba(15,42,33,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,42,33,.045) 1px, transparent 1px);
	background-size: 42px 42px;
	opacity: .55;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000);
	mask-image: linear-gradient(to bottom, transparent, #000 24%, #000);
	pointer-events: none;
}
.elementor-widget-npew-footer .footer-landscape::before {
	position: absolute;
	top: auto;
	right: -120px;
	bottom: -210px;
	left: auto;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(15,42,33,.09);
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 68px rgba(15,42,33,.025), 0 0 0 136px rgba(15,42,33,.015);
	content: "";
}
.elementor-widget-npew-footer .footer-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(300px,1.45fr) repeat(3,minmax(145px,.75fr));
	gap: clamp(34px,5vw,72px);
	padding-bottom: clamp(54px,6vw,78px);
}
.elementor-widget-npew-footer .footer-about {
	padding-right: clamp(24px,4vw,58px);
	border-right: 1px solid rgba(15,42,33,.11);
}
.elementor-widget-npew-footer .footer-brand {
	display: inline-flex;
	align-items: center;
	min-height: 58px;
	padding: 10px 14px;
	border: 1px solid rgba(15,42,33,.11);
	border-radius: 15px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 18px 45px rgba(15,42,33,.1);
}
.elementor-widget-npew-footer .footer-brand .npw-logo-image { display: block; max-height: 42px; object-fit: contain; }
.elementor-widget-npew-footer .footer-brand .brand-name { color: var(--ink, #0f2a21); }
.elementor-widget-npew-footer .footer-about p {
	max-width: 420px;
	margin: 24px 0 20px;
	color: #61756b;
	font-size: 13px;
	line-height: 1.75;
}
.elementor-widget-npew-footer .footer-about > a:last-child {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 39px;
	padding: 0 14px;
	border: 1px solid rgba(95,126,43,.24);
	border-radius: 999px;
	background: rgba(200,245,62,.17);
	color: #496719;
	font-size: 11px;
	font-weight: 800;
}
.elementor-widget-npew-footer .footer-about > a:last-child::after { content: "↗"; font-size: 13px; }
.elementor-widget-npew-footer .footer-grid h3 {
	margin: 7px 0 22px;
	color: #587b28;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.elementor-widget-npew-footer .footer-grid > div:not(.footer-about) a {
	position: relative;
	display: block;
	margin: 0;
	padding: 7px 0;
	color: #566c61;
	font-size: 11px;
	line-height: 1.45;
	transition: color .18s ease, transform .18s ease;
}
.elementor-widget-npew-footer .footer-grid > div:not(.footer-about) a:hover {
	color: var(--ink, #0f2a21);
	transform: translateX(4px);
}
.elementor-widget-npew-footer .footer-bottom {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 62px;
	margin-bottom: 0;
	padding: 17px 21px;
	border: 1px solid rgba(15,42,33,.11);
	border-radius: 15px;
	background: rgba(255,255,255,.66);
	color: #3f584c;
	font-size: 10px;
	line-height: 1.55;
	backdrop-filter: blur(12px);
}
.elementor-widget-npew-footer .footer-bottom span:last-child { color: #667b70; text-align: right; }

@media (max-width: 900px) {
	.elementor-widget-npew-footer .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px 42px; }
	.elementor-widget-npew-footer .footer-about { grid-column: 1 / -1; padding: 0 0 34px; border-right: 0; border-bottom: 1px solid rgba(15,42,33,.11); }
	.elementor-widget-npew-footer .footer-grid > div:last-child { grid-column: auto !important; }
}
@media (max-width: 560px) {
	.elementor-widget-npew-footer .site-footer { padding-top: 62px; }
	.elementor-widget-npew-footer .footer-grid { grid-template-columns: 1fr; gap: 31px; padding-bottom: 42px; }
	.elementor-widget-npew-footer .footer-about { grid-column: auto; }
	.elementor-widget-npew-footer .footer-bottom { align-items: flex-start; flex-direction: column; padding: 17px; }
	.elementor-widget-npew-footer .footer-bottom span:last-child { text-align: left; }
}