/**
 * XOXO Onepager
 * ---------------------------------------------------------------------------
 *  1.  Design tokens
 *  2.  Theme reset (GeneratePress)
 *  3.  Basis & typografie
 *  4.  Bouwstenen (container, eyebrow, buttons, reveal)
 *  5.  Header & navigatie
 *  6.  Hero + growth visual
 *  7.  Diensten
 *  8.  Creator-first (filosofie)
 *  9.  Past XOXO bij mij + creatorprofielen
 * 10.  Hoe we werken
 * 11.  Expertise & resultaten
 * 12.  Finale CTA
 * 13.  Footer
 * 14.  Weergave-opties uit de admin
 * 15.  Responsive
 * 16.  Reduced motion & print
 * ---------------------------------------------------------------------------
 */

/* ========================================================================
   1. Design tokens
   ======================================================================== */

.xoxo-onepager {
	/* Kleur */
	--xoxo-ivory: #fbf6ef;
	--xoxo-ivory-light: #fdfaf6;
	--xoxo-cream: #f8f2e9;
	--xoxo-sand: #f4ece1;
	--xoxo-ink: #171210;
	--xoxo-charcoal: #14100d;
	--xoxo-charcoal-soft: #1d1713;
	--xoxo-text: #2c2521;
	--xoxo-muted: #786c62;
	--xoxo-muted-light: rgba(238, 225, 212, 0.66);
	--xoxo-line: #e8dccc;
	--xoxo-line-strong: #dccbb5;
	--xoxo-line-dark: rgba(214, 168, 122, 0.18);

	--xoxo-copper: #b06f3c;
	--xoxo-copper-deep: #96552a;
	--xoxo-copper-soft: #c98a51;
	--xoxo-copper-light: #e2b184;
	--xoxo-copper-glow: rgba(197, 128, 68, 0.18);

	/* Typografie */
	--xoxo-font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
	--xoxo-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--xoxo-font-script: "Dancing Script", "Brush Script MT", "Segoe Script", cursive;

	/* Ritme */
	--xoxo-max: 1320px;
	--xoxo-gutter: clamp(1.25rem, 4vw, 3rem);
	--xoxo-section-y: clamp(3.75rem, 7vw, 6.5rem);
	--xoxo-header-h: 74px;

	/* Vorm */
	--xoxo-radius-sm: 6px;
	--xoxo-radius: 10px;
	--xoxo-radius-lg: 16px;
	--xoxo-shadow-card: 0 1px 2px rgba(45, 30, 18, 0.03), 0 14px 32px -24px rgba(45, 30, 18, 0.28);
	--xoxo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ========================================================================
   2. Theme reset (GeneratePress)
   ======================================================================== */

/* Verwijder de smalle contentcontainer, padding en article-chrome rond de
   onepager, zodat sectieachtergronden edge-to-edge kunnen lopen. */
body.xoxo-onepager-page .site-content,
body.xoxo-onepager-page .content-area,
body.xoxo-onepager-page .site-main,
body.xoxo-onepager-page .entry-content,
body.xoxo-onepager-page .inside-article,
body.xoxo-onepager-page .page-content {
	margin: 0;
	padding: 0;
	max-width: 100%;
	width: 100%;
	border: 0;
	background: none;
	box-shadow: none;
}

body.xoxo-onepager-page .site.grid-container,
body.xoxo-onepager-page .site-content.grid-container {
	max-width: 100%;
	padding: 0;
}

body.xoxo-onepager-page .entry-content > .xoxo-onepager {
	margin-top: 0;
}

body.xoxo-onepager-page .site-content {
	display: block;
}

body.xoxo-onepager-page .separate-containers .site-main {
	margin: 0;
}

body.xoxo-onepager-page.xoxo-hide-theme-header .site-header,
body.xoxo-onepager-page.xoxo-hide-theme-header #site-navigation,
body.xoxo-onepager-page.xoxo-hide-theme-header .main-navigation,
body.xoxo-onepager-page.xoxo-hide-theme-header .navigation-branding {
	display: none;
}

body.xoxo-onepager-page.xoxo-hide-theme-footer .site-footer {
	display: none;
}

/* `clip` in plaats van `hidden`: hidden maakt een scrollcontainer van de body
   en breekt daarmee position: sticky van de header. */
body.xoxo-onepager-page {
	overflow-x: clip;
	background-color: #fdfaf6;
}

/* ========================================================================
   3. Basis & typografie
   ======================================================================== */

.xoxo-onepager {
	font-family: var(--xoxo-font-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--xoxo-text);
	background-color: var(--xoxo-ivory-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

/* De elementkiezers staan in :where(), zodat deze reset op precies dezelfde
   specificiteit uitkomt als een losse component-class. Zo wint hij van de
   element-regels van het thema, maar verliest hij van de component-regels
   verderop in dit bestand die hun eigen marges zetten. */
.xoxo-onepager :where(h1, h2, h3, h4, p, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}

.xoxo-onepager :where(ul, ol) {
	list-style: none;
}

.xoxo-onepager :where(img, svg) {
	max-width: 100%;
}

.xoxo-onepager :where(a) {
	color: inherit;
	text-decoration: none;
}

.xoxo-onepager a:focus-visible,
.xoxo-onepager button:focus-visible {
	outline: 2px solid var(--xoxo-copper);
	outline-offset: 3px;
	border-radius: 3px;
}

.xoxo-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.xoxo-section {
	position: relative;
	padding-block: var(--xoxo-section-y);
}

.xoxo-section--dark {
	background-color: var(--xoxo-charcoal);
	color: var(--xoxo-muted-light);
}

.xoxo-section__title {
	font-family: var(--xoxo-font-serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--xoxo-ink);
}

.xoxo-section__title--sm {
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
}

.xoxo-section__title--light {
	color: #fbf3ea;
}

.xoxo-section__lead {
	margin-top: 1.35rem;
	max-width: 46ch;
	font-size: 0.98rem;
	line-height: 1.75;
	color: var(--xoxo-muted);
}

.xoxo-section__lead--tight {
	max-width: 40ch;
}

.xoxo-section__lead--light {
	color: rgba(240, 227, 214, 0.76);
}

.xoxo-accent-serif {
	font-style: italic;
	font-weight: 400;
	color: var(--xoxo-copper);
	/* Voorkomt een afbreking op het koppelteken van "creator-business." */
	white-space: nowrap;
}

.xoxo-script {
	font-family: var(--xoxo-font-script);
	font-weight: 500;
	color: var(--xoxo-copper-soft);
	line-height: 1.15;
	opacity: 0.9;
}

/* ========================================================================
   4. Bouwstenen
   ======================================================================== */

.xoxo-container {
	width: 100%;
	max-width: var(--xoxo-max);
	margin-inline: auto;
	padding-inline: var(--xoxo-gutter);
}

/* Eyebrow ---------------------------------------------------------------- */

.xoxo-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.688rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--xoxo-copper);
}

.xoxo-eyebrow__line {
	display: block;
	width: 26px;
	height: 1px;
	flex: none;
	background: linear-gradient(90deg, var(--xoxo-copper), rgba(176, 111, 60, 0.15));
}

.xoxo-eyebrow--light {
	color: var(--xoxo-copper-light);
}

.xoxo-eyebrow--light .xoxo-eyebrow__line {
	background: linear-gradient(90deg, var(--xoxo-copper-light), rgba(226, 177, 132, 0.12));
}

/* Buttons ---------------------------------------------------------------- */

.xoxo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.82rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--xoxo-radius-sm);
	font-family: var(--xoxo-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: transform 0.28s var(--xoxo-ease), background-color 0.28s var(--xoxo-ease),
		border-color 0.28s var(--xoxo-ease), box-shadow 0.28s var(--xoxo-ease), color 0.28s var(--xoxo-ease);
}

