/* ─────────────────────────────────────────
   Next Digital — Services hub
   Inside .nd-site-wrap (dark bezel viewport).
───────────────────────────────────────── */

/* Override main.css's .nd-site-wrap main { max-width: 1100px; padding: 64px 48px; } */
.nd-site-wrap main.nd-services-main {
	max-width: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   HERO — 80dvh, animated SVG backdrop, big bold heading
══════════════════════════════════════════════════════════════ */

.nd-svc-hero {
	position: relative;
	min-height: 80dvh;
	display: flex;
	align-items: center;
	padding: 96px 48px 80px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 80% 30%, oklch(20% 0.16 195 / 0.55) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 10% 80%, oklch(18% 0.18 210 / 0.4) 0%, transparent 60%),
		linear-gradient(180deg, oklch(9% 0.04 220) 0%, oklch(7% 0.035 220) 100%);
}
.nd-svc-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.nd-svc-hero-bloom {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	mix-blend-mode: screen;
	will-change: transform;
}
.nd-svc-hero-bloom-1 {
	top: 5%; right: 8%;
	width: 520px; height: 520px;
	background: radial-gradient(circle, oklch(62% 0.26 200 / 0.7) 0%, transparent 65%);
	animation: nd-svc-bloom-1 22s ease-in-out infinite alternate;
}
.nd-svc-hero-bloom-2 {
	bottom: -10%; left: -5%;
	width: 600px; height: 600px;
	background: radial-gradient(circle, oklch(58% 0.22 190 / 0.5) 0%, transparent 65%);
	animation: nd-svc-bloom-2 28s ease-in-out infinite alternate;
}
.nd-svc-hero-bloom-3 {
	top: 40%; left: 35%;
	width: 380px; height: 380px;
	background: radial-gradient(circle, oklch(65% 0.18 215 / 0.45) 0%, transparent 65%);
	animation: nd-svc-bloom-3 24s ease-in-out infinite alternate;
}
@keyframes nd-svc-bloom-1 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-8%, 6%, 0); }
}
@keyframes nd-svc-bloom-2 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(10%, -8%, 0); }
}
@keyframes nd-svc-bloom-3 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(12%, 10%, 0); }
}

/* SVG flowing curves — strokeDashoffset animation, slow + staggered */
.nd-svc-hero-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.nd-svc-hero-curve {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
	animation: nd-svc-curve-draw 18s ease-in-out infinite alternate;
	will-change: stroke-dashoffset, opacity;
}
.nd-svc-hero-curve-1 { animation-delay: 0s;    animation-duration: 16s; }
.nd-svc-hero-curve-2 { animation-delay: -3s;   animation-duration: 20s; }
.nd-svc-hero-curve-3 { animation-delay: -6s;   animation-duration: 18s; }
.nd-svc-hero-curve-4 { animation-delay: -9s;   animation-duration: 22s; }
.nd-svc-hero-curve-5 { animation-delay: -12s;  animation-duration: 17s; }
.nd-svc-hero-curve-6 { animation-delay: -15s;  animation-duration: 24s; }

@keyframes nd-svc-curve-draw {
	0%   { stroke-dashoffset:  2400; }
	100% { stroke-dashoffset: -2400; }
}
@media (prefers-reduced-motion: reduce) {
	.nd-svc-hero-curve,
	.nd-svc-hero-bloom { animation: none; }
	.nd-svc-hero-curve { stroke-dashoffset: 0; }
}

.nd-svc-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
}

.nd-svc-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'DM Mono', monospace;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 28px;
	padding: 8px 14px;
	border: 1px solid oklch(60% 0.24 200 / 0.22);
	border-radius: 100px;
	background: oklch(60% 0.24 200 / 0.06);
}
.nd-svc-hero-eyebrow-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--nd-accent);
	box-shadow: 0 0 12px var(--nd-accent);
}

.nd-svc-hero-title {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(44px, 7.5vw, 88px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 0 0 28px;
	color: oklch(96% 0.005 215);
	max-width: 900px;
}
.nd-svc-hero-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--nd-accent);
}

