@charset "UTF-8";

/********************************************************************************************************

		All styles by outline4.ch 🚀 with ❤️

*********************************************************************************************************/

:root {
	/*
		O4 tokens
		These values can be overridden in the project styles.css.
	*/
	--o4-container-text: var(--content-max-width, 720px);
	--o4-container-narrow: 920px;
	--o4-container-default: var(--page-max-width, 1180px);
	--o4-container-wide: 1400px;
	--o4-container-padding: var(--page-full-padding, 24px);

	--o4-gap-none: 0;
	--o4-gap-small: 16px;
	--o4-gap-medium: 32px;
	--o4-gap-large: 56px;
	--o4-gap-huge: 88px;

	--o4-divider-gap: clamp(8px, 2vw, 32px);
	--o4-vertical-gap: 20px;


	--o4-space-none: 0;
	--o4-space-small: 32px;
	--o4-space-medium: 64px;
	--o4-space-large: 96px;
	--o4-space-huge: 144px;
	--o4-space-responsive: clamp(48px, 8vw, 120px);

	--space-xs: calc(var(--vertical-gap) * .5);
	--space-s: var(--vertical-gap);
	--space-m: calc(var(--vertical-gap) * 2);
	--space-l: calc(var(--vertical-gap) * 3);
	--space-xl: calc(var(--vertical-gap) * 4);
	--space-xxl: calc(var(--vertical-gap) * 6);

	--o4-margin-xs: calc(var(--vertical-gap) * .5);
	--o4-margin-s: var(--vertical-gap);
	--o4-margin-m: calc(var(--vertical-gap) * 2);
	--o4-margin-l: calc(var(--vertical-gap) * 3);
	--o4-margin-xl: calc(var(--vertical-gap) * 4);
	--o4-margin-xxl: calc(var(--vertical-gap) * 6);

}


