/* Desktop vs Figma fixes: Services (post 34).
   Reference: Figma 4:5 "Sales Page – Programs/Services" (1512 artboard) for the
   hero, FAQ, coal band, newsletter and footer. The services list has no
   counterpart in 4:5 (the page was rebuilt with the homepage pattern), so it
   follows the homepage desktop frame 1:2 list: full-bleed rules, 113x149
   thumbnail at x=51, heading at x=191, body at x=862 in a 601px measure, rows
   229px apart. Verified at 1512px with compare/anchors_dk_services.py.
   Mobile and tablet (<=1024px) are untouched: every rule sits in a min-width:1025px query, where mobile-nav.js scales the 1512 artboard. */

@media (min-width: 1025px) {

	/* ── Buttons on this page: Figma draws every CTA 51px tall with a 4px
	   radius. The desktop 16px padding made them 60px. ─────────────────── */
	body.page-id-34 .elementor-element-7ffb8f3 > a.e-button-base,
	body.page-id-34 .elementor-element-dbb8c8c > a.e-button-base,
	body.page-id-34 .elementor-element-c616524 .elementor-button {
		min-height: 51px !important;
		height: 51px !important;
		padding: 0 20px !important;
		line-height: 27px !important;
		border-radius: 4px !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
		white-space: nowrap !important;
	}

	/* ── Hero: stag y=161, eyebrow 280, h1 332, copy 543, CTA 621 (232x51),
	   olive ends 835. ─────────────────────────────────────────────────────── */
	body.page-id-34 .elementor-element-7ffb8f3 {
		padding-bottom: 163px !important;
	}
	body.page-id-34 .elementor-element-7ffb8f3 > h1 {
		margin-top: 33px !important;
	}
	body.page-id-34 .elementor-element-7ffb8f3 > a.e-button-base {
		margin-top: 34px !important;
	}

	/* ── Services list (homepage 1:2 pattern) ──────────────────────────── */
	body.page-id-34 .sh-services-list {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* script 4681 -> h2 4783: 102px. The script box is 43px tall and the
	   column already has a 28px flex gap, so 31px more. */
	body.page-id-34 .elementor-element-8c358d5 > h2 {
		margin-top: 31px !important;
	}
	/* Rules run edge to edge in #3B1919 (Line 55-57), not inset 60px in #462222. */
	body.page-id-34 .sh-services-list > .e-div-block-base {
		align-self: stretch !important;
		width: 100% !important;
		max-width: none !important;
		background-color: #3B1919 !important;
	}
	body.page-id-34 .sh-service-row {
		align-self: stretch !important;
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box !important;
		/* 51px / 49px at the 1512 artboard, centred on wider screens so the
		   rows line up with the 1414px FAQ boxes instead of hugging the left. */
		padding: 40px calc(50% - 707px) 39px calc(50% - 705px) !important;
		gap: 0 !important;
		justify-content: flex-start !important;
	}
	body.page-id-34 .sh-service-row > img {
		flex: 0 0 113px !important;
		margin: 0 !important;
	}
	body.page-id-34 .sh-service-row > h3 {
		flex: 0 0 644px !important;
		width: 644px !important;
		max-width: none !important;
		/* x=191 after the 113px thumbnail at 51; 191 + 644 = 835 and the body
		   starts at 862, so 27px of air on both sides. */
		margin: 0 27px !important;
	}
	body.page-id-34 .sh-service-row > p {
		flex: 0 0 601px !important;
		width: 601px !important;
		max-width: none !important;
		margin: 0 !important;
	}

	/* ── FAQ: sand band, script 108px in, h2 75px under it, boxes 99px under
	   the h2; boxes 1414 wide with a 1px #462222 rule, 35px apart; closed boxes
	   95px (question 30px in), the open box puts its question 37px in, the icon
	   9px ABOVE the question line, the answer 87px under the question top and
	   73px of room below it; 155px under the last box. ─────────────────── */
	body.page-id-34 .elementor-element-c1d6cff {
		padding-top: 108px !important;
		padding-bottom: 155px !important;
	}
	body.page-id-34 .elementor-element-2651f86 {
		padding-bottom: 99px !important;
	}
	body.page-id-34 .elementor-element-2651f86 > h2 + h2 {
		margin-top: 5px !important;
	}
	body.page-id-34 .elementor-element-1fd4cdb .sh-faq-row {
		margin: 0 !important;
		border: 1px solid #462222 !important;
		box-sizing: border-box !important;
		padding: 29px 32px 28px 34px !important;
	}
	body.page-id-34 .elementor-element-1fd4cdb .sh-faq-row.sh-faq-open {
		padding-top: 36px !important;
		padding-bottom: 72px !important;
	}
	body.page-id-34 .elementor-element-1fd4cdb .sh-faq-open .sh-faq-head {
		align-items: flex-start !important;
	}
	body.page-id-34 .elementor-element-1fd4cdb .sh-faq-open .sh-faq-icon {
		margin-top: -9px !important;
	}
	body.page-id-34 .elementor-element-1fd4cdb .sh-faq-answer {
		margin-top: 51px !important;
	}

	/* ── Coal band: 698px olive, stag 125px in, h2 12px under it. The outer
	   wrapper added 94px of sand above the band. ───────────────────────── */
	body.page-id-34 .elementor-element-bfed733 {
		padding-top: 0 !important;
		height: auto !important;
		min-height: 0 !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c {
		padding-top: 125px !important;
		padding-bottom: 160px !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c > img {
		margin-bottom: 12px !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* ── Newsletter: 263px pink band; heading top-left 58px down; two 339x55
	   fields 13px apart starting x=773, 71px down; a 281x51 button 17px under
	   them, left-aligned. The build centred the row and stretched the button
	   across both columns. ─────────────────────────────────────────────── */
	body.page-id-34 .elementor-element-c616524 {
		align-items: flex-start !important;
		box-sizing: border-box !important;
		height: 263px !important;
		padding: 58px 48px 0 46px !important;
	}
	body.page-id-34 .elementor-element-c616524 > .sh-newsletter-form {
		flex: 0 0 691px !important;
		width: 691px !important;
		max-width: none !important;
		margin-top: 13px !important;
	}
	body.page-id-34 .elementor-element-c616524 .elementor-form-fields-wrapper {
		margin: 0 !important;
		gap: 0 !important;
	}
	body.page-id-34 .elementor-element-c616524 .elementor-field-group {
		padding: 0 !important;
		margin: 0 !important;
	}
	body.page-id-34 .elementor-element-c616524 .elementor-field-type-text,
	body.page-id-34 .elementor-element-c616524 .elementor-field-type-email {
		flex: 0 0 339px !important;
		width: 339px !important;
		max-width: none !important;
	}
	body.page-id-34 .elementor-element-c616524 .elementor-field-type-text {
		margin-right: 13px !important;
	}
	body.page-id-34 .elementor-element-c616524 .e-form__buttons {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: none !important;
		margin-top: 17px !important;
		justify-content: flex-start !important;
	}
	body.page-id-34 .elementor-element-c616524 .e-form__buttons .elementor-button {
		flex: 0 0 281px !important;
		width: 281px !important;
		min-width: 281px !important;
	}
	body.page-id-34 .elementor-element-c616524 input.elementor-field-textual {
		width: 339px !important;
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	body.page-id-34 .elementor-element-c616524 input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}

	/* ── Footer: NAVIGATION at x=1142, CONNECT at x=1357 (links 4px in under
	   NAVIGATION), wordmark 1414x186 at x=50 25px above an 89px legal bar
	   whose labels sit 18px down at x=46 / 176 / 1373. ───────────────────── */
	body.page-id-34 .elementor-element-a0a41ce {
		flex: 0 0 322px !important;
		width: 322px !important;
		gap: 0 !important;
	}
	body.page-id-34 .elementor-element-ae61744 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-34 .elementor-element-ae61744 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-34 .elementor-element-e5f801a {
		padding: 256px 0 25px !important;
		justify-content: center !important;
	}
	body.page-id-34 .elementor-element-e5f801a > img {
		width: 1414px !important;
		max-width: none !important;
		height: 186px !important;
		margin: 0 !important;
		object-fit: fill !important;
	}
	body.page-id-34 .elementor-element-9e074f5 {
		box-sizing: border-box !important;
		height: 89px !important;
		padding: 18px 51px 0 46px !important;
		align-items: flex-start !important;
	}
	body.page-id-34 .elementor-element-a8c50a5 {
		column-gap: 12px !important;
		gap: 12px !important;
	}
}

/* ── Visual QA 2026-10-04 (tablet and desktop) ────────────────────────────
   Case studies ("A few of the wins"): the covers are 16:9 text posters. The
   shared card crops them to 436:358, which cut the poster copy mid-word
   ("WELLN", "ORGA") and the SOCIALHART mark on the left. Show the whole
   poster, as the Success Stories page already does, and give the grid some
   air under the heading (its descenders sat on the first row of covers). */
@media (min-width: 768px) {
	body.page-id-34 .elementor-element-fe6ddff .sh-resource-cards {
		margin-top: 56px !important;
	}
	body.page-id-34 .elementor-element-fe6ddff .sh-resource-cards .sh-resource-card-img {
		aspect-ratio: 9 / 8 !important; /* 2026-10-11: new 1800x1600 covers (was 16:9) */
		object-fit: contain !important;
	}
}