/* ------------------------------------------------------------------
   Design page (template-design-service.php). The visitor is inside a
   design tool: dark workspace, dot grid, panels, a live artboard.
   ------------------------------------------------------------------ */

.page-template-template-design-service .headerSection {
	background: #0c0c0c !important;
}

/* Section 1: the studio. */
.ed-studio {
	padding: 104px 24px 56px;
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
		radial-gradient(60% 50% at 50% 30%, rgba(171, 250, 8, .08), transparent 70%),
		#0c0c0c;
	color: #c9ccc5;
}

.ed-studio,
.ed-studio * {
	font-family: "Thmanyah Sans", sans-serif !important;
	letter-spacing: 0;
}

.ed-studio__app {
	max-width: 1360px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #262626;
	border-radius: 22px;
	background: #141414;
	box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02);
}

/* Top bar */
.ed-studio__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 52px;
	padding: 0 16px;
	border-bottom: 1px solid #242424;
	background: #181818;
	font-size: 13px;
}

.ed-studio__file {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #8f938b;
}

.ed-studio__file b {
	color: #fff;
	font-weight: 700;
}

.ed-studio__file i {
	font-style: normal;
	color: var(--ed-tx-4a4a4a);
}

.ed-studio__file em {
	font-style: normal;
}

.ed-studio__logo {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: conic-gradient(#ee394f, #f7941e, #7dc242, #3db5e7, #262262, #ee394f);
}

.ed-studio__tools {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 10px;
	background: var(--ed-ink-2);
}

.ed-studio__tools span {
	display: grid;
	width: 32px;
	height: 30px;
	place-items: center;
	border-radius: 7px;
	color: #9a9d96;
}

.ed-studio__tools span.is-on {
	background: var(--ed-lime);
	color: var(--ed-ink-2);
}

.ed-studio__tools svg,
.ed-studio__layers svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ed-studio__tools span.is-on svg {
	fill: currentColor;
}

.ed-studio__team {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	direction: ltr;
}

.ed-studio__team span {
	display: grid;
	width: 26px;
	height: 26px;
	margin-left: -14px;
	place-items: center;
	border: 2px solid #181818;
	border-radius: 50%;
	background: var(--c);
	color: var(--ed-text-strong);
	font-size: 12px;
	font-weight: 900;
}

.ed-studio__team span:first-child {
	margin-left: 0;
}

.ed-studio__team b {
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--ed-ink-2);
	color: #9a9d96;
	font-size: 12px;
}

/* Body: layers | canvas | properties */
.ed-studio__body {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 240px;
	min-height: 600px;
}

.ed-studio__panel {
	padding: 18px 16px;
	background: #161616;
}

.ed-studio__layers {
	border-left: 1px solid #242424;
}

.ed-studio__props {
	border-right: 1px solid #242424;
}

.ed-studio__ptitle {
	margin: 0 0 10px;
	color: #6f736b;
	font-size: 12px;
	font-weight: 700;
	text-align: right !important;
}

.ed-studio__panel ul {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.ed-studio__panel li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--ed-muted-4);
	font-size: 13px;
}

.ed-studio__panel li.is-sel {
	background: rgba(171, 250, 8, .12);
	color: var(--ed-lime);
}

.ed-studio__pages li {
	padding-right: 12px;
}

.ed-studio__swatches {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 22px;
}

.ed-studio__swatches i {
	aspect-ratio: 1;
	border-radius: 10px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	animation: ed-swatch 6s ease-in-out infinite;
}

.ed-studio__swatches i:nth-child(2) { animation-delay: .4s; }
.ed-studio__swatches i:nth-child(4) { animation-delay: 1.2s; }
.ed-studio__swatches i:nth-child(7) { animation-delay: 2.4s; }

@keyframes ed-swatch {
	0%, 85%, 100% { transform: none; }
	90% { transform: scale(.9); }
}

.ed-studio__type {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 10px;
	background: var(--ed-ink-2);
}

.ed-studio__type span {
	color: #fff;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
}

.ed-studio__type b {
	display: block;
	color: #fff;
	font-size: 13px;
}

.ed-studio__type small {
	color: #6f736b;
	font-size: 12px;
}

.ed-studio__rows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 22px;
}

.ed-studio__rows div {
	padding: 8px;
	border-radius: 8px;
	background: var(--ed-ink-2);
}

.ed-studio__rows small {
	display: block;
	color: #6f736b;
	font-size: 10px;
}

.ed-studio__rows b {
	color: #fff;
	font-size: 14px;
}

.ed-studio__export {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ed-studio__export span {
	padding: 6px 10px;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	color: var(--ed-muted-4);
	font-size: 12px;
	font-weight: 700;
	direction: ltr;
}

/* Canvas */
.ed-studio__canvas {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 40px 48px;
	overflow: hidden;
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0) 0 0 / 18px 18px,
		#0f0f0f;
}