.xoxo-btn__arrow {
	transition: transform 0.28s var(--xoxo-ease);
}

.xoxo-btn:hover .xoxo-btn__arrow {
	transform: translateX(3px);
}

.xoxo-btn--primary {
	background: linear-gradient(135deg, #b8763f, #9c5c2c);
	color: #fff9f2;
	box-shadow: 0 10px 24px -16px rgba(140, 78, 34, 0.85);
}

.xoxo-btn--primary:hover {
	background: linear-gradient(135deg, #c07f47, #8f5225);
	box-shadow: 0 16px 30px -18px rgba(140, 78, 34, 0.95);
	transform: translateY(-1px);
}

.xoxo-btn--outline {
	background-color: rgba(255, 255, 255, 0.6);
	border-color: rgba(35, 26, 20, 0.18);
	color: var(--xoxo-ink);
}

.xoxo-btn--outline:hover {
	border-color: rgba(176, 111, 60, 0.55);
	background-color: #fff;
	color: var(--xoxo-copper-deep);
	transform: translateY(-1px);
}

.xoxo-btn--outline-light {
	background-color: transparent;
	border-color: rgba(232, 205, 180, 0.28);
	color: #f6ece1;
}

.xoxo-btn--outline-light:hover {
	border-color: var(--xoxo-copper-light);
	color: var(--xoxo-copper-light);
}

.xoxo-btn--ghost {
	padding-inline: 0;
	color: var(--xoxo-copper);
}

.xoxo-btn--sm {
	padding: 0.66rem 1.2rem;
	font-size: 0.82rem;
}

.xoxo-btn--block {
	display: flex;
	width: 100%;
}

/* Iconen ----------------------------------------------------------------- */

.xoxo-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* Reveal-animatie -------------------------------------------------------- */

.xoxo-reveal {
	opacity: 1;
}

.xoxo-js .xoxo-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s var(--xoxo-ease), transform 0.75s var(--xoxo-ease);
	transition-delay: var(--xoxo-delay, 0ms);
	will-change: opacity, transform;
}

.xoxo-js .xoxo-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ========================================================================
   5. Header & navigatie
   ======================================================================== */

.xoxo-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: rgba(253, 250, 246, 0.86);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--xoxo-ease), box-shadow 0.3s var(--xoxo-ease),
		background-color 0.3s var(--xoxo-ease);
}

