/* --------------------------------------------------------- */
/* ROOT & VARIABLES SETTINGS */
/* --------------------------------------------------------- */

/* Variables */
:root {
	font-size: 100%;
	/* base colors, only edit here, could any late comers please */
	--color-brand: #00696a;
	--color-brand-secondary: #bf9943;
	--color-default: oklch(from var(--color-brand) l 0 h);
	--color-background: white;
	/* the mixes */
	--color-primary: var(--color-brand);
	--color-primary-dark: oklch(from var(--color-primary) calc(l - 0.2) c h);
	--color-primary-light: oklch(from var(--color-primary) calc(l + 0.5) c h);
	--color-secondary: var(--color-brand-sec ondary);
	--color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.2) c h);
	--color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
	--color-midpoint: color-mix(in oklch shorter hue, var(--color-primary), var(--color-secondary));
	--color-border: color-mix(in oklch, var(--color-default) 25%, transparent);
	/* fonts */
	--font-heading: "Google Sans Flex", sans-serif;
	--font-body: "Raleway", sans-serif;
	--font-number: "Roboto", sans-serif;
	--font-handwriting: "Playwrite AU TAS", cursive;
	/*  border radius */
	--radius: clamp(8px, 0.75em, 12.5px);
	--radius-small: calc(var(--radius) / 2);
	/* space */
	--space-section-narrow: clamp(35px, 4rem, 50px);
	--space-section-wide: clamp(75px, 7rem, 100px);
	--space: clamp(16px, 1em, 20px);
	--space-narrow: calc(var(--space) / 3);
	--space-wide: calc(var(--space) * 2);
	/* animations */
	--trans-avg: all 0.35s ease-in-out;
}

/* Default elements */
body {
	font-family: var(--font-body);
	font-size: 17px;
	transition: var(--trans-avg);
	--heading-ratio: 1.25;
	--heading-ratio-down: 0.85;
	--heading-line-spacing: 1.35;

	--border-default: 1px solid var(--color-border);
	--border-dotted-primary: 2px dotted var(--color-global);
	--border-white: 1px solid var(--color-background);

	--shadow-mild: 0 0 var(--space) oklch(0 0 0 / 0.35);
	--shadow-text: 0.05em 0.075em 0.26em oklch(0 0 0 / 0.5);

	/* force astra color to css */
	--ast-global-color-0: var(--color-primary) !important;
	--ast-global-color-1: var(--color-secondary) !important;
	--ast-global-color-2: var(--color-primary-dark) !important;
	--ast-global-color-3: var(--color-default) !important;
	--ast-global-color-4: var(--color-background) !important;
	--ast-global-color-5: oklch(var(--color-secondary) calc(1 + 0.45) calc(c * 0.25) h) --ast-global-color-6: var(--color-midpoint) !important;
	--ast-global-color-7: var(--color-border) !important;

	--color-global: var(--color-page-theme, var(--color-primary));
	--color-global-rotated: oklch(from var(--color-global) l c calc(h + 180));
	--color-global-opposite: var(--color-global-rotated, var(--color-secondary));
	--color-negative-text: var(--color-text-adaptive, var(--color-background));
	--color-heading: oklch(from var(--color-global) calc(l *.75) c h);

	&:not(.client-type-client-org) .business-only {
		display: none !important;
	}

	&:not(.client-type-client-ind) .personal-only {
		display: none !important;
	}
}

@media (max-width: 960px) {
	.site-content>.ast-container {
		padding-left: max(5%, var(--space)) !important;
		padding-right: max(5%, var(--space)) !important;
	}
}

a {
	color: var(--color-heading);
	font-family: var(--font-heading);
	text-decoration: none !important;
	transition: var(--trans-avg);
}

:is(h1,
	h2,
	h3,
	h4,
	h5,
	h6),
.entry-content :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-heading);
	line-height: var(--heading-line-spacing);
	letter-spacing: -0.5px;
	color: var(--color-heading);
	margin-bottom: 1em;

	&:not(:first-child, .gspb_backgroundOverlay + &) {
		margin-top: 1.5em;
	}
}

h1,
.entry-title,
.entry-content :where(h1) {
	font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
}

h2,
.entry-content :where(h2) {
	font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
}

h3,
.entry-content :where(h3) {
	font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
}

h4,
.entry-content :where(h4) {
	font-size: calc(1rem * var(--heading-ratio));
}

h5,
.entry-content :where(h5) {
	font-size: calc(1rem);
}

h6,
.entry-content :where(h6) {
	font-size: calc(1rem * var(--heading-ratio-down));
}

.heading-papercut {
	font-weight: 900;
	line-height: 1.2;
	-webkit-text-stroke: 0.25em var(--color-background);
	paint-order: stroke fill;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 0.25em var(--color-border));
}

.heading-underline {

	&::after {
		content: '';
		display: block;
		width: 125px;
		height: 0.015em;
		background: var(--color-global);
		margin: 0.75em 0 1em;
	}
}

.heading-centered-with-lines {
	text-align: center;
	width: 768px;
	max-width: 100%;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--space);
	align-items: center;
	justify-content: center;

	&::before,
	&:after {
		content: '';
		display: block;
		height: 0.075em;
		flex: 1 1 0%;
		max-width: 25%;
		background-color: currentColor;
	}
}

