/* Our Work: global synced pattern (wp_block "opx-our-work"). Geometry measured on production (home and service pages). */
body .opx-our-work {
	box-sizing: border-box;
	margin: 0;
	padding-inline: max(var(--wp--preset--spacing--section-x), calc((100% - 1400px) / 2));
}

body .opx-our-work__inner {
	box-sizing: border-box;
	padding: calc(5% + 10px) 10px 60px;
}

body .opx-our-work__title {
	margin: 0 0 30px;
}

body .opx-our-work__query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .opx-our-work__query .wp-block-post-template > li {
	display: flex;
	min-width: 0;
}

body .opx-our-work__item {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 50px 10px 0;
	margin: 0;
	gap: 0;
	justify-content: flex-start;
}

body .opx-our-work__img {
	margin: 0 0 20px;
}

body .opx-our-work__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

body .opx-our-work__name {
	margin: 0 0 14px;
	font-weight: 500;
}

/* the case-study titles carry an inline orange span; production renders the whole title in ink */
body .opx-our-work__name span {
	color: var(--wp--preset--color--ink) !important;
	-webkit-text-fill-color: var(--wp--preset--color--ink) !important;
}

body .opx-our-work__excerpt {
	margin: 0 0 23px;
	font-weight: 300;
}

body .opx-our-work__more.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0 0 6.4px;
	gap: 16px;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	text-decoration: none;
	white-space: nowrap;
}

body .opx-our-work__more.wp-block-read-more::after {
	content: "";
	position: static;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1024px) {
	body .opx-our-work__inner {
		padding-top: calc(10% + 10px);
		padding-bottom: calc(5vw + 36px);
	}

	body .opx-our-work__title {
		margin-bottom: 10px;
	}

	body .opx-our-work__item {
		padding: 50px 10px 20px;
	}

	body .opx-our-work__query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	body .opx-our-work__img {
		max-width: 800px;
		margin-bottom: 20px;
	}

	body .opx-our-work__name {
		margin-bottom: 14px;
	}

	body .opx-our-work__excerpt {
		margin-bottom: 23px;
	}
}

@media (max-width: 767px) {
	body .opx-our-work__inner {
		padding: 15% 0 10%;
	}

	body .opx-our-work__title {
		margin-bottom: 36px;
		padding-inline: 5%;
	}

	body .opx-our-work__query .wp-block-post-template {
		row-gap: 0;
	}

	body .opx-our-work__item {
		padding: 50px 10px 110px;
	}

	body .opx-our-work__excerpt {
		margin-bottom: 25px;
	}
}

/* Service page wrapper around synced pattern 22420. */
#sec-work.opx-our-work {
	margin: 0;
	padding: 0 !important;
}

@media (max-width: 767px) {
	#sec-work.opx-our-work {
		padding: 5px 0 13px !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	#sec-work.opx-our-work {
		padding: 17px 0 20px !important;
	}
}

@media (min-width: 1440px) {
	#sec-work.opx-our-work {
		padding: 17px 0 25px !important;
	}

	body .opx-our-work__name,
	body .opx-our-work__excerpt {
		max-width: 395px;
	}
}

/* About "Our Work" (its #sec-work wrapper has no opx-our-work class, unlike the service pages) — production's About "Our Work" uses the same grid without the inner card padding:
   cards are the full 415.3px column (titles wrap to 2 lines), 30px under the heading, links follow the text.
   Measured at 1440 / 1024 / 768 / 390: below the last link 75 / 56 / 45 / 96px.
   Horizontal inset is only .opx-about alignfull page pad (76px), not the pattern section-x. */
#sec-work:not(.opx-our-work) .opx-our-work {
	padding-inline: 0;
}

#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__inner {
	padding-inline: 0;
}

#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__item {
	padding: 0;
	justify-content: space-between;
}

/* production's About cards share one height per row/stack, content spread evenly (shorter cards get the extra space) */
#sec-work:not(.opx-our-work) .opx-our-work .wp-block-post-template {
	grid-auto-rows: 1fr;
}

#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__name,
#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__excerpt {
	max-width: none;
}

@media (min-width: 1025px) {
	#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__inner {
		padding-bottom: 75px;
	}
}

@media (max-width: 1024px) {
	#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__inner {
		padding-bottom: calc(4.3vw + 12px);
	}

	#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__title {
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
	#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__title {
		margin-bottom: 17px;
		padding-inline: 0;
	}

	#sec-work:not(.opx-our-work) .opx-our-work .opx-our-work__item {
		padding-bottom: 61px;
	}
}

/* Integrations "Our Work" — production uses the About geometry (full 415px columns, 30px / 16px phone under the heading,
   links follow the text, 30px between stacked cards / 60px on phones), not the service-page card padding. */