.ed-studio__frame-name {
	position: absolute;
	top: 22px;
	right: 40px;
	color: #6f736b;
	font-size: 12px;
}

.ed-studio__artboard {
	position: relative;
	width: 100%;
	max-width: 760px;
	padding: 52px 52px 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ed-bg);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
	color: var(--ed-text-2);
	text-align: right;
}

.ed-studio__label {
	display: inline-block;
	margin: 0 0 18px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--ed-ink);
	color: var(--ed-lime);
	font-size: 13px;
	font-weight: 700;
}

/* The selected headline */
.ed-studio__sel {
	position: relative;
	margin-bottom: 18px;
	padding: 6px 8px;
	outline: 1.5px solid #3db5e7;
	animation: ed-sel 9s ease-in-out infinite;
}

@keyframes ed-sel {
	0%, 8% { outline-color: transparent; }
	12%, 88% { outline-color: #3db5e7; }
	92%, 100% { outline-color: transparent; }
}

.ed-studio__title {
	margin: 0;
	color: var(--ed-text);
	font-size: 54px !important;
	font-weight: 900;
	line-height: 1.25;
	text-align: right;
}

.ed-studio__handles i {
	position: absolute;
	width: 9px;
	height: 9px;
	border: 1.5px solid #3db5e7;
	background: var(--ed-surface);
	animation: ed-sel-h 9s ease-in-out infinite;
}

@keyframes ed-sel-h {
	0%, 8% { opacity: 0; }
	12%, 88% { opacity: 1; }
	92%, 100% { opacity: 0; }
}

.ed-studio__handles i:nth-child(1) { top: -5px; right: -5px; }
.ed-studio__handles i:nth-child(2) { top: -5px; right: calc(50% - 4px); }
.ed-studio__handles i:nth-child(3) { top: -5px; left: -5px; }
.ed-studio__handles i:nth-child(4) { top: calc(50% - 4px); left: -5px; }
.ed-studio__handles i:nth-child(5) { bottom: -5px; left: -5px; }
.ed-studio__handles i:nth-child(6) { bottom: -5px; right: calc(50% - 4px); }
.ed-studio__handles i:nth-child(7) { bottom: -5px; right: -5px; }
.ed-studio__handles i:nth-child(8) { top: calc(50% - 4px); right: -5px; }

.ed-studio__size {
	position: absolute;
	bottom: -28px;
	left: 50%;
	padding: 2px 8px;
	border-radius: 4px;
	background: #3db5e7;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	transform: translateX(-50%);
	direction: ltr;
	animation: ed-sel-h 9s ease-in-out infinite;
}

.ed-studio__lead {
	max-width: 560px;
	margin: 26px 0 26px;
	color: var(--ed-muted);
	font-size: 18px;
	line-height: 1.85;
	text-align: right !important;
}

.ed-studio__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}

.ed-studio__btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 26px;
	border: 2px solid var(--ed-edge);
	border-radius: 999px;
	color: var(--ed-text) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.ed-studio__btn:hover {
	background: var(--ed-ink);
	color: #fff !important;
}

.ed-studio__btn--main {
	background: var(--ed-ink);
	color: #fff !important;
}

.ed-studio__btn--main:hover {
	background: var(--ed-lime);
	border-color: var(--ed-lime);
	color: var(--ed-ink) !important;
	transform: translateY(-2px);
}

/* Pen drawing the arches along the bottom of the artboard */
.ed-studio__arches {
	display: block;
	width: calc(100% + 104px);
	height: auto;
	margin: 0 -52px;
}

.ed-pen {
	stroke-dasharray: 260;
	stroke-dashoffset: 260;
	animation: ed-draw 9s ease-in-out infinite;
}

.ed-pen:nth-child(2) { animation-delay: .25s; }
.ed-pen:nth-child(3) { animation-delay: .5s; }
.ed-pen:nth-child(4) { animation-delay: .75s; }
.ed-pen:nth-child(5) { animation-delay: 1s; }
.ed-pen:nth-child(6) { animation-delay: 1.25s; }

@keyframes ed-draw {
	0%, 6% { stroke-dashoffset: 260; }
	30%, 90% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 260; }
}

.ed-studio__anchors rect {
	fill: #fff;
	stroke: #3db5e7;
	stroke-width: 1.5;
	animation: ed-sel-h 9s ease-in-out infinite;
}

/* Live cursors */
.ed-cursor {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 2px;
	pointer-events: none;
	direction: ltr;
}

.ed-cursor svg {
	width: 20px;
	height: 20px;
	fill: var(--c);
	stroke: var(--ed-text-strong);
	stroke-width: 1.2;
}

