@import url('./resources/fonts/stag/font.css');
@import url('./resources/fonts/rama-gothic-e/font.css');
@import url('./resources/fonts/stag-sans/font.css');


:root {

	--max-width: 1280px;
	--padding: 20px;
	--accent: red;
	--accent-text: white;
	--background: white;
	--color: black;
	--link: blue;
	--background-accent: #F7F7F7;
	--background-accent-text: black;
	--background-inverse: #000033;
	--background-inverse-text: white;
	--background-inverse-accent: #0A0A95;
	--background-inverse-accent-text: white;
	--font-scale: 1;
	--gutter: max(var(--padding), calc((100vw - var(--max-width)) / 2));

	--font-serif: 'Stag', serif;
	--font-sans: 'Stag Sans', sans-serif;
	--font-accent: 'Rama Gothic E', Impact;

	--loader-white: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%201%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%200.72500%200.50000%20L%200.90000%200.50000%22%20style%3D%22animation-delay%3A%20-1s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.68928%200.62164%20L%200.83650%200.71626%22%20style%3D%22animation-delay%3A%20-0.9090909090909091s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.59347%200.70467%20L%200.66617%200.86385%22%20style%3D%22animation-delay%3A%20-0.8181818181818181s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.46798%200.72271%20L%200.44307%200.89593%22%20style%3D%22animation-delay%3A%20-0.7272727272727273s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.35266%200.67004%20L%200.23806%200.80230%22%20style%3D%22animation-delay%3A%20-0.6363636363636364s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.28411%200.56339%20L%200.11620%200.61269%22%20style%3D%22animation-delay%3A%20-0.5454545454545454s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.28411%200.43661%20L%200.11620%200.38731%22%20style%3D%22animation-delay%3A%20-0.4545454545454546s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.35266%200.32996%20L%200.23806%200.19770%22%20style%3D%22animation-delay%3A%20-0.36363636363636365s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.46798%200.27729%20L%200.44307%200.10407%22%20style%3D%22animation-delay%3A%20-0.2727272727272727s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.59347%200.29533%20L%200.66617%200.13615%22%20style%3D%22animation-delay%3A%20-0.18181818181818177s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.68928%200.37836%20L%200.83650%200.28374%22%20style%3D%22animation-delay%3A%20-0.09090909090909094s%3B%22%20%2F%3E%3Cstyle%3E%0A%09%09%09%40keyframes%20fader%20%7B%20to%20%7B%20stroke-opacity%3A%20.25%3B%20%7D%20%7D%0A%09%09%09path%20%7B%0A%09%09%09%09stroke%3A%20white%3B%0A%09%09%09%09stroke-width%3A%200.1%3B%0A%09%09%09%09stroke-linecap%3A%20round%3B%0A%09%09%09%09animation%3A%20fader%201s%20infinite%20linear%3B%0A%09%09%09%7D%0A%09%09%3C%2Fstyle%3E%3C%2Fsvg%3E');

}

*, *:before, *:after {
	box-sizing: border-box;;
}
html, body {
	height: 100%;
}
body {
	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
	font-family: var(--font-serif);
	font-size: calc(var(--font-scale,1) * 20px);
	color: var(--color);
	background: var(--background-inverse);
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
body, h1, h2, blockquote, figure, p, ul, li {
	padding: 0;
	margin: 0;
}
ul, li {
	list-style: none;
}
main {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
main > * {
	overflow: hidden;
	color: var(--color);
	background: var(--background);
}
a {
	color: var(--link);
}

/**************/
/*** HEADER ***/
/**************/

header {
	display: grid;
	flex-direction: column;
	align-items: center;
	min-height: 50vh;
	grid-template:
		"video" 25vh
		"title" auto
		"subtitle" auto
		"content" 1fr
	/ 100%;
	overflow: hidden;
	position: relative;
}
header > * {
	position: relative;
	z-index: 3;
}
header p {
	max-width: calc(var(--max-width) * .8);
	padding: var(--padding);
	margin: auto;
	grid-area: content;
}
header:after,
header hls-video,
header > img {
	grid-area: video;
	grid-row: 1 / span 4;
	z-index: 1;
	width: auto;
	max-height: 50vh;
	align-self: start;
	--object-position: 50% 15%;
}
header > img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: 50% 15%;
	position: absolute;
	left: 0;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
}
header:after {
	position: relative;
	z-index: 2;
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent, var(--background));
}
header h1,
header h2 {
	text-align: center;
	opacity: 1;
	transform: none;
	transition: transform 1s 1s, opacity .5s 1s;
}
header h1 {
	position: relative;
	grid-area: title;
	min-height: 10vh;
	color: transparent;
	background: url(./resources/logo-hln.svg) no-repeat 50% 50% / contain;
}
header h1 a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	color: transparent;
	opacity: 0;
}
header h2 {
	grid-area: subtitle;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: calc(var(--font-scale) * 30px);
	color: var(--accent);
	padding: 5vh var(--padding) 5vh var(--padding);
	transition-delay: 1.3s;
}
header p:first-letter {
	float: left;
	font-size: 2.25em;
	padding-top: .15em;
	padding-right: .1em;
	line-height: .75em;
}
header:not(.is-intersecting) h1,
header:not(.is-intersecting) h2 {
	transform: scale(1.5);
	opacity: 0;
}