/* Section
------------------------------------------------------------------------------------------------------- */
/*
	Section background color is set inline by section.php via:
	--o4-section-background-color

	Section background image is set inline by section.php via:
	--o4-background-image
*/
.o4-section {
	position: relative;
	width: 100%;
	background-image: var(--o4-background-image);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.o4-is-hidden { display: none; }


/* Background position
------------------------------------------------------------------------------------------------------- */
/*
	Used when a section has a background image.
	Values come from the section background position field.
*/
.o4-bg-position-center { background-position: center; }
.o4-bg-position-top { background-position: center top; }
.o4-bg-position-bottom { background-position: center bottom; }
.o4-bg-position-left { background-position: left center; }
.o4-bg-position-right { background-position: right center; }
.o4-bg-position-left-top { background-position: left top; }
.o4-bg-position-right-top { background-position: right top; }
.o4-bg-position-left-bottom { background-position: left bottom; }
.o4-bg-position-right-bottom { background-position: right bottom; }


/* Padding
------------------------------------------------------------------------------------------------------- */
/*
	Top and bottom padding are set separately by section.php.
	Bottom padding also stores --o4-current-padding-bottom for dividers.
*/
.o4-padding-top-none { padding-top: var(--o4-space-none); }
.o4-padding-top-small { padding-top: var(--o4-space-small); }
.o4-padding-top-medium { padding-top: var(--o4-space-medium); }
.o4-padding-top-large { padding-top: var(--o4-space-large); }
.o4-padding-top-huge { padding-top: var(--o4-space-huge); }
.o4-padding-top-responsive { padding-top: var(--o4-space-responsive); }

.o4-padding-bottom-none { --o4-current-padding-bottom: var(--o4-space-none); padding-bottom: var(--o4-current-padding-bottom); }
.o4-padding-bottom-small { --o4-current-padding-bottom: var(--o4-space-small); padding-bottom: var(--o4-current-padding-bottom); }
.o4-padding-bottom-medium { --o4-current-padding-bottom: var(--o4-space-medium); padding-bottom: var(--o4-current-padding-bottom); }
.o4-padding-bottom-large { --o4-current-padding-bottom: var(--o4-space-large); padding-bottom: var(--o4-current-padding-bottom); }
.o4-padding-bottom-huge { --o4-current-padding-bottom: var(--o4-space-huge); padding-bottom: var(--o4-current-padding-bottom); }
.o4-padding-bottom-responsive { --o4-current-padding-bottom: var(--o4-space-responsive); padding-bottom: var(--o4-current-padding-bottom); }


/* Section height
------------------------------------------------------------------------------------------------------- */
.o4-height-screen-small,
.o4-height-screen,
.o4-height-screen-minus-header,
.o4-height-custom,
.o4-height-ratio {
	display: flex;
}

.o4-height-screen-small > .o4-container,
.o4-height-screen > .o4-container,
.o4-height-screen-minus-header > .o4-container,
.o4-height-custom > .o4-container,
.o4-height-ratio > .o4-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.o4-height-screen-small > .o4-container > .o4-grid,
.o4-height-screen > .o4-container > .o4-grid,
.o4-height-screen-minus-header > .o4-container > .o4-grid,
.o4-height-custom > .o4-container > .o4-grid,
.o4-height-ratio > .o4-container > .o4-grid {
	flex: 1;
}

.o4-height-ratio {
	aspect-ratio: var(--o4-section-ratio-desktop);
}

.o4-height-screen-small { min-height: 65svh; }
.o4-height-screen { min-height: 100svh; }
.o4-height-screen-minus-header { min-height: calc(100svh - var(--o4-header-height)); }

.o4-height-custom {
	height: var(--o4-section-height-desktop);
}

.o4-height-custom > .o4-container,
.o4-height-custom > .o4-container > .o4-grid {
	height: 100%;
}


.o4-content-slider-screen-minus-header .o4-content-slider-window,
.o4-content-slider-screen-minus-header .o4-content-slider-track,
.o4-content-slider-screen-minus-header .o4-content-slider-slide,
.o4-content-slider-screen-minus-header .o4-content-slider-inner,
.o4-content-slider-screen-minus-header .o4-content-slider-layout,
.o4-content-slider-screen-minus-header .o4-content-slider-layout > .o4-grid,
.o4-content-slider-screen-minus-header .o4-column,
.o4-content-slider-screen-minus-header .o4-image {
	height: 100%;
}

.o4-content-slider-screen-minus-header .o4-content-slider-layout > .o4-grid { align-items: stretch; }
.o4-content-slider-screen-minus-header .o4-column { align-self: stretch; }

@media screen and (max-width: 1000px) {
	.o4-height-custom {
		height: var(--o4-section-height-tablet, var(--o4-section-height-desktop));
	}

	.o4-height-ratio {
		aspect-ratio: var(--o4-section-ratio-tablet, var(--o4-section-ratio-desktop));
	}
}

@media screen and (max-width: 640px) {
	.o4-height-custom {
		height: var(--o4-section-height-mobile, var(--o4-section-height-tablet, var(--o4-section-height-desktop)));
	}

	.o4-height-ratio {
		aspect-ratio: var(--o4-section-ratio-mobile, var(--o4-section-ratio-tablet, var(--o4-section-ratio-desktop)));
	}
}


/* Section width
------------------------------------------------------------------------------------------------------- */
/*
	Section width affects the outer section.
	Container width still controls the inner content.
*/
.o4-section-width-full { width: 100%; }
.o4-section-width-narrow { width: min(100%, var(--o4-container-narrow)); margin-inline: auto; }


/* Margin spacing utilities

------------------------------------------------------------------------------------------------------- */

.o4-margin-top-none { margin-top: 0 !important; }
.o4-margin-top-xsmall { margin-top: var(--space-xs) !important; }
.o4-margin-top-small { margin-top: var(--space-s) !important; }
.o4-margin-top-medium { margin-top: var(--space-m) !important; }
.o4-margin-top-large { margin-top: var(--space-l) !important; }
.o4-margin-top-xlarge { margin-top: var(--space-xl) !important; }
.o4-margin-top-huge { margin-top: var(--space-xxl) !important; }


/* Section decoration
------------------------------------------------------------------------------------------------------- */
.o4-section-decoration {
	position: absolute;
	z-index: 1;
	width: var(--o4-decoration-size-desktop, 280px);
	max-width: 100%;
	pointer-events: none;
}

.o4-section-decoration img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 1000px) {
	.o4-section-decoration {
		width: var(--o4-decoration-size-tablet, var(--o4-decoration-size-desktop, 280px));
	}
}

@media screen and (max-width: 640px) {
	.o4-section-decoration {
		width: var(--o4-decoration-size-mobile, var(--o4-decoration-size-tablet, var(--o4-decoration-size-desktop, 220px)));
	}
}