.ed-cursor b {
	margin-top: 14px;
	padding: 3px 9px;
	border-radius: 6px 6px 6px 0;
	background: var(--c);
	color: var(--ed-text-strong);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.ed-cursor--a {
	--c: #abfa08;
	top: 30%;
	left: 22%;
	animation: ed-cur-a 9s ease-in-out infinite;
}

.ed-cursor--b {
	--c: #f7941e;
	top: 72%;
	left: 64%;
	animation: ed-cur-b 11s ease-in-out infinite;
}

@keyframes ed-cur-a {
	0% { transform: translate(0, 0); }
	20% { transform: translate(260px, -40px); }
	45% { transform: translate(380px, 60px); }
	70% { transform: translate(120px, 140px); }
	100% { transform: translate(0, 0); }
}

@keyframes ed-cur-b {
	0% { transform: translate(0, 0); }
	30% { transform: translate(-220px, -30px); }
	60% { transform: translate(-80px, -150px); }
	100% { transform: translate(0, 0); }
}

/* A comment pin from the client */
.ed-studio__comment {
	position: absolute;
	top: 18%;
	left: 7%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 14px;
	border-radius: 14px 14px 14px 4px;
	background: var(--ed-surface);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
	color: var(--ed-text);
	font-size: 13px;
	font-weight: 700;
	animation: ed-pop 9s ease-in-out infinite;
}

.ed-studio__comment i {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 50%;
	background: #f7941e;
	color: var(--ed-text-strong);
	font-size: 11px;
	font-style: normal;
	font-weight: 900;
}

@keyframes ed-pop {
	0%, 40% { opacity: 0; transform: translateY(8px) scale(.9); }
	46%, 92% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(8px) scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
	.ed-pen { animation: none; stroke-dashoffset: 0; }
	.ed-cursor, .ed-studio__swatches i { animation: none; }
	.ed-studio__sel, .ed-studio__handles i, .ed-studio__size, .ed-studio__anchors rect, .ed-studio__comment { animation: none; opacity: 1; }
}

@media (max-width: 1199px) {
	.ed-studio__body {
		grid-template-columns: 190px minmax(0, 1fr);
	}

	.ed-studio__props {
		display: none;
	}
}

@media (max-width: 991px) {
	.ed-studio {
		padding: 96px 16px 40px;
	}

	.ed-studio__body {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ed-studio__layers {
		display: none;
	}

	.ed-studio__tools {
		display: none;
	}

	.ed-studio__bar {
		grid-template-columns: 1fr auto;
	}

	.ed-studio__title {
		font-size: 40px !important;
	}
}

@media (max-width: 600px) {
	.ed-studio__file i,
	.ed-studio__file em {
		display: none;
	}

	.ed-studio__file b {
		white-space: nowrap;
	}

	.ed-studio__canvas {
		padding: 44px 14px 30px;
	}

	.ed-studio__frame-name {
		right: 16px;
		top: 16px;
	}

	.ed-studio__artboard {
		padding: 30px 22px 0;
	}

	.ed-studio__title {
		font-size: 30px !important;
	}

	.ed-studio__lead {
		font-size: 16px;
	}

	.ed-studio__btn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 13px 18px;
	}

	.ed-studio__arches {
		width: calc(100% + 44px);
		margin: 0 -22px;
	}

	.ed-studio__comment {
		display: none;
	}

	.ed-cursor--b {
		display: none;
	}

	@keyframes ed-cur-a {
		0%, 100% { transform: none; }
		50% { transform: translate(120px, 60px); }
	}
}

/* ------------------------------------------------------------------
   Section 2: design services. Three cards, each with a live visual.
   ------------------------------------------------------------------ */
.ed-dsvc {
	padding: 112px 0 112px;
	background: var(--ed-section);
	color: var(--ed-text-2);
}

.ed-dsvc,
.ed-dsvc * {
	font-family: "Thmanyah Sans", sans-serif !important;
	letter-spacing: 0;
}

.ed-dsvc__head {
	max-width: 720px;
	margin-bottom: 52px;
}

.ed-dsvc__label {
	margin: 0 0 14px;
	color: var(--ed-text);
	font-size: 15px;
	font-weight: 700;
	text-align: right !important;
}

.ed-dsvc__label::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 10px;
	border-radius: 50%;
	background: var(--ed-lime);
	vertical-align: 1px;
}

.ed-dsvc__title {
	margin: 0 0 14px;
	color: var(--ed-text);
	font-size: 46px !important;
	font-weight: 900;
	line-height: 1.25;
	text-align: right;
}

.ed-dsvc__lead {
	margin: 0;
	color: var(--ed-muted);
	font-size: 18px;
	line-height: 1.8;
	text-align: right !important;
}

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

