html.olsRoot--site,
body.olsSiteBody {
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--olsInk);
	color: var(--olsCream);
	font-family: var(--olsBody);
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

.olsSite {
	position: relative;
	min-height: 100vh;
}

.olsSite *,
.olsSite *::before,
.olsSite *::after {
	box-sizing: border-box;
}

.olsSite [hidden] {
	display: none !important;
}

.olsSite a {
	color: inherit;
	text-decoration: none;
}

.olsBar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 12px clamp(16px, 4vw, 44px);
	background: rgba(11, 11, 13, .88);
	border-bottom: 1px solid var(--olsLine);
	backdrop-filter: blur(10px);
}

.olsBar__brand {
	display: flex;
	align-items: center;
	gap: 11px;
}

.olsBar__mark {
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background:
		linear-gradient(160deg, var(--olsFlame), var(--olsFlameDeep));
	position: relative;
	overflow: hidden;
	flex: none;
}

.olsBar__mark::after {
	content: "";
	position: absolute;
	inset: 6px 6px 0 6px;
	background: #14120f;
	clip-path: polygon(0 55%, 28% 30%, 28% 100%, 0 100%, 0 55%, 38% 18%, 66% 42%, 66% 100%, 38% 100%, 38% 18%, 76% 44%, 100% 26%, 100% 100%, 76% 100%);
}

.olsBar__name {
	font-family: var(--olsHead);
	font-style: italic;
	font-size: 21px;
	letter-spacing: .02em;
	line-height: 1;
	transform: skewX(-8deg);
}

.olsBar__name b {
	color: var(--olsCream);
}

.olsBar__name i {
	color: var(--olsFlame);
	font-style: italic;
}

.olsBar__nav {
	display: flex;
	gap: 22px;
	margin-right: auto;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--olsMuted);
}

.olsBar__nav a {
	white-space: nowrap;
}

.olsBar__nav a:hover {
	color: var(--olsCream);
}

.olsBar__side {
	display: flex;
	align-items: center;
	gap: 9px;
}

.olsWho {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 14px 5px 6px;
	border: 1px solid var(--olsLine);
	background: linear-gradient(90deg, rgba(224, 123, 36, .16), rgba(255, 255, 255, .03));
	border-radius: 999px;
}

.olsWho__face {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex: none;
	background: radial-gradient(circle at 50% 34%, #c98f68 46%, transparent 47%), #2b2620;
	border: 1px solid rgba(255, 255, 255, .14);
	position: relative;
	overflow: hidden;
}

.olsWho__face::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 17px;
	height: 11px;
	transform: translateX(-50%);
	border-radius: 7px 7px 0 0;
	background: #7d2f2f;
}

.olsWho__text {
	white-space: nowrap;
}

.olsWho__text b {
	display: block;
	font-size: 13px;
	line-height: 1.2;
}

.olsWho__text small {
	display: block;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--olsFlame);
}

.olsBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--olsLine);
	background: transparent;
	color: var(--olsCream);
	font-family: var(--olsBody);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 10px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter .12s, border-color .12s;
}

.olsBtn:hover {
	filter: brightness(1.15);
	border-color: var(--olsMuted);
}

.olsBtn--go {
	background: var(--olsFlame);
	border-color: var(--olsFlameDeep);
	color: #1a1208;
}

.olsBtn--quiet {
	color: var(--olsMuted);
}

.olsBtn--big {
	font-size: 14px;
	padding: 15px 26px;
	letter-spacing: .14em;
}

.olsBtn:disabled {
	opacity: .5;
	cursor: default;
}

.olsHero {
	position: relative;
	min-height: min(84vh, 760px);
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--olsLine);
}

.olsHero__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background:
		radial-gradient(90% 70% at 20% 100%, rgba(224, 123, 36, .3), transparent 60%),
		linear-gradient(160deg, #2a2118, #0b0b0d);
}

.olsHero__in {
	position: relative;
	z-index: 2;
	padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 44px);
	max-width: 780px;
}

