/**
 * Homepage Expertise section — accordion service list with scroll reveal.
 */

.sp-expertise {
	padding: var(--sp-expertise-pad-top) 0 var(--sp-expertise-pad-bottom);
	background-color: #fff;
	color: #000;
}

.sp-expertise__inner {
	display: flex;
	flex-direction: column;
}

.sp-expertise__heading {
	margin: 0 0 var(--sp-expertise-heading-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-expertise-heading-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-expertise-heading-lh, 0.98);
	text-align: left;
	color: #000;
}

.sp-expertise__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.sp-expertise__list-wrap {
	position: relative;
	width: 100%;
	transition: max-height 0.55s ease;
}

.sp-expertise__list-wrap--collapsed {
	max-height: var(--sp-expertise-collapsed-height, 720px);
	overflow: hidden;
}

.sp-expertise__list {
	display: flex;
	flex-direction: column;
}

.sp-expertise__item {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.sp-expertise__item:first-child {
	border-top: 0;
}

.sp-expertise__row {
	display: grid;
	grid-template-columns: var(--sp-expertise-index-width) minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-expertise-toggle-gap);
	padding: 0 0 var(--sp-expertise-item-pad-bottom) 0;
}

.sp-expertise__item + .sp-expertise__item .sp-expertise__row {
	padding-top: var(--sp-expertise-item-pad-top);
}

.sp-expertise__item:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.sp-expertise__index {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-expertise-accent-gap);
}

.sp-expertise__number {
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-expertise-number-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-expertise-number-lh, 1.43);
	letter-spacing: calc(0.78 / 26 * 1em);
	color: #000;
}

.sp-expertise__accent {
	display: block;
	flex: 0 0 auto;
	width: var(--sp-expertise-accent-width);
	height: var(--sp-expertise-accent-height);
	background: #f9cf0e;
	opacity: 0;
	transform: scaleX(0.35);
	transform-origin: left center;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.sp-expertise__item.is-active .sp-expertise__accent {
	opacity: 1;
	transform: scaleX(1);
}

.sp-expertise__content {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	padding-right: var(--sp-expertise-content-pad-right);
}

.sp-expertise__item.is-active .sp-expertise__content {
	gap: var(--sp-expertise-tags-desc-gap);
}

.sp-expertise__summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-expertise-summary-gap);
}

.sp-expertise__title {
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-expertise-title-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-expertise-title-lh, 0.96);
	color: #000;
}

.sp-expertise__tags {
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-expertise-tags-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-expertise-tags-lh, 1.43);
	letter-spacing: calc(0.78 / 26 * 1em);
	color: #000;
}

.sp-expertise__details {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.sp-expertise__item.is-active .sp-expertise__details {
	grid-template-rows: 1fr;
	overflow: visible;
}

.sp-expertise__details-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-expertise-desc-gap);
	overflow: hidden;
	min-height: 0;
}

/* Accordion collapse needs overflow hidden; once open, release clipping. */
.sp-expertise__item.is-active .sp-expertise__details-inner {
	overflow: visible;
}

.sp-expertise__description {
	margin: 0;
	max-width: var(--sp-expertise-desc-max);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-expertise-desc-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-expertise-desc-lh, 1.43);
	letter-spacing: calc(0.72 / 24 * 1em);
	color: #000;
}

.sp-expertise__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--sp-tap-min);
	padding: var(--sp-expertise-cta-pad-y) var(--sp-expertise-cta-pad-x);
	border-radius: var(--sp-hero-cta-radius);
	background: #f9cf0e;
	color: #000;
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-expertise-cta-size);
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	max-width: 100%;
	transition:
		background-color 0.28s ease-out,
		color 0.28s ease-out,
		opacity 0.14s ease-out;
}

/* Contained hover — no lift, glow, or shine sweep. Those paint outside the
   button box and get clipped by the accordion / collapsed list wrappers. */
.sp-expertise__cta:hover,
.sp-expertise__cta:focus-visible {
	color: var(--spaciefy-yellow);
	background-color: #0e0e0e;
}

.sp-expertise__cta:active {
	opacity: 0.88;
}

.sp-expertise__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--sp-expertise-fade-height, 120px);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	pointer-events: none;
	transition: opacity 0.35s ease, height 0.35s ease;
}

.sp-expertise__list-wrap:not(.sp-expertise__list-wrap--collapsed) .sp-expertise__fade {
	opacity: 0;
}

.sp-expertise__scroll-more {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--sp-expertise-scroll-more-top);
	padding: 0;
	border: 0;
	background: transparent;
	color: #000;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-expertise-scroll-more-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-expertise-tags-lh, 1.43);
	letter-spacing: calc(0.78 / 26 * 1em);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Invisible hit area — see .sp-header__nav-link for the same pattern. */
.sp-expertise__scroll-more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--sp-tap-min);
	transform: translateY(-50%);
}

.sp-expertise__scroll-more:hover,
.sp-expertise__scroll-more:focus-visible {
	opacity: 0.72;
}

.sp-expertise__scroll-more.is-hidden {
	display: none;
}

.sp-expertise__scroll-more-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	animation: sp-expertise-bounce 1.4s ease-in-out infinite;
}

.sp-expertise__scroll-more-icon svg {
	display: block;
}

@keyframes sp-expertise-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — 768px and below.
 *
 * The design drops the accordion: the index and its rule sit on their own row
 * above full-width content, and every service shows its tags, description and
 * CTA. expertise.js mirrors this by removing the button role and tab stop, so
 * nothing announces an interaction that is no longer there.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.sp-expertise {
		--sp-expertise-title-size: clamp(26px, calc(1.5301vw + 21.85px), 33.6px);
		--sp-expertise-title-lh: 1.16;
		--sp-expertise-tags-size: clamp(13px, calc(0.765vw + 10.93px), 16.8px);
		--sp-expertise-desc-size: clamp(13px, calc(0.765vw + 10.93px), 16.8px);
		--sp-expertise-number-size: clamp(14px, calc(0.8197vw + 11.7px), 18px);
		--sp-expertise-summary-gap: clamp(14px, calc(0.8743vw + 12.49px), 19.2px);
		--sp-expertise-tags-desc-gap: clamp(18px, calc(1.0929vw + 15.61px), 24px);
		--sp-expertise-desc-gap: clamp(20px, calc(1.3115vw + 18.73px), 28px);
		--sp-expertise-item-pad-top: clamp(28px, calc(1.9126vw + 25.31px), 42px);
		--sp-expertise-item-pad-bottom: clamp(28px, calc(1.9126vw + 25.31px), 42px);
		--sp-expertise-toggle-gap: clamp(24px, calc(1.6393vw + 21.41px), 36px);
	}

	.sp-expertise__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-expertise-toggle-gap);
	}

	.sp-expertise__content {
		padding-right: 0;
	}

	/* Every row renders open, so the collapse transition is switched off
	   rather than left mid-animation. */
	.sp-expertise__details,
	.sp-expertise__item.is-active .sp-expertise__details {
		grid-template-rows: 1fr;
		transition: none;
	}

	.sp-expertise__details-inner {
		overflow: visible;
	}

	.sp-expertise__item .sp-expertise__content {
		gap: var(--sp-expertise-tags-desc-gap);
	}

	/* The list is never clipped on mobile, so the peek fade and its control
	   have nothing to reveal. */
	.sp-expertise__fade,
	.sp-expertise__scroll-more {
		display: none;
	}

	.sp-expertise__list-wrap,
	.sp-expertise__list-wrap--collapsed {
		max-height: none;
		overflow: visible;
	}
}