.ed-dcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ed-line);
	border-radius: 28px;
	background: var(--ed-surface);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.ed-dcard:hover {
	border-color: var(--ed-edge);
	box-shadow: 0 30px 60px -36px rgba(17, 17, 17, .45);
	transform: translateY(-6px);
}

.ed-dcard__visual {
	position: relative;
	display: grid;
	height: 280px;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 16px 16px,
		var(--ed-ink-2);
}

.ed-dcard__body {
	padding: 28px 28px 30px;
}

.ed-dcard__num {
	color: #c9c9c2;
	font-size: 14px;
	font-weight: 900;
}

.ed-dcard__name {
	margin: 6px 0 10px;
	color: var(--ed-text);
	font-size: 26px !important;
	font-weight: 900;
	line-height: 1.3;
	text-align: right;
}

.ed-dcard__text {
	margin: 0 0 20px;
	color: var(--ed-muted);
	font-size: 16px;
	line-height: 1.8;
	text-align: right !important;
}

.ed-dcard__gets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-dcard__gets li {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--ed-tint-f2f2ee);
	color: var(--ed-text-2);
	font-size: 13px;
	font-weight: 700;
}

.ed-dcard:hover .ed-dcard__gets li {
	background: var(--ed-ink);
	color: #fff;
}

.ed-dcard:hover .ed-dcard__gets li:first-child {
	background: var(--ed-lime);
	color: var(--ed-ink);
}

/* Brand visual: construction grid turns, the mark settles in. */
.ed-vb {
	position: relative;
	width: 210px;
	height: 210px;
}

.ed-vb__grid {
	position: absolute;
	inset: 0;
	color: rgba(61, 181, 231, .45);
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.ed-vb__mark {
	position: absolute;
	inset: 0;
}

.ed-dcard--brand:hover .ed-vb__grid {
	transform: rotate(45deg) scale(1.08);
}

.ed-vb__chips {
	position: absolute;
	right: -46px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ed-vb__chips i {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
	transition: transform .4s ease;
}

.ed-dcard--brand:hover .ed-vb__chips i {
	transform: translateX(-6px);
}

.ed-dcard--brand:hover .ed-vb__chips i:nth-child(2) { transition-delay: .05s; }
.ed-dcard--brand:hover .ed-vb__chips i:nth-child(3) { transition-delay: .1s; }
.ed-dcard--brand:hover .ed-vb__chips i:nth-child(4) { transition-delay: .15s; }

.ed-vb__type {
	position: absolute;
	top: 6px;
	left: -40px;
	color: #fff;
	font-size: 26px;
	font-weight: 900;
	direction: ltr;
}

/* App visual: a phone; the screen scrolls on hover. */
.ed-va {
	position: relative;
}

.ed-va__phone {
	position: relative;
	width: 150px;
	height: 300px;
	margin-top: 70px;
	padding: 8px;
	border-radius: 30px;
	background: #222;
	box-shadow: 0 0 0 2px #333, 0 0 80px -20px rgba(171, 250, 8, .35);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.ed-dcard--app:hover .ed-va__phone {
	transform: translateY(-50px);
}

.ed-va__screen {
	height: 100%;
	padding: 18px 10px 0;
	overflow: hidden;
	border-radius: 23px;
	background: var(--ed-bg);
}

.ed-va__screen > * {
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.ed-dcard--app:hover .ed-va__screen > * {
	transform: translateY(-60px);
}

.ed-va__top {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.ed-va__top i {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ed-lime);
}

.ed-va__top b {
	width: 60px;
	height: 8px;
	border-radius: 4px;
	background: var(--ed-ink);
}

.ed-va__hero {
	height: 70px;
	margin-bottom: 8px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--ed-ink), #333);
}

.ed-va__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-bottom: 8px;
}

.ed-va__row i {
	height: 36px;
	border-radius: 10px;
	background: var(--ed-lime);
}

.ed-va__row i:last-child {
	background: #3db5e7;
}

.ed-va__card {
	display: grid;
	grid-template-columns: 26px 1fr;
	grid-template-rows: auto auto;
	gap: 4px 8px;
	margin-bottom: 6px;
	padding: 8px;
	border-radius: 10px;
	background: var(--ed-surface);
}

.ed-va__card i {
	grid-row: span 2;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #f7941e;
}

.ed-va__card:nth-of-type(odd) i {
	background: #ee394f;
}

.ed-va__card b {
	height: 6px;
	border-radius: 3px;
	background: var(--ed-tint-dddddd);
}

.ed-va__card b:last-child {
	width: 60%;
}

.ed-va__tabs {
	position: absolute;
	right: 8px;
	bottom: 8px;
	left: 8px;
	display: flex;
	justify-content: space-around;
	padding: 10px 0 12px;
	border-radius: 0 0 23px 23px;
	background: var(--ed-surface);
	box-shadow: 0 -1px 0 #eee;
}

.ed-va__tabs i {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: var(--ed-tint-cccccc);
}

.ed-va__tabs i.is-on {
	background: var(--ed-ink);
}

.ed-va__tag {
	position: absolute;
	top: 96px;
	right: -84px;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--ed-lime);
	color: var(--ed-ink);
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
	direction: ltr;
}