.olsHero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(11, 11, 13, .96) 0%, rgba(11, 11, 13, .8) 38%, rgba(11, 11, 13, .1) 76%),
		linear-gradient(0deg, var(--olsInk) 0%, rgba(11, 11, 13, .7) 14%, transparent 48%);
}

.olsCity {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
	gap: 18px;
	align-items: stretch;
}

.olsCity__art {
	display: block;
	width: 100%;
	height: clamp(280px, 38vw, 460px);
	background: linear-gradient(160deg, #1a1a1f, #0b0b0d);
	border: 1px solid var(--olsLine);
}

@media (max-width: 860px) {
	.olsCity {
		grid-template-columns: 1fr;
	}
}

.olsHero__scene {
	position: absolute;
	inset: 0;
}

.olsHero__scene canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.olsHero__scene canvas[data-leeg] {
	background:
		radial-gradient(90% 70% at 20% 100%, rgba(224, 123, 36, .3), transparent 60%),
		linear-gradient(160deg, #2a2118, #0b0b0d);
}

.olsHero__fade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 11, 13, .96) 0%, rgba(11, 11, 13, .8) 36%, rgba(11, 11, 13, .06) 72%),
		linear-gradient(0deg, var(--olsInk) 0%, rgba(11, 11, 13, .72) 16%, transparent 52%),
		linear-gradient(180deg, rgba(11, 11, 13, .85) 0%, transparent 22%);
}

.olsHero__text {
	position: relative;
	padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 44px);
	max-width: 760px;
}

.olsKicker {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--olsFlame);
}

.olsSiteLogo {
	margin: 0 0 20px;
	font-family: var(--olsHead);
	font-style: italic;
	line-height: .82;
	text-transform: uppercase;
	transform: skewX(-7deg);
}

.olsSiteLogo span {
	display: block;
	font-size: clamp(52px, 9vw, 116px);
	color: var(--olsCream);
	text-shadow: 4px 4px 0 #000, 8px 8px 0 rgba(0, 0, 0, .4);
}

.olsSiteLogo .olsSiteLogo--hot {
	color: var(--olsFlame);
}

.olsSiteLogo em {
	display: block;
	margin-top: 10px;
	font-family: var(--olsBody);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(11px, 1.4vw, 16px);
	letter-spacing: .6em;
	color: var(--olsMuted);
}

.olsLead {
	margin: 0 0 26px;
	max-width: 56ch;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.55;
	color: #d6cdbc;
}

.olsLead--klein {
	font-size: 15px;
	margin-bottom: 0;
}

.olsHero__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 36px;
}

.olsFacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--olsLine);
}

.olsFacts li {
	padding: 16px 30px 0 0;
	margin-right: 30px;
	border-right: 1px solid var(--olsLine);
}

.olsFacts li:last-child {
	border-right: 0;
	margin-right: 0;
}

.olsFacts b {
	display: block;
	font-family: var(--olsHead);
	font-size: 30px;
	letter-spacing: .02em;
	color: var(--olsCream);
}

.olsFacts span {
	display: block;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--olsMuted);
}

.olsBlok {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(50px, 8vw, 104px) clamp(16px, 4vw, 44px);
	border-bottom: 1px solid var(--olsLine);
}

.olsBlok__kop {
	max-width: 760px;
	margin-bottom: 40px;
}

.olsBlok h2 {
	margin: 0 0 16px;
	font-family: var(--olsHead);
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.04;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.olsBlok--donker {
	max-width: none;
	background:
		radial-gradient(80% 90% at 10% 0%, rgba(224, 123, 36, .14), transparent 60%),
		#101014;
}

.olsBlok--donker > * {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

.olsBlok--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.olsBlok--split > *,
.olsSchermen > *,
.olsMeters > *,
.olsUitleg > * {
	min-width: 0;
}

.olsBlok--split .olsBlok__kop {
	margin-bottom: 0;
}

.olsStadGrid {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}

.olsStadGrid > * {
	min-width: 0;
}

.olsKaart {
	border: 1px solid var(--olsLine);
	background: #17181c;
}

.olsKaart canvas {
	display: block;
	width: 100%;
	height: min(62vh, 600px);
}

.olsBijschrift {
	margin: 0;
	padding: 10px 14px;
	border-top: 1px solid var(--olsLine);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--olsMuted);
}

.olsWijken {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--olsLine);
	border: 1px solid var(--olsLine);
}

