/* Values mirror the Elementor kit and the Personal Training page. Every selector is
   root-prefixed so it beats the kit's .elementor-kit-5 element rules. */

.ssp {
	--ssp-dark: var(--e-global-color-primary, #0a0d03);
	--ssp-light: var(--e-global-color-text, #fffffd);
	--ssp-amber: var(--e-global-color-secondary, #e19400);
	--ssp-orange: var(--e-global-color-5c005d8, #fa4607);
	--ssp-ink: #333;

	--ssp-display: var(--e-global-typography-primary-font-family, "pressio-compressed"), sans-serif;
	--ssp-body: var(--e-global-typography-e78ee5d-font-family, "franklin-gothic-atf"), sans-serif;

	--ssp-gutter: 60px;
	--ssp-pad-card: clamp(1.25rem, 0.8291rem + 1.6835vw, 2.5rem);
	--ssp-space: clamp(3.75rem, 2.9082rem + 3.367vw, 6.25rem);
	--ssp-space-top: clamp(6.25rem, 4.1456rem + 8.4175vw, 12.5rem);
	--ssp-space-bottom: clamp(5rem, 3.7374rem + 5.0505vw, 8.75rem);
	--ssp-peak: clamp(3.5rem, 10vw, 9rem);

	font-family: var(--ssp-body);
	color: var(--ssp-light);
}

/* Hello Elementor boxes .site-main on any page Elementor didn't build. */
body.ssp-page .site-main.ssp {
	max-width: none;
	padding-inline: 0;
}

.ssp :where(h1, h2, h3, h4, h5, h6, p, ul) {
	margin: 0;
}

.ssp .ssp-wrap {
	width: min(100% - 2 * var(--ssp-gutter), 1468px);
	margin-inline: auto;
}

/* Type */

.ssp .ssp-eyebrow {
	font-family: var(--ssp-body);
	font-size: clamp(0.875rem, 0.4198rem + 0.7105vw, 1.125rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ssp-amber);
}

.ssp .ssp-hero__title,
.ssp .ssp-terms__title,
.ssp .ssp-cta__title {
	font-family: var(--ssp-display);
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: 500;
	line-height: var(--e-global-typography-secondary-line-height, 0.9em);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ssp-light);
}

.ssp .ssp-lead {
	font-size: var(--e-global-typography-6ce095a-font-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.5px;
	text-wrap: balance;
}

/* Hero */

.ssp .ssp-hero {
	padding-block: var(--ssp-space-top) var(--ssp-space-bottom);
	background: var(--ssp-dark) url(img/stars.svg) center top / cover no-repeat;
	text-align: center;
}

.ssp .ssp-hero__inner {
	display: grid;
	justify-items: center;
	gap: clamp(0.625rem, 0.4146rem + 0.8418vw, 1.25rem);
}

.ssp .ssp-hero .ssp-lead {
	max-width: 34em;
}

/* Dunes into the white section */

.ssp .ssp-hero--dunes {
	padding-bottom: 0;
}

/* Pulled up into the hero: the sky above the centre cactus is empty and the tall ones clear the text. */
.ssp .ssp-dunes {
	margin-top: clamp(-100px, -6vw, -40px);
}

/* dunes.svg carries its own ground, see setup/dunes/build-dunes.py. */
.ssp .ssp-dunes img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -1px;
}

/* Packages */

.ssp .ssp-packages {
	padding-block: clamp(2rem, 1rem + 3vw, 3.75rem) calc(var(--ssp-space) + var(--ssp-peak));
	background: var(--ssp-light);
	color: var(--ssp-ink);
}

.ssp .ssp-group {
	display: grid;
	grid-template-columns: 42fr 58fr;
	column-gap: var(--ssp-space);
	align-items: start;
}

.ssp .ssp-group + .ssp-group {
	margin-top: var(--ssp-space);
}

.ssp .ssp-group__head {
	position: sticky;
	top: 40px;
	display: grid;
	gap: 20px;
}

.ssp .ssp-group__title {
	font-family: var(--ssp-display);
	font-size: var(--e-global-typography-text-font-size);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ssp-dark);
	text-wrap: balance;
}

.ssp .ssp-group__intro {
	font-size: var(--e-global-typography-e78ee5d-font-size);
	line-height: 1.5;
	letter-spacing: -0.5px;
}

.ssp .ssp-group__cards {
	display: grid;
	gap: 20px;
}

.ssp .ssp-card {
	display: grid;
	grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
	column-gap: var(--ssp-pad-card);
	padding: var(--ssp-pad-card);
	border: 1px solid var(--ssp-amber);
	border-radius: 8px;
	background: #fff;
}

.ssp .ssp-card__head {
	display: grid;
	align-content: start;
	gap: 8px;
}

.ssp .ssp-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	font-family: var(--ssp-display);
	font-size: var(--e-global-typography-text-font-size);
	font-weight: 500;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--ssp-dark);
}