.xoxo-header.is-stuck {
	border-bottom-color: var(--xoxo-line);
	background-color: rgba(253, 250, 246, 0.95);
	box-shadow: 0 12px 30px -28px rgba(60, 40, 20, 0.55);
}

.xoxo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--xoxo-header-h);
}

/* Logo ------------------------------------------------------------------- */

.xoxo-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
	color: var(--xoxo-ink);
}

.xoxo-logo__mark {
	width: 26px;
	height: 30px;
	flex: none;
	color: var(--xoxo-ink);
}

.xoxo-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.xoxo-logo__name {
	font-family: var(--xoxo-font-serif);
	font-size: 1.22rem;
	font-weight: 500;
	letter-spacing: 0.12em;
}

.xoxo-logo__suffix {
	margin-top: 0.28rem;
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--xoxo-muted);
}

.xoxo-logo--footer .xoxo-logo__mark {
	width: 30px;
	height: 34px;
}

.xoxo-logo__image {
	display: block;
	width: auto;
	height: 34px;
	max-width: 180px;
	object-fit: contain;
}

.xoxo-logo--footer .xoxo-logo__image {
	height: 38px;
}

.xoxo-logo--image-only {
	gap: 0;
}

/* Desktopnavigatie ------------------------------------------------------- */

.xoxo-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
}

.xoxo-nav__link {
	position: relative;
	display: inline-block;
	padding-block: 0.35rem;
	font-size: 0.845rem;
	font-weight: 450;
	color: var(--xoxo-text);
	transition: color 0.25s var(--xoxo-ease);
}

.xoxo-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background-color: var(--xoxo-copper);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--xoxo-ease);
}

.xoxo-nav__link:hover,
.xoxo-nav__link.is-active {
	color: var(--xoxo-copper);
}

.xoxo-nav__link.is-active::after,
.xoxo-nav__link:hover::after {
	transform: scaleX(1);
}

.xoxo-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: none;
}

/* Mobiele toggle --------------------------------------------------------- */

.xoxo-header__toggle {
	display: none;
	width: 42px;
	height: 42px;
	padding: 9px;
	border: 1px solid var(--xoxo-line);
	border-radius: var(--xoxo-radius-sm);
	background-color: transparent;
	color: var(--xoxo-ink);
	cursor: pointer;
}

.xoxo-header__toggle-icon--close,
.xoxo-header__toggle[aria-expanded="true"] .xoxo-header__toggle-icon--open {
	display: none;
}

.xoxo-header__toggle[aria-expanded="true"] .xoxo-header__toggle-icon--close {
	display: block;
}

/* Mobiel menu ------------------------------------------------------------ */

.xoxo-mobile-menu {
	display: none;
	padding: 1.25rem var(--xoxo-gutter) 1.75rem;
	border-top: 1px solid var(--xoxo-line);
	background-color: var(--xoxo-ivory-light);
}

.xoxo-mobile-menu[hidden] {
	display: none;
}

.xoxo-mobile-menu__list {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.25rem;
}

.xoxo-mobile-menu__link {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(232, 220, 204, 0.7);
	font-size: 1rem;
	color: var(--xoxo-text);
}

.xoxo-mobile-menu__link:hover,
.xoxo-mobile-menu__link.is-active {
	color: var(--xoxo-copper);
}

/* ========================================================================
   6. Hero
   ======================================================================== */

.xoxo-hero {
	overflow: hidden;
	padding-top: clamp(2.5rem, 5vw, 4.25rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(120% 90% at 78% 34%, rgba(214, 158, 104, 0.22), rgba(214, 158, 104, 0) 62%),
		linear-gradient(180deg, #fdfaf6 0%, #fbf5ed 62%, #f9f2e8 100%);
	border-bottom: 1px solid rgba(232, 220, 204, 0.8);
}

.xoxo-hero__glow {
	position: absolute;
	top: -18%;
	right: -12%;
	width: min(760px, 72%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(206, 141, 82, 0.28), rgba(206, 141, 82, 0) 65%);
	filter: blur(10px);
	pointer-events: none;
	animation: xoxo-glow-drift 16s ease-in-out infinite alternate;
}

@keyframes xoxo-glow-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.85;
	}
	to {
		transform: translate3d(-2%, 3%, 0) scale(1.06);
		opacity: 1;
	}
}

.xoxo-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(2rem, 3vw, 3rem);
	align-items: center;
}

/* De maximale schaal is afgestemd op de breedste regel ("professioneel
   gemanagede"), zodat de kop op desktop exact drie regels blijft. */
.xoxo-hero__title {
	margin-top: 1.5rem;
	font-family: var(--xoxo-font-serif);
	font-weight: 400;
	font-size: clamp(2.15rem, 3.3vw, 3rem);
	line-height: 1.13;
	letter-spacing: -0.018em;
	color: var(--xoxo-ink);
}

.xoxo-hero__lead {
	margin-top: 1.6rem;
	max-width: 28em;
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--xoxo-muted);
}