.nd-svc-hero-content h1 {
	font-size: clamp(44px, 7.5vw, 88px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 0 0 28px;
	color: oklch(96% 0.005 215);
	max-width: 900px;
}
.nd-svc-hero-content h1 em { font-style: italic; font-weight: 300; color: var(--nd-accent); }
.nd-svc-hero-content p {
	font-size: 18px;
	line-height: 1.6;
	color: oklch(78% 0.04 215);
	max-width: 640px;
	margin: 0 0 16px;
}

.nd-svc-hero-sub {
	font-size: 18px;
	line-height: 1.6;
	color: oklch(78% 0.04 215);
	max-width: 640px;
	margin: 0 0 36px;
}

.nd-svc-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* ══════════════════════════════════════════════════════════════
   LISTING SECTION — slightly different dark bg
══════════════════════════════════════════════════════════════ */

.nd-svc-list-section {
	position: relative;
	background: oklch(5% 0.03 222);
	border-top: 1px solid oklch(100% 0 0 / 0.05);
	padding: 96px 48px;
	z-index: 1;
}
.nd-svc-list-inner {
	max-width: 1320px;
	margin: 0 auto;
}

.nd-svc-list-header {
	margin-bottom: 56px;
	max-width: 820px;
}
.nd-svc-list-eyebrow {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 16px;
}
.nd-svc-list-h2 {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: oklch(96% 0.005 215);
	margin: 0;
}
.nd-svc-list-h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--nd-accent);
}

/* Layout 2 colonnes + sidebar */
.nd-svc-list-grid-wrap {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
}

.nd-svc-list-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

/* ══════════════════════════════════════════════════════════════
   GRADIENT CARDS — shorter, glow subtle by default, strong on hover
══════════════════════════════════════════════════════════════ */

.nd-site-wrap a.nd-svc-card,
.nd-site-wrap .nd-svc-card .nd-svc-cta,
.nd-site-wrap .nd-svc-card h3,
.nd-site-wrap .nd-svc-card p,
.nd-site-wrap .nd-svc-card span {
	text-decoration: none;
}

.nd-svc-card {
	position: relative;
	display: block;
	min-height: 360px;
	border-radius: 22px;
	background: oklch(7% 0.03 220);
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	transform-style: preserve-3d;
	will-change: transform;
	transition:
		transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow:
		0 0 0 1px oklch(100% 0 0 / 0.05),
		0 10px 30px -10px oklch(0% 0 0 / 0.5);
}
.nd-svc-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 0 1px oklch(60% 0.24 200 / 0.25),
		0 -10px 100px 10px oklch(60% 0.24 200 / 0.22),
		0 30px 60px -20px oklch(0% 0 0 / 0.6);
}

/* Glow layers — subtle (0.12-0.18) by default, strong on hover. */
.nd-svc-glow {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 60%;
	pointer-events: none;
	filter: blur(45px);
	z-index: 1;
	transition: opacity 0.45s ease-out;
}
.nd-svc-glow-side {
	background:
		radial-gradient(ellipse at bottom right, oklch(58% 0.22 195 / 0.85) -10%, transparent 70%),
		radial-gradient(ellipse at bottom left,  oklch(65% 0.18 210 / 0.85) -10%, transparent 70%);
	opacity: 0.18;
}
.nd-svc-glow-center {
	background: radial-gradient(circle at bottom center, oklch(60% 0.24 200 / 0.85) -20%, transparent 60%);
	transform: translateY(10%);
	opacity: 0.12;
}
.nd-svc-card:hover .nd-svc-glow-side   { opacity: 0.95; }
.nd-svc-card:hover .nd-svc-glow-center { opacity: 0.85; }

/* Image — slightly inset, rounded top, smooth fade to dark body. */
.nd-svc-img {
	position: relative;
	z-index: 2;
	margin: 10px 10px 0;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 14px;
}
.nd-svc-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nd-svc-card:hover .nd-svc-img img { transform: scale(1.05); }
.nd-svc-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 60%,
		oklch(7% 0.03 220 / 0.45) 88%,
		oklch(7% 0.03 220 / 0.75) 100%);
	pointer-events: none;
}

.nd-svc-img-ph {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, oklch(20% 0.10 200 / 0.6) 0%, transparent 60%),
		oklch(10% 0.04 220);
	font-family: 'DM Mono', monospace;
	font-size: 42px;
	font-weight: 300;
	color: oklch(60% 0.20 200 / 0.5);
	letter-spacing: 2px;
}

/* Body — denser. */
.nd-svc-body {
	position: relative;
	z-index: 3;
	padding: 18px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nd-svc-title {
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: oklch(96% 0.005 215);
	margin: 0;
	transition: text-shadow 0.3s ease-out;
	text-decoration: none;
}
.nd-svc-card:hover .nd-svc-title {
	text-shadow: 0 2px 14px oklch(60% 0.24 200 / 0.45);
}

.nd-svc-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: oklch(76% 0.035 215);
	margin: 0;
	font-weight: 350;
	text-decoration: none;
}