.ssp .ssp-card__period {
	font-size: var(--e-global-typography-651d0c1-font-size);
	line-height: 1;
	color: var(--ssp-ink);
}

.ssp .ssp-card__sub,
.ssp .ssp-card__features {
	font-size: var(--e-global-typography-e13a04d-font-size);
	line-height: 1.4;
}

.ssp .ssp-card__sub {
	font-weight: 500;
	color: var(--ssp-dark);
}

.ssp .ssp-card__features {
	display: grid;
	align-content: start;
	gap: 9px;
	padding: 0;
	list-style: none;
}

.ssp .ssp-card__features li {
	position: relative;
	padding-left: 27px;
}

.ssp .ssp-card__features li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 16px;
	height: 18px;
	background: url(img/kettlebell-pink.svg) center / contain no-repeat;
}

.ssp .ssp-card--featured {
	border-color: var(--ssp-dark);
	background: var(--ssp-dark);
	color: var(--ssp-light);
}

.ssp .ssp-card--featured .ssp-card__price {
	color: var(--ssp-light);
}

.ssp .ssp-card--featured .ssp-card__period,
.ssp .ssp-card--featured .ssp-card__sub {
	color: var(--ssp-amber);
}

/* How it works */

.ssp .ssp-terms {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--ssp-peak));
	padding-block: calc(var(--ssp-peak) + var(--ssp-space)) var(--ssp-space);
	background:
		linear-gradient(180deg, rgba(10, 13, 3, 0.92), var(--ssp-dark)),
		url(img/perspective.svg) top center / cover no-repeat,
		#101010;
	clip-path: polygon(0 var(--ssp-peak), 50% 0, 100% var(--ssp-peak), 100% 100%, 0 100%);
	text-align: center;
}

.ssp .ssp-terms__inner {
	display: grid;
	gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.ssp .ssp-terms__grid {
	display: grid;
	grid-template-columns: repeat(var(--ssp-cols, 4), minmax(0, 1fr));
	gap: 30px 20px;
}

.ssp .ssp-term {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 14px;
	padding-inline: 10px;
}

.ssp .ssp-term__icon {
	width: auto;
	height: 30px;
}

.ssp .ssp-term__label {
	font-family: var(--ssp-display);
	font-size: var(--e-global-typography-da812e4-font-size);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ssp-light);
}

.ssp .ssp-term__text {
	font-size: var(--e-global-typography-e13a04d-font-size);
	line-height: 1.4;
}

/* Call to action */

.ssp .ssp-cta {
	padding-block: var(--ssp-space) var(--ssp-space-bottom);
	background: var(--ssp-dark) url(img/stars.svg) center / cover no-repeat;
	text-align: center;
}

.ssp .ssp-cta__inner {
	display: grid;
	justify-items: center;
	gap: 20px;
}

.ssp .ssp-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 14px 40px;
	border: 2px solid var(--ssp-amber);
	border-radius: 0;
	background: var(--ssp-amber);
	font-family: var(--ssp-display);
	font-size: var(--e-global-typography-e8412fd-font-size);
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ssp-light);
	transition: background-color 0.3s, border-color 0.3s;
}

.ssp .ssp-btn:hover,
.ssp .ssp-btn:focus-visible {
	border-color: var(--ssp-orange);
	background: var(--ssp-orange);
	color: var(--ssp-light);
}

/* Reveal: only armed once the inline script confirms IntersectionObserver. */

.ssp.ssp-js [data-ssp-reveal] {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 0.9s ease, transform 0.9s ease;
	transition-delay: calc(var(--ssp-i, 0) * 90ms);
}

.ssp.ssp-js [data-ssp-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ssp.ssp-js [data-ssp-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Tablet */

@media (max-width: 1024px) {
	.ssp {
		--ssp-gutter: 40px;
	}

	.ssp .ssp-group {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	.ssp .ssp-group__head {
		position: static;
	}

	.ssp .ssp-terms__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 20px;
	}
}

/* Mobile */

@media (max-width: 767px) {
	.ssp {
		--ssp-gutter: 20px;
	}

	.ssp .ssp-hero,
	.ssp .ssp-hero--dunes {
		padding-block: 140px 50px;
	}

	.ssp .ssp-dunes {
		display: none;
	}

	.ssp .ssp-packages {
		padding-top: 50px;
	}

	.ssp .ssp-group {
		row-gap: 20px;
	}

	.ssp .ssp-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.ssp .ssp-terms__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.ssp .ssp-cta {
		padding-bottom: 70px;
	}
}