#subscribe {
	position: absolute;
	top: var(--padding,20px);
	right: var(--padding,20px);
	z-index: 50;
	background: white;
	color: black;
	padding: .15em .5em .1em .5em;
	font-family: var(--font-accent, Impact);
	text-transform: uppercase;
	display: block;
	text-decoration: none;
	font-size: 24px;
	border-radius: 6px;
	transition: background .1s, color .1s, transform .4s;
}
#subscribe:hover {
	background: var(--accent, red);
	color: var(--accent-text, white);
	transform: translateY(-2px);
}

/**************************/
/*** SECTION/BLOCKQUOTE ***/
/**************************/

section,
blockquote {
	--content: 1fr;
	--figure: .75fr;
	--j: end;
	--g: 10vw;
	--accent-line-height: calc(100% - var(--padding));;
	display: grid;
	grid-template:
		". .       . .      ." 1fr
		". .       . figure figure" auto
		". title   . figure figure" auto
		". content . figure figure" auto
		". .       . figure figure" auto
		". .       . .      ." 1fr
	/	var(--gutter) var(--content) var(--g) var(--figure) var(--gutter);
	padding: var(--padding) 0;
	overflow: hidden;
}
section.left,
blockquote.left {
	--j: start;
	display: grid;
	grid-template:
		".      .      .   .       ." 1fr
		"figure figure .   .       ." auto
		"figure figure .   title   ." auto
		"figure figure .   content ." auto
		"figure figure .   .       ." auto
		".      .      .   .       ." 1fr
	/	var(--gutter) var(--figure) var(--g) var(--content) var(--gutter);
}
section figure,
blockquote figure {
	grid-area: figure;
}
section h2,
section p,
blockquote h2,
blockquote p {
	padding: 0 calc(var(--padding) * 2) var(--padding) calc(var(--padding) * 2);
	width: 100%;
	justify-self: var(--j);
}
section h2,
blockquote h2 {
	grid-area: title;
	transform: translateX(100px);
	opacity: 0;
	transition: transform .4s, opacity .4s;
}
section.is-intersecting h2,
blockquote.is-intersecting h2 {
	opacity: 1;
	transform: none;
	transition: transform .4s .25s, opacity .4s .25s;
}
section p,
blockquote p {
	grid-area: content;
}
section h2,
blockquote h2 {
	padding-top: var(--padding);
	color: var(--accent);
	font-weight: 600;
	font-size: calc(var(--font-scale,1) * 32px);
}
section p,
blockquote p {
	padding-bottom: var(--padding);
	position: relative;
	font-size: calc(var(--font-scale,1) * 16px);
	line-height: calc(var(--font-scale,1) * 20px);
}
section p:after,
blockquote p:after {
	content: '';
	position: absolute;
	left: var(--padding);
	top: 0;
	width: 2px;
	height: var(--accent-line-height);
	background: var(--accent);
	height: calc(min(1,calc(var(--parallax-top,0) * 1.5)) * var(--accent-line-height));
}

/***************/
/*   SECTION   */
/***************/

