/**
 * Services page — responsive breakpoints.
 * Covers 1660px → 360px. No styles above 1660px.
 * Breakpoints: 1660, 1560, 1440, 1366, 1280, 1200, 1024, 992, 768, 640, 576, 480, 390, 375, 360
 */

/* ─── 1660px ──────────────────────────────────── */
@media (max-width: 1660px) {
	:root {
		--sp-svc-tech-pad-top: 180px;
		--sp-svc-tech-pad-bottom: 140px;
		--sp-svc-tech-item-pad-y: 48px;
		--sp-svc-tech-heading-size: 62px;
		--sp-svc-tech-header-gap: 32px;
		--sp-svc-tech-desc-size: 21px;
		--sp-svc-tech-desc-tracking: 0.6px;
		--sp-svc-tech-group-gap-y: 72px;
		--sp-svc-tech-panel-top: 44px;
		--sp-svc-detail-title-size: 50px;
		--sp-svc-detail-desc-size: 21px;
		--sp-svc-detail-desc-bottom: 64px;
		--sp-svc-detail-caps-item-size: 26px;
		--sp-svc-detail-image-pad-y: 100px;
		--sp-svc-detail-image-pad-x: 40px;
		--sp-svc-detail-row-gap: 80px;
	}
}

/* ─── 1560px ──────────────────────────────────── */
@media (max-width: 1560px) {
	:root {
		--sp-svc-tech-desc-max: 412px;
		--sp-svc-tech-meta-width: clamp(80px, calc(553 / 1766 * 100%), 553px);
		--sp-svc-detail-image-pad-x: 35px;
	}
}

/* ─── 1440px ──────────────────────────────────── */
@media (max-width: 1440px) {
	:root {
		--sp-svc-tech-pad-top: 150px;
		--sp-svc-tech-pad-bottom: 120px;
		--sp-svc-tech-item-pad-y: 44px;
		--sp-svc-tech-heading-size: 56px;
		--sp-svc-tech-item-title-size: 36px;
		--sp-svc-tech-header-gap: 28px;
		--sp-svc-tech-desc-size: 20px;
		--sp-svc-tech-desc-tracking: 0.55px;
		--sp-svc-tech-group-gap-y: 64px;
		--sp-svc-tech-panel-top: 40px;
		--sp-svc-tech-group-item-size: 20px;
		--sp-svc-detail-title-size: 46px;
		--sp-svc-detail-desc-size: 20px;
		--sp-svc-detail-desc-bottom: 60px;
		--sp-svc-detail-content-pad-left: 64px;
		--sp-svc-detail-caps-item-size: 24px;
		--sp-svc-detail-image-pad-y: 90px;
		--sp-svc-detail-row-gap: 72px;
	}
}

/* ─── 1366px ──────────────────────────────────── */
@media (max-width: 1366px) {
	:root {
		--sp-svc-tech-pad-top: 130px;
		--sp-svc-tech-pad-bottom: 108px;
		--sp-svc-tech-item-pad-y: 42px;
		--sp-svc-tech-item-title-size: 34px;
		--sp-svc-tech-item-number-size: 24px;
		--sp-svc-tech-header-gap: 26px;
		--sp-svc-tech-desc-size: 19px;
		--sp-svc-tech-desc-tracking: 0.5px;
		--sp-svc-tech-group-gap-y: 56px;
		--sp-svc-tech-meta-width: clamp(80px, calc(533 / 1766 * 100%), 533px);
		--sp-svc-detail-title-size: 42px;
		--sp-svc-detail-desc-size: 19px;
		--sp-svc-detail-desc-bottom: 60px;
		--sp-svc-detail-caps-item-size: 22px;
		--sp-svc-detail-image-pad-y: 80px;
		--sp-svc-detail-image-pad-x: 30px;
		--sp-svc-detail-row-gap: 64px;
	}
}