.xoxo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.xoxo-hero__note {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2.1rem;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.9;
	text-transform: uppercase;
	color: rgba(120, 108, 98, 0.9);
}

.xoxo-hero__note-line {
	width: 46px;
	height: 1px;
	flex: none;
	background: linear-gradient(90deg, rgba(176, 111, 60, 0.75), rgba(176, 111, 60, 0.1));
}

/* Growth visual ---------------------------------------------------------- */

.xoxo-hero__visual {
	position: relative;
	min-width: 0;
}

.xoxo-hero__script {
	position: absolute;
	top: -4.4rem;
	right: 9%;
	z-index: 2;
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	text-align: center;
	transform: rotate(-7deg);
	pointer-events: none;
}

.xoxo-growth {
	position: relative;
}

.xoxo-growth__stage {
	position: relative;
	aspect-ratio: 640 / 350;
	filter: drop-shadow(0 30px 50px rgba(84, 46, 18, 0.16));
}

.xoxo-growth__stage::before {
	content: "";
	position: absolute;
	inset: 6% -6% -8%;
	background: radial-gradient(60% 60% at 62% 58%, rgba(196, 129, 70, 0.3), rgba(196, 129, 70, 0) 70%);
	filter: blur(6px);
	pointer-events: none;
}

.xoxo-growth__panels {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: clamp(3px, 0.9%, 9px);
}

/* De trapvorm komt uit --xoxo-panel-h, die de template per paneel berekent.
   Zo blijft de visual kloppen wanneer er in de admin panelen bijkomen of
   verdwijnen. */
.xoxo-growth__panel {
	position: relative;
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	height: var(--xoxo-panel-h, 70%);
	flex-direction: column;
	justify-content: space-between;
	gap: 0.4rem;
	padding: clamp(9px, 1.5%, 15px) clamp(8px, 1.3%, 13px);
	border: 1px solid rgba(216, 158, 105, 0.3);
	border-top-color: rgba(243, 200, 152, 0.5);
	border-radius: 5px 5px 3px 3px;
	background:
		linear-gradient(163deg, rgba(74, 51, 35, 0.82) 0%, rgba(38, 26, 19, 0.9) 48%, rgba(25, 17, 12, 0.94) 100%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 192, 0.16),
		inset 0 0 30px rgba(196, 129, 70, 0.08),
		0 20px 34px -26px rgba(58, 30, 10, 0.7);
	color: #f4e5d5;
	overflow: hidden;
}

.xoxo-growth__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(198deg, rgba(255, 231, 203, 0.14), rgba(255, 231, 203, 0) 42%);
	pointer-events: none;
}


.xoxo-growth__label {
	font-size: clamp(0.563rem, 0.82vw, 0.688rem);
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1.35;
	text-transform: uppercase;
	color: #f3d8ba;
}

.xoxo-growth__icon {
	display: block;
	width: clamp(16px, 2vw, 22px);
	height: clamp(16px, 2vw, 22px);
	color: var(--xoxo-copper-light);
}

.xoxo-growth__text {
	font-size: clamp(0.5rem, 0.74vw, 0.625rem);
	line-height: 1.4;
	color: rgba(238, 219, 200, 0.68);
}

.xoxo-growth__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

.xoxo-growth__reflection {
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -14px;
	height: 26px;
	background: radial-gradient(50% 100% at 50% 0%, rgba(163, 106, 56, 0.24), rgba(163, 106, 56, 0) 72%);
	filter: blur(4px);
	pointer-events: none;
}

/* De paden dragen pathLength="100", dus dasharray werkt in procenten. */
.xoxo-js .xoxo-growth__line-path,
.xoxo-js .xoxo-growth__line-halo {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.xoxo-js .xoxo-growth__line-arrow {
	opacity: 0;
}

.xoxo-js .xoxo-hero__visual.is-visible .xoxo-growth__line-path,
.xoxo-js .xoxo-hero__visual.is-visible .xoxo-growth__line-halo {
	animation: xoxo-draw 1.9s var(--xoxo-ease) 0.35s forwards;
}

.xoxo-js .xoxo-hero__visual.is-visible .xoxo-growth__line-arrow {
	animation: xoxo-fade-in 0.6s var(--xoxo-ease) 2s forwards;
}

@keyframes xoxo-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes xoxo-fade-in {
	to {
		opacity: 1;
	}
}

/* ========================================================================
   7. Diensten
   ======================================================================== */

.xoxo-services {
	background-color: var(--xoxo-cream);
	border-bottom: 1px solid rgba(220, 203, 181, 0.55);
}

.xoxo-services__inner {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: start;
}

.xoxo-services__intro .xoxo-section__title {
	margin-top: 1.4rem;
}

.xoxo-services__intro .xoxo-btn {
	margin-top: 2.1rem;
}

.xoxo-services__grid {
	--xoxo-grid-gap: clamp(1.5rem, 3vw, 3rem);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--xoxo-grid-gap);
	row-gap: clamp(2rem, 3.5vw, 3.25rem);
	padding-left: var(--xoxo-grid-gap);
	border-left: 1px solid var(--xoxo-line-strong);
}