section figure figcaption {
	display: none;
}
section figure {
	grid-row: 1 / span 6;
	overflow: hidden;
}
section figure img,
section figure hls-video,
section figure video {
	--y: calc(var(--parallax-top,0) * .15 + 1);
	transform: scale(var(--y))
}
section:nth-child(even) figure img,
section:nth-child(even) figure hls-video,
section:nth-child(even) figure video {
	--y: calc(1.15 - var(--parallax-top,0) * .15);
}
section figure.phone {
	--tx: calc(min(10%, 100px) + var(--parallax-top,0) * -1 * min(40%, 100px));
	--s: calc(.8 + var(--parallax-top,0) * .15);
	transform: translateX(var(--tx)) scale(var(--s));
}
section figure.phone img,
section figure.phone hls-video,
section figure.phone video {
	transform: none;
	--object-fit: contain;
}
section p,
section h2 {
	max-width: calc(var(--max-width) * .75);
}

/***************/
/*   FIGURE    */
/***************/

figure,
figure img,
figure hls-video,
figure video {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 50vh;
	align-self: center;
}
figure img,
figure hls-video,
figure video {
	object-fit: cover;
}
figure.contain img,
figure.contain hls-video,
figure.contain video {
	object-fit: contain;
}
figure figcaption strong,
figure figcaption em {
	font: inherit;
	font-family: var(--font-sans);
	font-weight: 500;
}
figure figcaption em {
	font-family:  var(--font-accent);
	text-transform: uppercase;
	color: var(--accent);
}

/**************/
/* BLOCKQUOTE */
/**************/