.nd-svc-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: oklch(94% 0.005 215);
	font-size: 13px;
	font-weight: 500;
	opacity: 0.85;
	transition: gap 0.3s ease-out, opacity 0.2s, filter 0.3s;
	text-decoration: none;
}
.nd-svc-cta-arrow {
	width: 12px; height: 12px;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nd-svc-card:hover .nd-svc-cta {
	opacity: 1;
	gap: 12px;
	filter: drop-shadow(0 0 8px oklch(60% 0.24 200 / 0.55));
}
.nd-svc-card:hover .nd-svc-cta-arrow { transform: translateX(4px); }

/* Bottom border + L corners — subtle by default, glow strong on hover. */
.nd-svc-border {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1.5px;
	z-index: 4;
	background: linear-gradient(90deg,
		oklch(100% 0 0 / 0.05) 0%,
		oklch(100% 0 0 / 0.4) 50%,
		oklch(100% 0 0 / 0.05) 100%);
	box-shadow: 0 0 8px 1px oklch(60% 0.24 200 / 0.2);
	opacity: 0.55;
	transition: opacity 0.35s, box-shadow 0.35s;
}
.nd-svc-card:hover .nd-svc-border {
	opacity: 1;
	box-shadow:
		0 0 20px 4px oklch(60% 0.24 200 / 0.75),
		0 0 30px 6px oklch(58% 0.22 195 / 0.55),
		0 0 40px 8px oklch(65% 0.18 210 / 0.4);
}
.nd-svc-corner {
	position: absolute;
	bottom: 0;
	width: 1px;
	height: 24%;
	z-index: 4;
	border-radius: 1px;
	background: linear-gradient(to top,
		oklch(100% 0 0 / 0.55) 0%,
		oklch(100% 0 0 / 0.3) 30%,
		oklch(100% 0 0 / 0) 85%);
	opacity: 0.4;
	transition: opacity 0.35s, height 0.35s, box-shadow 0.35s;
}
.nd-svc-corner-l { left: 0; }
.nd-svc-corner-r { right: 0; }
.nd-svc-card:hover .nd-svc-corner {
	opacity: 1;
	height: 32%;
	box-shadow:
		0 0 15px 3px oklch(60% 0.24 200 / 0.55),
		0 0 25px 5px oklch(58% 0.22 195 / 0.4);
}

/* Rotating border beam — invisible by default, appears on hover. */
.nd-svc-card::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(
		from var(--nd-beam-a),
		transparent 0%,
		transparent 62%,
		oklch(85% 0.14 192 / 0.5) 76%,
		oklch(97% 0.03 200 / 1) 82%,
		oklch(85% 0.14 192 / 0.5) 88%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	animation: nd-beam-spin 2.4s linear infinite;
	pointer-events: none;
	z-index: 5;
	transition: opacity 0.35s ease-out;
}
.nd-svc-card:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — clients audience
══════════════════════════════════════════════════════════════ */

.nd-svc-sidebar {
	position: sticky;
	top: 24px;
	align-self: start;
}
.nd-svc-sidebar-card {
	background:
		radial-gradient(ellipse 90% 60% at 100% 0%, oklch(60% 0.24 200 / 0.18) 0%, transparent 60%),
		radial-gradient(ellipse 80% 50% at 0% 100%, oklch(58% 0.20 195 / 0.10) 0%, transparent 60%),
		linear-gradient(165deg, oklch(11% 0.05 215) 0%, oklch(9% 0.04 220) 100%);
	border: 1px solid oklch(60% 0.24 200 / 0.14);
	border-radius: 22px;
	padding: 32px 28px;
	position: relative;
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.07),
		0 20px 60px -20px oklch(60% 0.24 200 / 0.18);
}
.nd-svc-sidebar-card::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle 200px at 100% 0%, oklch(60% 0.24 200 / 0.12) 0%, transparent 60%);
	pointer-events: none;
}
.nd-svc-sidebar-eyebrow {
	font-family: 'DM Mono', monospace;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 12px;
	position: relative;
	z-index: 1;
}
.nd-svc-sidebar-h {
	font-family: 'DM Sans', sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: oklch(96% 0.005 215);
	margin: 0 0 14px;
	position: relative;
	z-index: 1;
}
.nd-svc-sidebar-h em {
	font-style: italic;
	font-weight: 300;
	color: var(--nd-accent);
}
.nd-svc-sidebar-text {
	font-size: 13px;
	line-height: 1.6;
	color: oklch(75% 0.04 215);
	margin: 0 0 24px;
	position: relative;
	z-index: 1;
}