/* Web visual: a browser; blocks slide into place on hover. */
.ed-vw {
	width: 82%;
	overflow: hidden;
	border-radius: 12px;
	background: var(--ed-bg);
	box-shadow: 0 0 0 2px #2c2c2c, 0 0 80px -24px rgba(171, 250, 8, .3);
	direction: ltr;
}

.ed-vw__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: #222;
}

.ed-vw__bar span {
	display: flex;
	gap: 4px;
}

.ed-vw__bar span i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #555;
}

.ed-vw__bar b {
	flex: 1 1 auto;
	height: 12px;
	border-radius: 6px;
	background: var(--ed-ink);
}

.ed-vw__page {
	padding: 12px 14px 16px;
}

.ed-vw__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ed-vw__nav i {
	width: 22px;
	height: 10px;
	border-radius: 3px;
	background: var(--ed-ink);
}

.ed-vw__nav span {
	display: flex;
	gap: 6px;
}

.ed-vw__nav b {
	width: 22px;
	height: 6px;
	border-radius: 3px;
	background: var(--ed-tint-cccccc);
}

.ed-vw__hero {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 10px;
	margin-bottom: 12px;
}

.ed-vw__hero div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 6px;
}

.ed-vw__hero b {
	height: 10px;
	border-radius: 4px;
	background: var(--ed-ink);
}

.ed-vw__hero b:nth-child(2) {
	width: 70%;
}

.ed-vw__hero em {
	width: 50px;
	height: 14px;
	margin-top: 6px;
	border-radius: 7px;
	background: var(--ed-lime);
}

.ed-vw__hero > i {
	height: 70px;
	border-radius: 10px;
	background: linear-gradient(135deg, #3db5e7, #262262);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.ed-vw__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.ed-vw__grid i {
	height: 40px;
	border-radius: 8px;
	background: var(--ed-tint-e9e9e3);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), background-color .5s ease;
}

.ed-dcard--web:hover .ed-vw__hero > i {
	transform: scale(1.06) rotate(-2deg);
}

.ed-dcard--web:hover .ed-vw__grid i {
	transform: translateY(-4px);
}

