.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --ok-cream:#FBFAF3; --ok-paper:#FFFFFF; --ok-ink:#15171A; --ok-ink-soft:#4A4F4B; --ok-line:#C9CEC7; --ok-sage:#DFE6DA; --ok-sage-mid:#B8CBB0; --ok-forest:#2E4A3B; --ok-forest-deep:#1F3529; --ok-sky:#E2EAF1; --ok-lavender:#E3DFF5; --ok-lotus:#A898F0; --ok-lotus-deep:#5A4BB5; --ok-success:#2E7D4F; --ok-error:#B42318; --ok-font-display:Lexend; --ok-font-body:Lexend; --ok-font-accent:Oswald; --ok-fs-display:clamp(2.75rem, 7vw, 5.5rem); --ok-fs-h2:clamp(2rem, 4vw, 3.25rem); --ok-fs-h3:clamp(1.375rem, 2vw, 1.75rem); --ok-fs-lead:1.25rem; --ok-fs-body:1.0625rem; --ok-fs-small:0.875rem; --ok-space-2xs:0.375rem; --ok-space-xs:0.75rem; --ok-space-s:1.25rem; --ok-space-m:2rem; --ok-space-l:clamp(2.5rem, 5vw, 4rem); --ok-space-xl:clamp(4rem, 9vw, 7.5rem); --ok-radius-s:4px; --ok-radius-m:14px; --ok-radius-pill:999px; --ok-container:1160px; --ok-measure:68ch; }
/* Start custom CSS *//**
 * Okinawa huisstijl — site-brede CSS voor de website van de bewonersvereniging Okinawa.
 *
 * Waar staat dit op de site?  Elementor → Site-instellingen → Aangepaste CSS (kit).
 * Deze map in de repository is de bron: pas het hier aan en plak het daarna in Elementor
 * (of laat Claude het via de Elementor MCP bijwerken).
 *
 * Alles gebruikt de design tokens (globale variabelen) uit Elementor, zoals var(--ok-forest).
 * Die staan in Elementor onder Variabelen en worden door Elementor op :root gezet. Pas je een
 * kleur in Elementor aan, dan verandert hij hier automatisch mee.
 *
 * Inhoud:
 *   1. Basis (body, selectie, focus)
 *   2. Navigatiemenu's (header en footer, Elementor Pro nav-menu)
 *   3. Lopende tekst (berichtinhoud in templates: .elementor-widget-theme-post-content)
 *   4. Agenda (ICS Calendar-plugin, lijstweergave) in de stijl van de flyer
 *   5. Okinawa Socie-plugin (ledenportaal: inloggen, bewoners, groepen, profiel, afgeschermd)
 *   6. Minder beweging (prefers-reduced-motion)
 */

/* -------------------------------------------------------------------------------------------
 * 1. Basis
 * ---------------------------------------------------------------------------------------- */