.nd-svc-sidebar-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}
.nd-svc-sidebar-list li {
	border-top: 1px solid oklch(100% 0 0 / 0.05);
}
.nd-svc-sidebar-list li:last-child { border-bottom: 1px solid oklch(100% 0 0 / 0.05); }

.nd-site-wrap .nd-svc-sidebar-item,
.nd-svc-sidebar-item {
	display: grid;
	grid-template-columns: 28px 1fr 16px;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	font-size: 14px;
	color: oklch(88% 0.02 215);
	text-decoration: none;
	transition: color 0.2s, padding-left 0.25s;
}
.nd-svc-sidebar-item:hover {
	color: var(--nd-accent);
	padding-left: 6px;
}
.nd-svc-sidebar-n {
	font-family: 'DM Mono', monospace;
	font-size: 10px;
	letter-spacing: 1px;
	color: oklch(50% 0.12 200);
}
.nd-svc-sidebar-label {
	font-weight: 400;
}
.nd-svc-sidebar-arrow {
	width: 14px; height: 14px;
	opacity: 0.5;
	transition: transform 0.3s, opacity 0.2s;
}
.nd-svc-sidebar-item:hover .nd-svc-sidebar-arrow {
	transform: translateX(3px);
	opacity: 1;
}

.nd-site-wrap .nd-svc-sidebar-link,
.nd-svc-sidebar-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--nd-accent);
	text-decoration: none;
	transition: gap 0.25s;
	position: relative;
	z-index: 1;
}
.nd-svc-sidebar-link:hover { gap: 12px; }

.nd-svc-sidebar-empty {
	font-size: 13px;
	color: var(--nd-text-dim);
	font-style: italic;
	margin: 0 0 20px;
}

/* ══════════════════════════════════════════════════════════════
   SEO content section
══════════════════════════════════════════════════════════════ */

.nd-svc-seo {
	padding: 96px 48px;
	background: oklch(6% 0.025 222);
	border-top: 1px solid oklch(100% 0 0 / 0.05);
}
.nd-svc-seo-inner {
	max-width: 1280px;
	margin: 0 auto;
}
.nd-svc-seo-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	margin-bottom: 48px;
}
.nd-svc-seo-eyebrow {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--nd-accent);
	margin: 0 0 18px;
}
.nd-svc-seo-title {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: oklch(96% 0.005 215);
	margin: 0;
}
.nd-svc-seo-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--nd-accent);
}
.nd-svc-seo-col p {
	font-size: 15px;
	line-height: 1.75;
	color: oklch(76% 0.035 215);
	margin: 0 0 16px;
}
.nd-svc-seo-col p:last-child { margin-bottom: 0; }

.nd-svc-keywords {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.nd-svc-keywords li {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: oklch(78% 0.05 200);
	padding: 8px 14px;
	border: 1px solid oklch(100% 0 0 / 0.08);
	border-radius: 100px;
	background: oklch(10% 0.04 215 / 0.5);
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nd-svc-keywords li:hover {
	border-color: oklch(60% 0.24 200 / 0.4);
	color: var(--nd-accent);
	background: oklch(60% 0.24 200 / 0.08);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.nd-svc-list-grid-wrap { grid-template-columns: 1fr; }
	.nd-svc-list-grid      { grid-template-columns: repeat(2, 1fr); }
	.nd-svc-sidebar        { position: relative; top: auto; }
	.nd-svc-sidebar-card   { max-width: 480px; }
}

@media (max-width: 768px) {
	.nd-svc-hero { padding: 64px 22px 56px; min-height: 70dvh; }
	.nd-svc-hero-eyebrow { font-size: 11px; padding: 6px 12px; }
	.nd-svc-hero-bloom-1 { width: 320px; height: 320px; }
	.nd-svc-hero-bloom-2 { width: 380px; height: 380px; }

	.nd-svc-list-section { padding: 64px 22px; }
	.nd-svc-list-header  { margin-bottom: 36px; }
	.nd-svc-list-grid    { grid-template-columns: 1fr; gap: 14px; }
	.nd-svc-card         { min-height: 340px; }

	.nd-svc-seo          { padding: 64px 22px; }
	.nd-svc-seo-grid     { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
}

@media (max-width: 480px) {
	.nd-svc-hero { padding: 48px 14px 40px; }
	.nd-svc-body { padding: 16px 18px 20px; }
	.nd-svc-sidebar-card { padding: 26px 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.nd-svc-card,
	.nd-svc-card::after,
	.nd-svc-img img { transition: none; animation: none; }
}