blockquote {
	height: auto;
	min-height: 0;
	color: var(--background-accent-text, black);
	position: relative;
	--figure: auto;
	--content: 2fr;
}
blockquote:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(100% - var(--padding) * 2);
	background: var(--background-accent, lightgray);
	content: '';
}
blockquote p,
blockquote h2,
blockquote figure {
	position: relative;
	z-index: 2;
}
blockquote figure,
blockquote figure img,
blockquote figure hls-video,
blockquote figure video {
	height: auto;
}
blockquote figure {
	--image-width: 200px;
	grid-area: figure;
	grid-column-end: span 1;
	justify-self: end;
	display: grid;
	grid-template: "c" auto / auto;
	width: auto;
}
blockquote figure img,
blockquote figure hls-video,
blockquote figure video,
blockquote figure figcaption {
	grid-area: c;
	justify-self: end;
}
blockquote figure figcaption {
	padding-right: calc(var(--image-width) * .85);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
blockquote figure img,
blockquote figure hls-video,
blockquote figure video {
	width: var(--image-width);
	border-radius: 20px;
	margin-bottom: var(--padding);
}
blockquote + section {
	padding-top: 0;
}

blockquote:first-of-type h2 {
	padding-top: calc(var(--padding) * 3);
}

/**************************/
/* BLOCKQUOTE (signature) */
/**************************/

blockquote:last-of-type {
	min-height: 25vh;
	--g: 0;
}
blockquote:last-of-type:after {
	content: none;
}
blockquote:last-of-type p {
	text-align: right;
	font-size: calc(var(--font-scale) * 25.6px);
	line-height: calc(var(--font-scale) * 32px);
	font-weight: 600;
}
blockquote:last-of-type p:after {
	right: var(--padding);
	left: auto;
	background: currentColor;
}
blockquote:last-of-type figure {
	display: flex;
	flex-direction: column;
	justify-self: center;
	padding: var(--padding);
	grid-gap: 0;
}
blockquote:last-of-type figure figcaption {
	padding-right: 0;
	font-size: calc(var(--font-scale) * 16px);
}
blockquote:last-of-type figure img,
blockquote:last-of-type figure hls-video,
blockquote:last-of-type figure video {
	max-width: 150px;
	margin-bottom: .25em;
}

/******************/
/*    EXPERTEN    */
/******************/

#experts ul {
	--width: 30vh;
	--background: var(--background-inverse);
	--color: var(--background-inverse-text);
	grid-area: content;
	grid-column: 1 / span end;
	height: 60vh;
	background: black;
	width: 100%;
	display: flex;
	overflow: auto;
}
#experts ul figure {
	--a: var(--length, 1);
	--i: var(--index, 1);
	--t: calc((var(--a, 1) - var(--i, 1)) / var(--a, 1));
	flex: 1 0 var(--width);
	width: 100%;
	height: 100%;
	max-height: 100%;
	min-width: 250px;
	overflow: visible;
	position: relative;
	background: var(--background);
	z-index: 8;
	order: 2;
	transition: margin-right 2s;
}
#experts ul figure.active {
	margin-right: 5vw;
}
#experts ul figure.active a {
	cursor: pointer;
}
#experts ul figure.active:hover figcaption {
	transform: translateY(-.25em);
}
#experts ul figure figcaption:after {
	content: '';
	content: none;
	width: 2em;
	height: 2em;
	background: url(./resources/icons/search.svg) no-repeat 50% 50% / auto 1em;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-100%);
	transition: opacity .4s, transform .4s;
	filter: invert(100%);
	margin-left: auto;
}
#experts ul figure.active:has(a[href*="insta"]) figcaption:after {
	background-image: url(./resources/icons/instagram.svg);
}
#experts ul figure.active figcaption:after {
	opacity: 1;
	transform: none;
}
#experts ul figure:after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: red;
	border-radius:0;
	left: 50%;
	right: auto;
	top: 0;
	bottom: auto;
	width: 80%;
	height: 100%;
	transform: none;
	background: linear-gradient(-90deg, var(--background), var(--background) 50%, transparent);
}
#experts ul figure img,
#experts ul figure hls-video,
#experts ul figure video {
	position: absolute;
	transform: none;
	object-position: 100% 50%;
	height: 100%;
	width: auto;
	right: 0;
	top: 0;
	pointer-events: none;
	max-height: 100%;
}
#experts ul figure a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: default;
}
#experts ul figure figcaption {
	transition: transform .4s;
	font-family: var(--font-sans);
	font-weight: 600;
	position: absolute;
	width: 80%;
	bottom: 15%;
	left: 20%;
	z-index: 10;
	display: flex;
	flex-direction: column;
	grid-gap: 0;
	color: var(--color);
	--shadow: 0 .5em 2em rgba(0,0,0,.25);
	text-shadow: var(--shadow), var(--shadow), var(--shadow), var(--shadow);
	justify-content: start;
	align-items: start;
}
#experts ul figure figcaption em,
#experts ul figure figcaption strong {
	display: flex;
	flex-wrap: wrap;
}
#experts ul figure figcaption span {
	transition: transform .4s .4s, opacity .4s .4s;
	padding: .3em .15em .2em .25em;
	background: var(--accent);
	color: var(--accent-text);
	display: inline;
}
#experts ul figure figcaption span:last-of-type {
	padding-right: .25em;
}
#experts ul figure figcaption em span {
	padding: .1em .25em;
	background: var(--background-inverse-accent);
	color: var(--background-inverse-accent-text);
}
#experts ul figure:not(.is-intersecting) figcaption span {
	transform: translateY(1em);
	opacity: 0;
}
#experts ul figure:not(.is-intersecting) figcaption em {
	transform: translateY(-1em);
	opacity: 0;
}

#experts ul button {
	display: block;
	flex: 0 0 auto;
	appearance: none;
	border: none;
	background: none;
	width: 52px;
	height: 100%;
	font: inherit;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	overflow: visible;
	z-index: 100;
	padding: 0;
	transition: opacity .4s;
	color: transparent;
}
#experts ul button[hidden]{
	opacity: 0;
	pointer-events: none;
}
#experts ul button:before,
#experts ul button:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 15vw;
	height: 100%;
	display: block;
	z-index: 10;
	transform: translateY(-50%);
	transition: opacity .4s;
}
#experts ul button:hover:after {
	--translate-y: translateY(-50%) translateY(-10px);
}
#experts ul button:before {
	mix-blend-mode: overlay;
	opacity: .65;
	background: linear-gradient(90deg, var(--background), transparent);
}
#experts ul button:after {
	background: url(./resources/icons/arrow.svg) no-repeat 25% 50% / 25% auto;
	filter: invert(100%);
	height: 4em;
	cursor: pointer;
}
#experts ul button[value="next"]{
	right: 0;
	order: 4;
}
#experts ul button[value="next"]:before,
#experts ul button[value="next"]:after {
	right: 0;
	left: auto;
	transform: translateY(-50%) rotateZ(180deg);
}
#experts ul button[value="previous"]{
	left: 0;
}
#experts ul button[hidden]{
	opacity: 0;
}
#experts ul.is-loading {
	background-image: var(--loader-white);
	background-size: 20px 20px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