.olsWijken li {
	position: relative;
	padding: 18px 18px 18px 26px;
	background: #121216;
}

.olsWijken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--wijk);
}

.olsWijken b {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	letter-spacing: .02em;
}

.olsWijken span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--olsMuted);
}

.olsPunten {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.olsPunten li {
	padding: 14px 0;
	border-top: 1px solid var(--olsLine);
	font-size: 14px;
	line-height: 1.55;
	color: var(--olsMuted);
}

.olsPunten b {
	display: block;
	margin-bottom: 3px;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--olsFlame);
}

.olsBlok__beeld {
	border: 1px solid var(--olsLine);
	background: #0e0d0c;
}

.olsBlok__beeld canvas {
	display: block;
	width: 100%;
	height: min(48vh, 440px);
}

.olsSchermen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: clamp(20px, 3vw, 38px);
}

.olsScherm {
	margin: 0;
}

.olsToestel {
	padding: 12px;
	border-radius: 16px;
	background: linear-gradient(160deg, #2b2b31, #131317);
	border: 1px solid var(--olsLine);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.olsToestel__rand {
	border: 2px solid #000;
	border-radius: 8px;
	overflow: hidden;
	background: #0d0d10;
}

.olsToestel__scherm {
	height: 272px;
	overflow: hidden;
	background: linear-gradient(180deg, #151519, #0d0d10);
	position: relative;
}

.olsToestel__scherm::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 44px;
	background: linear-gradient(0deg, #0d0d10, transparent);
	pointer-events: none;
}

.olsToestel .olsAppBack,
.olsToestel .olsChip,
.olsToestel select {
	pointer-events: none;
}

.olsScherm figcaption {
	margin-top: 16px;
}

.olsScherm figcaption b {
	display: block;
	margin-bottom: 5px;
	font-family: var(--olsHead);
	font-size: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.olsScherm figcaption span {
	font-size: 13px;
	line-height: 1.55;
	color: var(--olsMuted);
}

.olsMeters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	margin-bottom: 40px;
	background: var(--olsLine);
	border: 1px solid var(--olsLine);
}

.olsMeter {
	padding: 22px;
	background: #121216;
}

.olsMeter b {
	display: block;
	font-family: var(--olsHead);
	font-size: 32px;
	color: var(--olsFlame);
}

.olsMeter span {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--olsMuted);
}

.olsUitleg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 28px;
}

.olsUitleg h3 {
	margin: 0 0 10px;
	font-size: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--olsCream);
}

.olsUitleg p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--olsMuted);
}

.olsStappen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	counter-reset: stap;
}

.olsStappen li {
	position: relative;
	padding-top: 52px;
	counter-increment: stap;
}

.olsStappen li::before {
	content: counter(stap);
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: var(--olsFlame);
	color: #1a1208;
	font-family: var(--olsHead);
	font-size: 21px;
}

.olsStappen b {
	display: block;
	margin-bottom: 7px;
	font-size: 16px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.olsStappen span {
	font-size: 14px;
	line-height: 1.6;
	color: var(--olsMuted);
}

.olsSlot {
	display: flex;
	justify-content: center;
}

.olsVoet {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px clamp(16px, 4vw, 44px) 60px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
}

.olsVoet__merk {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	letter-spacing: .04em;
}

.olsVoet p {
	margin: 0;
	flex: 1;
	min-width: 240px;
	font-size: 12px;
	color: var(--olsMuted);
}

.olsVoet nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--olsMuted);
}

.olsVoet nav a:hover {
	color: var(--olsCream);
}

.olsInlog {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(6, 6, 8, .82);
	backdrop-filter: blur(6px);
}