.xoxo-service {
	position: relative;
}

/* Dunne kolomscheiding, precies in het midden van de grid-gap. */
.xoxo-service::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--xoxo-grid-gap) / -2);
	width: 1px;
	background-color: var(--xoxo-line);
}

.xoxo-services__grid > .xoxo-service:nth-child(3n + 1)::before {
	content: none;
}

.xoxo-service__icon {
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 0.95rem;
	color: var(--xoxo-copper);
	transition: transform 0.35s var(--xoxo-ease);
}

.xoxo-service:hover .xoxo-service__icon {
	transform: translateY(-3px);
}

.xoxo-service__title {
	font-family: var(--xoxo-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--xoxo-ink);
}

.xoxo-service__text {
	margin-top: 0.5rem;
	max-width: 30ch;
	font-size: 0.845rem;
	line-height: 1.65;
	color: var(--xoxo-muted);
}

/* ========================================================================
   8. Creator-first (filosofie)
   ======================================================================== */

.xoxo-philosophy {
	overflow: hidden;
	background:
		radial-gradient(70% 110% at 52% 50%, rgba(140, 82, 40, 0.24), rgba(140, 82, 40, 0) 62%),
		var(--xoxo-charcoal);
}

.xoxo-philosophy__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) minmax(0, 0.82fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

/* Zonder de metallic X vervalt de middelste kolom. */
.xoxo-philosophy__inner--no-visual {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
}

.xoxo-philosophy__copy .xoxo-section__title {
	margin-top: 1.4rem;
}

.xoxo-philosophy__accent {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 2rem;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--xoxo-copper-light);
}

.xoxo-philosophy__accent-line {
	width: 34px;
	height: 1px;
	flex: none;
	background: linear-gradient(90deg, var(--xoxo-copper-light), rgba(226, 177, 132, 0.1));
}

.xoxo-philosophy__visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.xoxo-ribbon {
	width: min(100%, 380px);
	height: auto;
}

.xoxo-philosophy__benefits {
	display: flex;
	flex-direction: column;
	gap: clamp(1.35rem, 2.4vw, 2rem);
}

.xoxo-benefit {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.xoxo-benefit__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 11px;
	border: 1px solid rgba(214, 168, 122, 0.35);
	border-radius: 50%;
	background: rgba(196, 129, 70, 0.06);
	color: var(--xoxo-copper-light);
}

.xoxo-benefit__title {
	font-family: var(--xoxo-font-sans);
	font-size: 0.93rem;
	font-weight: 600;
	color: #fbf3ea;
}

.xoxo-benefit__text {
	margin-top: 0.3rem;
	font-size: 0.83rem;
	line-height: 1.6;
	color: rgba(238, 225, 212, 0.68);
}

/* ========================================================================
   9. Past XOXO bij mij + creatorprofielen
   ======================================================================== */

.xoxo-fit {
	background-color: var(--xoxo-ivory-light);
}

.xoxo-fit__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: start;
}

.xoxo-fit__check .xoxo-section__title,
.xoxo-fit__profiles .xoxo-section__title {
	margin-top: 1.2rem;
}

.xoxo-fit__profiles {
	padding-left: clamp(1.5rem, 3vw, 3.25rem);
	border-left: 1px solid var(--xoxo-line);
}

.xoxo-checklist {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	margin-top: 1.8rem;
}

.xoxo-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: 0.885rem;
	line-height: 1.55;
	color: var(--xoxo-text);
}

.xoxo-checklist__marker {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	flex: none;
	margin-top: 0.14rem;
	padding: 4px;
	border: 1px solid rgba(176, 111, 60, 0.4);
	border-radius: 50%;
	color: var(--xoxo-copper);
}

.xoxo-fit__check .xoxo-btn {
	margin-top: 2.1rem;
}

/* --xoxo-cols komt uit de template en volgt het aantal items in de admin. */
.xoxo-profiles {
	display: grid;
	grid-template-columns: repeat(var(--xoxo-cols, 3), minmax(0, 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.35rem);
	margin-top: 1.9rem;
}

.xoxo-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 1.6vw, 1.4rem);
	border: 1px solid var(--xoxo-line);
	border-radius: var(--xoxo-radius);
	background-color: #fffdfa;
	box-shadow: var(--xoxo-shadow-card);
	text-align: center;
	transition: transform 0.35s var(--xoxo-ease), box-shadow 0.35s var(--xoxo-ease),
		border-color 0.35s var(--xoxo-ease);
}

.xoxo-profile:hover {
	transform: translateY(-4px);
	border-color: rgba(176, 111, 60, 0.32);
	box-shadow: 0 1px 2px rgba(45, 30, 18, 0.04), 0 22px 40px -28px rgba(45, 30, 18, 0.4);
}

.xoxo-profile__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: 0.85rem;
	color: var(--xoxo-copper);
}

.xoxo-profile__title {
	font-family: var(--xoxo-font-serif);
	font-size: 1.12rem;
	font-weight: 500;
	color: var(--xoxo-ink);
}