/* Margin Spacing utilities
------------------------------------------------------------------------------------------------------- */
.o4-margin-top-none { margin-top: 0 !important; }
.o4-margin-top-small { margin-top: var(--o4-margin-s) !important; }
.o4-margin-top-medium { margin-top: var(--o4-margin-m) !important; }
.o4-margin-top-large { margin-top: var(--o4-margin-l) !important; }


/* Container
------------------------------------------------------------------------------------------------------- */
/*
	Containers define the content area inside a section.
	The padding is included in the max-width calculation.
*/
.o4-container {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--o4-container-padding);
	container-type: inline-size;
	box-sizing: border-box;
}

.o4-container-none {
	max-width: none;
	padding-inline: 0;
}

.o4-container-text { max-width: min(100%, calc(var(--o4-container-text) + var(--o4-container-padding) * 2)); }
.o4-container-narrow { max-width: min(100%, calc(var(--o4-container-narrow) + var(--o4-container-padding) * 2)); }
.o4-container-default { max-width: min(100%, calc(var(--o4-container-default) + var(--o4-container-padding) * 2)); }
.o4-container-wide { max-width: min(100%, calc(var(--o4-container-wide) + var(--o4-container-padding) * 2)); }
.o4-container-full { max-width: none; padding-inline: 0!important; }


/*
	When the section is explicitly full width, the default container also becomes full width.
	Padding is kept.
*/
.o4-section-width-full .o4-container-default {
	max-width: none;
}

/* Grid
------------------------------------------------------------------------------------------------------- */
/*
	Main 12-column CSS Grid.
	Container queries are based on the container width, not the viewport.
*/
.o4-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	width: 100%;
	min-width: 0;
}

.o4-gap-none { gap: var(--o4-gap-none); }
.o4-gap-small { gap: var(--o4-gap-small); }
.o4-gap-medium { gap: var(--o4-gap-medium); }
.o4-gap-large { gap: var(--o4-gap-large); }
.o4-gap-huge { gap: var(--o4-gap-huge); }


/* Columns
------------------------------------------------------------------------------------------------------- */
/*
	Columns get their desktop span from Kirby's layout column span.
*/
.o4-column {
	grid-column: span 12;
	min-width: 0;
	max-width: 100%;
}

.o4-column figure {
	width: 100%;
	max-width: 100%;
	/* margin: 0; */
	overflow: hidden;
}

.o4-column img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.o4-span-1 { grid-column: span 1; }
.o4-span-2 { grid-column: span 2; }
.o4-span-3 { grid-column: span 3; }
.o4-span-4 { grid-column: span 4; }
.o4-span-5 { grid-column: span 5; }
.o4-span-6 { grid-column: span 6; }
.o4-span-7 { grid-column: span 7; }
.o4-span-8 { grid-column: span 8; }
.o4-span-9 { grid-column: span 9; }
.o4-span-10 { grid-column: span 10; }
.o4-span-11 { grid-column: span 11; }
.o4-span-12 { grid-column: span 12; }


/* Alignment
------------------------------------------------------------------------------------------------------- */
/*
	o4-align-* is section-level vertical alignment.
	o4-column-align-* can be used on the grid or on a single column.
*/
.o4-align-start .o4-grid { align-items: start; }
.o4-align-center .o4-grid { align-items: center; }
.o4-align-end .o4-grid { align-items: end; }

.o4-grid.o4-column-align-start { align-items: start; align-content: start; }
.o4-grid.o4-column-align-center { align-items: center; align-content: center; }
.o4-grid.o4-column-align-end { align-items: end; align-content: end; }

.o4-grid.o4-column-align-stretch {
	align-items: stretch;
	align-content: stretch;
}

.o4-column.o4-column-align-start { align-self: start; justify-content: flex-start; }
.o4-column.o4-column-align-center { align-self: center; justify-content: center; }
.o4-column.o4-column-align-end { align-self: end; justify-content: flex-end; }
.o4-column.o4-column-align-stretch { align-self: stretch; }

.o4-text-left { text-align: left; }
.o4-text-center { text-align: center; }
.o4-text-right { text-align: right; }

/* the same for images */
.o4-text-center > .o4-image,
.o4-text-center > figure.o4-image {
	display: flex;
	justify-content: center;
}

.o4-text-center > .o4-image img,
.o4-text-center > figure.o4-image img {
	margin-inline: auto;
}