.ed-dcard--web:hover .ed-vw__grid i:nth-child(1) { background: #f7941e; }
.ed-dcard--web:hover .ed-vw__grid i:nth-child(2) { background: #7dc242; transition-delay: .06s; }
.ed-dcard--web:hover .ed-vw__grid i:nth-child(3) { background: #ee394f; transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
	.ed-dcard,
	.ed-dcard *,
	.ed-dcard *::before {
		transition: none !important;
	}
}

@media (max-width: 1199px) {
	.ed-dsvc__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ed-dcard:last-child {
		grid-column: span 2;
	}
}

@media (max-width: 767px) {
	.ed-dsvc {
		padding: 72px 0 80px;
	}

	.ed-dsvc__title {
		font-size: 32px !important;
	}

	.ed-dsvc__grid {
		grid-template-columns: 1fr;
	}

	.ed-dcard:last-child {
		grid-column: auto;
	}

	.ed-dcard__visual {
		height: 240px;
	}
}

/* Monochrome visuals: wireframes and skeletons in greys, one lime accent. */
.ed-dcard__visual {
	--w-line: #3a3a3a;
	--w-fill: #1f1f1f;
	--w-mid: #2c2c2c;
	--w-text: #d9dbd6;
}

.ed-vb__grid { color: var(--ed-tx-2e2e2e); }
.ed-vb__mark { color: var(--w-text); }
.ed-vb__pts rect { fill: var(--ed-text-strong); stroke: var(--ed-lime); stroke-width: 1.5; }
.ed-vb__chips i { border: 1.5px solid var(--w-line); background: transparent; box-shadow: none; }
.ed-vb__chips i:first-child { border-color: var(--ed-lime); }
.ed-vb__type { color: var(--w-text); font-weight: 500; }
.ed-dcard--brand:hover .ed-vb__grid { color: var(--ed-tx-3d3d3d); }

/* Phone as a skeleton */
.ed-va__phone { background: #1a1a1a; box-shadow: 0 0 0 1.5px var(--w-line); }
.ed-va__screen { background: #141414; border: 1px solid #262626; }
.ed-va__top i { background: transparent; border: 1.5px solid var(--ed-lime); }
.ed-va__top b,
.ed-va__card b { background: var(--w-mid); }
.ed-va__hero { background: var(--w-fill); border: 1px dashed var(--w-line); }
.ed-va__row i,
.ed-va__row i:last-child { background: var(--w-fill); border: 1px solid var(--w-line); }
.ed-va__card { background: var(--w-fill); }
.ed-va__card i,
.ed-va__card:nth-of-type(odd) i { background: transparent; border: 1.5px solid var(--w-line); }
.ed-va__tabs { background: #141414; box-shadow: 0 -1px 0 #262626; }
.ed-va__tabs i { background: var(--w-mid); }
.ed-va__tabs i.is-on { background: var(--ed-lime); }
.ed-va__tag { background: transparent; border: 1px solid var(--w-line); color: var(--w-text); font-weight: 700; }

/* Browser as a wireframe */
.ed-vw { background: #141414; box-shadow: 0 0 0 1.5px var(--w-line); }
.ed-vw__bar { background: #1c1c1c; border-bottom: 1px solid #262626; }
.ed-vw__bar span i { background: var(--w-mid); }
.ed-vw__bar b { background: var(--ed-ink-2); border: 1px solid #262626; }
.ed-vw__nav i { background: var(--w-text); }
.ed-vw__nav b { background: var(--w-mid); }
.ed-vw__hero b { background: var(--w-text); }
.ed-vw__hero b:nth-child(2) { background: var(--w-mid); }
.ed-vw__hero em { background: transparent; border: 1.5px solid var(--ed-lime); }
.ed-vw__hero > i {
	position: relative;
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), var(--w-line) 50%, transparent calc(50% + 1px)),
		linear-gradient(to top left, transparent calc(50% - 1px), var(--w-line) 50%, transparent calc(50% + 1px)),
		var(--w-fill);
	border: 1px solid var(--w-line);
}
.ed-vw__grid i { background: var(--w-fill); border: 1px solid var(--w-line); }
.ed-dcard--web:hover .ed-vw__grid i:nth-child(1),
.ed-dcard--web:hover .ed-vw__grid i:nth-child(2),
.ed-dcard--web:hover .ed-vw__grid i:nth-child(3) { background: var(--w-mid); border-color: #4a4a4a; }
.ed-dcard--web:hover .ed-vw__grid i:nth-child(2) { border-color: var(--ed-lime); }

/* No glows around the visuals */
.ed-va__phone,
.ed-vw { filter: none; }
.ed-dcard__visual { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0) 0 0 / 16px 16px, var(--ed-ink-2); }

/* Light canvas for the wireframes: dark lines on paper, lime only as a small fill. */
.ed-dcard__visual {
	--w-line: var(--ed-rule-c9c9c2);
	--w-fill: var(--ed-surface);
	--w-mid: var(--ed-tint-dcdcd5);
	--w-text: var(--ed-text);
	background:
		radial-gradient(circle at 1px 1px, rgba(17, 17, 17, .12) 1px, transparent 0) 0 0 / 16px 16px,
		var(--ed-tint-f2f2ee);
	border-bottom: 1px solid var(--ed-line);
}

.ed-vb__grid { color: #d6d6cf; }
.ed-dcard--brand:hover .ed-vb__grid { color: #c4c4bc; }
.ed-vb__pts rect { fill: var(--ed-lime); stroke: var(--ed-text); }
.ed-vb__chips i { border-color: var(--ed-edge); }
.ed-vb__chips i:first-child { border-color: var(--ed-ink); background: var(--ed-lime); }

.ed-va__phone { background: var(--ed-surface); box-shadow: 0 0 0 1.5px var(--ed-edge), 0 24px 40px -24px rgba(17, 17, 17, .35); }
.ed-va__screen { background: var(--ed-tint-fafaf7); border-color: var(--ed-rule-ecece6); }
.ed-va__top i { border-color: var(--ed-ink); background: var(--ed-lime); }
.ed-va__hero { border-color: #bdbdb5; }
.ed-va__card i,
.ed-va__card:nth-of-type(odd) i { border-color: #bdbdb5; }
.ed-va__tabs { background: var(--ed-surface); box-shadow: 0 -1px 0 #ececE6; }
.ed-va__tabs i.is-on { background: var(--ed-ink); }
.ed-va__tag { background: var(--ed-surface); border-color: var(--ed-edge); color: var(--ed-text); }

.ed-vw { background: var(--ed-surface); box-shadow: 0 0 0 1.5px var(--ed-edge), 0 24px 40px -24px rgba(17, 17, 17, .35); }
.ed-vw__bar { background: var(--ed-tint-f2f2ee); border-bottom-color: var(--ed-line); }
.ed-vw__bar b { background: var(--ed-surface); border-color: var(--ed-line); }
.ed-vw__hero em { background: var(--ed-lime); border-color: var(--ed-ink); }
.ed-dcard--web:hover .ed-vw__grid i:nth-child(1),
.ed-dcard--web:hover .ed-vw__grid i:nth-child(2),
.ed-dcard--web:hover .ed-vw__grid i:nth-child(3) { background: var(--ed-tint-f2f2ee); border-color: var(--ed-edge); }
.ed-dcard--web:hover .ed-vw__grid i:nth-child(2) { background: var(--ed-lime); }

/* ------------------------------------------------------------------
   The road: a 250px solid lane down the middle of the page, from the
   intro through the services into the next section. Asphalt black with
   a lime centre line; drawn as section backgrounds, ending in a cap.
   ------------------------------------------------------------------ */
:root {
	--road-w: 250px;
	--road: #151515;
	--road-line: repeating-linear-gradient(to bottom, #abfa08 0 46px, transparent 46px 92px);
}

/* In the dark intro the lane is a shade lighter so it still reads. */
.ed-studio {
	background:
		var(--road-line) center 0 / 6px 100% no-repeat,
		linear-gradient(90deg, transparent calc(50% - var(--road-w) / 2), #1b1b1b 0, #1b1b1b calc(50% + var(--road-w) / 2), transparent 0),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
		#0c0c0c;
}

.ed-dsvc {
	padding-bottom: 120px;
	background:
		var(--road-line) center 0 / 6px 100% no-repeat,
		linear-gradient(90deg, transparent calc(50% - var(--road-w) / 2), var(--road) 0, var(--road) calc(50% + var(--road-w) / 2), transparent 0),
		var(--ed-section);
}

/* The header text stays beside the lane, never on it. */
@media (min-width: 992px) {
	.ed-dsvc__head {
		max-width: calc(50% - var(--road-w) / 2 - 40px);
	}
}

.ed-road {
	position: relative;
	z-index: 1;
	height: 0;
}

.ed-road__cap {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--road-w);
	height: 170px;
	border-radius: 0 0 calc(var(--road-w) / 2) calc(var(--road-w) / 2);
	background: var(--road-line) center 0 / 6px 60px no-repeat, var(--road);
	transform: translateX(-50%);
}

.ed-road__node {
	position: absolute;
	bottom: 34px;
	left: 50%;
	width: 46px;
	height: 46px;
	border: 8px solid var(--ed-ink);
	border-radius: 50%;
	background: var(--ed-lime);
	box-shadow: 0 0 0 6px var(--ed-lime);
	transform: translateX(-50%);
}

/* The section after the road starts below its cap. */
.ed-road + * {
	padding-top: 220px !important;
}

/* Phones: a narrower lane that shows between the cards, not behind the heading. */
@media (max-width: 767px) {
	:root {
		--road-w: 90px;
	}

	.ed-dsvc {
		padding-bottom: 80px;
		background: var(--ed-section);
	}

	.ed-dsvc__grid {
		background:
			var(--road-line) center 0 / 4px 100% no-repeat,
			linear-gradient(90deg, transparent calc(50% - var(--road-w) / 2), var(--road) 0, var(--road) calc(50% + var(--road-w) / 2), transparent 0);
		margin-bottom: -80px;
		padding-bottom: 80px;
	}

	.ed-road__cap {
		height: 110px;
		background: var(--road-line) center 0 / 4px 40px no-repeat, var(--road);
	}

	.ed-road__node {
		bottom: 18px;
		width: 30px;
		height: 30px;
		border-width: 5px;
		box-shadow: 0 0 0 4px var(--ed-lime);
	}

	.ed-road + * {
		padding-top: 150px !important;
	}
}

/* The road continues behind the benefits. The services no longer end it. */
.ed-dsvc {
	padding-bottom: 112px;
}

.ed-why2 {
	padding-top: 112px !important;
	background:
		var(--road-line) center 0 / 6px 100% no-repeat,
		linear-gradient(90deg, transparent calc(50% - var(--road-w) / 2), var(--road) 0, var(--road) calc(50% + var(--road-w) / 2), transparent 0),
		var(--ed-section-white);
}

/* The heading sits on the road like a sign: a white panel. */
.ed-why2__head {
	padding: 34px 40px 32px;
	border: 1px solid var(--ed-rule-ecece6);
	border-radius: 28px;
	background: var(--ed-surface);
	box-shadow: 0 24px 50px -36px rgba(17, 17, 17, .4);
}

@media (max-width: 767px) {
	.ed-dsvc {
		padding-bottom: 72px;
	}

	.ed-dsvc__grid {
		margin-bottom: -72px;
		padding-bottom: 72px;
	}

	.ed-why2 {
		padding-top: 0 !important;
		background: var(--ed-section-white);
	}

	.ed-why2 .container {
		background:
			var(--road-line) center 0 / 4px 100% no-repeat,
			linear-gradient(90deg, transparent calc(50% - var(--road-w) / 2), var(--road) 0, var(--road) calc(50% + var(--road-w) / 2), transparent 0);
		padding-top: 56px;
	}

	.ed-why2__head {
		padding: 26px 20px 24px;
	}
}

/* ------------------------------------------------------------------
   The road, curved: it winds left through the services and right
   through the benefits, joining at the centre between sections, and
   is slightly see-through. SVG backgrounds keep the lane 250px wide
   at any section height (90px on phones).
   ------------------------------------------------------------------ */
:root {
	--road-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M500 0 L500 1000' fill='none' stroke='%232a2a2a' stroke-opacity='.7' stroke-width='250' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M500 0 L500 1000' fill='none' stroke='%23abfa08' stroke-width='6' stroke-dasharray='46 46' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--road-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M500 0 C500 220 230 230 230 500 C230 770 500 780 500 1000' fill='none' stroke='%23151515' stroke-opacity='.82' stroke-width='250' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M500 0 C500 220 230 230 230 500 C230 770 500 780 500 1000' fill='none' stroke='%23abfa08' stroke-width='6' stroke-dasharray='46 46' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--road-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M500 0 C500 220 770 230 770 500 C770 770 500 780 500 1000' fill='none' stroke='%23151515' stroke-opacity='.82' stroke-width='250' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M500 0 C500 220 770 230 770 500 C770 770 500 780 500 1000' fill='none' stroke='%23abfa08' stroke-width='6' stroke-dasharray='46 46' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--road-left-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M500 0 C500 220 230 230 230 500 C230 770 500 780 500 1000' fill='none' stroke='%23151515' stroke-opacity='.82' stroke-width='90' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M500 0 C500 220 230 230 230 500 C230 770 500 780 500 1000' fill='none' stroke='%23abfa08' stroke-width='4' stroke-dasharray='46 46' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--road-right-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M500 0 C500 220 770 230 770 500 C770 770 500 780 500 1000' fill='none' stroke='%23151515' stroke-opacity='.82' stroke-width='90' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M500 0 C500 220 770 230 770 500 C770 770 500 780 500 1000' fill='none' stroke='%23abfa08' stroke-width='4' stroke-dasharray='46 46' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.ed-studio {
	background:
		var(--road-hero) 0 0 / 100% 100% no-repeat,
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
		#0c0c0c;
}

.ed-dsvc {
	background: var(--road-left) 0 0 / 100% 100% no-repeat, var(--ed-section);
}

.ed-why2 {
	background: var(--road-right) 0 0 / 100% 100% no-repeat, var(--ed-section-white);
}

.ed-road__cap {
	opacity: .82;
}

/* The services heading sits on the right; the road bends left, so it can be wider again. */
@media (min-width: 992px) {
	.ed-dsvc__head {
		max-width: 560px;
	}
}

@media (max-width: 767px) {
	.ed-studio {
		background:
			radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
			#0c0c0c;
	}

	.ed-dsvc,
	.ed-why2 {
		background-image: none;
	}

	.ed-dsvc__grid {
		background: var(--road-left-sm) 0 0 / 100% 100% no-repeat;
	}

	.ed-why2 .container {
		background: var(--road-right-sm) 0 0 / 100% 100% no-repeat;
	}
}

/* ------------------------------------------------------------------
   One continuous road (wide screens): the intro keeps a straight lane in
   the same solid colour; from the services on, the script in
   design_services_useful.php draws one SVG path behind the content, so
   colour and dashes run on without a seam. Phones keep the CSS lanes.
   ------------------------------------------------------------------ */
.ed-road-svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	.ed-studio {
		background:
			repeating-linear-gradient(to bottom, var(--ed-lime) 0 46px, transparent 46px 92px) center 0 / 6px 100% no-repeat,
			linear-gradient(90deg, transparent calc(50% - 125px), #2a2a2a 0, #2a2a2a calc(50% + 125px), transparent 0),
			radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
			#0c0c0c;
	}

	.ed-road-js .ed-dsvc {
		background: var(--ed-section);
	}

	.ed-road-js .ed-why2 {
		background: var(--ed-section-white);
	}

	.ed-road-js .ed-road__cap {
		display: none;
	}

	/* Content sits above the road. */
	.ed-dsvc .container,
	.ed-why2 .container,
	.ed-road + * .container {
		position: relative;
		z-index: 1;
	}
}

/* The road's script sits between the road and the next section. */
.ed-road + script + * {
	padding-top: 220px !important;
}

.ed-road + script + * .container {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.ed-road + script + * {
		padding-top: 150px !important;
	}
}