body:has(#sec-integrations-library) #sec-work .opx-our-work__item { padding: 0; }
body:has(#sec-integrations-library) #sec-work .opx-our-work__name,
body:has(#sec-integrations-library) #sec-work .opx-our-work__excerpt { max-width: none; }
@media (max-width: 767px) {
	body:has(#sec-integrations-library) #sec-work .opx-our-work__item { padding-bottom: 60px; }
}
/* Integrations: heading 80px above the images (53px phone), section top as on production (phone spacing comes from the even spread below). */
body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-top: 40px; }
@media (min-width: 769px) and (max-width: 1024px) { body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-top: 80px; } }
@media (min-width: 768px) and (max-width: 768px) { body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-top: 42px; } }
@media (max-width: 1024px) { body:has(#sec-integrations-library) #sec-work .opx-our-work__title { margin-bottom: 30px; } }
@media (max-width: 767px) {
	body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-top: 44px; }
	body:has(#sec-integrations-library) #sec-work .opx-our-work__title { margin-bottom: 17px; }
	
}
/* Integrations: space below the last card down to the contact CTA (production). */
body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-bottom: 99px; }
@media (min-width: 769px) and (max-width: 1024px) { body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-bottom: 80px; } }
@media (min-width: 768px) and (max-width: 768px) { body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-bottom: 116px; } }
@media (max-width: 767px) { body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-bottom: 61px; } }
/* Integrations: production's space above the "Our Work" heading scales with the width — 4.5% + 10px (desktop),
   9% + 10px (tablet), 13.5% + 10px (phones) of the section width — replacing the fixed paddings above. */
body:has(#sec-integrations-library) #sec-work.opx-our-work { padding-top: calc(4.5% + 10px) !important; }
body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-top: 0 !important; }
@media (max-width: 1024px) { body:has(#sec-integrations-library) #sec-work.opx-our-work { padding-top: calc(9% + 10px) !important; } }
@media (max-width: 767px) { body:has(#sec-integrations-library) #sec-work.opx-our-work { padding-top: calc(13.5% + 10px) !important; } }
/* Integrations: production's space from the last case-study link to the contact panel is 4.5% + 70px (desktop), 4.5% + 90px (tablet),
   9% + 120px (phones); the contact section supplies 60 / 80 / 120px of it. */
body:has(#sec-integrations-library) #sec-work .opx-our-work__inner { padding-bottom: 0 !important; }
body:has(#sec-integrations-library) #sec-work.opx-our-work { padding-bottom: calc(4.5% + 10px) !important; }
@media (max-width: 767px) { body:has(#sec-integrations-library) #sec-work.opx-our-work { padding-bottom: 9% !important; } }
/* Integrations: like About, every case-study card takes the tallest card's height and spreads its content evenly. */
body:has(#sec-integrations-library) #sec-work .wp-block-post-template { grid-auto-rows: 1fr; }
body:has(#sec-integrations-library) #sec-work .opx-our-work__item { justify-content: space-between; }
body:has(#sec-integrations-library) #sec-work .opx-our-work__more.wp-block-read-more { margin-top: 0; }


/* Float accent links — same motion as .opx-our-work__more (approach Get Started, etc.). */
body .kit-more a,
body a.kit-more {
	transition: transform 0.3s ease-out;
}

body .kit-more a:is(:hover, :focus-visible),
body a.kit-more:is(:hover, :focus-visible) {
	transform: translateY(-8px);
}

/* Production Our Work section (all pages): blurred gradient (bg-gradient-blur-v3) on a ::before behind the content — contain, top-left, repeated. */
html body .opx-our-work:has(> .opx-our-work__inner) { position: relative; isolation: isolate; }
html body .opx-our-work:has(> .opx-our-work__inner)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/wp-content/uploads/2023/10/bg-gradient-blur-v3.png") 0 0 / contain repeat; pointer-events: none; }

/* Service pages (#sec-our-work wrapper; production Elementor template 17606): equal-height cards with 50px bottom padding,
   content spread by flex space-between with a 20px gap (text and link pulled up 20px / 12px, as on production). */
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__inner { padding-bottom: calc(5% + 10px); }
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__query .wp-block-post-template { grid-auto-rows: 1fr; }
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__item { padding-bottom: 50px; gap: 20px; justify-content: space-between; }
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__img { margin: 0; }
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__name { margin: 0 0 14px; }
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__excerpt { margin: -20px 0 14.4px; }
:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__more.wp-block-read-more { margin: -12px 0 0; }
@media (max-width: 767px) {
	:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__item { padding-bottom: 110px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__title { margin-bottom: 30px; }
}
@media (max-width: 767px) {
	:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__title { margin-bottom: 16px; }
	:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__more.wp-block-read-more { margin-top: -10px; }
	:is(#sec-our-work, body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work) .opx-our-work__inner { padding-bottom: 9vw; }
}

/* The synced work section owns its spacing. */
body:is([class~="page-id-22591"], [class~="page-id-22854"]) #sec-work.opx-our-work { margin: 0; padding: 0; }