@font-face {
	font-family: 'Montserrat';
	src: url('/assets/fonts/Montserrat-Black.woff2') format('woff2'),
		url('/assets/fonts/Montserrat-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--ff-text: system-ui, sans-serif;
	--ff-heading: 'Montserrat', Montserrat, Corbel, 'URW Gothic', source-sans-pro,
		sans-serif;

	--fs-300: clamp(0.9rem, 0.86085rem + 0.19566vi, 1.0125rem);
	--fs-400: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
	--fs-500: clamp(1.2rem, 1.0641rem + 0.6796vi, 1.5908rem);
	--fs-600: clamp(1.44rem, 1.1585rem + 1.4075vi, 2.2493rem);
	--fs-700: clamp(1.728rem, 1.2228rem + 2.5262vi, 3.1805rem);
	--fs-800: clamp(2.0736rem, 1.2306rem + 4.2151vi, 4.4973rem);

	--clr-text: hsl(0, 0%, 9%);
	--clr-background: hsl(0, 0%, 97%);
	--clr-primary: #fab700;
	--clr-primary--hover: hsl(61, 100%, 38%);
	--clr-secondary: hsl(323, 53%, 28%);
	--clr-accent: hsl(11, 71%, 55%);

	--header-height: 81.5px;
	--topbar-height: 40px;
}

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

* {
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

img,
svg {
	max-width: 100%;
	display: block;
}

picture > img {
	height: auto;
	width: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

body {
	font-size: var(--fs-400);
	font-family: var(--ff-text);
	letter-spacing: 0.02rem;
	line-height: 1.6;
	color: var(--clr-text);
	background-color: var(--clr-background);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
	font-family: var(--ff-heading);
	line-height: 1.2;
	font-weight: 900;
	text-transform: uppercase;
}

h1,
.h1 {
	font-size: var(--fs-800);
}

h2,
.h2,
.post h1 {
	font-size: var(--fs-700);
}

h3,
.h3,
.post h2 {
	font-size: var(--fs-600);
}

h4,
.h4,
.post h3 {
	font-size: var(--fs-500);
}

p,
.p {
	font-size: var(--fs-400);
	margin-top: 1em;
}

a {
	color: var(--clr-primary);
	text-decoration: none;
	transition: color 0.4s ease;
}

a:hover,
a:focus {
	color: var(--clr-primary);
}

.wrapper {
	width: min(100% - 3em, 1240px);
	margin-inline: auto;
}

.wrapper--narrow {
	width: min(100% - 3em, 90ch);
}
.wrapper--narrower {
	width: min(100% - 3em, 70ch);
}
.page {
	padding-top: 3em;
	padding-bottom: 6em;
	overflow-x: hidden;
}
.edge-extended-left {
	color: var(--clr-text);
	background-color: hsl(0 0 100% / 0.6);
	/* padding-top: 1em; */
	border-radius: 0 0.5em 0.5em 0;
	margin-left: min(calc(-1.5em), calc(-1 * (100vw - 1240px) / 2));
	box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
}

.edge-extended-left__content {
	margin-right: calc((1240px - 100ch) / 2);
	margin-left: max(calc((100vw - 100ch) / 2), 1.5em);
	margin-top: -1em;
}

.wrapper--medium {
	width: min(100% - 3em, 100ch);
}

section {
	padding-block: 3em;
}

.row {
	display: flex;
	gap: var(--gap, 1em);
	justify-content: center;
}
.row > * {
	flex: 1 1 261px;
}
.align-start {
	align-items: flex-start;
}

/* Buttons */

.btn {
	cursor: pointer;
	display: inline-block;
	padding: 0.875em 1.5em;
	border: 1px solid transparent;
	border-radius: 50em;
	margin-top: 1em;
	font-size: 1rem;
	font-family: var(--ff-text);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	transition: all 200ms ease;
}

.btn-primary {
	background-color: var(--clr-primary);
	color: var(--clr-background);
}

.btn-outline {
	color: var(--clr-primary);
	background-color: transparent;
	border: 2px solid var(--clr-primary);
	transition: transform 0.3s ease;
}

a.btn:hover,
a.btn:focus {
	transform: scale(1.01);
	box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
}

a.btn-primary:hover,
a.btn-primary:focus {
	color: var(--clr-background);
}

.hr-custom {
	border-top: rgb(220, 220, 220);
}

blockquote {
	display: block;
	margin-block: 1.5em;
	border-left: 2px solid var(--clr-primary);
	font-weight: 300;
	padding-left: 1em;
	font-style: italic;
	position: relative;
	font-size: var(--fs-500);
}

/* Forms */

input,
textarea,
select {
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px solid hsl(0, 100%, 5%, 0.1);
	border-radius: 0.25em;
}

textarea {
	aspect-ratio: 3 / 1;
	min-height: 200px;
	resize: vertical;
}

form > * + * {
	margin-top: 1.5em;
}

form {
	max-width: 50ch;
	margin-inline: auto;
}

.form-group > * + * {
	margin-top: 0.5em;
}

.contact-form,
.newsletter-form {
	position: relative;
	max-width: 650px;
	padding: 2.25em;
	border-radius: 0.25em;
	margin-inline: auto;
	margin-top: 3em;
	background: white;
	box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}
.contact-form::after {
	content: '';
	background-image: url(/assets/img/aoli-contact.png);
	width: 400px;
	aspect-ratio: 2 / 3;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: -350px;
	z-index: -1;
}
.card {
	border: 1px solid var(--clr-background);
	border-radius: 4px;
	padding: 1.5em;
	background-color: hsla(0, 0%, 100%, 0.05);
	padding: 1.5em 2.25em;
	border-radius: 12px;
}

.img-s {
	width: 100%;
	max-width: 150px; /* Example smaller width */
}
.img-m {
	width: 100%;
	max-width: 225px; /* One-quarter of 900px */
}
.img-l {
	width: 100%;
	max-width: 300px; /* One-third of 900px */
}
.img-xl {
	width: 100%;
	max-width: 450px; /* Half of 900px */
}
.img-xxl {
	width: 100%;
	max-width: 700px;
}
.float-right {
	margin-inline: 0;
	margin-bottom: 1em;
	float: none;
}
.transparent-bg {
	mix-blend-mode: multiply;
}

/* Tables */

table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var(--fs-300);
	margin-top: 3em;
}

th,
td {
	padding: 0.5rem;
	text-align: left;
	border-right: 1px solid #ddd;
}

tr:nth-child(even) {
	background: #fff;
}

td:last-child,
th:last-child {
	border-right: none;
}

th:first-child,
td:first-child {
	font-weight: bold;
}

/* Utilities */

.balance {
	text-wrap: balance;
}
.pretty {
	text-wrap: pretty;
}
.callout {
	text-transform: uppercase;
	color: var(--clr-primary);
	font-weight: 700;
}
.flow > * + * {
	margin-top: var(
		--flow-space,
		1em
	); /*  applies margin to everything except the first child */
}
.bold {
	font-weight: 700;
}
.img-horizontal {
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
.fw-normal {
	font-weight: 400;
}
.clearfix {
	overflow: auto;
}
.hug {
	margin-top: 0;
}
.link-unstyled {
	color: unset;
	text-decoration: none;
}
.list-center {
	display: block;
	margin-inline: auto;
	width: fit-content;
}
.list-checkmark {
	list-style: none;
	padding: 0;
}
.list-checkmark li {
	margin-top: 0.5em;
	padding-left: 1.75em;
	position: relative;
}
.list-checkmark li::before {
	content: '\2713'; /* Unicode for checkmark */
	position: absolute;
	top: 5px;
	left: 0;
	width: 20px; /* Width of the circle */
	height: 20px; /* Height of the circle */
	background-color: white; /* Background color of the circle */
	border-radius: 50%; /* Make the border a circle */
	display: flex; /* Center the checkmark inside the circle */
	align-items: center; /* Center the checkmark inside the circle */
	justify-content: center; /* Center the checkmark inside the circle */
	color: var(--clr-primary);
	font-size: 14px; /* Adjust size of the checkmark */
}
.list-style-none {
	list-style: none;
	padding-left: 0;
}
.mt-3 {
	margin-top: 1em;
}
.mt-4 {
	margin-top: 1.5em;
}
.mt-5 {
	margin-top: 3em;
}
.mt-6 {
	margin-top: 6em;
}
.mx-auto {
	margin-inline: auto;
}
.no-border {
	border: 0 !important;
}
.unset-case {
	text-transform: unset;
}
.text-center {
	text-align: center;
}
.text-primary {
	color: var(--clr-primary);
}
.relative {
	position: relative;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align: justify;
}
.uppercase {
	text-transform: uppercase;
}
.visually-hidden {
	position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.img-rounded {
	border-radius: 1em;
}
.newsletter-cta {
	width: 70ch;
	max-width: 100%;
	margin-inline: auto;
}
/* Homepage */

section.hero {
	--flow-space: 1.5em;
	padding-top: calc(6em + var(--header-height));
	padding-bottom: 10em;
	/* background-image moved to ::before */
	color: var(--clr-background);
	position: relative;
}

section.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(/assets/graphics/noise.svg),
		linear-gradient(135deg, #6f2252 0%, #da8057 100%);
	filter: contrast(140%);
	z-index: -1;
}
.hero__heading {
	text-transform: unset;
}
.hero__img {
	display: none;
}
.hero__tagline {
	text-wrap: pretty;
}

section.value-prop {
	padding-block: 3em;
	background-color: rgb(172, 172, 172);
	background-image: url(/assets/img/microphone-bg-image.jpeg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

.value-prop__content h2 {
	color: var(--clr-accent);
}

.bg-gradient,
.well {
	background-image: url(/assets/graphics/noise.svg),
		linear-gradient(135deg, #6f2252 0%, #da8057 100%);
	filter: contrast(120%);
	color: var(--clr-background);
}
.well {
	border-radius: 12px;
	padding: 1.5em 2.25em;
}
.well a {
	color: var(--clr-background);
}
.well-glass {
	background-color: hsla(0, 0%, 100%, 0.05);
	padding: 1.5em 2.25em;
	border-radius: 12px;
	margin-inline: auto;
}
.divider-img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top 32%;
	min-height: 280px;
}
.bg-mic-software-grain {
	background-image: url(/assets/img/microphone-software-grain.webp);
}
.bg-holding-mic-pop {
	background-image: url(/assets/img/holding-mic-and-pop-filter.webp);
	background-position: bottom;
}
.bg-podcast-editor {
	background-image: url(/assets/img/podcast-editor.webp);
	background-position: top;
}
.bg-home-podcast {
	background-image: url(/assets/img/home-podcast-mic-setup.webp);
}

section.video-banner {
	--video-height: 300px;
	padding-block: 0;
	height: var(--video-height, 300px);
}
section.video-banner video {
	width: 100%;
	height: var(--video-height);
	object-fit: cover;
	bottom: 0;
}

section.samples {
	padding-block: 6em;
}

.samples__tagline {
	text-wrap: pretty;
}

.samples__content {
	display: grid;
	align-items: center;
	gap: 1em;
}

.samples__players iframe {
	display: block;
	margin-inline: auto;
	max-width: 100%;
}

.spotify-player + .spotify-player {
	margin-top: 2.25em;
}

section.goals {
	padding: 0;
}
.goals > * {
	align-self: center;
	padding: 6em 3em;
}
.goals > * + * {
	background-color: rgba(229, 229, 227, 0.05);
}

section.testimonials {
	--img-height: 120px;
	padding-top: calc(3em + var(--img-height) * 1.2);
}
.testimonial__img {
	max-height: var(--img-height);
}
.testimonial-container {
	position: relative;
	margin-inline: auto;
	max-width: 50ch; /* Limits width for the testimonials */
	min-height: 440px;
}
.testimonial {
	position: absolute; /* Prevent stacking */
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	background-color: hsla(0, 0%, 100%, 0.05);
	padding: 1.5em 2.25em;
	border-radius: 12px;
	margin-inline: auto;

	transition: opacity 1s ease-in-out;
	z-index: 1;
}
.testimonial-animated {
	display: none; /* Hide by default */
	opacity: 0;
}

.testimonial__img {
	position: absolute;
	left: 50%;
	height: var(--img-height);
	transform: translateX(-50%);
	top: calc(var(--img-height) * -1);
	z-index: -99;
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -30px;
	padding: 16px;
	color: #888;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -30px;
	padding: 16px;
	color: var(--clr-background);
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.prev {
	left: calc((100% - 50ch) / 2);
}

/* Position the "next button" to the right */
.next {
	position: absolute;
	right: calc((100% - 50ch) / 2);
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	opacity: 0.8;
	color: var(--clr-background);
}

/* The dot/bullet/indicator container */
.dot-container {
	text-align: center;
	padding: 20px;
	position: relative;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 10px;
	width: 10px;
	margin: 0 2px;
	background-color: var(--clr-background);
	opacity: 0.5;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.dot.active,
.dot:hover {
	background-color: var(--clr-background);
	opacity: 1;
}

.testimonial__text {
	flex: 1 1 30ch;
}

.testimonial a:hover,
.testimonial a:focus {
	color: var(--clr-primary);
}

.testimonial__img {
	max-width: 150px;
	border-radius: 2px;
}

.cz__testimonial {
	margin-top: 0;
}

/* Revolving Banner */

.revolving-text__wrapper {
	width: calc(100% - 3em);
	margin-inline: auto;
	-webkit-mask: linear-gradient(
		90deg,
		transparent,
		white 10%,
		white 90%,
		transparent
	);
	mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}
.revolving-text {
	text-transform: uppercase;
	font-weight: 900;
	font-size: var(--fs-700);
	padding-block: 1em;
	overflow: hidden;
	user-select: none;
	display: flex;
	gap: 1rem;
}

.revolving-text ul {
	list-style: none;
	padding-left: 0;
	flex-shrink: 0;
	min-width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
}

[data-animated='true'] ul {
	animation: scroll 50s linear infinite;
}

.revolving-text li {
	opacity: 0.2;
}

@keyframes scroll {
	to {
		transform: translateX(calc(-100% - 1rem));
	}
}

/* Steps section */

section.steps .wrapper {
	display: grid;
	grid-template-rows: auto;
	gap: 5em;
}

.steps__tagline {
	color: var(--clr-primary);
	font-weight: 900;
	text-transform: uppercase;
}
.circle::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 60px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url('/assets/img/circle-shape.png');
	background-size: contain; /* or 'contain' if you want it to fit */
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1;
}
.steps__list li {
	font-weight: 900;
	font-size: calc(var(--fs-600) * 0.8);
	display: flex;
	align-items: center;
	gap: 0.5em;
	line-height: 1.3;
	border-bottom: 2px solid var(--clr-primary);
	padding-bottom: 0.25em;
	margin-top: 1rem;
}
.steps__number {
	color: var(--clr-primary);
}
section.expert {
	color: white;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.2);
}
section.expert {
	background-image: url('/assets/img/pop-filter.webp');
}
section.expert--services {
	background-image: url('/assets/img/micropone-closeup-blur.webp');
}
section.expert h2 {
	color: #995d73;
}

.section-action {
	--gap: 3em;
	padding-block: 6em;
}
.section-action .pill {
	color: var(--clr-secondary);
	font-size: var(--fs-300);
	border-bottom: 5px solid var(--clr-primary);
	display: inline-block;
	letter-spacing: 1.5px;
}

section.get-started {
	background: url('/assets/img/podcast-microphone-filter.webp');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	color: white;
	box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.2);
}
.card-blur {
	background-color: rgba(0, 0, 0, 0.2);
}
@supports (backdrop-filter: blur(05px)) {
	.card-blur {
		backdrop-filter: blur(05px);
		background-color: hsla(0, 0%, 100%, 0.05);
	}
}

/* Newsletter */

.newsletter-wrapper {
	max-width: 70ch;
	margin-inline: auto;
}

.article-snippet-list {
	list-style: none;
	padding-left: 0;
}

.article-snippet {
	margin-top: 4.5em;
}

.article-snippet__img {
	padding: 1em;
}

.article-snippet__img img {
	border-radius: 50em 50em 2.5em 2.5em;
}

.blog-img {
	border-radius: 0.25em;
	box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}

.post.flow h2,
.post.flow h3 {
	--flow-space: 1.5em;
}

/* Navigation */

.header {
	position: static;
	width: 100%;
	z-index: 1;
}

.header--home {
	position: absolute;
	top: calc(1rem + var(--topbar-height, 40px));
}

.header--blog,
.header--home {
	color: white;
}

.header__wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

.nav-toggle {
	display: none;
	z-index: 99;
}

.nav-toggle .icon-close {
	display: none;
}

.header__logo svg {
	max-width: 100px;
	height: auto;
	margin-block: 1em;
	fill: var(--clr-text);
}

.header--home .header__logo svg,
.header--blog .header__logo svg {
	fill: white;
}

.nav__list,
.nav-drop__btn {
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: 1.5em;
	text-transform: uppercase;
	font-weight: 500;
}

.nav__link {
	color: var(--clr-text);
	transition: color 0.3s ease;
}

.header--home .nav__link,
.header--blog .nav__link,
.header--home .nav-drop__btn,
.header--blog .nav-drop__btn {
	color: var(--clr-background);
}

.nav__link--accent {
	font-weight: bold;
}

.nav__link:hover,
.nav__link:focus {
	color: var(--clr-primary);
}
.nav-drop__btn {
	background: transparent;
	border: none;
	gap: 0.5em;
	margin-inline: auto;
	padding: 0;
}
.nav-drop__content {
	padding: 0.75em;
	border-radius: 0 0 0.25em 0.25em;
	font-weight: 300;
	text-transform: initial;
	text-align: center;
}
.nav-drop__content li + li {
	margin-top: 0.5em;
}
.nav-drop:hover .nav-drop__content {
	display: block;
}

.topbar {
	background-color: #bc665c;
	backdrop-filter: blur(8px);
	text-transform: uppercase;
	width: 100%;
	z-index: 1000;
	/* border-bottom: 1px solid hsla(67, 100%, 67%, 0.6); */
}

.topbar p {
	font-size: 12px;
	/* font-weight: 700; */
	color: var(--clr-background);
}
.topbar a {
	text-decoration: underline;
	color: #ecff58;
	font-weight: 900;
}
.topbar .wrapper {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	padding: 1rem 0;
	z-index: 9;
}

@media screen and (max-width: 768px) {
	.topbar .wrapper {
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
	}
	.topbar p {
		text-wrap: balance;
	}
}

/* Footer */

.footer--blog {
	background-color: white;
	color: var(--clr-text);
}

.footer__content {
	font-size: calc(var(--fs-400) - 10%);
	padding-block: 3em;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.footer__content > * {
	flex-grow: 1;
	flex-basis: 0;
}

.footer__brand {
	display: grid;
	align-content: space-between;
}

.footer__logo svg {
	height: auto;
	max-width: 120px;
}

.small-print,
.footer__copyright {
	font-size: var(--fs-300);
}

.footer__link {
	color: var(--clr-text);
	transition: color 0.3s ease;
}

.footer__link:hover {
	color: var(--clr-primary);
}

.footer__social-list {
	display: flex;
	gap: 0.5em;
}

.footer__sm-icons {
	width: 1.75rem;
}

.footer__newsletter-form {
	margin: 0;
}
.footer__newsletter-form input,
.footer__newsletter-form .btn {
	font-size: var(--fs-300);
}
.footer__newsletter-form .btn {
	display: inline-block;
	padding: 0.5em 1.25em;
	justify-self: flex-start;
}

/* ABOUT PAGE */

.about__heading {
	padding-top: 1em;
}

.about__img-top {
	width: 100%;
	max-width: 450px;
	margin-top: -6em;
}

.about__testimonial {
	margin: 6em auto 3em;
}

.line {
	display: none;
}

.edge-extended-left--about {
	margin-top: 6em;
}

.edge-extended-left--about img {
	margin-top: -6em;
	max-width: 350px;
}

.arrow-cta {
	margin-bottom: 3em;
	margin-top: 3em;
}

.about__img-bottom {
	width: 100%;
	max-width: 700px;
	position: absolute;
	bottom: -200px;
	left: min(calc(-1.5em), calc(-1 * (100vw - 1240px) / 2));
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.about__spacer {
	min-height: calc(394px / 1.8);
}

/* SERVICES PAGE */

.additional-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.5s, opacity 0.5s;
}

.additional-content.expanded {
	max-height: 1000px; /* Use a value that can cover the content height */
	opacity: 1;
}

.services-icon {
	font-size: 1.5em;
}

.services__lifestyle-img {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
	padding-top: 1.5em;
}
section.services__launch-content {
	padding-block: 0;
}
.services__launch-content div {
	padding-inline: 1.5em;
	padding-block: 3em;
}
.services__launch-content__img {
	background: url('/assets/img/podcast-microphone-filter.webp');
	background-size: cover;
	background-repeat: no-repeat;
}
.services__launch-content img {
	object-fit: cover;
	height: 100%;
}
.services__why__img--post-prod,
.services__why__img--launch {
	max-height: 400px;
	padding-bottom: 3em;
	margin: 0 auto;
}

section.faq {
	position: relative;
}

.faq__wrapper {
	padding-top: min(calc(11vw + 30px), 6rem);
}

.faq__bg-text {
	position: absolute;
	text-align: right;
	height: auto;
	top: -2vw;
	left: calc(60vw - 200px);
	font-size: clamp(6.3592rem, 1.9986rem + 21.8026vi, 18.8957rem);
	font-family: var(--ff-heading);
	font-weight: 900;
	color: hsla(0, 0%, 100%, 0.1);
	z-index: -1;
}

/* Styles for the FAQ section of the services page */
p.question {
	max-width: 60ch;
	background-color: hsla(0, 0%, 100%, 0.05);
	border-radius: 12px;
	border-radius: 1em;
	cursor: pointer;
	padding: 0.75em;
	padding-right: 1.5em;
	width: 100%;
	text-align: left;
	transition: 0.2s ease-in;
	position: relative;
	font-weight: bold;
}
.answer + p.question {
	margin-top: 0;
}

/* Unicode character for "plus" sign (+) */
p.question:after {
	content: '\002B';
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

/* Unicode character for "minus" sign (-) */
p.question.active:after {
	content: '\2212';
}

/* Style the element that is used for the panel class */

div.answer {
	padding: 0 1em;
	max-height: 0;
	overflow: hidden;
	transition: all 0.1s ease;
	opacity: 0;
	margin-bottom: 0.5em;
	text-wrap: pretty;
}
div.answer.show {
	opacity: 1;
	padding: 0.5em 1em;
	max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

/* We speak Czech page */

.cz__header-img {
	width: 100%;
	max-width: 350px;
	margin-top: -6em;
	margin-right: -2em;
}

.overflow-visible {
	overflow-y: visible;
}

/* Download page (lead magnets) */

.download-page-content {
	padding: 3em;
}

.download-page-content--left {
	text-align: center;
}

.download-page-content--right {
	background-color: var(--clr-primary);
	color: white;
}

/* Responsive Media Queries */

@media (max-width: 350px) {
	.footer__content {
		flex-direction: column;
	}
}

@media (min-width: 525px) {
	.value-prop__content {
		max-width: calc(350px + 20vw);
		text-align: right;
		margin-left: auto;
	}
	.parallax {
		background-attachment: fixed;
	}
	.float-right {
		float: right;
		margin-left: 1.5em;
	}

	.footer__content {
		flex-direction: row;
	}

	.about__img-top {
		margin-right: -4.5em;
		margin-left: 2.25em;
	}

	.arrow-cta {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1em;
		align-items: center;
		margin-left: 20%;
		margin-bottom: 200px;
	}

	.arrow-cta h2 {
		font-size: var(--fs-600);
		width: 100%;
	}

	.arrow-cta .btn {
		margin-top: 0;
	}

	.arrow {
		display: flex;
		width: 100%;
	}

	.arrow__line {
		margin-top: 12px;
		width: 100%;
		background: var(--clr-background);
		height: 5px;
		float: left;
	}

	.arrow__point {
		width: 0;
		height: 0;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-left: 20px solid var(--clr-background);
		float: right;
	}
	.two-col {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.testimonial-container {
		min-height: 350px;
	}
	.services__why__img--launch {
		display: block;
		position: absolute;
		left: -100px;
		top: 50%;
		transform: translateY(-50%) rotate(60deg);
		z-index: -1;
	}
	.services__why__img--post-prod {
		display: block;
		position: absolute;
		left: -8px;
		top: 50%;
		transform: translateY(-50%);
	}
}

@media (max-width: 809px) {
	.nav {
		display: none;
		position: fixed;
		inset: 0 0 auto;
		z-index: 1;
		padding: 3em;
		background-color: hsla(11, 71%, 55%, 1);
		padding: calc(1em + var(--header-height)) 1em 4.5em;
	}
	.prev,
	.next {
		display: none;
	}

	@supports (backdrop-filter: blur(30px)) {
		.nav {
			background-color: hsla(11, 71%, 55%, 0.3);
			backdrop-filter: blur(30px);
		}
	}
	.nav__list {
		flex-direction: column;
		align-items: center;
	}
	.nav-drop__btn,
	.nav__list {
		font-weight: 500;
	}
	.nav[data-visible] {
		display: block;
	}

	.nav-toggle {
		display: block;
		cursor: pointer;
		background: transparent;
		border: none;
		padding: 0.5em;
	}
}
@media screen and (min-width: 810px) {
	.nav-drop__content {
		display: none;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.95);
		box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
		max-width: 15em;
		text-align: left;
		z-index: 1;
	}
	.header--home .nav-drop__content,
	.header--blog .nav-drop__content {
		background-color: rgba(255, 255, 255, 0.02);
	}
}

@media (max-width: 760px) {
	.row {
		flex-wrap: wrap;
	}
}

@media (min-width: 900px) {
	.hero__content {
		max-width: 75%;
	}
	section.hero {
		padding-top: calc(10em + var(--header-height));
	}

	.hero__img {
		display: block;
		position: absolute;
		top: 50%;
		right: -5px;
		width: 30%;
		transform: translateY(-50%);
		z-index: -1;
	}

	.download-page {
		display: flex;
		min-height: 100vh;
	}
	.download-page-content--left {
		position: sticky;
		top: 100px;
		height: 100vh;
		width: 50%;
		overflow-y: auto;
		padding: 3em;
	}
	.download-page-content--right {
		overflow-y: auto;
		width: 50%;
	}
	.sticky {
		position: sticky;
		top: 100px;
	}
	.samples__content {
		grid-template-columns: 3fr 5fr;
	}

	.samples__players {
		padding-inline: 3em;
	}

	.samples__players iframe:nth-child(1) {
		margin-left: 0;
	}

	.samples__players iframe:nth-child(2) {
		margin-right: 0;
	}

	section.steps .wrapper {
		grid-template-columns: 1fr 20px 2fr;
		row-gap: 0;
	}
	.steps__right {
		grid-row: 2;
		grid-column: 3;
	}

	/* About page */

	.inline-text {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		align-items: center;
	}

	.inline-text h3 {
		align-self: flex-start;
	}

	.inline-text p {
		margin-top: 0;
		max-width: 33%;
	}

	.line {
		display: block;
		flex-grow: 1;
		height: 2px;
		background-color: var(--clr-background);
		margin-bottom: 0.5rem;
		margin-top: 0.75rem;
	}

	/* Blog page */

	.article-snippet {
		display: flex;
		gap: 1em;
	}

	.article-snippet__text {
		margin-top: 0;
		width: 55%;
	}

	.article-snippet__img {
		width: 45%;
	}
}