.olsInlog__doos {
	width: min(440px, 100%);
	border: 2px solid var(--olsLine);
	background: linear-gradient(180deg, rgba(23, 23, 26, .99), rgba(11, 11, 13, .99));
	box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}

.olsSite .olsPane__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 2px solid var(--olsLine);
	background: linear-gradient(90deg, rgba(224, 123, 36, .18), transparent);
}

.olsSite .olsPane__head h2 {
	margin: 0;
	font-family: var(--olsHead);
	font-size: 24px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.olsSite .olsPane__body {
	padding: 20px;
}

.olsToasts {
	position: fixed;
	left: 50%;
	top: 80px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 7px;
	z-index: 50;
	pointer-events: none;
}

@media (max-width: 1000px) {
	.olsBar__nav {
		display: none;
	}

	.olsBar {
		gap: 12px;
	}

	.olsBar__brand {
		margin-right: auto;
	}

	.olsBlok--split,
	.olsStadGrid {
		grid-template-columns: 1fr;
	}

	.olsWho__text small {
		display: none;
	}
}

@media (max-width: 620px) {
	.olsFacts li {
		padding-right: 18px;
		margin-right: 18px;
	}

	.olsFacts b {
		font-size: 23px;
	}

	.olsWho {
		padding-right: 10px;
	}
}
.olsTrio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.olsTrio__card{padding:18px 20px;background:#12161d;border:1px solid #2a3240}
.olsTrio__card h3{margin:0 0 8px;font-size:17px}
.olsTrio__card p{margin:0;font-size:13.5px;line-height:1.6;color:#aab2c0}

.olsBar--guide{position:sticky;top:0;z-index:20}
.olsSiteBody--guide .olsSite__main{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,44px)}
.olsGuideTop{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,34px);max-width:70ch}
.olsGuideGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;padding-bottom:30px}
.olsGuideGrid--klein{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.olsGuideCard{display:flex;flex-direction:column;background:#12161d;border:1px solid #2a3240;overflow:hidden;color:inherit;text-decoration:none}
.olsGuideCard:hover{border-color:var(--olsFlame)}
.olsGuideCard img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top left;background:#0a0d12}
.olsGuideCard__in{padding:14px 18px 18px}
.olsGuideCard__in .olsKicker{margin:0 0 6px;font-size:10.5px;letter-spacing:.24em}
.olsGuideCard__in h2,.olsGuideCard__in h3{margin:0 0 6px;font-size:18px}
.olsGuideCard__in p{margin:0;font-size:13.5px;line-height:1.55;color:#aab2c0}
.olsGuide{padding:clamp(34px,5vw,64px) 0 20px}
.olsGuide__kop{max-width:70ch;margin-bottom:26px}
.olsGuide__beeld{margin:0 0 30px;border:1px solid #2a3240;background:#0a0d12}
.olsGuide__beeld img{width:100%;height:auto;display:block}
.olsGuide__beeld figcaption{padding:10px 16px;font-size:12px;color:var(--olsMuted);border-top:1px solid #2a3240}
.olsGuide__punten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px 30px;margin-bottom:34px}
.olsGuide__punten h2{margin:0 0 7px;font-size:17px}
.olsGuide__punten p{margin:0;font-size:14px;line-height:1.62;color:#aab2c0}
.olsGuide__verder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:34px}
.olsGuide__verder a{display:flex;flex-direction:column;gap:3px;padding:14px 18px;background:#12161d;border:1px solid #2a3240;color:inherit;text-decoration:none}
.olsGuide__verder a:hover{border-color:var(--olsFlame)}
.olsGuide__verder small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--olsMuted)}
.olsGuide__verder b{font-size:15px}
.olsGuide__slot{padding:34px 0 60px;border-top:1px solid #2a3240;max-width:60ch}
.olsGuide__slot h2{margin:0 0 8px;font-size:22px}
.olsGuide__slot p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:#aab2c0}
.olsVoet__nav{max-width:760px}

.olsHero__title{margin:0 0 18px;font-family:var(--olsHead);font-size:clamp(30px,4.4vw,52px);line-height:1.02;letter-spacing:.01em;color:var(--olsCream)}