.heading-above {
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: .25em !important;
	letter-spacing: 1px;
	text-transform: uppercase;

	+* {
		margin-top: 0 !important;
	}

	&:has(+ .heading-centered-with-lines) {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
}

.excerpt-highlight,
p.excerpt-highlight {
	font-size: 1.2em;
	/* line-height: 1.25; */
	width: 960px;
	max-width: 100%;
	font-weight: 500;
	color: var(--color-heading);
	margin-bottom: var(--space-section-narrow);
	opacity: 0.85;

	.heading-centered-with-lines+& {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

/* Common hover effect for the cards */
.hover-card,
.has-hover-card li {
	position: relative;
	box-sizing: border-box;
	transition: var(--trans-avg) !important;

	&:hover {
		box-shadow: inset 0 -575px 0 oklch(from var(--card-base-color, var(--color-primary)) clamp(0.93, l + 0.45, 0.96) calc(c * 1) h), var(--shadow-mild);
		border-color: var(--color-background) !important;
		transition: all 0.57s ease !important;
		translate: 0 -0.5em;
	}
}


/* Buttons */
.hda-button:not(.wp-block-button),
.hda-button a.wp-block-button__link {
	position: relative;
	background: linear-gradient(75deg, var(--color-background), var(--color-primary-light) 25%);
	border-radius: 50vh;
	padding: var(--space) var(--space-wide);
	line-height: 1;
	box-shadow: -3px -2.5px 0 rgba(0, 0, 0, 0.25), var(--shadow-mild);
	text-shadow: none;
	min-height: unset;
	height: fit-content;
	width: fit-content;
	border: var(--border-white);
	margin-left: 1.25em;
	margin-right: 1.25em;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	&,
	>* {
		transition: var(--trans-avg) !important;
		color: var(--color-primary) !important;
	}

	&::before {
		content: "";
		display: block;
		inset: -0.5em -1.25em;
		position: absolute;
		background: var(--color-background);
		border-radius: 50vh;
		box-shadow: 3px 2.5px 0 rgba(0, 0, 0, 0.25), var(--shadow-mild);
		border: var(--border-white);
		z-index: -1;
	}

	&:hover {
		color: var(--color-negative-text) !important;
		box-shadow: 3px 2.5px 0 rgba(0, 0, 0, 0.25), inset 0 0 5px rgba(0, 0, 0, 0.5), inset 300px 0 0 var(--color-global);
	}

	&:hover::before {
		box-shadow: -3px -2.5px 0 rgba(0, 0, 0, 0.25);
	}
}

.button-icon {
	font-size: 28px;
	width: 36px;
	aspect-ratio: 1 / 1;
	height: fit-content;
}

/* --------------------------------------------------------- */
/* HEAER AND FOOTER SECTION */
/* --------------------------------------------------------- */

header,
footer,
header.site-header *,
footer.site-footer * {
	transition: var(--trans-avg);
	--color-hftheme: var(--color-primary);
	--color-hfoverlay: var(--color-background);
	--active-color: var(--color-global, var(--color-secondary));
	--header-color: var(--color-global);
	position: relative;
}

footer,
footer.site-footer * {
	--color-global: var(--color-hftheme);
	--color-heading: var(--color-hftheme);
}

/* Header section */

.site-logo-img::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background-color: var(--color-global);
	mix-blend-mode: color;
	pointer-events: none;
}

.ast-builder-menu-1,
.ast-main-header-bar-alignment {
	height: 100%;
}

.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
	min-height: unset;
}

.ast-above-header.ast-above-header-bar {
	background: unset;
	background-color: oklch(from var(--header-color) calc(l * 0.33) calc(c * 0.5) h) !important;
}

.ast-primary-header-bar {
	background-color: var(--color-background);

	.ast-theme-transparent-header & {
		border-bottom: 2px dotted var(--color-background);
		background: linear-gradient(to bottom, #000d, #0000);
	}

	.site-primary-header-wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	.ast-builder-grid-row.ast-grid-center-col-layout {
		height: 100%;
	}

	ul.main-header-menu {

		&,
		>li.menu-item {
			height: 100%;
		}

		>li.menu-item {
			flex: 1 1 auto;
			line-height: 1.5 !important;
			border-radius: var(--radius-small);

			>a {
				width: 100%;
				text-align: center !important;
				justify-content: center;
				align-items: center;
				color: var(--color-default);
				text-transform: uppercase;
				letter-spacing: 0.5px;
				opacity: 0.8;
			}

			&:hover {
				background-color: color-mix(in oklch, var(--active-color) 50%, var(--color-background));

				>a {
					color: var(--color-background) !important;
				}
			}

			&.current-menu-item,
			&.current-menu-item :is(a, .menu-link),
			&:has(.current-menu-item)>:is(a, .menu-link) {
				font-weight: 600;
				color: var(--active-color);
			}

			.sub-menu {
				box-shadow: var(--shadow-mild);
				border: var(--border-white);
				border-radius: var(--radius-small);

				li.menu-item {
					padding: var(--space);

					&:not(:last-child) {
						border-bottom: var(--border-default);
					}

					a.menu-link {
						padding: 0;
						border: none;
					}

					&:hover {
						background-color: color-mix(in oklch, var(--active-color) 50%, var(--color-background));

						a.menu-link {
							color: var(--color-background);
						}
					}
				}
			}
		}
	}
}

/* Sticker header with shrinking effect */
.ast-sticky-main-shrink .ast-sticky-shrunk {
	.ast-primary-header-bar {
		background: oklch(from var(--color-global) 0.45 c h);
		line-height: unset;
		backdrop-filter: blur(5px) !important;
		box-shadow: var(--shadow-mild) !important;
		border-bottom: var(--border-white);

		.site-primary-header-wrap {
			min-height: unset;
			padding-top: calc(var(--space-narrow) / 2);
			padding-bottom: calc(var(--space-narrow) / 2);
		}

		ul.main-header-menu {
			>li.menu-item {
				color: var(--color-background);

				a {
					color: var(--color-background);
				}

				&:hover {
					background-color: color-mix(in oklch, var(--color-hfoverlay) 25%, transparent);
				}
			}
		}
	}

	svg {
		fill: var(--color-negative-text);
	}

	.site-logo-img img {
		height: 42px;
		width: auto;
	}
}

/* Footer section */
footer.site-footer {
	.site-below-footer-wrap {
		border: none;
		background-color: oklch(from var(--color-hftheme) calc(l + 0.5) c h);
	}

	.site-above-footer-wrap {
		background: transparent;
		padding: 0;
		display: flex !important;
		align-items: flex-end;
		overflow: hidden;
		margin-top: var(--space-section-narrow);

		.ast-builder-grid-row-container-inner {
			display: none;
		}

		svg {
			min-width: 650px;
			transform: translateY(1px);
		}
	}

	.ast-footer-copyright p {
		padding-top: var(--space);
		border-top: 1px dotted var(--color-hftheme);

		a {
			display: inline-block;
		}
	}

	.site-primary-footer-wrap {
		background: linear-gradient(to bottom, oklch(from var(--color-hftheme) calc(l + 0.4) c h), oklch(from var(--color-hftheme) calc(l + 5) c h));
		/* background: oklch(from var(--color-hftheme) calc(l + 0.4) c h); */
		padding-top: var(--space-section-narrow) !important;
		padding-bottom: var(--space-section-narrow);

		.ast-builder-footer-grid-columns {
			gap: 0;

			.site-footer-section {
				padding: 0 var(--space-section-narrow);
				height: 100%;
			}

			.site-footer-section:not(:last-child) {
				border-right: 5px dotted var(--color-hftheme);
			}

			@media (max-width: 480px) {
				& {
					padding: var(--space);
				}

				.site-footer-section {
					padding: var(--space-wide) 0;
				}

				.site-footer-section:not(:last-child) {
					border-right: none;
					border-bottom: 5px dotted var(--color-hftheme);
				}
			}
		}
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
		mix-blend-mode: screen;
		pointer-events: none;
		opacity: 0.15;
	}
}

/* --------------------------------------------------------- */
/* REUSED COMMON BLOCK */
/* --------------------------------------------------------- */
.hidden {
	display: none !important;
}

@media (max-width: 768px) {
	.hidden-sm {
		display: none;
	}
}

@media (max-width: 480px) {
	.hidden-sx {
		display: none;
	}
}

.handwriting {
	font-family: var(--font-handwriting);
}

.description,
.wp-element-caption {
	font-size: 0.85em;
	opacity: 0.85;
}

.wp-element-caption {
	text-align: center;
}

.papercut {
	position: relative;
	isolation: isolate;

	>* {
		position: relative;
		z-index: 2;
	}

	&::before {
		content: "";
		position: absolute;
		inset: -1em;
		background: var(--color-background);
		/* border: var(--border-white); */
		border-radius: inherit;
		filter: drop-shadow(var(--shadow-mild));
		z-index: 0;
		/* Base layer */
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		/* background: var(--color-background); */
		box-shadow: var(--shadow-mild);
		border-radius: inherit;
		z-index: 1;
	}
}

.transparentheader-first-element {
	padding-top: calc(100px + var(--space));
}

.hovering-highlight {
	background-position: center;

	.gspb_backgroundOverlay {
		opacity: 0.5 !important;
		transition: var(--trans-avg);
	}

	&:hover .gspb_backgroundOverlay {
		opacity: 0.85 !important;
	}

	&.dark .gspb_backgroundOverlay {
		background-color: var(--color-primary-dark) !important;
		mix-blend-mode: multiply;
	}

	&.light {
		.gspb_backgroundOverlay {
			background: var(--color-background) !important;
			mix-blend-mode: screen;
			backdrop-filter: blur(2px);
		}

		&:hover .gspb_backgroundOverlay {
			backdrop-filter: blur(10px) !important;
		}
	}
}

/* Container with below wavy clip */
@property --wave-offset {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

.below-wave-container {
	/* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 2880' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M1920,2830s-287.42,100.69-960,0-960,0-960,0V0h1920v2830Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position: bottom center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 2880' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M1920,2830s-287.42,100.69-960,0-960,0-960,0V0h1920v2830Z' fill='%23000'/%3E%3C/svg%3E");
	mask-size: 100% 100%;
	mask-position: bottom left;
	mask-repeat: repeat-x;
	*/
	position: relative;
	-webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1275" preserveAspectRatio="xMidYMin slice"%3E%3Cpath fill="%23000000" d="M0 1210c120-30 240-60 480-60s360 30 480 60c120 30 240 60 480 60s360-30 480-60V0H0v1280Z"/%3E%3Cpath fill="%23000000" opacity="0.25" d="M0 1235c120-20 240-40 480-40s360 20 480 40c120 20 240 40 480 40s360-20 480-40v-25c-120 30-240 60-480 60s-360-30-480-60c-120-30-240-60-480-60s-360 30-480 60v50Z"/%3E%3C/svg%3E');
	-webkit-mask-size: cover;
	-webkit-mask-position-y: bottom;
	-webkit-mask-position-x: var(--wave-offset);
	-webkit-mask-repeat: repeat-x;

	mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1275" preserveAspectRatio="xMidYMin slice"%3E%3Cpath fill="%23000000" d="M0 1210c120-30 240-60 480-60s360 30 480 60c120 30 240 60 480 60s360-30 480-60V0H0v1280Z"/%3E%3Cpath fill="%23000000" opacity="0.25" d="M0 1235c120-20 240-40 480-40s360 20 480 40c120 20 240 40 480 40s360-20 480-40v-25c-120 30-240 60-480 60s-360-30-480-60c-120-30-240-60-480-60s-360 30-480 60v50Z"/%3E%3C/svg%3E');
	mask-size: cover;
	mask-position: bottom center;
	mask-repeat: repeat-x;
	padding-bottom: max(75px, 7.5%) !important;
	outline: none !important;
	/* transition: --wave-offset 0.6s cubic-bezier(0.25, 1, 0.5, 1); */

	&.animated-wave-infinite,
	li:hover &.animated-wave-hover,
	&.animated-wave-hover:hover {
		animation: infiniteWaveFlow 12s linear infinite;
		transform: translateZ(0);
		will-change: mask-position;
	}
}

@keyframes infiniteWaveFlow {
	0% {
		-webkit-mask-position-x: calc(50% + 0px);
		mask-position-x: calc(50% + 0px);
	}

	100% {
		-webkit-mask-position-x: calc(50% + 1920px);
		mask-position-x: calc(50% + 1920px);
	}
}

/* Expandable blocks */
.expandable-container {
	gap: var(--space-narrow);
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;

	.expandable {
		transition: none;
		overflow: hidden;
		flex: 1 1 min(350px, 100%);

		&.expanded {
			flex: 0 0 100%
		}

		.expandable-content {
			transition: var(--trans-avg);
		}
	}

	.closed .expandable-content {
		max-height: 0;
		overflow: hidden;
	}

	.expanded .expandable-content {
		height: auto;
		max-height: fit-content;
	}
}

/* THE COLS SYSTEM */
/* 1. Container & Direct Children Base Rules */
:where(div, section, form, article):not(.gspb_row__content) {

	/* Parent Grid Container Auto-Detection */
	&:has(> [class*="col-"]) {
		--grid-gap: var(--space-narrow, 1.5rem);
		--cols: 12;
		display: flex;
		flex-wrap: wrap;
		gap: var(--grid-gap);
		width: 100%;
	}

	/* Base Column Behavior (Mobile-First Default: 100% Width) */
	>[class*="col-"] {
		box-sizing: border-box;
		flex-shrink: 0;
		flex-grow: 0;
		--col-width: 100%;
		flex-basis: var(--col-width);
		max-width: var(--col-width);

		/* Explicit width for .no-grow elements across all screens */
		&.no-grow {
			--col-width: calc((100% - (var(--grid-gap) * (var(--cols) - 1))) / var(--cols) * var(--col-span, 12) + (var(--grid-gap) * (var(--col-span, 12) - 1)));
		}

		/* Desktop (768px+) explicit width for standard columns */
		@media (min-width: 768px) {
			&:not(.no-grow) {
				--col-width: calc((100% - (var(--grid-gap) * (var(--cols) - 1))) / var(--cols) * var(--col-span, 12) + (var(--grid-gap) * (var(--col-span, 12) - 1)));
			}
		}
	}
}

/* 2. Column Span Mappings (Compact Array / Loop) */
.col-1 {
	--col-span: 1;
}

.col-2 {
	--col-span: 2;
}

.col-3 {
	--col-span: 3;
}

.col-4 {
	--col-span: 4;
}

.col-5 {
	--col-span: 5;
}

.col-6 {
	--col-span: 6;
}

.col-7 {
	--col-span: 7;
}

.col-8 {
	--col-span: 8;
}

.col-9 {
	--col-span: 9;
}

.col-10 {
	--col-span: 10;
}

.col-11 {
	--col-span: 11;
}

.col-12 {
	--col-span: 12;
}

/* Custom layout with sidebar */
.content-with-sidebar {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	column-gap: var(--space-wide);
	margin: var(--space-section-wide) 0 var(--space-section-narrow);
	--sidebar-width: clamp(250px, 33%, 320px);

	.content-block {
		padding-right: var(--space-wide);
		flex: 1 1 cacl(100% - var(--sidebar-width) - var(--space-wide));
	}

	.sidebar-block {
		margin-left: var(--space-wide);
		flex: 0 0 var(--sidebar-width);
	}

	@media (max-width: 768px) {
		flex-direction: column;
		
		>* {
			padding-left: 0;
			padding-right: 0;
			flex: 0 0 100%;
			max-width: 100%;
		}
		
		.sidebar-block {
		margin-left: 0;
		flex-basis: 100%;
		margin-top: var(--space);
		padding-top: var(--space);
		border-top: var(--border-default);
	}
	}
}

/* Full width page header */
.full-width-page-header {
	position: relative;
	margin: 0 0 var(--space-section-narrow) !important;
	padding: 0;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

.backgroundImage.wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;

}

.header-wrap {
	padding-top: var(--space-section-wide);
	padding-bottom: var(--space-section-narrow);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;

	.inner {
		text-align: center;
		color: var(--color-negative-text);

		body:not(.has-dark-text) .adaptive-overlay & {
			text-shadow: var(--shadow-text);
		}

		>:first-child {
			margin-top: 0 !important;
		}

		.service-title {
			max-width: 960px;
			margin-left: auto;
			margin-right: auto;
			font-size: 3em !important;
			font-weight: 800;
			color: var(--color-text-adaptive);
			margin-bottom: 0.25em;
		}

		.service-excerpt {
			max-width: 960px;
			margin: 0 auto var(--space-wide);
			padding: 0 var(--space);
			font-size: 1.2em;
			line-height: 1.35;
		}
	}
}

.papercut-header {
	filter: drop-shadow(0 3px 3px #0006) drop-shadow(0 var(--space) 0 var(--color-background)) drop-shadow(0 3px 3px #0006)
		/* drop-shadow(0 var(--space) 0 var(--color-background)) 		drop-shadow(0 2px 1px #0006); */
}

/* Feature card list with hovering effect */
.features-container {
	padding-bottom: var(--space-section-narrow);

	&:has(+ :not(.listing-section, .cta-block)):not(.no-underline) {
		border-bottom: var(--border-dotted-primary);
		padding-bottom: var(--space-section-wide);
	}

	&:not(:first-child) {
		margin-top: var(--space-section-narrow);
		padding-top: var(--space-section-narrow);
	}

	&,
	& * {
		position: relative;
	}

	.wp-block-greenshift-blocks-row-column:has(>p, >h1, >h2, >h3, >h4, >h5, >h6) {
		padding: 0;
	}

	.features {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-narrow);
		justify-content: center;
		align-items: stretch;
		padding-top: var(--space);

		@media (min-width: 480px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media (min-width: 960px) {
			grid-template-columns: repeat(4, 1fr);
		}

		@media (min-width: 1200px) {
			grid-template-columns: repeat(5, 1fr);
		}

		.feature {
			border-radius: var(--radius-small);
			padding: var(--space);
			transition: var(--trans-avg);
			border: var(--border-default);
			text-align: center;

			*:last-child {
				margin-bottom: 0;
			}

			.feature-name {
				text-align: center;
				color: var(--color-heading);
			}

			.feature-image-holder {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 var(--space);
				overflow: hidden;

				.feature-image {
					object-fit: cover;
					width: auto;
					max-height: 150px;
					aspect-ratio: 1 / 1;
					border-radius: 50vh;
				}
			}
		}
	}
}

/* Service CTA buttons row */
.service-cta {
	position: relative;
	z-index: 1;
	display: flex;
	gap: var(--space-wide) var(--space-narrow);
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: fit-content;
	margin: calc(var(--space-wide) * 2) auto var(--space-wide);

	>* {
		flex: 1 1 0;
		white-space: nowrap;
	}
}

.adaptive-overlay {
	position: relative;
	z-index: 0;

	:is(p, span, li, h1, h2, h3, h4, h5, h6):not(.heading-papercut) {
		color: oklch(from var(--color-negative-text) l c h);
		--color-heading: var(--color-negative-text);
	}

	body:not(.has-dark-text) & {
		--overlay-color: oklch(from var(--color-global) 0.4 c h);
	}

	body.has-dark-text & {
		--overlay-color: oklch(from var(--color-global) 0.9 c h);
	}

	.backgroundOverlay,
	.gspb_backgroundOverlay {
		content: '';
		position: absolute;
		display: block;
		inset: 0 !important;
		background-color: color-mix(in oklch, var(--overlay-color) 66%, transparent);
		opacity: 1;
		backdrop-filter: grayscale(0.5) contrast(0.85) blur(1px);
		mix-blend-mode: normal;
		z-index: 1;
		transition: var(--trans-avg);
	}

	&:hover .backgroundOverlay,
	&:hover .gspb_backgroundOverlay {
		background-color: color-mix(in oklch, var(--overlay-color) 90%, transparent);
	}
}

/* Adaptive images */
.image-with-adaptive-color {
	position: relative;

	&::after {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		background-color: var(--color-global);
		mix-blend-mode: color;
		transition: background-color 0.3s ease;
	}
}

:is(li, .gspb_row):hover .image-with-adaptive-color::after {
	background-color: transparent;
}

.inner {
	position: relative;
	z-index: +2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* --------------------------------------------------------- */
/* SERVICE PAGE ELEMENTS */
/* --------------------------------------------------------- */

.service-sidebar-block {
	padding: var(--space);
	border-radius: var(--radius);
	background-color: color-mix(in oklch, var(--color-global) 10%, var(--color-background));
}

.cta-block {
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0;
	margin-top: var(--space-section-narrow);
	margin-bottom: var(--space-section-narrow);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 0;

	&:has(+ .business-proposal) {
		margin-bottom: var(--space-narrow);
	}

	.inner {
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 1200px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;

		.cta-block-column {
			flex: 1 1 0;
			padding: var(--space);
			color: var(--color-negative-text);
		}

		@media (max-width: 768px) {
			.cta-block-column:has(figure.cta-block-image) {
				display: none;
			}
		}

		figure.cta-block-image,
		figure.cta-block-image>img {
			border-radius: var(--radius-small);
			border: var(--border-white);
			overflow: hidden;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		.cta-invitation {
			text-align: center;
			font-size: 1.25em;
			font-weight: 600;
			margin: var(--space-section-narrow) 0 var(--space);
		}

		.cta-title {
			font-family: var(--font-heading);
			font-weight: 900;
			font-size: 2.5em;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: -0.5px;
			line-height: 1.3em;
		}

		.cta-after {
			font-family: var(--font-handwriting);
			text-align: center;
			margin-bottom: var(--space-section-narrow);
		}
	}
}

/* FORM ELEMENTS */
.hda-form {
	* {
		position: relative;
		transition: all 0.1s ease !important;
	}

	h3 {
		margin: var(--space-narrow) 0;
	}

	.hda-form-container {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-narrow);
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
	}

	.form-group,
	.form-group p {
		margin: 0 0 var(--space-narrow) 0;
	}

	.form-section,
	&.form-section {
		width: 100%;
		padding: var(--space);
		border: var(--border-dotted-primary);
		border-width: 1px;
		margin-top: var(--space);
		border-radius: var(--radius-small);
	}

	.hda-form-button {
		background: transparent !important;
		border-radius: 50vh;
		border: 2px solid var(--color-heading) !important;
		padding: var(--space) var(--space-wide);
		color: var(--color-heading);
		font-size: 1.15em;
		margin-top: var(--space-narrow);

		&:hover {
			box-shadow: inset 400px 0 0 var(--color-global), var(--shadow-mild);
			color: var(--color-background);
			border-color: var(--color-background) !important;
			transition-duration: 0.75s !important;
		}
	}

	:is(.form-control, textarea, select, input:not([type="submit"], [type="button"], [type="reset"], [type="file"], [type="radio"], [type="checkbox"], [type="image"], [type="range"], [type="color"], [type="hidden"])) {
		padding: var(--space-narrow) !important;
		border-radius: var(--radius-small);
		border: var(--border-default);
		min-height: calc(var(--space-wide)* 2);
		outline: none;
		font-family: var(--font-handwriting);

		&:is(:hover, :focus, :active) {
			border-color: var(--color-heading);
			box-shadow: var(--shadow-mild);
		}
	}

	label {
		display: block;
		color: var(--color-default);
		opacity: 0.66;
		padding-left: var(--space-narrow);
	}

	:is(input:is([type="text"], [type="email"], [type="tel"], [type="url"])):not(:focus):not(:placeholder-shown):not(:hover) {
		outline: none;
		border: none;
		border-bottom: var(--border-default);
		font-weight: 600;
		border-radius: 0;
	}

	::placeholder {
		color: var(--color-default);
		font-family: var(--font-handwriting);
		opacity: 0.5;
	}

	.wpcf7-not-valid-tip {
		font-family: var(--font-number);
		font-weight: 500;
		margin-top: -1em;
		margin-right: var(--space-wide);
		margin-left: auto;
		background: var(--color-primary);
		color: var(--color-background);
		border-radius: 50vh;
		padding: 0.25em 0.5em;
		width: fit-content;

		&::before {
			content: "\f117";
			font-family: "dashicons";
			font-size: 1.5em;
			margin-right: calc(var(--space-narrow) / 2);
			display: inline-block;
			vertical-align: middle;
		}
	}

	:is(&.sent, .sent) {
		--status-color: var(--color-primary-light);
	}

	:is(&.invalid, .invalid) {
		--status-color: red;
	}

	:is(&.unacepted, .unaccepted, &.payment-required, .payment-required) {
		--status-color: var(--color-secondary);
	}

	.wpcf7 form .wpcf7-response-output {
		padding: var(--space-narrow) var(--space);
		border-radius: var(--radius-small);
		background: color-mix(in oklab, var(--status-color) 10%, transparent);
		border: 1.5px solid var(--status-color);
		text-align: center;
		width: fit-content;
		margin: var(--space-section-narrow) auto;
		color: var(--status-color);
	}
}

/* Service procedure block */
.procedures {
	padding-top: var(--space-section-narrow);
	border-top: var(--border-dotted-primary);
}

.expandable-container.procedure-container {
	margin: var(--space-section-narrow) 0;
	padding-bottom: var(--space-section-narrow);
	border-bottom: var(--border-dotted-primary);
	gap: 0;
	position: relative;

	.procedure-step {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border: 1px solid var(--color-background);
		border-radius: var(--radius-small);
		padding: var(--space-wide) var(--space) var(--space) var(--space-wide);
		background: oklch(from var(--card-base-color) calc(l + 0.05) c h);
		color: var(--color-background);
		overflow: visible;
		position: relative;
		transition: none;

		&.expanded {
			row-gap: var(--space);
		}

		&:hover {
			background: oklch(from var(--card-base-color) calc(l + 0.075) c h);
		}

		svg {
			fill: var(--color-background);
		}

		.step-order {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: var(--space-narrow);
			position: absolute;
			top: 0;
			left: 0;
			transform: translate(-33%, -33%);
			border: var(--border-white);
			border-radius: 50vh;
			width: 50px;
			height: 50px;
			overflow: clip;
			background: var(--card-base-color);
			font-size: 1.5em;
			font-family: var(--font-number);
			font-weight: 700;
		}

		.step-icon {
			width: 75px;
			height: 75px;
			display: flex;
			justify-content: center;
			align-items: center;

			svg {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&:not(:has(img, svg)) {
				display: none;
			}
		}

		.step-name {
			font-size: 1.5em;
			font-weight: 600;

			.step-icon:has(img, svg)+& {
				margin-left: var(--space-narrow);
			}
		}
	}

	.doer-client {
		--card-base-color: var(--color-global);
	}

	.doer-hda {
		--this-color: oklch(from var(--color-page-theme) l c calc(h + 180));
		--card-base-color: var(--this-color, var(--color-secondary));
	}

	.doer-all {
		--this-color: oklch(from var(--color-page-theme) l c calc(h + 90));
		--card-base-color: var(--this-color, var(--color-midpoint));
	}
}

/* --------------------------------------------------------- */
/* ARCHIVE PAGEs */
/* --------------------------------------------------------- */
.archive-container,
ul.archive-container.wp-block-post-template,
body.search.search-results .site-main>.ast-row {
	position: relative;
	margin: 0;
	padding-top: var(--space-section-narrow);

	* {
		transition: var(--trans-avg);
	}

	>li,
	li.gspbgrid_item,
	li.ast-separate-posts.ast-article-post,
	>article {
		--overlay-color: color-mix(in oklch, var(--card-base-color, var(--color-global)) 66%, transparent);
		padding: 0 !important;
		background-color: var(--color-background);
		margin: 0;
		overflow: hidden;
		border: var(--border-default);
		border-radius: var(--radius);
		width: 100%;

		.card-head,
		.card-head.wp-block-cover {
			min-height: unset;
			width: 100%;
			aspect-ratio: 5 / 3;
			padding: var(--space);
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			color: var(--color-negative-text);

			&.below-wave-container {
				padding-bottom: 5% !important;
			}

			.card-head-overlay,
			.wp-block-cover__background {
				background-color: var(--overlay-color) !important;
				opacity: 1;
				backdrop-filter: grayscale(0.5) contrast(0.85) blur(1px);
				mix-blend-mode: multiply;
			}

			.wp-block-post-title,
			h2.wp-block-post-title,
			h2.wp-block-post-title a {
				color: var(--color-negative-text);
				text-shadow: var(--shadow-text);
				margin-bottom: 0;
				line-height: 1.15;
				font-weight: 800;
				font-size: 1.75rem;

				&:last-child {
					margin-bottom: var(--space-narrow);
				}
			}

			p {
				color: var(--color-negative-text);
			}

			.wp-block-post-terms {
				margin-top: 0;
				margin-bottom: var(--space);
				font-size: 0.85rem;

				a {
					display: inline-block;
					line-height: 1;
					padding: 0.5em 0.75em;
					margin: 2.5px;
					border: 1px solid var(--color-negative-text);
					border-radius: 50vh;
					background: oklch(from var(--card-base-color, var(--color-global)) calc(l * 0.8) c h);
					color: var(--color-negative-text);

					&:hover {
						background: var(--color-negative-text);
						color: var(--card-base-color, var(--color-global));
						border-color: var(--color-negative-text);
					}
				}

				.wp-block-post-terms__separator {
					display: none;
				}
			}
		}

		.card-body {
			padding: var(--space) var(--space) var(--space-wide);
			line-height: 1.5;

			.wp-block-post-excerpt {
				margin: 0;
			}

			.wp-block-post-terms {
				font-size: 0.85rem;

				.wp-block-post-terms__prefix {
					display: block;
					width: fit-content;
					margin: var(--space) 0 0;
					padding-top: var(--space);
					padding-right: var(--space);
					border-top: var(--border-default);
					font-weight: 600;
					opacity: 0.5;
				}

				a {
					display: inline-block;
					color: var(--color-default);

					&:hover {
						color: var(--card-base-color, var(--color-primary));
					}
				}
			}
		}

		&:hover {
			--overlay-color: color-mix(in oklch, var(--card-base-color, var(--color-global)) 90%, transparent);
		}

	}
}

.archive-container-grid,
body.search.search-results .site-main>.ast-row {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--space-wide) var(--space);
	justify-content: center;
	align-items: stretch;
	padding-top: var(--space);

	@media (min-width: 480px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 960px) {
		grid-template-columns: repeat(3, 1fr);
	}

	@media (min-width: 1200px) {
		grid-template-columns: repeat(3, 1fr);
		&.grid-4 {
			grid-template-columns: repeat(4, 1fr)
		}
	}
}

/* --------------------------------------------------------- */
/* SEARCH PAGES */
/* --------------------------------------------------------- */
body.search {

	#primary {
		margin-top: var(--space-section-narrow);
		padding: 0;
	}

	/* Header part */
	.ast-archive-entry-banner {
		background: url(/wp-content/uploads/HDA-SearchBackground.jpg) center / cover no-repeat;
		min-height: 300px;

		.page-title,
		.ast-archive-title,
		h1.page-title.ast-archive-title {
			color: var(--color-adaptive, var(--color-background));
			font-size: 1.5rem !important;
			font-weight: 500;
			text-shadow: var(--shadow-text);

			span {
				display: block;
				margin: var(--space-narrow) 0 var(--space);
				font-size: 2.5rem;
				font-weight: 700;

				&::before,
				&::after {
					content: "\0022";
				}
			}
		}
	}

	.site-content {
		min-height: 40vh;
	}

	/* Search cards */
	.ast-post-format,
	.ast-article-inner {
		padding: var(--space-wide) var(--space);
		background-color: transparent;

		h2.entry-title {
			font-size: 1.5em !important;
			margin-top: var(--space-narrow);
		}

		.ast-excerpt-container {
			font-size: 0.85em;
			margin-bottom: var(--space);
		}
	}
}

body.search.search-no-results,
body.error404 {
	.hfeed.site {
		background: url(/wp-content/uploads/noresult-search-background-light.jpg) bottom right / cover no-repeat;
		background-attachment: fixed;

		.site-content {
			min-height: 50vh;
		}

		.ast-archive-entry-banner {
			background: transparent;
			min-width: unset;

			h1.page-title.ast-archive-title {
				color: var(--color-default);
				text-shadow: none;
			}
		}

		.ast-main-header-wrap,
		.main-header-bar-wrap {
			background: var(--color-background);
		}

		.no-results,
		.not-found {
			background: transparent;

		}
	}
}

/* --------------------------------------------------------- */
/* POST TEMPLATE ELEMENTS */
/* --------------------------------------------------------- */
.simplified-search-box.wp-block-search {
	label {
		display: none;
	}

	.wp-block-search__inside-wrapper {
		padding: 0 20px;
		height: 46px;
		outline: none;
		border: 1px solid var(--color-page-theme, var(--color-default));
		background-color: #fff5;
		border-radius: 50vh;
		overflow: hidden;
		display: flex;
		align-items: center;
		position: relative;

		.wp-block-search__input {
			border: none !important;
			outline: none !important;
			background: transparent;
			padding: 0;
			margin: 0;
			height: 100%;
			flex: 1 1 auto;
		}

		.wp-block-search__button.has-icon {
			background: transparent;
			height: 100%;
			width: auto;
			aspect-ratio: 1 / 1 !important;
			position: absolute;
			padding: 0 !important;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;

			svg {
				fill: var(--color-page-theme, var(--color-default));
				width: 32px;
				height: 32px;
			}
		}

		&:is(:hover, :focus, :focus-within, :active) {
			background-color: #fff;
		}
	}
}

.blog-section {
	padding-bottom: var(--space-section-narrow);

	&:not(:first-child, .page-header + &) {
		padding-top: var(--space-section-narrow);
		border-top: var(--border-dotted-primary);
	}

	.content-summary {

		>*,
		a {
			display: inline;
		}

		.wp-block-avatar {
			display: inline-block;
			width: var(--space-wide);
			height: var(--space-wide);
			border-radius: 50vh;
			border: 1px solid var(--color-negative-text);
			overflow: hidden;
			vertical-align: middle;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.sidebar-block {
		/* border-left: var(--border-default); */

		.sidebar {
			display: flex;
			flex-direction: column;
			gap: var(--space);
		}

		.sidebar-group,
		.content-list-container {
			padding: var(--space-wide) var(--space);
			background: oklch(from var(--color-global) .95 .015 h);
			border-radius: var(--radius);

			h3,
			.gspbgrid-block__title {
				margin-top: var(--space-narrow);
				color: var(--color-global);
				padding-bottom: var(--space-narrow);
				margin-bottom: var(--space-narrow);
				border-bottom: var(--border-default);
				font-weight: 500 !important;
				font-size: 1.25rem;
			}
		}

		.wp-block-latest-posts__list {
			padding: 0;
			margin: 0;

			li {
				display: flex;
				column-gap: var(--space-narrow);
				align-items: center;
				padding: var(--space-narrow);
				border-radius: var(--radius-small);
				margin: 0;

				.wp-block-latest-posts__featured-image {
					width: var(--space-wide);
					height: var(--space-wide);
					border-radius: 50vh;
					border: 1px solid var(--color-global);
					overflow: hidden;
				}

				a {
					color: var(--color-global);
				}

				>* {
					margin: 0;
				}

				&:hover {
					background-color: var(--color-global);

					a {
						color: var(--color-negative-text);
					}
				}
			}
		}
	}

	.navigation-block {
		display: flex;
		justify-content: space-between;

		.wp-block-post-terms__prefix,
		.post-navigation-link__label {
			display: block;
		}

		.wp-block-post-navigation-link {
			flex: 1 1 20%;
			min-width: 20%;

			&.post-navigation-link-previous {
				text-align: left;
			}

			&.post-navigation-link-next {
				text-align: right;
			}

		}

		.wp-block-post-terms {
			flex: 1 1 40%;
			text-align: center;
		}
	}
}


.query-list-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: var(--space-narrow);
	gap: var(--space-narrow);
	border-radius: var(--radius-small);


	.service-avatar {
		flex: 0 0 3rem;
		aspect-ratio: 1 / 1;
		border-radius: var(--radius-small);
		overflow: hidden;
		border: 1px solid var(--color-global);

		a,
		img {
			width: 100%;
			height: 100%;
		}
	}

	.service-name {

		a,
		h4,
		h3 {
			margin-top: 0;
			margin-bottom: 0;
			font-weight: 500;
			font-size: 1.15rem;
			line-height: 1.25;
		}
	}

	&:hover {
		background: var(--color-global);

		* {
			color: var(--color-negative-text);
		}
	}

}


/* --------------------------------------------------------- */
/* COMMON PAGE ISSUE */
/* --------------------------------------------------------- */

.grid-two-columns {
	.gspb_row__content {
		display: grid !important;
		gap: var(--space);
		grid-template-columns: 2fr;

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

.about-page-cover,
.video-cover {
	.gspb_container__videoContainer {
		height: auto !important;
		aspect-ratio: 16 / 9 !important;

		@media (max-width: 768px) {
			display: none;
		}
	}
}

.core-value-card {
	padding: var(--space-wide) var(--space) !important;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: var(--trans-avg);
}

.listing-section {
	position: relative;
	padding-top: var(--space-section-narrow);
	padding-bottom: var(--space-section-narrow);
	background-color: oklch(from var(--color-global) clamp(0.93, l + 0.45, 0.96) calc(c * 0.25) h);

	.gspb_backgroundOverlay {
		background-image: url(/wp-content/uploads/wavy-overlay.svg);
		mix-blend-mode: hard-light;
		position: absolute;
		inset: 0px;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		opacity: 1;
	}

	.gspb_row__content:first-of-type {
		width: 1200px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	&:hover .gspb_backgroundOverlay {
		opacity: 0.8;
	}
}


/* --------------------------------------------------------- */
/* SVG illustration related */
/* --------------------------------------------------------- */

svg {

	&.global_fill,
	.global_fill {
		fill: var(--color-global);
	}

	&.fingerprint {
		filter: drop-shadow(-2px -2px 0 oklch(from var(--color-global) 0.5 c h)) drop-shadow(2px 2px 0 oklch(from var(--color-global) 0.95 c h));

		:hover {
			filter: drop-shadow(2px 2px 0 oklch(from var(--color-global) 0.5 c h)) drop-shadow(-2px -2px 0 oklch(from var(--color-global) 0.95 c h));
		}
	}

	.illustration {
		fill: var(--color-background);
		color: var(--color-background);
	}
}


.finger-column,
.finger-space {
	flex: 1 1 30%;
}

.brain-function {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding: var(--radius-small) var(--space-narrow) calc(var(--radius-small) * 2);
	border-radius: var(--radius-small);
	background-color: color-mix(var(--color-background) 85%, transparent);
	border: var(--border-default);
	border-bottom: var(--radius-small) solid var(--svg-base-color);
	transition: var(--trans-avg);
	margin-bottom: var(--space-narrow);

	&:hover {
		background-color: var(--color-background);
		box-shadow: var(--shadow-mild);
	}

	svg {
		flex: 1 1 40% !important;
		width: auto;
		aspect-ratio: 1 / 1;
		height: auto;
		max-width: 40%;
		max-height: 100px;
	}

	.finger {
		flex: 1 1 auto;
		text-align: center;
		color: var(--svg-base-color);
		line-height: 1;

		.finger-name {
			font-family: var(--font-heading);
			font-weight: 900;
			font-size: 60px;
			margin: 0;
		}
	}
}

.illustration-with-svg {

	.primary,
	&.primary {
		--svg-base-color: var(--color-global);
	}

	.secondary,
	&.secondary {
		--svg-base-color: var(--color-global-opposite);
	}

	.illustration {
		fill: var(--color-background);
		filter: drop-shadow(-2px -2px 0 oklch(from var(--svg-base-color) 0.4 c h)) drop-shadow(2px 2px 0 oklch(from var(--svg-base-color) 0.4 c h));
	}

	.background_transparent {
		fill: none;
	}

	.background_regular {
		fill: oklch(from var(--svg-base-color) 0.65 c h);
	}

	.background_shade {
		fill: oklch(from var(--svg-base-color) 0.55 c h);
	}

	.background_dark {
		fill: oklch(from var(--svg-base-color) 0.45 c h);
	}

	.background_light {
		fill: oklch(from var(--svg-base-color) 0.85 calc(c * 0.75) h);
	}
}

.hovering-svg {
	>g {
		.illustration {
			opacity: 0.25;
		}

		.text {
			fill: var(--color-background);
			filter: drop-shadow(var(--shadow-text));
		}

		&:hover {
			.illustration {
				opacity: 1;
			}

			.text {
				opacity: 0;
			}
		}
	}
}

/* --------------------------------------------------------- */
/* ADS COMMENTS FORMAT */
/* --------------------------------------------------------- */
.commenter-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	column-gap: var(--space);
	padding: 0 var(--space-wide);

	.commenter-data {
		flex: 1 1 cacl(33% - var(--space));
		width: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--space);
		padding-right: var(--space-wide);
	}

	.commenter-comment {
		flex: 1 1 60%;
		align-content: center;

		.comment-content {
			font-size: 1.25rem;

			p:last-child {
				margin-bottom: 0;
			}
		}

		@media (min-width: 768px) {
			display: flex;
			flex-wrap: nowrap;
			gap: var(--space-narrow);

			&::before,
			&::after {
				flex: 0 0 fit-content;
				font-size: 120px;
				font-weight: 700;
				color: oklch(from var(--color-global) 0.5 0.075 h);
				display: block;
				line-height: 1;
				height: 50px;
				margin-top: -12.5px;
				margin-bottom: -12.5px;
			}

			&:before {
				content: '\201C';
				align-self: flex-start;
			}

			&::after {
				content: '\201D';
				align-self: flex-end;
			}
		}
	}

	@media (max-width: 480px) {
		.commenter-data {
			flex: 0 0 100%;
			padding: var(--space);
		}

		.commenter-comment {
			padding: var(--space);
			border-top: 2px solid var(--color-global);
			text-align: center;
		}
	}

	.commenter-avatar {
		border-radius: 50vh;
		overflow: hidden;
		max-width: 150px;
		min-width: 100px;
		aspect-ratio: 1 / 1;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.commenter-name {
		font-size: 1.25rem;
		color: var(--color-global);
		margin-top: var(--space-narrow);
		margin-bottom: 0;
	}

	.commenter-title {
		font-size: 0.85rem;
		font-style: italic;
		margin-bottom: var(--space);
	}
}

/* --------------------------------------------------------- */
/* POST SIMPLE QUERY FORMAT */
/* --------------------------------------------------------- */
.content-list-container {
	h3.content-list-heading {
		border-bottom: var(--border-default);
	}

	ul.content-list,
	.wp-block-post-template {
		list-style: none;
		padding-left: 0;
		margin: var(--space) auto 0;

		li.content-list-item {
			margin-top: var(--space-narrow);
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			column-gap: var(--space);
			padding: var(--space-narrow);
			border-radius: var(--radius-small);

			&:has(.content-list-meta, .content-list-excerpt) {
				align-items: flex-start;
			}

			a:has(.content-list-avatar) {
				flex: 0 0 4em;
				margin-top: 0.5rem;
				max-width: 20%;

				.content-list-avatar {
					border-radius: var(--radius);
					overflow: hidden;
					width: 100%;
					aspect-ratio: 1 / 1;

					img {
						height: 100%;
						width: 100%;
						object-fit: cover;
					}
				}
			}

			.content-list-content {
				flex: 1 1 auto;

				.content-list-title,
				a.content-list-title {
					color: var(--color-heading);
					font-size: calc(1rem * var(--heading-ratio));
					font-weight: 500;
					line-height: 1.35;
				}

				.content-list-meta {
					.post-meta {
						font-size: 0.85rem;

						a {
							display: inline-block;
						}
					}

					.post-meta-category {
						a:not(:last-child)::after {
							content: "|";
						}
					}
				}

				.content-list-excerpt {
					font-size: 0.85rem;
					opacity: 0.85;
				}
			}

			&:not(:has(.content-list-avatar))::before {
				content: '';
				display: inline-block;
				flex: 0 0 36px;
				align-self: flex-start;
				width: 36px !important;
				height: 24px !important;
				background-color: var(--color-global);
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 146.1'%3E%3Cpath d='M4.24,132.81c20.83-14.57,51.24-28.37,100.44-7.03,39.85,17.29,72.71-1.92,100.46,1.5-28.63,6.08-49.86,32.88-116.82,9.24-21.66-7.65-49.58-19.94-84.09-3.71ZM118.86,125.79c43.19,14.82,74.63-19.81,124.85,8.31-58.4-41.53-90.73-6.77-124.85-8.31ZM243.22,33.98l-83,18.2,8.25,13.85,74.75-32.05ZM89.78,52.19L6.78,33.98l74.75,32.05,8.25-13.85Z'/%3E%3Cpath opacity='0.75' d='M128.48,83.17L126.49,0l39.86,66.94-37.87,16.24ZM131.51,87.54l39.38,23.16c5.2-.9,10.62-1.48,16.38-1.48,5.19,0,10.36.51,15.53,1.49l47.2-78.22-118.49,55.04ZM105.97,121.56h13.05l.03-.17c.68.03,1.36.05,2.03.05h0c9.04,0,18.3-2.64,28.11-5.42,6.09-1.73,12.29-3.49,18.83-4.79l-43.04-21.73-46.11,23.29c8.75,1.85,17.8,4.78,27.09,8.78ZM57.22,110.4c6.2,0,12.61.64,19.2,1.89l42.07-24.75L0,32.5l47.34,78.45c3.16-.35,6.45-.55,9.87-.55ZM121.52,83.17L123.51,0l-39.86,66.94,37.87,16.24Z'/%3E%3C/svg%3E");
				mask-repeat: no-repeat;
				mask-size: contain;
			}

			&:hover {
				box-shadow: inset 600px 0 0 oklch(from var(--color-global) 0.65 c h);
				transition-duration: 0.75s !important;

				* {
					color: var(--color-negative-text) !important;
				}
				&:not(:has(.content-list-avatar))::before {
					background-color: var(--color-negative-text);
				}
			}
		}
	}
}

/* The slide */
.swiper-wrapper:has(.below-wave-container) {
	align-items: stretch;

	.swiper-slide {
		align-self: stretch;
	}
}

.slider-content-zone {
	position: relative;
	width: 100%;
	height: 100%;
}