#experts ul.is-loading figure {
	transform: translateX(calc(var(--t,1) * 100%)) !important;
}
#experts ul.is-loading figure,
#experts ul.is-loading button {
	opacity: 0 !important;
	pointer-events: none;
}

/******************/
/*   PROMO VIDEO  */
/******************/

#promo {
	display: flex;
	flex-direction: column;
}
#promo hls-video {
	--object-fit: contain;
	object-fit: contain;
	height: auto;
	flex: 0 0 auto;
}

/*********************/
/* NEWSLETTER FOOTER */
/*********************/

#newsletter {
	width: 100%;
	padding: calc( var(--padding,20px) * 2) var(--padding,20px);
	box-sizing: border-box;
	background: #000033;
	color: white;
	display: flex;
	flex-direction: column;
	grid-gap: 1em;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: "Stag Sans", sans-serif;
	min-height: 25vh;
}
#newsletter p {
	font-size: 22px;
	font-weight: 600;
}
#newsletter a {
	padding: .5em 1em;
	background: var(--accent, red);
	color: var(--accent-color, white);
	display: block;
	text-decoration: none;
	border-radius: 8px;
}
#newsletter a:hover {
	transform: translateY(-2px);
}
#newsletter #copyright {
	width: 100%;
	color: transparent;
	background: url(./resources/logo-hln.svg) no-repeat 50% 50% / contain;
	border-radius: 0;
	height: 3em;
	margin-top: 1em;
}

/********************/
/* SCROLL INDICATOR */
/********************/

@keyframes animate-pointer {
	25% { transform: translateY(-20%); }
}
@keyframes animate-touch {
	20% { transform: translateY(-30%); }
}
#scroll-indicator {
	cursor: pointer;
	appearance: none;
	font: inherit;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 100;
	width: 55px;
	height: 55px;
	color: transparent;
	border: none;
	animation: animate-pointer 3s infinite;
	transition: opacity 1s;
	background: url(./resources/icons/scroll-desktop.svg) no-repeat 50% 50% / auto 2em;
}
@media (pointer:coarse){
	#scroll-indicator {
		animation-name: animate-touch;
		background-image: url(./resources/icons/scroll-mobile.svg);
	}
}
#scroll-indicator:not(.visible):not(:hover),
#scroll-indicator[hidden]{
	display: block;
	opacity: 0;
}


#app p:after {
	display: none;
}
a.store {
	display: inline-block;
}
a.store img {
	display: block;
	height: 3em;
	width: auto;
}

/******************/
/* FOOTER (video) */
/******************/

/* footer {
	display: grid;
	grid-template:
		". video ." auto
		"figure figure figure" auto
	/ var(--gutter) 1fr var(--gutter);
	padding: var(--padding) 0 0 0;
	grid-gap: var(--padding);
}
footer hls-video {
	grid-area: video;
	width: 100%;
}
footer figure {
	grid-area: figure;
} */

video,
hls-video {
	height: 100%;
	display: block;
}

