/* Mobile vs Figma fixes: services. Scoped per page; see custom.css "Mobile vs Figma pass" for shared header/menu/button rules.

   Reference: Figma 109:8 "Sales, Product - Mobile" (440 x 11837) for the
   hero, FAQ, coal band, newsletter and footer. The middle of /services/ is
   no longer the sales-page body: commit b3e3e7b rebuilt it with the
   homepage's "The Services" list pattern, so that block follows the
   homepage frame (109:3, y=5829-8621) instead. All numbers are Figma
   artboard pixels at 440px. */

@media (max-width: 767px) {

	/* ── Hero (Figma y=0-781) ──────────────────────────────────────────────
	   Stag 65x98 at y=125, eyebrow 244, h1 282 (five 45px lines), copy 509 in
	   a 313px measure, 232x51 CTA 644, olive ends 781. The build had 91px top
	   padding, a 113px stag, a 384px copy measure and 146px bottom padding
	   (olive ran to y=920). */
	body.page-id-34 .elementor-element-7ffb8f3 {
		padding: 44px 28px 86px !important;
	}
	body.page-id-34 .elementor-element-7ffb8f3 > img[src*="hero_deer"] {
		width: 66px !important;
		height: 98px !important;
	}
	body.page-id-34 .elementor-element-7ffb8f3 > h1 {
		margin-top: 20px !important;
	}
	body.page-id-34 .elementor-element-7ffb8f3 > p:last-of-type {
		margin: 38px auto 0 !important;
		max-width: min(313px, 100%) !important;
	}
	body.page-id-34 .elementor-element-7ffb8f3 > a.e-button-base {
		margin-top: 47px !important;
	}

	/* ── Services list (homepage "The Services" pattern) ────────────────────
	   Script 60px, 32px to a 45px/37.8 heading, 22px body, then 64px to a
	   double hairline (36px apart) and full-bleed rows: 31px to a 113x149
	   thumbnail, 20px to a 45px heading at x=28, 30px to 22px body. The
	   build ran a 40px/38 heading, 18px/26 copy, 30px names, 68px-tall
	   thumbnails (height:auto), 28px row padding and rules inset by 24px.
	   The section opens 87px under the olive, as the sales frame's
	   "Ready for Growth" block does (781 -> 868). */
	body.page-id-34 .sh-services-list {
		padding: 87px 0 110px !important;
	}
	body.page-id-34 .elementor-element-8c358d5 {
		width: 100% !important;
		padding: 0 28px 64px !important;
		border-bottom: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.page-id-34 .elementor-element-8c358d5 > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		margin-top: 32px !important;
	}
	body.page-id-34 .elementor-element-8c358d5 > p {
		font-size: 22px !important;
		line-height: 22px !important;
		margin-top: 28px !important;
	}
	body.page-id-34 .sh-services-list > .e-div-block-base {
		width: 100% !important;
		background-color: #3B1919 !important;
	}
	body.page-id-34 .elementor-element-172dd00 {
		margin-top: 35px !important;
	}
	body.page-id-34 .sh-services-list > .sh-service-row {
		width: 100% !important;
		padding: 31px 28px 47px !important;
		box-sizing: border-box !important;
		flex-wrap: nowrap !important;
	}
	body.page-id-34 .sh-service-row > img {
		width: 113px !important;
		height: 149px !important;
		object-fit: cover !important;
		margin: 0 0 20px !important;
	}
	body.page-id-34 .sh-service-row > h3,
	body.page-id-34 .sh-service-row > h3 a {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: -0.5px !important;
	}
	body.page-id-34 .sh-service-row > h3 {
		width: 100% !important;
		margin: 0 0 30px !important;
	}
	body.page-id-34 .sh-service-row > p {
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
	}

	/* ── FAQ (Figma y=5040-6718) ───────────────────────────────────────────
	   Script at +127, heading 28px under it, first box 27px under the
	   heading. Boxes 382px wide, 1px #462222, 17px apart; question 40px at
	   23px/29px inside; the 33px icon top-aligned with the question, 22px
	   from the right; answer 59px under a four-line question; 35px bottom
	   padding closed, 39px open; sand ends 86px under the last box. The build
	   had 60px section padding, a 20px/123px heading rhythm, 30px box
	   padding, a centred icon with a text glyph, and 47px between boxes. */
	body.page-id-34 .elementor-element-c1d6cff {
		padding: 127px 28px 86px !important;
	}
	/* The block already has a 20px flex gap; 8px more makes Figma's 28. */
	body.page-id-34 .elementor-element-2651f86 > h2:nth-of-type(2) {
		margin-top: 8px !important;
	}
	body.page-id-34 .elementor-element-2651f86 {
		padding-bottom: 27px !important;
	}
	body.page-id-34 .elementor-element-1fd4cdb {
		row-gap: 17px !important;
		align-items: center !important;
	}
	body.page-id-34 .sh-faq-row {
		width: 382px !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 28px 21px 34px 22px !important;
		border: 1px solid #462222 !important;
		box-sizing: border-box !important;
	}
	body.page-id-34 .sh-faq-row.sh-faq-open {
		padding-bottom: 38px !important;
	}
	body.page-id-34 .sh-faq-head {
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
	}
	body.page-id-34 .sh-faq-head > span.e-paragraph-base {
		max-width: 269px !important;
	}
	body.page-id-34 .sh-faq-icon {
		flex: 0 0 33px !important;
		width: 33px !important;
		height: 33px !important;
		margin-top: 1px !important;
		border-radius: 50% !important;
		background-color: #3B1919 !important;
		background-image:
			linear-gradient(#EAE4D8, #EAE4D8),
			linear-gradient(#EAE4D8, #EAE4D8) !important;
		background-size: 20px 1px, 1px 20px !important;
		background-position: center, center !important;
		background-repeat: no-repeat !important;
	}
	body.page-id-34 .sh-faq-open .sh-faq-icon {
		background-image: linear-gradient(#EAE4D8, #EAE4D8) !important;
		background-size: 20px 1px !important;
	}
	body.page-id-34 .sh-faq-icon > span {
		display: none !important;
	}
	body.page-id-34 .sh-faq-answer {
		margin-top: 59px !important;
		max-width: 321px !important;
	}

	/* ── Coal band (Figma olive y=9939) ────────────────────────────────────
	   Same geometry as the homepage: stag 150px into the olive, h2 27px
	   under it, copy +40, 238x51 CTA +43, pink 145px under the CTA. The
	   build stacked 94px + 110px of top padding and a 113px stag. */
	body.page-id-34 .elementor-element-bfed733 {
		padding: 0 !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c {
		padding: 150px 28px 145px !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c > img {
		width: 66px !important;
		height: 98px !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c > p {
		margin: 40px 0 43px !important;
	}
	body.page-id-34 .elementor-element-dbb8c8c > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* ── Newsletter (Figma y=10716, 492px) ─────────────────────────────── */
	body.page-id-34 .elementor-element-26805fb {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	body.page-id-34 .elementor-element-c616524 {
		padding: 58px 28px 69px !important;
	}
	body.page-id-34 .sh-newsletter-form {
		margin-top: 49px !important;
	}
	body.page-id-34 .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	body.page-id-34 .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	body.page-id-34 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	body.page-id-34 .sh-newsletter-form input.elementor-field-textual {
		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 .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-34 .sh-newsletter-form .e-form__buttons .elementor-button {
		flex: 0 0 auto !important;
		min-width: 281px !important;
		width: 281px !important;
		min-height: 51px !important;
		height: 51px !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}

	/* ── Footer (Figma y=11208-11837) ──────────────────────────────────── */
	body.page-id-34 .elementor-element-af9031e {
		padding: 70px 28px 0 !important;
	}
	body.page-id-34 .elementor-element-501959f {
		display: none !important;
	}
	body.page-id-34 .elementor-element-a0a41ce {
		margin-left: 32px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	body.page-id-34 .elementor-element-ae61744 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-34 .elementor-element-a0a41ce p:not(:first-child),
	body.page-id-34 .elementor-element-a0a41ce .e-paragraph-link-base {
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	body.page-id-34 .elementor-element-a0a41ce .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
	}
	body.page-id-34 .elementor-element-ae61744 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-34 .elementor-element-e5f801a {
		padding: 91px 28px 27px !important;
	}
	body.page-id-34 .elementor-element-e5f801a > img {
		content: url('../../img/socialhart-wordmark-2line-dark.png');
		width: 376px !important;
		max-width: 100% !important;
		height: 173px !important;
		object-fit: contain !important;
		margin: 0 !important;
	}
	body.page-id-34 .elementor-element-9e074f5 {
		padding: 23px 26px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	body.page-id-34 .elementor-element-a8c50a5 {
		flex: 0 0 auto !important;
		width: auto !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
	}
	body.page-id-34 .elementor-element-d45b749 {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
	}
}

/* Below the 440px artboard the legal row cannot hold all three links. */
@media (max-width: 439px) {
	body.page-id-34 .elementor-element-9e074f5,
	body.page-id-34 .elementor-element-a8c50a5 {
		flex-wrap: wrap !important;
	}
}

/* ── Visual QA 2026-10-04 (phones) ──────────────────────────────────────── */
@media (max-width: 767px) {

	/* Review cards: only the first card carries the mobile type variant
	   (30px/27px quote, 20px attribution). The other seven fell back to an
	   18px quote on a 36px line and an 18px attribution, so the quote read as
	   small double-spaced text. Give every card the first card's setting. */
	body.page-id-34 .sh-testi-track .sh-testi-card .sh-testi-quote {
		font-size: 30px !important;
		line-height: 27px !important;
	}
	body.page-id-34 .sh-testi-track .sh-testi-card > p:not(.sh-testi-quote) {
		font-size: 20px !important;
	}

	/* 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 (it sat flush against it). */
	body.page-id-34 .elementor-element-fe6ddff .sh-resource-cards {
		margin-top: 40px !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;
	}
}

/* Visual QA 2026-10-04 (phones): the review carousel's round arrows sat at
   mid-card, on top of the quote text. Drop them into the empty band between
   the quote and the attribution. */
@media (max-width: 767px) {
	body.page-id-34 .sh-testi-frame > .sh-testi-arrow {
		top: 68% !important;
	}
}