.dk-hero__inner {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 50px;
	align-items: center;
	padding-block: 52px 44px;
}

.dk-hero__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dk-hero__kicker {
	color: var(--dk-ocher);
}

.dk-hero__title {
	font-size: clamp(38px, 6vw, 64px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 640px;
	margin: 0;
}

.dk-hero__intro {
	font-size: 18px;
	line-height: 1.65;
	color: var(--dk-text-grey);
	max-width: 560px;
	margin: 0;
}

.dk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.dk-hero__note {
	font-size: 13px;
	color: var(--dk-text-muted-2);
}

/* ---- Compass illustration (340×340) ---- */
.dk-compass {
	position: relative;
	width: 340px;
	height: 340px;
	max-width: 100%;
	justify-self: center;
	animation: dk-float 6s ease-in-out infinite;
}

.dk-compass__ring {
	position: absolute;
	inset: 0;
	border: 1.5px solid #ded6c4;
	border-radius: 50%;
	background: var(--dk-paper-light);
}

.dk-compass__dash {
	position: absolute;
	inset: 40px;
	border: 1px dashed var(--dk-border);
	border-radius: 50%;
}

.dk-compass__needle {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 260px;
	margin: -130px 0 0 -11px;
	transform-origin: 50% 50%;
	animation: dk-sway 8s ease-in-out infinite;
}

.dk-compass__needle-n,
.dk-compass__needle-s {
	display: block;
	width: 22px;
	height: 130px;
}

.dk-compass__needle-n {
	background: var(--dk-green);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.dk-compass__needle-s {
	background: var(--dk-border);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.dk-compass__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	background: var(--dk-paper-light);
	border: 1.5px solid var(--dk-ink);
	border-radius: 50%;
}

.dk-compass__hub-paw {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 11px;
	margin: -5px 0 0 -6.5px;
	background: var(--dk-ocher);
	border-radius: var(--dk-paw);
	animation: dk-pad 3s ease-in-out infinite;
}

.dk-compass__label {
	position: absolute;
	font-family: var(--dk-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dk-text-muted-2);
	background: var(--dk-paper-light);
	padding: 2px 6px;
}

.dk-compass__label--n {
	left: 50%;
	top: 12px;
	transform: translateX(-50%);
	color: var(--dk-green);
}

.dk-compass__label--e {
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.dk-compass__label--s {
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
}

.dk-compass__label--w {
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 900px) {
	.dk-hero__inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 700px) {
	.dk-compass {
		display: none;
	}
	.dk-hero__inner {
		padding-block: 30px 20px;
	}
}