/* ─── 1280px ──────────────────────────────────── */
@media (max-width: 1280px) {
	:root {
		--sp-svc-tech-pad-top: 116px;
		--sp-svc-tech-pad-bottom: 96px;
		--sp-svc-tech-item-pad-y: 40px;
		--sp-svc-tech-heading-size: 50px;
		--sp-svc-tech-header-gap: 24px;
		--sp-svc-tech-desc-size: 18px;
		--sp-svc-tech-desc-tracking: 0.48px;
		--sp-svc-tech-group-gap-y: 48px;
		--sp-svc-tech-meta-width: clamp(80px, calc(533 / 1766 * 100%), 533px);
		--sp-svc-tech-panel-top: 36px;
		--sp-svc-tech-group-item-size: 19px;
		--sp-svc-tech-accent-width: 36px;
		--sp-svc-tech-accent-gap: 14px;
		--sp-svc-detail-title-size: 38px;
		--sp-svc-detail-desc-size: 18px;
		--sp-svc-detail-desc-bottom: 56px;
		--sp-svc-detail-image-col: 48%;
		--sp-svc-detail-caps-item-size: 20px;
		--sp-svc-detail-image-pad-y: 72px;
		--sp-svc-detail-row-gap: 56px;
	}

	.sp-svc-tech__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ─── 1200px ──────────────────────────────────── */
@media (max-width: 1200px) {
	:root {
		--sp-svc-tech-pad-top: 100px;
		--sp-svc-tech-pad-bottom: 88px;
		--sp-svc-tech-item-pad-y: 36px;
		--sp-svc-tech-item-title-size: 30px;
		--sp-svc-tech-item-number-size: 22px;
		--sp-svc-tech-header-gap: 22px;
		--sp-svc-tech-desc-size: 17px;
		--sp-svc-tech-desc-tracking: 0.46px;
		--sp-svc-tech-group-gap-y: 44px;
		--sp-svc-tech-panel-top: 32px;
		--sp-svc-detail-title-size: 34px;
		--sp-svc-detail-desc-size: 17px;
		--sp-svc-detail-desc-bottom: 56px;
		--sp-svc-detail-content-pad-left: 48px;
		--sp-svc-detail-caps-item-size: 18px;
		--sp-svc-detail-image-pad-y: 64px;
		--sp-svc-detail-image-pad-x: 30px;
		--sp-svc-detail-row-gap: 48px;
	}
}

/* ─── 1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
	:root {
		--sp-svc-tech-heading-size: 44px;
		--sp-svc-tech-item-title-size: 28px;
		--sp-svc-tech-item-pad-y: 34px;
		--sp-svc-tech-pad-top: 92px;
		--sp-svc-tech-pad-bottom: 80px;
		--sp-svc-tech-header-gap: 20px;
		--sp-svc-tech-desc-size: 16px;
		--sp-svc-tech-desc-tracking: 0.42px;
		--sp-svc-tech-group-gap-y: 40px;
		--sp-svc-tech-panel-top: 28px;
		--sp-svc-tech-group-label-size: 16px;
		--sp-svc-tech-group-item-size: 18px;
		--sp-svc-tech-group-label-bottom: 12px;
		--sp-svc-tech-accent-gap: 14px;
		--sp-svc-tech-item-col-gap: 30px;
		--sp-svc-detail-title-size: 32px;
		--sp-svc-detail-desc-size: 16px;
		--sp-svc-detail-desc-bottom: 52px;
		--sp-svc-detail-content-pad-left: 36px;
		--sp-svc-detail-caps-item-size: 17px;
		--sp-svc-detail-caps-item-pad-top: 22px;
		--sp-svc-detail-caps-item-pad-bottom: 18px;
		--sp-svc-detail-image-pad-y: 56px;
		--sp-svc-detail-image-pad-x: 24px;
		--sp-svc-detail-row-gap: 40px;
	}

	/* Services detail: reduce image padding */
	.sp-svc-detail__image-col {
		padding: var(--sp-svc-detail-image-pad-y) var(--sp-svc-detail-image-pad-x) var(--sp-svc-detail-image-pad-y) 0;
	}

	/* Tech: reduce meta width column */
	.sp-svc-tech__item {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* ─── 992px — tablet layout shift ──────────────── */
@media (max-width: 992px) {
	:root {
		--sp-svc-tech-pad-top: 84px;
		--sp-svc-tech-pad-bottom: 76px;
		--sp-svc-tech-item-pad-y: 32px;
		--sp-svc-tech-item-title-size: 26px;
		--sp-svc-tech-header-gap: 18px;
		--sp-svc-tech-desc-size: 16px;
		--sp-svc-tech-group-gap-y: 36px;
		--sp-svc-detail-content-pad-left: 0;
		--sp-svc-detail-content-pad-top: 36px;
		--sp-svc-detail-image-pad-x: 0;
	}

	/* Hero stays stacked with scaled inset */
	.sp-svc-hero__inner {
		align-items: flex-start;
	}

	/* Tech: reduce panel indent */
	.sp-svc-tech__item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	/* Process: stack label above content */
	.sp-svc-process__layout {
		grid-template-columns: 1fr;
		row-gap: clamp(16px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	}

	/* Process: vertical steps with timeline on the right */
	.sp-svc-process__subtext {
		width: var(--sp-svc-process-stacked-content-max);
		max-width: 100%;
	}

	.sp-svc-process__steps {
		display: flex;
		flex-direction: column;
		width: var(--sp-svc-process-stacked-width);
		row-gap: var(--sp-svc-process-stacked-step-gap);
	}

	.sp-svc-process__steps::after {
		left: auto;
		right: calc(var(--sp-svc-process-dot-size) / 2);
		top: calc(var(--sp-svc-process-dot-size) / 2);
		bottom: calc(var(--sp-svc-process-dot-size) / 2);
		width: 1px;
		height: auto;
	}

	.sp-svc-process__step {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		column-gap: var(--sp-svc-process-timeline-gap);
	}

	.sp-svc-process__step-top {
		flex: 1;
		min-width: 0;
		max-width: none;
	}

	.sp-svc-process__step-description {
		width: 100%;
		max-width: 100%;
	}

	.sp-svc-process__step-foot {
		flex-shrink: 0;
		order: 2;
		align-self: flex-start;
		padding-top: 0;
		margin-top: calc(var(--sp-svc-process-step-label-size) * 0.5);
	}

	/* Services detail: stack to single column */
	.sp-svc-detail__row {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.sp-svc-detail__image-col {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: var(--sp-svc-detail-image-pad-y) 0;
	}

	.sp-svc-detail__image-col::before {
		left: 0;
		right: 0;
	}

	.sp-svc-detail__image,
	.sp-svc-detail__image-placeholder {
		border-radius: 0;
	}

	.sp-svc-detail__content-col {
		padding: var(--sp-svc-detail-content-pad-top) 0 0 0;
	}
}

/* ─── 768px ──────────────────────────────────── */
@media (max-width: 768px) {
	:root {
		--sp-svc-tech-heading-size: 36px;
		--sp-svc-tech-pad-top: 68px;
		--sp-svc-tech-pad-bottom: 68px;
		--sp-svc-tech-item-title-size: 24px;
		--sp-svc-tech-item-pad-y: 18px;
		--sp-svc-tech-header-gap: 14px;
		--sp-svc-tech-desc-size: 16px;
		--sp-svc-tech-desc-tracking: 0.4px;
		--sp-svc-tech-item-number-size: 20px;
		--sp-svc-tech-group-gap-y: 32px;
		--sp-svc-tech-panel-top: 24px;
		--sp-svc-tech-group-label-size: 15px;
		--sp-svc-tech-group-label-bottom: 12px;
		--sp-svc-tech-group-item-size: 17px;
		--sp-svc-tech-accent-width: 32px;
		--sp-svc-tech-accent-gap: 12px;
		--sp-svc-process-subtext-bottom: 40px;
		--sp-svc-process-stacked-step-gap: clamp(40px, calc(64 / var(--spaciefy-artboard) * 100vw), 64px);
		--sp-svc-detail-title-size: 24px;
		--sp-svc-detail-desc-size: 18px;
		--sp-svc-detail-desc-bottom: 40px;
		--sp-svc-detail-caps-label-size: 15px;
		--sp-svc-detail-caps-label-bottom: 28px;
		--sp-svc-detail-caps-item-size: 20px;
		--sp-svc-detail-caps-item-pad-top: 20px;
		--sp-svc-detail-caps-item-pad-bottom: 16px;
		--sp-svc-detail-image-pad-y: 48px;
		--sp-svc-detail-row-gap: 36px;
		--sp-svc-detail-content-pad-top: 28px;
	}

	.sp-svc-tech__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-svc-tech-header-gap);
	}

	.sp-svc-tech__description {
		text-align: left;
		width: auto;
		max-width: 100%;
		margin-left: 0;
	}

	.sp-svc-tech__item-title {
		white-space: normal;
	}

	.sp-svc-tech__item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.sp-svc-tech__item-meta {
		width: auto;
		min-width: 0;
	}

	.sp-svc-tech__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: var(--sp-svc-tech-group-gap-y);
	}
}

/* ─── 640px ──────────────────────────────────── */
@media (max-width: 640px) {
	:root {
		--sp-svc-tech-heading-size: 30px;
		--sp-svc-tech-pad-top: 64px;
		--sp-svc-tech-pad-bottom: 64px;
		--sp-svc-tech-item-title-size: 22px;
		--sp-svc-tech-item-pad-y: 16px;
		--sp-svc-tech-header-gap: 12px;
		--sp-svc-tech-desc-size: 15px;
		--sp-svc-tech-desc-tracking: 0.38px;
		--sp-svc-tech-group-gap-y: 28px;
		--sp-svc-tech-panel-top: 20px;
		--sp-svc-detail-title-size: 22px;
		--sp-svc-detail-desc-size: 17px;
		--sp-svc-detail-desc-bottom: 36px;
		--sp-svc-detail-caps-item-size: 18px;
		--sp-svc-detail-image-pad-y: 40px;
		--sp-svc-detail-content-pad-top: 24px;
	}

	.sp-svc-tech__groups {
		grid-template-columns: 1fr;
	}

	.sp-svc-tech__item-meta {
		min-width: 88px;
	}
}

/* ─── 576px ──────────────────────────────────── */
@media (max-width: 576px) {
	:root {
		--sp-svc-tech-pad-top: 60px;
		--sp-svc-tech-pad-bottom: 60px;
	}
}

/* ─── 480px ──────────────────────────────────── */
@media (max-width: 480px) {
	:root {
		--sp-svc-tech-pad-top: 56px;
		--sp-svc-tech-pad-bottom: 56px;
		--sp-svc-tech-item-title-size: 20px;
		--sp-svc-tech-item-number-size: 18px;
		--sp-svc-tech-item-pad-y: 14px;
		--sp-svc-tech-header-gap: 12px;
		--sp-svc-tech-desc-size: 15px;
		--sp-svc-tech-desc-tracking: 0.33px;
		--sp-svc-tech-group-gap-y: 24px;
		--sp-svc-tech-panel-top: 18px;
		--sp-svc-tech-group-label-size: 14px;
		--sp-svc-tech-group-label-bottom: 10px;
		--sp-svc-tech-group-item-size: 16px;
		--sp-svc-tech-accent-width: 28px;
		--sp-svc-tech-accent-gap: 10px;
		--sp-svc-detail-title-size: 20px;
		--sp-svc-detail-desc-size: 16px;
		--sp-svc-detail-desc-bottom: 32px;
		--sp-svc-detail-caps-label-size: 14px;
		--sp-svc-detail-caps-label-bottom: 24px;
		--sp-svc-detail-caps-item-size: 17px;
		--sp-svc-detail-caps-item-pad-top: 18px;
		--sp-svc-detail-caps-item-pad-bottom: 14px;
		--sp-svc-detail-content-pad-top: 20px;
	}

	.sp-svc-hero__cta {
		flex-wrap: wrap;
		gap: 12px;
	}
.page-template-services .sp-svc-hero__cta{
    flex-wrap: nowrap !important;
}
	.sp-svc-hero__cta-button {
		width: 100%;
		justify-content: center;
	}

	.sp-svc-tech__item {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.sp-svc-tech__item-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		padding-block: var(--sp-svc-tech-item-pad-y);
	}

	.sp-svc-tech__item-meta,
	.sp-svc-tech__item-title,
	.sp-svc-tech__item-panel {
		grid-column: auto;
		grid-row: auto;
	}

	.sp-svc-tech__item-meta,
	.sp-svc-tech__item-title {
		padding-block: 0;
	}

	.sp-svc-tech__item.is-active .sp-svc-tech__item-header {
		padding-bottom: 0;
	}

	.sp-svc-tech__item-meta {
		width: auto;
		min-width: 0;
	}
}

/* ─── 390px ──────────────────────────────────── */
@media (max-width: 390px) {
	:root {
		--sp-svc-tech-pad-top: 52px;
		--sp-svc-tech-pad-bottom: 52px;
		--sp-svc-tech-heading-size: 26px;
		--sp-svc-tech-desc-size: 14px;
		--sp-svc-tech-group-gap-y: 22px;
		--sp-svc-detail-title-size: 20px;
		--sp-svc-detail-desc-size: 16px;
		--sp-svc-detail-caps-item-size: 16px;
	}
}

/* ─── 375px ──────────────────────────────────── */
@media (max-width: 375px) {
	:root {
		--sp-svc-tech-pad-top: 48px;
		--sp-svc-tech-pad-bottom: 48px;
		--sp-svc-tech-heading-size: 24px;
		--sp-svc-tech-desc-size: 14px;
		--sp-svc-detail-title-size: 19px;
		--sp-svc-detail-desc-size: 15px;
		--sp-svc-detail-caps-item-size: 16px;
	}
}

/* ─── 360px ──────────────────────────────────── */
@media (max-width: 360px) {
	:root {
		--sp-svc-tech-pad-top: 44px;
		--sp-svc-tech-pad-bottom: 44px;
		--sp-svc-tech-heading-size: 22px;
		--sp-svc-tech-desc-size: 14px;
		--sp-svc-detail-title-size: 18px;
		--sp-svc-detail-desc-size: 15px;
		--sp-svc-detail-caps-item-size: 15px;
		--sp-svc-tech-item-title-size: 18px;
		--sp-svc-tech-item-number-size: 16px;
		--sp-svc-tech-item-pad-y: 12px;
		--sp-svc-tech-group-gap-y: 20px;
		--sp-svc-tech-panel-top: 16px;
		--sp-svc-tech-group-item-size: 15px;
	}
}