.o4-text-right > .o4-image,
.o4-text-right > figure.o4-image {
	display: flex;
	justify-content: flex-end;
}

.o4-text-right > .o4-image img,
.o4-text-right > figure.o4-image img {
	margin-left: auto;
}


/* Content width and content alignment
------------------------------------------------------------------------------------------------------- */
/*
	Content width limits children inside columns.
	Content alignment moves that limited content box left, center or right.
*/
.o4-column-max-narrow > * { max-width: 580px; }
.o4-column-max-text > * { max-width: var(--o4-container-text); }
.o4-column-max-full > * { max-width: none; }

.o4-content-narrow .o4-column > * { max-width: 580px; }
.o4-content-text .o4-column > * { max-width: var(--o4-container-text); }
.o4-content-full .o4-column > * { max-width: none; }

.o4-content-align-left .o4-column { align-items: flex-start; }
.o4-content-align-center .o4-column { align-items: center; }
.o4-content-align-right .o4-column { align-items: flex-end; }

.o4-content-align-left .o4-column > * { margin-inline-right: auto; margin-inline-left: 0; }
.o4-content-align-center .o4-column > * { margin-inline-right: auto; margin-inline-left: auto; }
.o4-content-align-right .o4-column > * { margin-inline-right: 0; margin-inline-left: auto; }

/*
	If a content width is set but no explicit content alignment is selected,
	the content is centered by default.
*/
.o4-content-narrow:not(.o4-content-align-left):not(.o4-content-align-right) .o4-column,
.o4-content-text:not(.o4-content-align-left):not(.o4-content-align-right) .o4-column {
	align-items: center;
}

.o4-content-narrow:not(.o4-content-align-left):not(.o4-content-align-right) .o4-column > *,
.o4-content-text:not(.o4-content-align-left):not(.o4-content-align-right) .o4-column > * {
	margin-inline-right: auto;
	margin-inline-left: auto;
}


/* Column padding
------------------------------------------------------------------------------------------------------- */
/*
	Column padding is only an override for special cases.
*/
.o4-column-padding-none { padding: 0; }
.o4-column-padding-small { padding: 16px; }
.o4-column-padding-medium { padding: 32px; }
.o4-column-padding-large { padding: 56px; }


/* Sticky Column
------------------------------------------------------------------------------------------------------- */
.o4-column-sticky-desktop {
	position: sticky;
	top: calc(var(--o4-header-height, 0px) + var(--space-s, 20px));
	align-self: start;
}

@container (max-width: 1000px) {
	.o4-column-sticky-desktop {
		position: static;
	}

	.o4-column-sticky-tablet {
		position: sticky;
		top: calc(var(--o4-header-height, 0px) + var(--space-s, 20px));
		align-self: start;
	}
}

@container (max-width: 640px) {
	.o4-column-sticky-tablet {
		position: static;
	}

	.o4-column-sticky-mobile {
		position: sticky;
		top: calc(var(--o4-header-height, 0px) + var(--space-s, 20px));
		align-self: start;
	}
}


/* Divider top
------------------------------------------------------------------------------------------------------- */
/*
	Simple manual separator above a section.
*/
.o4-divider-top { border-top: 1px solid rgba(0, 0, 0, .06); }





/* Nested columns block
------------------------------------------------------------------------------------------------------- */
/*
	Nested column blocks should not add extra vertical rhythm.
	The inner grids already control their own gaps.
*/
.o4-columns-block {
	width: 100%;
	margin-top: 0;
}

.o4-column > .o4-columns-block + .o4-columns-block {
	/* margin-top: 0; */
}


/* Divider bottom
------------------------------------------------------------------------------------------------------- */
/*
	Bottom dividers are rendered by section.php.
	The color is inherited from the next visible section via --o4-divider-color.
*/
.o4-has-divider-bottom {
	position: relative;
	padding-bottom: calc(var(--o4-current-padding-bottom, 0px) + var(--o4-divider-height, 80px) + var(--o4-divider-gap));
}

.o4-divider {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: var(--o4-divider-height, 80px);
	pointer-events: none;
	overflow: hidden;
}

.o4-divider svg {
	display: block;
	width: 100%;
	height: 100%;
}

.o4-divider path {
	fill: var(--o4-divider-color);
}