@media all and (max-width:750px){

	header {
		min-height: 50vh;
	}

	blockquote:after {
		height: 100%;
	}
	blockquote figure img,
	blockquote figure hls-video {
		margin-bottom: 0;
		max-width: 50%;
	}

	section p:after {
		height: calc(min(1,calc(var(--parallax-top,0) * 2)) * var(--accent-line-height));
		bottom: 0;
		top: auto;
	}

	section,
	blockquote,
	section.left,
	blockquote.left {
		--content: 1fr;
		--gutter: var(--padding);
		--j: center;
		--accent-line-height: 100%;
		--gutter: 0px;
		display: grid;
		grid-template:
			". title   ." auto
			". content ." auto
			". figure  ." auto
			". .  ." 1fr
		/	var(--gutter) var(--content) var(--gutter);
		min-height: 0;
	}
	figure,
	figure img,
	figure hls-video {
		width: 100%;
		height: auto;
	}
	section figure {
		grid-area: figure;
		max-height: none;
		height: auto;
		width: 100%;
		margin: 0 auto;
	}
	section figure.phone {
		--tx: calc(5% + var(--parallax-top,0) * -10%);
		width: 50%;
	}
	section figure.phone hls-video {
		height: auto;
		max-height: none;
	}

	blockquote p:after {
		height: calc(100% - var(--padding));
	}
	blockquote:last-of-type p {
		text-align: center;
		margin-bottom: var(--padding);
		padding: var(--padding);
		padding-bottom: calc(var(--padding) * 2);
	}
	blockquote:last-of-type p:after {
		width: 100px;
		height: 3px;
		top: auto;
		right: 50%;
		transform: translateX(50%);
		bottom: 0;
	}

	#experts ul figure {
		--width: 50vw;
	}
	#experts ul figure figcaption {
		left: 0;
		font-size: .8em;
	}
	#experts ul button {
		width: 1.5em;
		word-break: break-all;
	}
	#experts figure figcaption em span {
		padding: .1em .15em;
	}

	#promo {
		height: auto;
		min-height: 0;
	}
	#promo div {
		flex-direction: row;
		justify-content: space-between;
	}
	#promo div:before {
		width: 2em;
		height: 2em;
	}

}
@media (prefers-color-scheme:dark2){

	:root {
		
		--background: #111;
		--color: white;
		--link: rgb(103, 156, 255);
		--background-accent: #2f2f2f;
		--background-accent-text: white;
		--background-inverse: #000033;
		--background-inverse-text: white;

		--loader-white: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%201%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%200.72500%200.50000%20L%200.90000%200.50000%22%20style%3D%22animation-delay%3A%20-1s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.68928%200.62164%20L%200.83650%200.71626%22%20style%3D%22animation-delay%3A%20-0.9090909090909091s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.59347%200.70467%20L%200.66617%200.86385%22%20style%3D%22animation-delay%3A%20-0.8181818181818181s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.46798%200.72271%20L%200.44307%200.89593%22%20style%3D%22animation-delay%3A%20-0.7272727272727273s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.35266%200.67004%20L%200.23806%200.80230%22%20style%3D%22animation-delay%3A%20-0.6363636363636364s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.28411%200.56339%20L%200.11620%200.61269%22%20style%3D%22animation-delay%3A%20-0.5454545454545454s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.28411%200.43661%20L%200.11620%200.38731%22%20style%3D%22animation-delay%3A%20-0.4545454545454546s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.35266%200.32996%20L%200.23806%200.19770%22%20style%3D%22animation-delay%3A%20-0.36363636363636365s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.46798%200.27729%20L%200.44307%200.10407%22%20style%3D%22animation-delay%3A%20-0.2727272727272727s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.59347%200.29533%20L%200.66617%200.13615%22%20style%3D%22animation-delay%3A%20-0.18181818181818177s%3B%22%20%2F%3E%3Cpath%20d%3D%22M%200.68928%200.37836%20L%200.83650%200.28374%22%20style%3D%22animation-delay%3A%20-0.09090909090909094s%3B%22%20%2F%3E%3Cstyle%3E%0A%09%09%09%40keyframes%20fader%20%7B%20to%20%7B%20stroke-opacity%3A%20.25%3B%20%7D%20%7D%0A%09%09%09path%20%7B%0A%09%09%09%09stroke%3A%20black%3B%0A%09%09%09%09stroke-width%3A%200.1%3B%0A%09%09%09%09stroke-linecap%3A%20round%3B%0A%09%09%09%09animation%3A%20fader%201s%20infinite%20linear%3B%0A%09%09%09%7D%0A%09%09%3C%2Fstyle%3E%3C%2Fsvg%3E');
	
	}

	section:has(.phone){
		--background: white;
		--color: black;
	}
	section p:after,
	blockquote p:after {
		background: var(--color);
	}

	blockquote:nth-of-type(2) figure img {
		filter: invert(100%);
	}
	#experts {
		padding-bottom: 0;
	}

}