.xoxo-profile__text {
	margin-top: 0.55rem;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--xoxo-muted);
}

.xoxo-profile__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 1.1rem;
}

.xoxo-tag {
	padding: 0.24rem 0.45rem;
	border-radius: 3px;
	background-color: rgba(196, 129, 70, 0.09);
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--xoxo-copper-deep);
	white-space: nowrap;
}

/* ========================================================================
   10. Hoe we werken
   ======================================================================== */

.xoxo-process {
	overflow: hidden;
	background-color: var(--xoxo-sand);
	border-block: 1px solid rgba(220, 203, 181, 0.5);
}

.xoxo-process__texture {
	position: absolute;
	top: 0;
	right: 0;
	width: min(46%, 620px);
	height: 100%;
	background-image: repeating-linear-gradient(
		-38deg,
		rgba(176, 111, 60, 0.07) 0 1px,
		rgba(176, 111, 60, 0) 1px 16px
	);
	mask-image: linear-gradient(270deg, #000, transparent);
	-webkit-mask-image: linear-gradient(270deg, #000, transparent);
	pointer-events: none;
}

.xoxo-process__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr) minmax(0, 0.5fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

.xoxo-process__intro .xoxo-section__title {
	margin-top: 1.15rem;
}

.xoxo-steps {
	display: grid;
	grid-template-columns: repeat(var(--xoxo-cols, 4), minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	padding-top: 0.5rem;
}

.xoxo-step {
	min-width: 0;
}

.xoxo-step__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}

.xoxo-step__number {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid rgba(176, 111, 60, 0.4);
	border-radius: 50%;
	background-color: rgba(255, 253, 250, 0.75);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--xoxo-copper-deep);
}

.xoxo-step__connector {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	flex: 1 1 auto;
	min-width: 0;
	color: rgba(176, 111, 60, 0.55);
}

.xoxo-step__connector-line {
	flex: 1 1 auto;
	height: 1px;
	min-width: 10px;
	background-image: linear-gradient(90deg, rgba(176, 111, 60, 0.5) 55%, rgba(176, 111, 60, 0) 0);
	background-size: 7px 1px;
	background-repeat: repeat-x;
}

.xoxo-step__connector-arrow {
	font-size: 0.85rem;
	line-height: 1;
}

.xoxo-step__title {
	font-family: var(--xoxo-font-sans);
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--xoxo-ink);
}

.xoxo-step__text {
	margin-top: 0.45rem;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--xoxo-muted);
}

.xoxo-process__script {
	justify-self: end;
	font-size: clamp(1.1rem, 1.8vw, 1.55rem);
	line-height: 1.25;
	text-align: center;
	transform: rotate(-6deg);
	padding-top: 0.5rem;
}

/* ========================================================================
   11. Expertise & resultaten
   ======================================================================== */

.xoxo-expertise {
	background:
		radial-gradient(80% 120% at 88% 40%, rgba(150, 88, 42, 0.2), rgba(150, 88, 42, 0) 60%),
		var(--xoxo-charcoal);
}

.xoxo-expertise__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.xoxo-expertise__team .xoxo-section__title {
	margin-top: 1.25rem;
}

.xoxo-founders {
	display: grid;
	grid-template-columns: repeat(var(--xoxo-cols, 2), minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-top: 2rem;
}

.xoxo-founder {
	display: flex;
	align-items: flex-start;
	gap: 0.95rem;
	padding: clamp(1.1rem, 1.8vw, 1.5rem);
	border: 1px solid var(--xoxo-line-dark);
	border-radius: var(--xoxo-radius);
	background: linear-gradient(150deg, rgba(255, 240, 224, 0.045), rgba(255, 240, 224, 0.012));
}

.xoxo-founder__initial {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid rgba(214, 168, 122, 0.42);
	border-radius: 50%;
	font-family: var(--xoxo-font-serif);
	font-size: 1.18rem;
	color: var(--xoxo-copper-light);
}

.xoxo-founder__name {
	font-family: var(--xoxo-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: #fbf3ea;
}

.xoxo-founder__text {
	margin-top: 0.45rem;
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(238, 225, 212, 0.66);
}

/* Resultaat -------------------------------------------------------------- */

.xoxo-expertise__result {
	position: relative;
	padding-left: clamp(1.5rem, 3vw, 3.25rem);
	border-left: 1px solid var(--xoxo-line-dark);
}

.xoxo-result__figure {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-top: 1.35rem;
	font-family: var(--xoxo-font-serif);
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--xoxo-copper-light);
}

.xoxo-result__arrow {
	font-size: 0.7em;
	color: rgba(226, 177, 132, 0.6);
}

.xoxo-result__label {
	margin-top: 0.85rem;
	font-size: 0.9rem;
	color: rgba(240, 227, 214, 0.72);
}

.xoxo-result__text {
	margin-top: 1.1rem;
	max-width: 40ch;
	font-size: 0.83rem;
	line-height: 1.65;
	color: rgba(238, 225, 212, 0.68);
}

.xoxo-result__disclaimer {
	margin-top: 0.75rem;
	max-width: 44ch;
	font-size: 0.7rem;
	line-height: 1.6;
	color: rgba(238, 225, 212, 0.52);
}

.xoxo-result__chart {
	display: flex;
	align-items: flex-end;
	gap: clamp(4px, 0.8vw, 8px);
	height: 74px;
	margin-top: 1.75rem;
	opacity: 0.5;
}

.xoxo-result__bar {
	display: block;
	flex: 1 1 0;
	max-width: 22px;
	height: var(--xoxo-bar, 40%);
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, var(--xoxo-copper-soft), rgba(150, 85, 42, 0.15));
	transform-origin: bottom;
}