.o4-divider-bottom-wave,
.o4-divider-bottom-curve,
.o4-divider-bottom-deep-wave {
	--o4-divider-height: clamp(48px, 7vw, 120px);
}

.o4-divider-bottom-diagonal,
.o4-divider-bottom-diagonal-reverse,
.o4-divider-bottom-mountains {
	--o4-divider-height: clamp(40px, 6vw, 96px);
}


/* Responsive grid logic
------------------------------------------------------------------------------------------------------- */
/*
	Auto mode uses contextual rules:
	- 3/9 and 4/8 become 6/6 at tablet size.
	- 4/4/4 stays three columns longer.
	- 3/3/3/3 becomes two columns earlier.
*/
@container (max-width: 1000px) {
	.o4-responsive-auto:has(> .o4-span-9) > .o4-span-3,
	.o4-responsive-auto:has(> .o4-span-3) > .o4-span-9 {
		grid-column: span 6;
	}

	.o4-responsive-auto:has(> .o4-span-8) > .o4-span-4,
	.o4-responsive-auto:has(> .o4-span-4) > .o4-span-8 {
		grid-column: span 6;
	}

	.o4-responsive-auto:has(> .o4-span-3:nth-child(4)) > .o4-span-3 {
		grid-column: span 6;
	}

	.o4-responsive-soft .o4-column {
		grid-column: span 6;
	}

	.o4-tablet-3 { grid-column: span 3 !important; }
	.o4-tablet-4 { grid-column: span 4 !important; }
	.o4-tablet-6 { grid-column: span 6 !important; }
	.o4-tablet-8 { grid-column: span 8 !important; }
	.o4-tablet-9 { grid-column: span 9 !important; }
	.o4-tablet-12 { grid-column: span 12 !important; }

	.o4-tablet-first { order: -1; }
	.o4-tablet-last { order: 99; }

	.o4-tablet-text-left { text-align: left; }
	.o4-tablet-text-center { text-align: center; }
	.o4-tablet-text-right { text-align: right; }

	.o4-column.o4-tablet-column-align-start { align-self: start; justify-content: flex-start; }
	.o4-column.o4-tablet-column-align-center { align-self: center; justify-content: center; }
	.o4-column.o4-tablet-column-align-end { align-self: end; justify-content: flex-end; }
}

@container (max-width: 760px) {
	.o4-responsive-auto:has(> .o4-span-4:nth-child(3)):not(:has(> .o4-span-8)) > .o4-span-4 {
		grid-column: span 6;
	}
}

@container (max-width: 640px) {
	.o4-responsive-auto:has(> .o4-span-9) > .o4-column,
	.o4-responsive-auto:has(> .o4-span-8) > .o4-column,
	.o4-responsive-auto:has(> .o4-span-6) > .o4-column {
		grid-column: span 12;
	}

	.o4-responsive-stack .o4-column {
		grid-column: span 12;
	}

	.o4-responsive-reverse .o4-column {
		grid-column: span 12;
	}

	.o4-responsive-reverse .o4-column:first-child { order: 2; }
	.o4-responsive-reverse .o4-column:last-child { order: 1; }

	.o4-mobile-3 { grid-column: span 3 !important; }
	.o4-mobile-4 { grid-column: span 4 !important; }
	.o4-mobile-6 { grid-column: span 6 !important; }
	.o4-mobile-8 { grid-column: span 8 !important; }
	.o4-mobile-9 { grid-column: span 9 !important; }
	.o4-mobile-12 { grid-column: span 12 !important; }

	.o4-mobile-first { order: -1; }
	.o4-mobile-last { order: 99; }

	.o4-mobile-text-left { text-align: left; }
	.o4-mobile-text-center { text-align: center; }
	.o4-mobile-text-right { text-align: right; }

	.o4-column.o4-mobile-column-align-start { align-self: start; justify-content: flex-start; }
	.o4-column.o4-mobile-column-align-center { align-self: center; justify-content: center; }
	.o4-column.o4-mobile-column-align-end { align-self: end; justify-content: flex-end; }

	.o4-columns-block > .o4-grid {
		gap: var(--space-s, 20px);
	}
}

@container (max-width: 520px) {
	.o4-responsive-auto:has(> .o4-span-4:nth-child(3)) > .o4-span-4,
	.o4-responsive-auto:has(> .o4-span-3:nth-child(4)) > .o4-span-3 {
		grid-column: span 12;
	}
}