body {
	margin: 0;
	background-color: var(--ok-cream, #fbfaf3);
	color: var(--ok-ink, #15171a);
	font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 300;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background-color: var(--ok-lavender, #e3dff5);
	color: var(--ok-ink, #15171a);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--ok-lotus, #a898f0);
	outline-offset: 3px;
}

/* Een heel V4-alinea of -kop als link: kleur en onderstreping komen van de klasse op het
   element zelf (bijv. ok-eyebrow of ok-on-dark), niet van de standaard linkkleur. */
.elementor a.e-paragraph-link-base,
.elementor a.e-heading-link-base {
	color: inherit;
	text-decoration: inherit;
}

/* Hello Elementor zonder thema-CSS: geen dubbele paginatitel boven een Elementor-template. */
.elementor-page-title,
.page-header .entry-title {
	display: none;
}

/* -------------------------------------------------------------------------------------------
 * 2. Navigatiemenu's
 * ---------------------------------------------------------------------------------------- */

.elementor-location-header .elementor-nav-menu--main .elementor-item {
	padding: 0.55em 0.85em;
	color: var(--ok-ink, #15171a);
	font-family: "Lexend", sans-serif;
	font-size: 0.975rem;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--ok-forest, #2e4a3b);
}

.elementor-location-header .e--pointer-underline .elementor-item::after {
	height: 3px;
	border-radius: 3px;
	background-color: var(--ok-lotus, #a898f0);
}

.elementor-location-header .elementor-menu-toggle {
	border-radius: 999px;
	background-color: transparent;
	color: var(--ok-ink, #15171a);
	font-size: 1.5rem;
}

.elementor-location-header .elementor-nav-menu--dropdown {
	border-top: 1px solid var(--ok-line, #c9cec7);
	background-color: var(--ok-cream, #fbfaf3);
}

.elementor-location-header .elementor-nav-menu--dropdown a,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active {
	padding: 0.9em 1.25em;
	background-color: transparent;
	color: var(--ok-ink, #15171a);
	font-family: "Lexend", sans-serif;
	font-size: 1.0625rem;
	font-weight: 500;
}

.elementor-location-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active {
	background-color: var(--ok-sage, #dfe6da);
	color: var(--ok-forest-deep, #1f3529);
}

.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu a.elementor-item-active {
	padding: 0.3em 0 !important;
	background-color: transparent;
	color: var(--ok-cream, #fbfaf3);
	font-family: "Lexend", sans-serif;
	font-size: 0.9375rem;
	font-weight: 300;
	opacity: 0.85;
}

.elementor-location-footer .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu a:focus {
	color: var(--ok-cream, #fbfaf3);
	text-decoration: underline;
	text-decoration-color: var(--ok-lotus, #a898f0);
	text-underline-offset: 0.25em;
	opacity: 1;
}

/* -------------------------------------------------------------------------------------------
 * 3. Lopende tekst in templates (Berichtinhoud-widget)
 *    Alleen voor tekst uit de WordPress-editor. Een pagina die zelf met Elementor is gebouwd,
 *    staat in de Berichtinhoud als een tweede .elementor; die elementen hebben hun eigen
 *    klassen en worden hier met :not(.elementor .elementor *) overgeslagen.
 * ---------------------------------------------------------------------------------------- */

.elementor-widget-theme-post-content {
	color: var(--ok-ink, #15171a);
	font-family: "Lexend", sans-serif;
	font-size: var(--ok-fs-body, 1.0625rem);
	font-weight: 300;
	line-height: 1.75;
}

.elementor-widget-theme-post-content > * + *,
.elementor-widget-theme-post-content .elementor-widget-container > * + * {
	margin-top: 1em;
}

.elementor-widget-theme-post-content :is(h2, h3, h4):not(.elementor .elementor *) {
	margin: 1.6em 0 0.5em;
	color: var(--ok-ink, #15171a);
	font-family: "Lexend", sans-serif;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.elementor-widget-theme-post-content h2:not(.elementor .elementor *) {
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 700;
}

.elementor-widget-theme-post-content h3:not(.elementor .elementor *) {
	font-size: 1.375rem;
	font-weight: 600;
}

.elementor-widget-theme-post-content p:not(.elementor .elementor *) {
	margin: 0 0 1em;
	color: inherit;
}

.elementor-widget-theme-post-content :is(ul, ol):not(.elementor .elementor *) {
	margin: 0 0 1em;
	padding-left: 1.25em;
}

.elementor-widget-theme-post-content li:not(.elementor .elementor *) + li {
	margin-top: 0.35em;
}

.elementor-widget-theme-post-content li:not(.elementor .elementor *)::marker {
	color: var(--ok-lotus-deep, #5a4bb5);
	font-weight: 600;
}

.elementor-widget-theme-post-content a:not(.okso-button):not(.elementor .elementor *) {
	color: var(--ok-forest, #2e4a3b);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--ok-lotus, #a898f0);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.elementor-widget-theme-post-content a:not(.okso-button):not(.elementor .elementor *):hover {
	color: var(--ok-lotus-deep, #5a4bb5);
}

.elementor-widget-theme-post-content blockquote:not(.elementor .elementor *) {
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border-left: 4px solid var(--ok-lotus, #a898f0);
	border-radius: 0 var(--ok-radius-s, 4px) var(--ok-radius-s, 4px) 0;
	background-color: var(--ok-lavender, #e3dff5);
	font-size: 1.125rem;
}

.elementor-widget-theme-post-content em:not(.elementor .elementor *) {
	color: var(--ok-ink-soft, #4a4f4b);
}

/* -------------------------------------------------------------------------------------------
 * 4. Agenda — ICS Calendar (lijstweergave), opgemaakt als de flyer:
 *    links wat er is, rechts (achter een lijn) de dag en tijd; vlakken wisselen
 *    tussen salie, lucht en lavendel.
 * ---------------------------------------------------------------------------------------- */

.ics-calendar {
	--okc-bg: var(--ok-sage, #dfe6da);
	font-family: "Lexend", sans-serif;
	color: var(--ok-ink, #15171a);
}

.ics-calendar .ics-calendar-list-wrapper {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ics-calendar .ics-calendar-label {
	position: static !important;
	margin: var(--ok-space-m, 2rem) 0 0.25rem;
	padding: 0;
	background: none !important;
	color: var(--ok-forest, #2e4a3b);
	font-family: "Oswald", sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ics-calendar .ics-calendar-label:first-child {
	margin-top: 0;
}

.ics-calendar .ics-calendar-date-wrapper {
	--okc-date: 12rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--okc-date);
	grid-auto-flow: row dense;
	gap: 0;
	margin: 0;
	border-radius: var(--ok-radius-s, 4px);
	/* De verticale lijn tussen activiteit en datum, met wat ruimte boven en onder (zoals de flyer). */
	background-color: var(--okc-bg);
	background-image: linear-gradient(var(--ok-line, #c9cec7), var(--ok-line, #c9cec7));
	background-position: calc(100% - var(--okc-date)) 50%;
	background-repeat: no-repeat;
	background-size: 2px calc(100% - 28px);
	overflow: hidden;
}

.ics-calendar .ics-calendar-date-wrapper::before,
.ics-calendar .ics-calendar-date-wrapper::after {
	display: none;
}

.ics-calendar .ics-calendar-date-wrapper:nth-of-type(3n + 2) {
	--okc-bg: var(--ok-sky, #e2eaf1);
}

.ics-calendar .ics-calendar-date-wrapper:nth-of-type(3n) {
	--okc-bg: var(--ok-lavender, #e3dff5);
}

.ics-calendar .ics-calendar-date-wrapper .events {
	display: contents;
}

.ics-calendar .ics-calendar-date {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 1.25rem 0.75rem 0.15rem;
	border: 0;
	background: none !important;
	color: var(--ok-ink, #15171a);
	font-family: "Lexend", sans-serif;
	font-size: clamp(1.25rem, 2.4vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-align: center;
}

/* De weekdag ("zaterdag") klein en in kapitalen boven de datum. */
.ics-calendar .ics-calendar-date [data-date-format="l"] {
	display: block;
	font-family: "Oswald", sans-serif;
	font-size: 0.55em;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ok-forest, #2e4a3b);
	margin-bottom: 0.2em;
}

.ics-calendar .events dt.time {
	grid-column: 2;
	margin: 0;
	padding: 0.35rem 0.75rem 1.25rem;
	border: 0;
	color: var(--ok-ink, #15171a);
	font-family: "Oswald", sans-serif;
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.ics-calendar .events dt.time .end_time {
	color: inherit;
	font-size: 1em;
	opacity: 1;
}

.ics-calendar .events dd.event {
	grid-column: 1;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 1.25rem 1.75rem;
	border: 0;
	background: none !important;
}

.ics-calendar .events dd.event .title {
	display: block;
	color: var(--ok-ink, #15171a);
	font-size: clamp(1.25rem, 2.4vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	cursor: default;
}

.ics-calendar .events dd.event .title a {
	color: inherit;
	text-decoration: none;
}

.ics-calendar .events dd.event .title a:hover,
.ics-calendar .events dd.event .title a:focus {
	text-decoration: underline;
	text-decoration-color: var(--ok-lotus, #a898f0);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.18em;
}

.ics-calendar .events dd.event .descloc {
	display: block !important;
	margin: 0;
	color: var(--ok-ink-soft, #4a4f4b);
	font-size: clamp(0.975rem, 1.4vw, 1.125rem);
	font-weight: 300;
	line-height: 1.55;
}

.ics-calendar .events dd.event .descloc p {
	margin: 0;
}

.ics-calendar .events dd.event .descloc p:empty {
	display: none;
}

.ics-calendar .events dd.event .location {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.35rem;
	color: var(--ok-forest, #2e4a3b);
	font-family: "Oswald", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ics-calendar .events dd.event .location::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background-color: var(--ok-lotus, #a898f0);
}

.ics-calendar .ics-calendar-past-events-toggle,
.ics-calendar .ics-calendar-paging {
	margin-top: 1rem;
	font-family: "Lexend", sans-serif;
}

@media (max-width: 767px) {
	.ics-calendar .ics-calendar-date-wrapper {
		--okc-date: 7.5rem;
	}

	.ics-calendar .events dd.event {
		padding: 1rem 1.1rem;
	}

	.ics-calendar .ics-calendar-date {
		padding-inline: 0.5rem;
	}
}

/* -------------------------------------------------------------------------------------------
 * 5. Okinawa Socie-plugin (ledenportaal)
 *    De plugin is thema-neutraal en stuurt alles via --okso-* variabelen; die koppelen we
 *    hier aan de huisstijl en daarna geven we de onderdelen het Okinawa-gezicht.
 *    "body" vooraan maakt de regels net sterker dan de plugin-CSS, die later in de pagina laadt.
 * ---------------------------------------------------------------------------------------- */

body .okso,
body .okso-login {
	--okso-accent: var(--ok-forest-deep, #1f3529);
	--okso-accent-contrast: var(--ok-cream, #fbfaf3);
	--okso-radius: var(--ok-radius-s, 4px);
	--okso-gap: 1.25rem;
	--okso-avatar-bg: var(--ok-lotus-deep, #5a4bb5);
	--okso-border: var(--ok-line, #c9cec7);
	--okso-surface: var(--ok-paper, #ffffff);
	--okso-muted-opacity: 0.8;
	--okso-success: var(--ok-success, #2e7d4f);
	--okso-error: var(--ok-error, #b42318);
	--okso-info: var(--ok-lotus-deep, #5a4bb5);
	--okso-focus: 0 0 0 3px rgba(168, 152, 240, 0.55);
	font-family: "Lexend", sans-serif;
	font-weight: 300;
	color: var(--ok-ink, #15171a);
}

body .okso :is(h2, h3, h4),
body .okso-login :is(h2, h3, h4) {
	font-family: "Lexend", sans-serif;
	letter-spacing: -0.02em;
	color: var(--ok-ink, #15171a);
}

body .okso a:not(.okso-button) {
	color: var(--ok-forest, #2e4a3b);
	text-decoration-color: var(--ok-lotus, #a898f0);
}

/* Knoppen in pilvorm, zoals .ok-btn in Elementor. */
body .okso-button,
body .okso-login .okso-button {
	min-height: 3rem;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

body .okso-button:hover {
	border-color: var(--ok-forest, #2e4a3b);
	background-color: var(--ok-forest, #2e4a3b);
	transform: translateY(-1px);
}

/* Formulieren. */
body .okso-label,
body .okso-field__label {
	font-weight: 500;
}

body .okso-input,
body .okso-login input[type="email"],
body .okso-login input[type="text"] {
	border-color: var(--ok-line, #c9cec7);
	border-radius: var(--ok-radius-s, 4px);
	background-color: var(--ok-paper, #ffffff);
	font-family: "Lexend", sans-serif;
	font-weight: 400;
}

body .okso-input:focus,
body .okso-login input:focus {
	border-color: var(--ok-forest, #2e4a3b);
}

body .okso-notice {
	border-width: 0 0 0 4px;
	border-radius: 0 var(--ok-radius-s, 4px) var(--ok-radius-s, 4px) 0;
	background-color: var(--ok-paper, #ffffff);
}

body .okso-notice--info {
	background-color: var(--ok-lavender, #e3dff5);
}

body .okso-empty {
	border-color: var(--ok-sage-mid, #b8cbb0);
	background-color: var(--ok-sage, #dfe6da);
	opacity: 1;
}

/* Inloggen: een kaart op salie, met de lotus-kleur als accent. */
body .okso-login {
	max-width: 34rem;
}

body .okso-login__card {
	padding: clamp(1.5rem, 5vw, 2.5rem);
	border: 0;
	border-top: 6px solid var(--ok-lotus, #a898f0);
	border-radius: var(--ok-radius-m, 14px);
	background-color: var(--ok-paper, #ffffff);
	box-shadow: 0 24px 48px -32px rgba(31, 53, 41, 0.45);
}

body .okso-login__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
}

body .okso-login .okso-code-input {
	font-family: "Oswald", sans-serif;
	font-size: 1.75rem;
	letter-spacing: 0.35em;
	text-align: center;
}

/* Bewoners (ledenlijst). */
body .okso-directory__toolbar {
	margin-bottom: 1rem;
}

body .okso-directory__search {
	max-width: 28rem;
	min-height: 3.25rem;
	padding-left: 2.75em;
	border-radius: 999px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4A3B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-position: 1em 50%;
	background-repeat: no-repeat;
	background-size: 1.15em;
}

body .okso-directory__count {
	color: var(--ok-forest, #2e4a3b);
	font-family: "Oswald", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 1;
}

body .okso-directory__grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px;
}

body .okso-card {
	gap: 1rem;
	align-items: center;
	padding: 1.25rem;
	border: 0;
	border-radius: var(--ok-radius-s, 4px);
	background-color: var(--ok-sage, #dfe6da);
}

body .okso-directory__grid > .okso-card:nth-child(3n + 2) {
	background-color: var(--ok-sky, #e2eaf1);
}

body .okso-directory__grid > .okso-card:nth-child(3n) {
	background-color: var(--ok-lavender, #e3dff5);
}

body .okso-directory__grid > .okso-card:nth-child(3n + 2) .okso-avatar:not(.okso-avatar--photo) {
	background-color: var(--ok-forest, #2e4a3b);
}

body .okso-directory__grid > .okso-card:nth-child(3n + 1) .okso-avatar:not(.okso-avatar--photo) {
	background-color: var(--ok-forest-deep, #1f3529);
}

body .okso .okso-card__name {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

body .okso-card__address,
body .okso-card__title {
	color: var(--ok-ink-soft, #4a4f4b);
}

body .okso-avatar {
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
}

body .okso-tag {
	border-color: transparent;
	background-color: rgba(255, 255, 255, 0.7);
	color: var(--ok-forest-deep, #1f3529);
	font-weight: 400;
}

/* Groepen & commissies. */
body .okso-groups__list {
	gap: 14px;
}

body .okso-group {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 0;
	border-left: 6px solid var(--okso-swatch, var(--ok-lotus, #a898f0));
	border-radius: var(--ok-radius-s, 4px);
	background-color: var(--ok-paper, #ffffff);
}

body .okso .okso-group__name {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 700;
}

body .okso-group__count {
	color: var(--ok-forest, #2e4a3b);
	font-family: "Oswald", sans-serif;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 1;
}

/* Mijn profiel. */
body .okso-profile__header {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--ok-radius-m, 14px);
	background-color: var(--ok-sage, #dfe6da);
}

body .okso .okso-profile__name {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
}

body .okso-profile__section {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 0;
	border-radius: var(--ok-radius-s, 4px);
	background-color: var(--ok-paper, #ffffff);
}

body .okso .okso-profile__heading {
	color: var(--ok-forest, #2e4a3b);
	font-family: "Oswald", sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

body .okso-profile__row dt {
	color: var(--ok-ink-soft, #4a4f4b);
	font-weight: 500;
}

body .okso-profile__group {
	border-radius: 999px;
	background-color: var(--ok-lavender, #e3dff5);
}

/* Afgeschermde inhoud: uitnodigend in plaats van een foutmelding. */
body .okso-restricted__box {
	padding: clamp(1.5rem, 5vw, 2.75rem);
	border: 0;
	border-top: 6px solid var(--ok-lotus, #a898f0);
	border-radius: var(--ok-radius-m, 14px);
	background-color: var(--ok-paper, #ffffff);
	box-shadow: 0 24px 48px -32px rgba(31, 53, 41, 0.45);
}

body .okso-restricted__icon {
	color: var(--ok-lotus-deep, #5a4bb5);
}

body .okso-restricted__message {
	font-size: 1.125rem;
}

/* -------------------------------------------------------------------------------------------
 * 6. Minder beweging
 * ---------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}/* End custom CSS */