.xoxo-js .xoxo-expertise__result .xoxo-result__bar {
	transform: scaleY(0);
	transition: transform 0.8s var(--xoxo-ease);
	transition-delay: var(--xoxo-delay, 0ms);
}

.xoxo-js .xoxo-expertise__result.is-visible .xoxo-result__bar {
	transform: scaleY(1);
}

/* ========================================================================
   12. Finale CTA
   ======================================================================== */

.xoxo-cta {
	background: linear-gradient(180deg, #fbf5ec 0%, #f8f1e7 100%);
}

.xoxo-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

/* Zonder directe contactopties vervalt de rechterkolom. */
.xoxo-cta__inner--single {
	grid-template-columns: minmax(0, 1fr);
}

.xoxo-cta__copy .xoxo-section__title {
	margin-top: 1.2rem;
	max-width: 26ch;
	text-wrap: balance;
}

.xoxo-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.xoxo-cta__contact {
	padding-left: clamp(1.5rem, 3vw, 3.25rem);
	border-left: 1px solid var(--xoxo-line);
}

.xoxo-contacts {
	display: grid;
	grid-template-columns: repeat(var(--xoxo-cols, 3), minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin-top: 1.75rem;
}

.xoxo-contact__link {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	height: 100%;
	padding: clamp(1rem, 1.6vw, 1.35rem);
	border: 1px solid var(--xoxo-line);
	border-radius: var(--xoxo-radius);
	background-color: #fffdfa;
	transition: transform 0.32s var(--xoxo-ease), border-color 0.32s var(--xoxo-ease),
		box-shadow 0.32s var(--xoxo-ease);
}

.xoxo-contact__link:hover {
	transform: translateY(-3px);
	border-color: rgba(176, 111, 60, 0.35);
	box-shadow: var(--xoxo-shadow-card);
}

.xoxo-contact__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	border: 1px solid rgba(176, 111, 60, 0.28);
	border-radius: var(--xoxo-radius-sm);
	color: var(--xoxo-copper);
}

.xoxo-contact__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.xoxo-contact__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--xoxo-ink);
}

.xoxo-contact__value {
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--xoxo-muted);
	overflow-wrap: break-word;
}

/* ========================================================================
   13. Footer
   ======================================================================== */

.xoxo-footer {
	background-color: #fffdfa;
	border-top: 1px solid var(--xoxo-line);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.xoxo-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
}

.xoxo-footer__brand {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.75rem);
	flex-wrap: wrap;
}

.xoxo-footer__tagline {
	font-size: 0.83rem;
	color: var(--xoxo-muted);
}

.xoxo-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.5rem;
}

.xoxo-footer__link {
	font-size: 0.8rem;
	color: var(--xoxo-muted);
	transition: color 0.25s var(--xoxo-ease);
}

.xoxo-footer__link:hover {
	color: var(--xoxo-copper);
}

/* ========================================================================
   14. Weergave-opties uit de admin
   ======================================================================== */

/* "Header meescrollen" uitgeschakeld. */
body.xoxo-static-header .xoxo-header {
	position: relative;
}

/* "Subtiele animaties" uitgeschakeld. De reveal-animaties zitten al achter de
   xoxo-js-vlag, die dan niet wordt geplaatst; hier gaan de resterende
   overgangen en de bewegende gloed uit. */
body.xoxo-no-animations .xoxo-onepager *,
body.xoxo-no-animations .xoxo-onepager *::before,
body.xoxo-no-animations .xoxo-onepager *::after {
	animation: none;
	transition: none;
}

