.preloader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	transition: opacity 0.35s ease;
}


html.preloader-seen .preloader {
	display: none;
	opacity: 0;
	pointer-events: none;
}

.preloader__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
}



.preloader__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.preloader__progress {
	width: 80%;
	height: 4px;
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.preloader__progress-bar {
	width: 100%;
	height: 100%;
	background-color: #cd0309;
	transform-origin: left center;
	transform: scaleX(0);
}

.preloader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.preloader.is-complete {
	display: none;
}


/* ─── Header Reveal ─────────────────────────────────────────────────────── */

#header .header__brand,
#header .header-menu,
#header .header__actions {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	#header .header__brand,
	#header .header-menu,
	#header .header__actions {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Masthead Home Reveal ───────────────────────────────────────────────── */

/*
 * Hide reveal targets before JS sets up the animation.
 * Only scoped to .masthead--home so inner mastheads are unaffected.
 */
.masthead--home .masthead__content > .subheading,
.masthead--home .masthead__content > h1,
.masthead--home .masthead__content > .h1,
.masthead--home .masthead__content > p,
.masthead--home .masthead__content > .btn-group {
	opacity: 0;
	visibility: hidden;
}

/* Remove the pre-hide once GSAP clears inline props after animation. */
@media (prefers-reduced-motion: reduce) {
	.masthead--home .masthead__content > .subheading,
	.masthead--home .masthead__content > h1,
	.masthead--home .masthead__content > .h1,
	.masthead--home .masthead__content > p,
	.masthead--home .masthead__content > .btn-group {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Blog Single Post Reveal ───────────────────────────────────────────── */

.blog-single-post .blog-single-meta,
.blog-single-post .blog-post__img-container,
.blog-single-post .post-pagination,
#popular-posts .section__intro,
#popular-posts .blog-post {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.blog-single-post .blog-single-meta,
	.blog-single-post .blog-post__img-container,
	.blog-single-post .post-pagination,
	#popular-posts .section__intro,
	#popular-posts .blog-post {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Wysiwyg Section Reveal ─────────────────────────────────────────────── */

.wysiwyg-section .wysiwyg-content {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wysiwyg-section .wysiwyg-content {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Image Buttons Section Reveal ──────────────────────────────────────── */

.image-button-section .section__intro > *,
.image-button-section .image-button-link {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.image-button-section .section__intro > *,
	.image-button-section .image-button-link {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Icon Buttons Section Reveal ───────────────────────────────────────── */

.icon-buttons-section__intro > *,
.icon-buttons-section .icon-button-link {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.icon-buttons-section__intro > *,
	.icon-buttons-section .icon-button-link {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Accordion Section Reveal ──────────────────────────────────────────── */

.accordion-section:not(.text-media-section) .section__intro > *,
.accordion-section .fx-accordion__item {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.accordion-section:not(.text-media-section) .section__intro > *,
	.accordion-section .fx-accordion__item {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Team Members Section Reveal ───────────────────────────────────────── */

.team-members-section .section__intro > *,
.team-members-section .team-card-link {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.team-members-section .section__intro > *,
	.team-members-section .team-card-link {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Partner Logos Reveal ───────────────────────────────────────────────── */

.partner-logos-section__intro > *,
.partner-logos-swiper {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.partner-logos-section__intro > *,
	.partner-logos-swiper {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Services Section Reveal ────────────────────────────────────────────── */

.services-section .wysiwyg-content > *,
.services-section .section__intro .text-left:not(.wysiwyg-content),
.services-section .service-card-link {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.services-section .wysiwyg-content > *,
	.services-section .section__intro .text-left:not(.wysiwyg-content),
	.services-section .service-card-link {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Text Stats Section Reveal ──────────────────────────────────────────── */

.text-stats-section .wysiwyg-content > *,
.text-stats-section .stat,
.text-stats-section .eclipse-frame {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.text-stats-section .wysiwyg-content > *,
	.text-stats-section .stat,
	.text-stats-section .eclipse-frame {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Text Media & Process List Reveal ───────────────────────────────────── */

.text-media-section .process-list-section__intro > *,
.text-media-section .text-media-section__text > *,
.text-media-section .text-media-section__media {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.text-media-section .process-list-section__intro > *,
	.text-media-section .text-media-section__text > *,
	.text-media-section .text-media-section__media {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Testimonials Section Reveal ────────────────────────────────────────── */

.testimonials-section .testimonials-section__intro > *,
.testimonials-section .testimonials-text-swiper,
.testimonials-section .testimonials-image-swiper,
.testimonials-section .section__outro > * {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.testimonials-section .testimonials-section__intro > *,
	.testimonials-section .testimonials-text-swiper,
	.testimonials-section .testimonials-image-swiper,
	.testimonials-section .section__outro > * {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Locations Section Reveal ───────────────────────────────────────────── */

.locations-section .locations-section__text-col > *,
.locations-section .locations-section__accent-bg .eclipse-frame {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.locations-section .locations-section__text-col > *,
	.locations-section .locations-section__accent-bg .eclipse-frame {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Posts Slider Section Reveal ────────────────────────────────────────── */

.posts-slider-section .posts-slider-section__content > *,
.posts-slider-section .posts-slider-section__slides {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.posts-slider-section .posts-slider-section__content > *,
	.posts-slider-section .posts-slider-section__slides {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Masthead Inner Reveal ──────────────────────────────────────────────── */

.masthead--inner {
	overflow: hidden;
}

.masthead--inner .masthead__content > * {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.masthead--inner .masthead__content > * {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── CTA Section Reveal ─────────────────────────────────────────────────── */

.cta-section {
	overflow: hidden;
}

.cta-section .cta-section__inner {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.cta-section .cta-section__inner {
		opacity: 1;
		visibility: inherit;
	}
}


/* ─── Play Button Pulse ──────────────────────────────────────────────────── */

.play-button-link {
	position: relative;
}

.play-button {
	position: relative;
	z-index: 2;
}

.play-button-link::before,
.play-button-link::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	transform: translate(-50%, -50%) scale(1);
	animation: play-button-pulse 2.4s ease-out infinite;
	pointer-events: none;
	z-index: 1;
}

.play-button-link::after {
	animation-delay: 1.2s;
}

@keyframes play-button-pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.7;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.65);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.play-button-link::before,
	.play-button-link::after {
		animation: none;
		opacity: 0;
	}
}


/* ─── Button Draw-Border Effect ──────────────────────────────────────────── */

/*
 * Default border stays visible. On hover, a pseudo-element traces the border
 * via clip-path while the existing hover fill plays normally.
 *
 * btn--icon-mobile occupies ::before (phone icon), so those buttons
 * use ::after instead (which btn--icon-mobile sets to content: none).
 */
.btn--secondary:not(.ignore) {
	position: relative;
	border-color: var(--fx-color-crimson);
}

.btn--secondary:hover {
	border-color: transparent !important;
}

/* Shared draw-border styles */
.btn--secondary:not(.ignore):not(.btn--icon-mobile)::before,
.btn--secondary.btn--icon-mobile:not(.ignore)::after {
	content: '';
	position: absolute;
	inset: -0.25rem 0;
	border-width: 0.25rem 0;
	border-style: solid;
	border-color: var(--fx-color-crimson);
	border-radius: 6.25rem;
	font-family: unset;
	font-size: unset;
	line-height: unset;
	pointer-events: none;
	clip-path: inset(0 101% 0 0 round 6.25rem);
	transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-dark-blue .btn--secondary:not(.ignore):not(.btn--icon-mobile)::before,
.bg-dark-blue .btn--secondary.btn--icon-mobile:not(.ignore)::after {
	border-color: var(--fx-color-white);
}

.touch-disabled .btn--secondary:not(.ignore):not(.btn--icon-mobile):hover::before,
.touch-disabled .btn--secondary.btn--icon-mobile:not(.ignore):hover::after,
.btn--secondary:not(.ignore):not(.btn--icon-mobile):focus-visible::before,
.btn--secondary.btn--icon-mobile:not(.ignore):focus-visible::after {
	clip-path: inset(0 0% 0 0 round 6.25rem);
}

@media (prefers-reduced-motion: reduce) {
	.btn--secondary:not(.ignore):not(.btn--icon-mobile)::before,
	.btn--secondary.btn--icon-mobile:not(.ignore)::after {
		display: none;
	}
}

/* ─── Button Draw-Border Effect — Primary ────────────────────────────────── */

.btn--primary:not(.ignore) {
	position: relative;
	border-color: var(--fx-color-sky-blue-dark);
}

.btn--primary:hover {
	border-color: transparent !important;
}

.btn--primary:not(.ignore):not(.btn--icon-mobile)::before,
.btn--primary.btn--icon-mobile:not(.ignore)::after {
	content: '';
	position: absolute;
	inset: -0.25rem 0;
	border-width: 0.25rem 0;
	border-style: solid;
	border-color: var(--fx-color-sky-blue);
	border-radius: 6.25rem;
	font-family: unset;
	font-size: unset;
	line-height: unset;
	pointer-events: none;
	clip-path: inset(0 101% 0 0 round 6.25rem);
	transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-dark-blue .btn--primary:not(.ignore):not(.btn--icon-mobile)::before,
.bg-dark-blue .btn--primary.btn--icon-mobile:not(.ignore)::after {
	border-color: var(--fx-color-light-sky-dark);
}

.touch-disabled .btn--primary:not(.ignore):not(.btn--icon-mobile):hover::before,
.touch-disabled .btn--primary.btn--icon-mobile:not(.ignore):hover::after,
.btn--primary:not(.ignore):not(.btn--icon-mobile):focus-visible::before,
.btn--primary.btn--icon-mobile:not(.ignore):focus-visible::after {
	clip-path: inset(0 0% 0 0 round 6.25rem);
	
}

@media (prefers-reduced-motion: reduce) {
	.btn--primary:not(.ignore):not(.btn--icon-mobile)::before,
	.btn--primary.btn--icon-mobile:not(.ignore)::after {
		display: none;
	}
}