/* ========================================================================
   15. Responsive
   ======================================================================== */

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1100px) {
	.xoxo-onepager {
		--xoxo-section-y: clamp(3.25rem, 6vw, 4.5rem);
	}

	.xoxo-nav {
		display: none;
	}

	.xoxo-header__toggle {
		display: block;
	}

	.xoxo-header.is-open .xoxo-mobile-menu {
		display: block;
	}

	.xoxo-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2.5rem, 6vw, 3.5rem);
	}

	.xoxo-hero__copy {
		max-width: 46rem;
	}

	/* Gestapelde hero: het handgeschreven accent staat boven de visual in
	   plaats van erop, zodat het de panelen niet overlapt. */
	.xoxo-hero__script {
		position: static;
		margin-bottom: 0.9rem;
		text-align: right;
		transform: rotate(-4deg);
		transform-origin: right center;
	}

	.xoxo-services__inner,
	.xoxo-fit__inner,
	.xoxo-expertise__inner,
	.xoxo-cta__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.xoxo-services__grid,
	.xoxo-fit__profiles,
	.xoxo-expertise__result,
	.xoxo-cta__contact {
		padding-left: 0;
		padding-top: clamp(2rem, 4vw, 2.75rem);
		border-left: 0;
		border-top: 1px solid var(--xoxo-line);
	}

	.xoxo-expertise__result {
		border-top-color: var(--xoxo-line-dark);
	}

	.xoxo-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.xoxo-philosophy__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3rem);
		align-items: start;
	}

	.xoxo-philosophy__visual {
		grid-column: 1 / -1;
		grid-row: 2;
		order: 3;
	}

	.xoxo-ribbon {
		width: min(100%, 300px);
	}

	.xoxo-process__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.xoxo-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
	}

	.xoxo-step:nth-child(2n) .xoxo-step__connector {
		display: none;
	}

	.xoxo-process__script {
		margin-top: 0.5rem;
		transform: rotate(-4deg);
	}
}

/* Mobiel ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.xoxo-onepager {
		--xoxo-section-y: clamp(2.75rem, 9vw, 3.75rem);
		--xoxo-header-h: 64px;
	}

	.xoxo-header__cta {
		display: none;
	}

	.xoxo-hero {
		padding-top: 2.25rem;
	}

	.xoxo-hero__title br {
		display: none;
	}

	.xoxo-hero__title {
		font-size: clamp(1.95rem, 8.2vw, 2.6rem);
	}

	.xoxo-hero__actions .xoxo-btn,
	.xoxo-cta__actions .xoxo-btn {
		flex: 1 1 100%;
	}

	.xoxo-hero__script {
		margin-bottom: 0.75rem;
		font-size: 1.15rem;
		line-height: 1.1;
		transform: rotate(-3deg);
	}

	/* Growth-panelen: staircase werkt niet op smalle schermen, dus een
	   leesbaar raster met gelijke hoogtes. */
	.xoxo-growth__stage {
		aspect-ratio: auto;
		filter: none;
	}

	.xoxo-growth__stage::before {
		inset: -4%;
	}

	.xoxo-growth__panels {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.xoxo-growth__panel {
		height: auto;
		min-height: 128px;
		padding: 0.9rem;
		border-radius: 8px;
		gap: 0.65rem;
	}

	.xoxo-growth__label {
		font-size: 0.688rem;
	}

	.xoxo-growth__text {
		font-size: 0.75rem;
	}

	.xoxo-growth__icon {
		width: 20px;
		height: 20px;
	}

	.xoxo-growth__line,
	.xoxo-growth__reflection {
		display: none;
	}

	.xoxo-services__grid {
		--xoxo-grid-gap: 1.5rem;

		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.75rem;
	}

	.xoxo-services__grid > .xoxo-service:nth-child(3n + 1)::before {
		content: "";
	}

	.xoxo-services__grid > .xoxo-service:nth-child(2n + 1)::before {
		content: none;
	}

	.xoxo-service__text {
		max-width: none;
	}

	.xoxo-philosophy__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.xoxo-philosophy__visual {
		grid-row: auto;
		order: 0;
		margin-block: 0.5rem;
	}

	.xoxo-profiles,
	.xoxo-founders,
	.xoxo-contacts {
		grid-template-columns: minmax(0, 1fr);
	}

	.xoxo-profile {
		align-items: flex-start;
		text-align: left;
	}

	.xoxo-profile__tags {
		justify-content: flex-start;
	}

	.xoxo-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.6rem;
	}

	.xoxo-step__head {
		gap: 0.9rem;
	}

	.xoxo-step:nth-child(2n) .xoxo-step__connector {
		display: flex;
	}

	.xoxo-step__number {
		width: 42px;
		height: 42px;
	}

	.xoxo-contact__link {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}

	.xoxo-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 359px) {
	.xoxo-growth__panels {
		grid-template-columns: minmax(0, 1fr);
	}

	.xoxo-growth__panel {
		min-height: 0;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.75rem;
		flex-wrap: wrap;
	}

	.xoxo-growth__panel .xoxo-growth__text {
		flex: 1 1 100%;
	}

	.xoxo-logo__name {
		font-size: 1.08rem;
	}
}

/* ========================================================================
   16. Reduced motion & print
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.xoxo-onepager *,
	.xoxo-onepager *::before,
	.xoxo-onepager *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.xoxo-js .xoxo-reveal {
		opacity: 1;
		transform: none;
	}

	.xoxo-js .xoxo-growth__line-path,
	.xoxo-js .xoxo-growth__line-halo {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.xoxo-js .xoxo-growth__line-arrow {
		opacity: 1;
	}

	.xoxo-js .xoxo-expertise__result .xoxo-result__bar {
		transform: none;
	}

	.xoxo-hero__glow {
		animation: none;
	}
}

@media print {
	.xoxo-header,
	.xoxo-hero__glow,
	.xoxo-growth,
	.xoxo-philosophy__visual {
		display: none;
	}

	.xoxo-section--dark {
		background: none;
		color: #000;
	}
}