/* Single-post template footer: the theme-builder footer location renders as a
   literal <footer> tag here (other templates bake the same footer content
   directly into their own page, as a plain div). Its immediate parent is a
   column flexbox with align-items:center, which sizes a non-flex child like
   <footer> to its own shrink-to-fit content width instead of stretching it to
   100% — and because that content doesn't need to wrap until ~980px, the
   footer renders at a fixed ~980px on every viewport up to that, silently
   spilling past html/body's overflow-x:hidden below it (confirmed: identical
   980px box from 768px up to 1024px). Below 980px this makes roughly the
   right half of the footer - further nav links, social icons, the legal bar -
   completely invisible and untappable. Not viewport-scoped: the bug is present
   at any width under ~980px, not just phones. */
footer.elementor-location-footer {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Client-supplied fonts (C:\Users\mohsa\Downloads\fontsforsocialhart) — the
   real typefaces, replacing every earlier lookalike substitution. */
@font-face {
	font-family: 'Sofia Sans Extra Condensed';
	src: url('../fonts/SofiaSansExtraCondensed-Variable.ttf') format('truetype');
	font-weight: 1 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sofia Sans Extra Condensed';
	src: url('../fonts/SofiaSansExtraCondensed-Italic-Variable.ttf') format('truetype');
	font-weight: 1 1000;
	font-style: italic;
	font-display: swap;
}

/* "Cepelin" is the Figma layer's font label — the client's actual purchased
   display face is also literally named Cepelin (Calderón foundry). Single
   static weight (Regular); do not request other weights for it. */
@font-face {
	font-family: 'Cepelin';
	src: url('../fonts/Cepelin-Regular.woff2') format('woff2'),
	     url('../fonts/Cepelin-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Elementor 4 gives every container a default 10px padding via --padding,
   which draws an unwanted frame around every full-bleed section. Zero the
   variable; paddings set explicitly per element still apply. */
.e-con {
	--padding: 0px;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
}

/* Newsletter form: Elementor Pro's form widget has no field-height control;
   the design's inputs are ~52px tall with the label row hidden. */
.sh-newsletter-form .elementor-form,
.sh-newsletter-form .elementor-widget-form {
	width: 100%;
}
.sh-newsletter-form .elementor-field-group .elementor-field {
	min-height: 54px;
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 20px;
	letter-spacing: -0.6px;
}
.sh-newsletter-form .elementor-button[type="submit"] {
	min-height: 51px;
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-weight: 700;
	font-size: 25px;
	letter-spacing: -0.2px;
	text-transform: uppercase;
}

/* ---- Rolling client-logo banner ----
   Same two-copies trick as the text marquee; the cream fade sits over the
   left edge so logos slide in from under the label. */
.sh-logo-track {
	flex-wrap: nowrap !important;
	width: max-content !important;
	animation: sh-marquee 32s linear infinite;
}
.sh-logo-fade {
	background: linear-gradient(to right, #EAE4D8 0%, rgba(234, 228, 216, 0) 100%) !important;
	pointer-events: none;
}

/* FAQ accordion: only the open row shows its answer and the minus icon;
   toggled by .sh-faq-open, added/removed by mobile-nav.js on click. */
.sh-faq-answer {
	display: none;
}
.sh-faq-open .sh-faq-answer {
	display: block;
}
.sh-faq-icon-minus {
	display: none;
}
.sh-faq-open .sh-faq-icon-minus {
	display: block;
}
.sh-faq-open .sh-faq-icon-plus {
	display: none;
}

/* Lead-gen form: multi-line fields get a full box like Figma's mockup instead
   of the single-line underline style; submit button hugs its label instead
   of stretching the full row width. */
.sh-lead-form textarea.elementor-field {
	border: 1px solid #3B1919 !important;
	border-radius: 2px !important;
	padding: 12px !important;
	min-height: 90px;
}
.sh-lead-form .elementor-field-group input.elementor-field {
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 20px;
}
.sh-lead-form .elementor-field-group label {
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-size: 17px;
}
.sh-lead-form .e-form__buttons {
	justify-content: center !important;
}
.sh-lead-form .e-form__buttons .elementor-button {
	width: auto !important;
	min-width: 240px;
	flex-grow: 0 !important;
}

/* Resources page "Library" card grid — real posts via [sh_resource_cards],
   styled to match the static Figma card design exactly. flex-wrap instead of
   a fixed 3-column grid so it degrades gracefully with 1-5 posts, not just 6+. */
.sh-resource-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 39px 39px;
	width: 100%;
	max-width: 1386px;
}
.sh-resource-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 436px;
	max-width: 100%;
	text-decoration: none;
	color: inherit;
}
/* Scoped to the grid (specificity 0,2,0) because Elementor ships
   `.elementor img { height: auto }` at 0,1,1, which beat a lone
   `.sh-resource-card-img` and silently dropped the card's fixed height. Every
   thumbnail then rendered at its own natural aspect ratio, so a portrait
   featured image made a 915px-tall card sit beside a 436px one and the row
   fell apart. aspect-ratio rather than a pixel height so the Figma 436x358
   proportion holds at mobile widths too, where 358px would be taller than
   the card is wide. */
.sh-resource-cards .sh-resource-card-img {
	width: 436px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 436 / 358;
	object-fit: cover;
	display: block;
}
/* The case-study covers are text posters ("SOCIALHART case study / How a
   Fortune 500 Wellness Brand Achieved..."), not photographs, so their cards
   show the whole poster rather than cropping into the copy. Since the
   client's 2026-10-11 covers (1800x1600) the box is 9:8, so they fill it.
   Related-post cards are matched by file name: under a case study they are
   case studies, under a blog post they are blog covers - mixed shapes,
   including 2:1 photos - which keep the blog feed's 436x358 `cover` box
   above rather than sitting in a 9:8 box with bands. */
body.page-id-37 .sh-resource-cards .sh-resource-card-img,
.sh-related-cards .sh-resource-card-img[src*="/case-study-"] {
	aspect-ratio: 9 / 8;
	object-fit: contain;
}
/* The case-study grid sat flush against its "A few of the wins" heading -
   a measured 0px gap, where the blog feed's equivalent container carries
   112px from Elementor. Same section shape; this one just never got the
   spacer. */
body.page-id-37 .sh-resource-cards {
	margin-top: 112px;
}
/* Figma sets this at 40px/36px in a title box of exactly 108px - three lines -
   and its placeholder titles were ~45 characters. The real posts run to 94
   ("How a Health Tech Brand Drove +63% Immediate Lift Within 30 Days and 763%
   Overall in 12 Months"), which at 40px is five lines: the titles then tower
   over their own thumbnails and every card in the row ends at a different
   height. 32px/30px keeps the design's proportions while bringing real titles
   back inside roughly the three-line envelope it was drawn for. */
.sh-resource-card-title {
	font-family: 'Cepelin', sans-serif;
	font-size: 32px;
	line-height: 30px;
	letter-spacing: -0.4px;
	text-transform: uppercase;
	color: #3B1919;
	text-align: center;
	margin-top: 24px;
	min-height: 90px; /* the design's 3-line box, so short titles still reserve it */
}
/* Figma bottom-aligns "read more" at a fixed card height, which only works
   because every title there is the same length. margin-top:auto reproduces
   that alignment from real titles of differing heights - the flex row already
   stretches all cards to a common height, so this pins the link to the bottom
   of each one instead of trailing 56px under a title of arbitrary depth. */
.sh-resource-card-readmore {
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-weight: 700;
	font-size: 25px;
	letter-spacing: -0.25px;
	text-transform: uppercase;
	text-decoration: underline;
	color: #3B1919;
	margin-top: auto;
	padding-top: 56px;
}
/* Single column on mobile, so a card is only ~334px wide: at 32px the longest
   real title runs six lines and its block stands taller than the thumbnail it
   belongs to. Figma has no mobile feed frame to copy, so these are scaled to
   keep the title shorter than its own image. */
@media (max-width: 767px) {
	.sh-resource-card-title {
		font-size: 24px;
		line-height: 23px;
		min-height: 69px;
		margin-top: 18px;
	}
	.sh-resource-card-readmore {
		padding-top: 32px;
	}
}
/* Services list (the design's own "The Services" row pattern, from the
   homepage). Desktop geometry comes from Figma: thumbnail 113x149, name
   column 544, description column 601, 78px gaps.

   On mobile the row stacks and the fixed column widths have to go. The
   heading needs shrinking for a real reason, not taste: at 70px the widest
   word ("DRAWN-OUT") has a min-content width of 372px and a flex item cannot
   shrink below that, so it pushed 42px past a 390px viewport no matter what
   max-width said. */
@media (max-width: 767px) {
	.sh-services-list,
	.sh-tools-list {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.sh-services-list h2,
	.sh-tools-list h2 {
		font-size: 40px !important;
		line-height: 38px !important;
	}
	.sh-services-list > .e-flexbox-base > p,
	.sh-tools-list > .e-flexbox-base > p {
		font-size: 18px !important;
		line-height: 26px !important;
	}
	.sh-service-row,
	.sh-tool-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
		padding: 28px 0 !important;
	}
	.sh-service-row > *,
	.sh-tool-row > * {
		width: 100% !important;
		max-width: 100% !important;
	}
	.sh-service-row img {
		width: 113px !important;
		max-width: 113px !important;
	}
	.sh-service-row h3,
	.sh-tool-row h3 {
		font-size: 30px !important;
		line-height: 29px !important;
	}
	.sh-service-row p,
	.sh-tool-row p {
		font-size: 18px !important;
		line-height: 26px !important;
	}
}

/* Safety net for narrow columns. Several product-page cards are ~140px wide
   on a phone while their heading's longest word is wider than that, and a
   word that cannot wrap simply overhangs its card ("ENTREPRENEURS LIVING THE
   STARTUP LIFE" ran 242px inside a 140px box). Allowing a break inside the
   word keeps the text in its container; it changes nothing at widths where
   the word already fits. */
@media (max-width: 767px) {
	.elementor h1,
	.elementor h2,
	.elementor h3,
	.elementor h4,
	.elementor p {
		overflow-wrap: break-word;
		/* These are flex items in columns that do not stretch them, so they
		   size to max-content and ignore the card's width entirely - which is
		   why break-word alone did not contain them. */
		max-width: 100%;
	}
}

/* Table-of-contents links were 22px tall, just under the 24x24 floor of
   WCAG 2.5.8 (AA) that the rest of the site already clears. */
.sh-toc-item a {
	display: inline-block;
	min-height: 24px;
}

/* The article's table of contents ran to 511px on a 390px screen: its links
   are one long inline run that cannot wrap mid-item. Making each item a block
   lets them stack instead of overhanging. */
@media (max-width: 767px) {
	.sh-toc-links {
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-width: 100%;
	}
	.sh-toc-item {
		display: block;
		max-width: 100%;
	}
	.sh-toc-item a {
		display: inline-block;
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}

/* Stat cards ("190% Increase in Non-Brand Traffic" and siblings). The design
   shows the heading filling the block, with its supporting paragraph revealed
   on hover, so the row reads as three clean numbers until you ask for detail.

   The card keeps a fixed min-height and centres its content, so collapsing the
   paragraph does not resize the card or shift the row - only the paragraph
   animates. Height is the tallest of the two live layouts (Shop 205, About
   189) minus padding, so neither clips when the paragraph is open.

   :focus-within carries the same reveal for keyboard users, and the paragraph
   is only hidden where hover is actually available - on touch, where there is
   no hover, both stay visible rather than becoming unreachable. */
@media (hover: hover) {
	.sh-stat-card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 190px;
	}
	.sh-stat-card > p {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.32s ease, opacity 0.22s ease, margin 0.32s ease;
	}
	.sh-stat-card:hover > p,
	.sh-stat-card:focus-within > p {
		max-height: 220px;
		opacity: 1;
	}
}

/* Previous / next post links, closing an article. Two columns that collapse
   to stacked rows on mobile; the "next" side is right-aligned so the pair
   reads as a spread rather than a list. */
.sh-post-nav {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0 0;
	border-top: 1px solid rgba(59, 25, 25, 0.35);
}
.sh-post-nav-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 46%;
	text-decoration: none;
	color: #3B1919;
}
.sh-post-nav-next {
	text-align: right;
	margin-left: auto;
}
.sh-post-nav-dir {
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: -0.2px;
}
.sh-post-nav-title {
	font-family: 'Cepelin', sans-serif;
	font-size: 28px;
	line-height: 27px;
	text-transform: uppercase;
	color: #462222;
}
.sh-post-nav-link:hover .sh-post-nav-title {
	text-decoration: underline;
}
@media (max-width: 767px) {
	.sh-post-nav {
		flex-direction: column;
		gap: 28px;
		padding-top: 28px;
	}
	.sh-post-nav-link {
		max-width: 100%;
	}
	.sh-post-nav-next {
		text-align: left;
		margin-left: 0;
	}
	.sh-post-nav-title {
		font-size: 24px;
		line-height: 23px;
	}
}

.sh-resource-cards-empty {
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 22px;
	color: #462222;
	text-align: center;
}

/* Single-post template body typography — this frame is a "kitchen sink" of
   content-block shapes (paragraph, H2, H3, bullet list, embedded images), so
   rather than hardcoding one example article, real post content (WordPress's
   the_content, via the theme-post-content widget) is styled to match Figma's
   type system for every future post automatically. */
.sh-post-content {
	color: #462222;
	text-align: center;
}
.sh-post-content h2 {
	font-family: 'Cepelin', sans-serif;
	font-size: 50px;
	line-height: 45px;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: #462222;
	margin: 80px 0 30px;
}
.sh-post-content h3 {
	font-family: 'Cepelin', sans-serif;
	font-size: 40px;
	line-height: 36px;
	letter-spacing: -0.4px;
	text-transform: uppercase;
	color: #462222;
	margin: 50px 0 20px;
}
.sh-post-content p,
.sh-post-content li {
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: -0.66px;
	color: #462222 !important;
	margin: 0 0 20px;
}
.sh-post-content ul,
.sh-post-content ol {
	list-style-position: inside;
	padding: 0;
	margin: 0 0 20px;
}
.sh-post-content a {
	color: #462222;
	text-decoration: underline;
}
.sh-post-content blockquote {
	font-family: 'Carta Nueva Unlicensed Trial', cursive;
	font-size: 40px;
	color: #AF2A45;
	border: none;
	margin: 40px 0;
	padding: 0;
}
.sh-post-content img {
	max-width: 100%;
	height: auto;
	margin: 30px 0;
}
.sh-post-content .wp-block-button__link {
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-weight: 700;
	font-size: 25px;
	letter-spacing: -0.25px;
	text-transform: uppercase;
	text-decoration: none;
	background: #EAC8C6;
	color: #462222;
	padding: 16px 22px;
	display: inline-block;
}

/* Auto-generated table of contents (see mobile-nav.js): links to each H2 in
   the post body, since Elementor has no dynamic tag for post headings. */
.sh-toc-box {
	display: none;
}
.sh-toc-box.sh-toc-has-links {
	display: flex;
}
/* Figma sets the entries justified across a 643px measure at 22px on a 33.66
   line, each numbered with a lower-case roman numeral. Flex-wrap with a
   generous column gap reproduces that spread without relying on justified
   text, which cannot control the gap between separate links. */
/* Figma's layout: the "IN THIS ARTICLE" label sits on the LEFT of the box
   (x=317) with the entries beside it in a 643px column starting at x=530 —
   not stacked underneath. The entries are one run of justified text that
   wraps naturally, so a line can hold one and a half entries; they are not a
   grid. Earlier attempts stacked the label above and laid the entries out in
   columns, which is why the block never matched. */
.sh-toc-box {
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0 !important;
	padding: 25px 27px !important;
}
.sh-toc-box > *:not(.sh-toc-links) {
	flex: 0 0 213px;
	max-width: 213px;
}
.sh-toc-links {
	display: block !important;
	flex: 1 1 auto;
	max-width: 643px;
	text-align: justify;
	line-height: 33.66px;
}
.sh-toc-item {
	display: inline;
	margin-inline-end: 16px;
	white-space: normal;
}
.sh-toc-num {
	margin-inline-end: 6px;
}
.sh-toc-num {
	color: #462222;
	font-variant-numeric: tabular-nums;
}
.sh-toc-links a {
	color: #462222;
	text-decoration: underline;
}
@media (max-width: 767px) {
	.sh-toc-box { flex-direction: column !important; gap: 10px !important; }
	.sh-toc-box > *:not(.sh-toc-links) { flex: 0 0 auto; max-width: none; }
	.sh-toc-links { text-align: left; max-width: none; }
}

/* Byline: the script face reads light at 66px, so the credit is set bold. */
.sh-byline,
.sh-byline .e-paragraph-base {
	font-weight: 700 !important;
}

/* Hero wordmark: desktop shows the single-line lockup, mobile swaps to the
   Figma-matching stacked two-line version (see sh-wordmark-mobile in
   gen_elementor_json.py for provenance). */
.sh-wordmark-mobile {
	display: none !important;
}
@media (max-width: 767px) {
	.sh-wordmark-desktop {
		display: none !important;
	}
	.sh-wordmark-mobile {
		display: block !important;
	}
}

/* Figma layers a low-opacity grain texture over several flat-color sections
   with blend-mode Overlay — Elementor's atomic props don't expose blend-mode,
   so it's applied here on the widget's generated class. */
.sh-blend-overlay {
	mix-blend-mode: overlay;
}

/* "Subtle nudge on hover" — the designer's note on the floating tag. */
.sh-hover-nudge {
	transition: transform 0.35s ease;
}
.sh-hover-nudge:hover {
	transform: translate(-6px, -8px) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
	.sh-hover-nudge { transition: none; }
	.sh-hover-nudge:hover { transform: none; }
	.sh-logo-track, .sh-marquee-track { animation: none; }
}

/* Decorative elements (envelope, tag, torn texture) intentionally hang past
   section edges; never let them create a sideways scroll. */
html, body {
	overflow-x: hidden;
}

/* Hero bottom fade: maroon → cream, sits behind the giant wordmark. */
.sh-hero-fade {
	background: linear-gradient(to bottom, rgba(234, 228, 216, 0) 0%, rgba(234, 228, 216, 0.35) 30%, rgba(234, 228, 216, 0.85) 65%, #EAE4D8 100%) !important;
}

/* "Carta Nueva Unlicensed Trial" is the Figma layer's label from a trial
   copy; the client now owns the real font, Carta Nueva (Small cut). */
@font-face {
	font-family: 'Carta Nueva Unlicensed Trial';
	src: url('../fonts/CartaNueva-Small.woff2') format('woff2'),
	     url('../fonts/CartaNueva-Small.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/* This is a connecting-script face: its letters are drawn to join via
   contextual-alternate glyphs, and the Figma-specified negative
   letter-spacing (-0.6/-0.7px) assumes those joins are active. Without
   requesting the "calt" OpenType feature, browsers fall back to each
   letter's isolated form, so joins that should overlap cleanly collide
   instead (e.g. "Growth" reading as "Grouth"). Confirmed by disabling
   letter-spacing alone (no fix) vs. enabling calt alone (fixes it). */
body {
	font-feature-settings: "calt" 1, "liga" 1;
}

/* Body copy: the design specifies Source Serif Pro; the client supplied the
   48pt optical-size static cut of its current release, Source Serif 4. */
@font-face {
	font-family: 'Source Serif Pro';
	src: url('../fonts/SourceSerif4-48pt-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Serif Pro';
	src: url('../fonts/SourceSerif4-Italic-Variable.ttf') format('truetype');
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Pinyon Script';
	src: url('../fonts/PinyonScript-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-navigation: 'Sofia Sans Extra Condensed', sans-serif;
	--font-headline: 'Cepelin', sans-serif;
	--font-accent: 'Pinyon Script', cursive;

	--color-cream: #EAE4D8;
	--color-maroon: #AF2A45;
	--color-darkbrown: #462222;
	--color-nearblack: #3B1919;
	--color-sand: #DCC38B;
	--color-pink: #EAC8C6;
}

/* Button + nav-link hover states (Elementor 4 atomic widgets don't yet expose
   a UI for :hover on plain e-paragraph links, so it's handled here). */
.e-button-base:hover {
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
a:hover {
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

/* ---- Mobile hamburger nav ----
   .sh-nav wraps the whole nav row; .sh-nav-links marks each link group
   (left + right); .sh-nav-toggle is the hamburger button, hidden on desktop. */
/* Elementor gives .sh-nav position:relative with z-index:2, which makes it a
   stacking context - so anything inside it, however high its own z-index, is
   still ranked against the page as a single layer at z=2. Page sections are
   also z-index:2 and come later in the DOM, so they win: the Services dropdown
   (z-index:60) opened *behind* the hero and its links could not be clicked.
   The nav is the header and belongs above page content, so it is lifted here
   rather than fighting the same fight per child. The open mobile overlay goes
   higher still, further down. */
.sh-nav {
	position: relative;
	z-index: 50 !important;
}
/* Figma places the desktop nav links at fixed artboard positions (home x79,
   services x253, shop x460 · resources x984, contact x1387 on 1512). The
   atomic compiler drops flex-grow/width props on these containers, so the
   groups were content-sized and every link drifted 15-82px. Fixing the two
   groups at 37.5% with equal-third cells reproduces Figma's geometry. */
@media (min-width: 768px) {
	.sh-nav-links {
		flex: 0 0 37.5% !important;
		width: 37.5% !important;
	}
	.sh-nav-links > .e-flexbox-base {
		flex: 1 1 0 !important;
	}
}
.sh-nav-toggle {
	display: none;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	background: none;
	border: none;
	padding: 0 8px;
}

/* Full-screen mobile menu overlay — matches the Figma "Hamburger Navigation"
   frame: wordmark + close button, a vertical list of items (Shop expands
   in-place to reveal Templates/Freebies/Workshops on a pink background),
   and the deer mark at the bottom. Hidden entirely on desktop. */
.sh-mobile-menu {
	display: none !important;
}
.sh-mobile-close {
	display: none;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	background: none;
	border: none;
	color: var(--color-darkbrown);
}
.sh-mobile-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20px 24px !important;
	border-bottom: 1px solid var(--color-darkbrown);
	cursor: pointer;
	box-sizing: border-box;
}
.sh-mobile-accordion-icon {
	font-size: 22px;
	line-height: 1;
}
.sh-mobile-submenu {
	display: none !important;
	flex-direction: column;
	width: 100%;
}
.sh-mobile-submenu.sh-submenu-open {
	display: flex !important;
}
.sh-mobile-submenu > * {
	padding: 16px 24px 16px 36px !important;
	background: var(--color-pink);
	border-bottom: 1px solid var(--color-darkbrown);
	box-sizing: border-box;
	width: 100%;
}
.sh-mobile-logo-row {
	display: flex;
	justify-content: center;
	padding: 40px 24px !important;
}

@media (max-width: 767px) {
	.sh-nav {
		flex-wrap: wrap !important;
	}
	.sh-nav-links {
		display: none !important;
	}
	.sh-nav-toggle {
		display: inline-flex !important;
	}
	.sh-nav.sh-nav-open .sh-nav-toggle {
		display: none !important;
	}
	/* .sh-nav is position:relative with z-index:2 (set by Elementor per-widget),
	   which makes it a stacking context — so the overlay's 9999 below only
	   ranks it *within* .sh-nav, and the hero section (also z-index:2, but
	   later in the DOM) painted over the open menu and swallowed its taps.
	   Lifting the whole nav while it's open is what actually puts the overlay
	   on top of the page. */
	.sh-nav.sh-nav-open {
		z-index: 10000 !important;
	}
	.sh-nav.sh-nav-open .sh-mobile-menu {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: var(--color-cream);
		overflow-y: auto;
	}
	.sh-mobile-close {
		display: inline-flex !important;
	}
}

/* ---- General mobile responsiveness ----
   Elementor 4's atomic widgets generate a unique per-element class for every
   single style (e.g. e-3f2a1b-9c7d21), so per-element breakpoint variants
   would mean touching ~100+ individual elements across all 6 pages. Instead,
   target the stable *_base classes Elementor adds to every instance of a
   given widget type — one rule covers the whole site. !important is needed
   because the per-element generated class always wins on specificity. */
@media (max-width: 767px) {
	.e-flexbox-base {
		flex-wrap: wrap !important;
	}
	/* Rows with a fixed desktop height (sized for side-by-side children) must
	   go auto-height once flex-wrap stacks their children on mobile, or the
	   next section overlaps the overflow instead of being pushed down. */
	.sh-footer-top {
		height: auto !important;
	}
	/* About "Collaborations" band: desktop overlays the heading + text/button
	   on top of a full-bleed photo using position:absolute with hardcoded
	   desktop pixel offsets (e.g. inset-inline-start:993px) — absolute
	   positioning ignores flex-wrap entirely, so on mobile it must become a
	   normal stacked flow instead: photo on top, then heading, then text. */
	.sh-collab-frame {
		height: auto !important;
		flex-direction: column !important;
	}
	.sh-collab-photo {
		position: static !important;
		width: 100% !important;
		height: 260px !important;
	}
	.sh-collab-heading {
		position: static !important;
		width: 100% !important;
		padding: 24px 20px 0 !important;
		color: var(--color-darkbrown) !important;
	}
	.sh-collab-text {
		position: static !important;
		width: 100% !important;
		padding: 18px 20px 24px !important;
	}
	.sh-collab-text p {
		color: var(--color-darkbrown) !important;
	}
	/* Services "Who Is This For": Figma's mobile frame omits this decorative
	   cat-mirror photo entirely (it's a desktop-only accent) — its absolute
	   position otherwise overlaps the quadrant grid below it on mobile. */
	.sh-witf-photo {
		display: none !important;
	}
	/* Testimonial carousel cards: Figma's mobile frame sizes these at 384px,
	   not the 572px desktop width — otherwise no single card ever fully fits
	   the viewport. The JS in mobile-nav.js sums each card's actual rendered
	   width for the track/animation math, so this alone is enough. */
	.sh-testi-card.sh-testi-card {
		width: 384px !important;
		flex: 0 0 384px !important;
	}
	.sh-testi-quote.sh-testi-quote {
		width: 304px !important;
	}
	/* Heading/paragraph mobile font sizes are NO LONGER set globally here.
	   They used to be flattened with clamp() (all headings 26.4px, all
	   paragraphs 17.6px at 440px) — the single largest error class in the
	   DOM-diff report. Every text widget now carries its own per-widget
	   `mobile` breakpoint variant with Figma's exact mobile size/line-height,
	   injected by build-scripts/mobile-typography/. Do not re-add a blanket
	   !important rule here — it would override all of those again. */
	.e-image-base {
		max-width: 100% !important;
		height: auto !important;
	}
	/* Buttons are NOT flattened to 14px here any more. Figma's mobile artboard
	   draws every button exactly as the desktop one does — 25px Sofia Sans
	   Extra Condensed 700, uppercase, in a 51px-tall box — across all six
	   mobile frames (32 button labels checked, every one 25px/700). The old
	   `font-size:14px !important` beat each widget's own mobile variant and was
	   the single largest error class in the mobile audit: 22 of 33 font-size
	   findings were this one rule. Sizing lives in the "Buttons, site-wide"
	   block further down, which now covers mobile too. */
	.e-button-base {
		padding: 12px 20px !important;
	}
}

/* Homepage blog section: Figma hangs a red envelope over the section's top
   edge (image 19 at x=933, y=6295 — 193px above the maroon panel, which
   starts at 6488). It was never built. Positioned by percentage so it tracks
   the section on wider screens, and hidden on mobile where Figma's mobile
   artboard drops it. */
.sh-blog-envelope {
	position: absolute !important;
	top: -193px !important;
	inset-inline-start: 61.7% !important;
	width: 33.8% !important;
	height: auto !important;
	pointer-events: none;
	z-index: 2;
}
@media (max-width: 767px) {
	.sh-blog-envelope { display: none !important; }
}

/* About "For collaborations" photo: Figma rounds the card's corners and the
   photo fills it edge to edge. The live image was also the wrong asset (a
   low-resolution "Regal Heritage" ceiling, 843x1108 stretched into a
   1414x625 box); it now points at the theatre interior Figma actually uses,
   re-extracted from the design PDF at 1800px wide. */
.sh-collab-photo {
	border-radius: 18px !important;
	object-fit: cover !important;
}

/* Brand-values ticker: Figma spaces the terms ~94px apart ("brand values:"
   ends at x=186, "authenticity" starts at x=280). The live copy is a single
   text run whose word gaps collapsed to about 30px, so the values read as
   one crowded string. word-spacing reopens them without touching the other
   marquee, whose copy is a normal sentence. */
.sh-brand-values,
.sh-values-track .e-heading-base,
.sh-values-track .e-paragraph-base {
	word-spacing: 22px !important;
}

/* Buttons, site-wide. Figma draws every button as a fixed-width block —
   232x51 is the baseline across all six page designs (a few run 238/256/281
   for longer labels, and the About hero one is 201). The build sized buttons
   from their text instead (padding: 16px 22px), so short labels collapsed:
   "Let's Talk" rendered 122px against Figma's 232px, "Book a Call" 137px.
   A min-width restores the design's proportions while letting genuinely long
   labels ("Subscribe to the Newsletter") keep growing past it.

   MOBILE IS INCLUDED NOW. It was previously excluded on the reasoning that
   232px would overflow a 320px screen — but Figma's mobile artboard is 440px
   wide and draws its buttons at 141/201/212/232/238/244/256/281 x 51, i.e. the
   same block as desktop, in the same 25px/700 uppercase Sofia Sans Extra
   Condensed. So the design does want them full size on a phone. The genuine
   320px concern is handled by the narrow-screen block below instead of by
   dropping the whole rule. */
.e-button-base,
a.e-button-base,
.elementor-button {
	min-width: 232px !important;
	min-height: 51px !important;
	max-width: 100% !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Genuinely narrow phones (below the 440px Figma artboard): 232px + the section's
   28px insets does not fit, so let the button shrink to the column and ease the
   type down with it. Everything from 400px up gets Figma's real sizing. */
@media (max-width: 399px) {
	.e-button-base,
	a.e-button-base,
	.elementor-button {
		min-width: 0 !important;
		width: 100% !important;
		font-size: 20px !important;
	}
}

/* Touch targets. The responsive audit (build-scripts/responsive-audit/) found
   every button rendering 42px tall on touch widths and the mobile menu links
   only 24px — both under the 44px minimum Apple and Google publish, which
   makes them easy to mis-tap. Height only: widths stay text-sized on mobile
   so nothing overflows a 320px screen. */
@media (max-width: 767px) {
	.e-button-base,
	a.e-button-base,
	.elementor-button {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.sh-mobile-item,
	.sh-mobile-menu a,
	.sh-mobile-submenu a {
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
	}
	/* Footer nav/social/legal links (Home, About Us, Instagram, Privacy Policy,
	   "Read More", etc.) are all the same atomic paragraph-link widget and were
	   rendering ~23px tall on every page - below the WCAG 2.5.8 AA minimum of
	   24px. Every use on the site is a standalone one-line link inside its own
	   <p>, never a link embedded mid-sentence in running copy, so growing this
	   stable base class to a full 44px tap target is safe everywhere. */
	.e-paragraph-link-base {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}

/* Shop "With Etched Monthly, You'll…" blocks. Figma lays the four out as two
   327px columns at x=311 and x=851 — a 213px column gap — with rows 251px
   apart (an 88px row gap). The live rows ran 1102px wide with no gap at all,
   so the blocks read as one stacked mass. Sized here rather than in the
   Elementor data because container width/gap on these nested atomic flex
   rows does not compile reliably. */
@media (min-width: 768px) {
	.sh-etched-list {
		width: 867px !important;
		max-width: 100% !important;
		margin-inline: auto !important;
		row-gap: 88px !important;
	}
	/* the pink panel had only 10px of breathing room below the last block, so
	   the grid ran straight into the section seam */
	.e-con:has(> .sh-etched-list) {
		padding-block: 60px 96px !important;
	}
	.sh-etched-list > * {
		gap: 213px !important;
	}
	.sh-etched-list > * > * {
		flex: 0 0 327px !important;
		max-width: 327px !important;
	}
	/* Three result stats: Figma columns are 421px with a 49px gap (grid 1361
	   wide). The live grid used the full 1414 with wider gaps, squeezing each
	   column to 405px and pushing the copy to five lines instead of four. */
	.sh-stat-grid {
		width: 1361px !important;
		max-width: 100% !important;
		margin-inline: auto !important;
		gap: 49px !important;
	}
	.sh-stat-grid > * {
		flex: 0 0 421px !important;
		max-width: 421px !important;
		/* the columns carry 10px of side padding, which left only 401px of
		   text and pushed the copy to a fifth line */
		padding-inline: 0 !important;
	}
}

/* Case-study article body. Figma sets the running copy centred at 22px on a
   834px measure, with the section headings at 50px and the sub-headings
   ("Finding Creators", "Evaluate") at 40px. */
.single-post .theme-post-content p {
	max-width: 834px;
	margin-inline: auto;
	text-align: center;
}
.single-post .theme-post-content h2 {
	max-width: 767px;
	margin: 64px auto 24px;
	text-align: center;
	font-size: 50px;
	line-height: 45px;
}
.single-post .theme-post-content h3 {
	max-width: 851px;
	margin: 40px auto 12px;
	text-align: center;
	font-size: 40px;
	line-height: 36px;
}

/* Figma's mid-article button (y=2821, 232x51). */
.sh-post-cta-wrap {
	text-align: center !important;
	margin: 48px 0 !important;
}
.sh-post-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 232px;
	min-height: 51px;
	padding: 0 24px;
	/* Figma fills this one pink (#EAC8C6), not cream — on the article's cream
	   background a cream button is invisible, which is how it first shipped */
	background: #EAC8C6;
	color: #462222;
	font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
	font-weight: 700;
	font-size: 25px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
}

/* Figma's two-column block (y=2967): 459px of copy beside a 399x572 portrait. */
.sh-post-split {
	display: flex;
	gap: 57px;
	align-items: flex-start;
	max-width: 915px;
	margin: 64px auto;
}
.sh-post-split-text {
	flex: 1 1 459px;
	min-width: 0;
}
.sh-post-split .sh-post-split-text p {
	max-width: none !important;
	text-align: left !important;
	margin-inline: 0 !important;
	/* Figma sets this column at 22px on a 22px line (tight), which is what
	   makes the copy fill exactly the 572px height of the photo beside it.
	   It had inherited the article's looser 30.8px line, running the column
	   to 727px so the two edges no longer lined up. */
	line-height: 22px !important;
	margin-block: 0 0 22px !important;
}
.sh-post-split .sh-post-split-text p:last-child {
	margin-block-end: 0 !important;
}
.sh-post-split-photo {
	flex: 0 0 399px;
	width: 399px;
	height: 572px;
	object-fit: cover;
	display: block;
	/* the article gives every image a 30px vertical margin, which pushed this
	   one below the first line of the copy; Figma starts both at the same y */
	margin: 0 !important;
	align-self: flex-start;
}
@media (max-width: 767px) {
	.sh-post-split { flex-direction: column; gap: 28px; }
	.sh-post-split-photo { flex: 0 0 auto; width: 100%; height: auto; }
	.single-post .theme-post-content h2 { font-size: 34px; line-height: 1.1; }
	.single-post .theme-post-content h3 { font-size: 26px; line-height: 1.15; }
}

/* Share bar: Figma makes this a compact bordered box, 556x72, centred on the
   page (Rectangle 125 at x=478) with the label and the four icons on one row.
   It had been stretching the full 914px article width with its contents
   ranged left, which is what read as messy and unbalanced. */
.sh-share-box {
	width: 556px !important;
	max-width: 100% !important;
	min-height: 72px;
	margin-inline: auto !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 24px;
	padding: 12px 20px !important;
	border: 1px solid #3B1919;
}
.sh-share-box .e-heading-base {
	white-space: nowrap;   /* Figma keeps the label on one line */
	margin: 0 !important;
}
/* Author card: Figma centres it too (Rectangle 106 at x=291, 914x353). */
.sh-author-box {
	width: 914px !important;
	max-width: 100% !important;
	margin-inline: auto !important;
	align-items: center !important;
	gap: 30px;
	padding: 33px 45px !important;
}
/* The name is set at 66.6px in the design (y=5357); it was rendering at 50px,
   which made the 22px bio beneath it look oversized by comparison — the bio
   itself already matches Figma. */
.sh-author-box .e-heading-base {
	font-size: 66.6px !important;
	line-height: 57.93px !important;
}
@media (max-width: 767px) {
	.sh-share-box { flex-direction: column !important; gap: 12px; min-height: 0; }
	.sh-author-box { flex-direction: column !important; text-align: center; }
}

/* Single-post left share rail. Figma runs a narrow vertical strip down the
   left edge of the article (Group 210 at x=-23, y=216, 72x378): four social
   icons in a rounded outline, with "share this post" set vertically below it.
   The template only had the horizontal share block at the foot of the
   article, so the whole left side of the page read as empty. Sticky rather
   than absolute so it stays with the reader, and hidden below 1100px where
   there is no margin to hold it. */
/* Figma's outline (Rectangle 125, y=216, 72x378) encloses BOTH the four
   glyphs (y=241–372) and the vertical "share this post" label beneath them
   (y=391–579) — the label is inside the pill, not below it. */
.sh-share-rail {
	position: absolute;
	inset-inline-start: 14px;
	top: 216px;
	width: 72px;
	height: 378px;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	padding: 19px 0;
	border: 1px solid var(--color-darkbrown, #3B1919);
	border-radius: 36px;
	z-index: 3;
}
/* Figma: the outline is 72x378 with the four glyphs at y=241, 276, 313 and
   349 — a 36px pitch — starting 25px below the box top. */
/* the single outline lives on .sh-share-rail (it encloses the label too), so
   the inner group must not draw a second one */
.sh-share-rail .sh-rail-box {
	width: 100%;
	padding: 0;
	gap: 14px;
	align-items: center;
	justify-content: flex-start;
	border: none;
}
.sh-share-rail .sh-rail-icon {
	width: 22px;
	height: 22px;
	justify-content: center;
	align-items: center;
}
.sh-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #3B1919;
	text-decoration: none !important;
	transition: opacity .15s ease;
}
.sh-share-icon:hover { opacity: .65; }
.sh-share-box .sh-share-icon { color: #3B1919; }
.sh-share-rail .sh-rail-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
	font-weight: 700;
	white-space: nowrap;
}
@media (max-width: 1099px) {
	.sh-share-rail { display: none !important; }
}

/* Mid-article newsletter panel (Figma y=3970, 915x307) — distinct from the
   footer signup, which Figma also keeps. */
.sh-post-news-wrap {
	justify-content: center;
	padding: 56px 24px;
	/* the document body is white; every other band on this template paints
	   its own cream, so this one has to as well or it reads as a white gap */
	background: var(--color-cream, #EAE4D8);
}
.sh-post-newsletter {
	width: 915px;
	max-width: 100%;
	padding: 44px 40px;
	gap: 14px;
	/* Figma gives this panel the sand diamond pattern and a thin rule, not a
	   flat fill; tile rendered from the design PDF like the maroon one */
	background: #DCC38B url('../../../../uploads/2026/08/pattern_sand_diamond.png') top left/152px auto repeat;
	border: 1px solid #3B1919;
}
.sh-post-news-head {
	/* Figma sets this heading in a 429px column (y=4073, x=323) so it breaks
	   over three lines; at 620px it was collapsing to two */
	max-width: 429px;
	text-transform: uppercase;
	/* atomic widgets do not inherit the display face, so it is named here */
	font-family: 'Cepelin', 'Source Serif Pro', Georgia, serif !important;
	font-weight: 400 !important;
}
.sh-post-news-eyebrow {
	font-family: "Sofia Sans Extra Condensed", Impact, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
}

/* Shop "An hour of dedicated decision making": Figma sets this copy in cream
   (#EAE4D8) over a busy baroque photograph, and its own render keeps it
   legible because the artwork is darker behind the text. The uploaded crop is
   lighter, so the heading and its paragraph were washing out. A soft scrim
   restores the design's contrast without altering the photograph itself. */
.sh-hour-band {
	position: relative;
}
.sh-hour-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(30, 14, 10, 0.55) 0%, rgba(30, 14, 10, 0.35) 55%, rgba(30, 14, 10, 0.15) 100%);
	pointer-events: none;
}
.sh-hour-band > * {
	position: relative;
	z-index: 1;
}

/* Shop diagonal SOCIALHART tag: Figma drops it 138px BELOW the last Etched
   block (tag at y=9170, block copy ending 9032). The live page's section is
   shorter, so the tag landed alongside the fourth block and sat on top of its
   copy. Pushed down to clear it and straddle the section seam as designed. */
body.page-id-35 .sh-hover-nudge {
	top: 893px !important;
}

/* Newsletter fields: Figma sizes these 339x55 (Rectangle 102/103); they were
   rendering 306x54. The newsletter form carries no theme class of its own, so
   the two fields are addressed by their placeholders, which the generator
   sets from the design copy. */
@media (min-width: 768px) {
	input[placeholder="First Name"],
	input[placeholder="Email Address"] {
		width: 100% !important;
		max-width: none !important;
		height: 55px !important;
	}
	/* Figma's fields are 339px each, but the form's own container is only
	   631px wide, so a fixed 339 forced the second field onto a new row.
	   Splitting the row in half keeps them side by side as designed and lets
	   them reach 339px wherever the container is wide enough. */
	.elementor-field-group:has(> input[placeholder="First Name"]),
	.elementor-field-group:has(> input[placeholder="Email Address"]) {
		flex: 1 1 calc(50% - 7px) !important;
		max-width: 339px !important;
	}
	/* Figma puts the two fields SIDE BY SIDE on one row (Rectangle 103 at
	   x=774 and Rectangle 102 at x=1126, both y=8561, 13px apart) with the
	   subscribe button on the row beneath. They were stacking because the
	   fields wrapper is 651px wide while two 339px fields plus the 13px gap
	   need 691px — so the second field always wrapped. */
	.elementor-form-fields-wrapper:has(input[placeholder="First Name"]) {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		column-gap: 13px !important;
		row-gap: 18px !important;
	}
	.elementor-form-fields-wrapper:has(input[placeholder="First Name"]) .elementor-field-type-submit {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* Hero SOCIALHART wordmark: Figma insets it 49px from each edge (x=49,
   w=1414 on the 1512 artboard) — it was rendering full-bleed, so the S and
   the T were jammed against the viewport edges. The footer wordmark already
   uses these numbers; this brings the hero one into line. Percentage width
   keeps the inset proportional on wider screens. */
.sh-hero-wordmark,
.e-image-base[src*="socialhart-wordmark"] {
	width: 93.52% !important;
	max-width: 93.52% !important;
	margin-inline: auto !important;
}

/* Client logo strip: Figma renders these client marks in monochrome so the
   band reads as one texture rather than a row of competing brand colours. */
.sh-logo-marquee img,
.sh-logo-track img {
	filter: grayscale(1) !important;
}

/* Services "Who is this for": the cat-mirror photo was landing 85px too low,
   overlapping the CREATORS THAT WANT SCALE heading. Figma ends it exactly
   where that heading begins, so it rides up over the section above instead.
   Percentage left/width keep it in proportion above 1512px; height:auto
   preserves its aspect ratio. Mobile hides it entirely (rule further up). */
@media (min-width: 768px) {
	.sh-witf-photo {
		top: -39px !important;
		inset-inline-start: 68.45% !important;
		width: 23.6% !important;
		height: auto !important;
	}
}

/* Etched-Monthly lead-gen form: Figma's mockup gives each labeled field far
   more breathing room than Elementor Pro's default field-group spacing. */
/* Desktop only: on a phone 105px between fields stretched the form to several
   screens. The mobile frame spaces the stacked fields ~30px apart. */
@media (min-width: 768px) {
	.sh-lead-form .elementor-field-group {
		margin-bottom: 105px !important;
	}
}
@media (max-width: 767px) {
	.sh-lead-form .elementor-field-group {
		margin-bottom: 30px !important;
	}
}
/* Figma's form mockup: labels are bold, the free-text answer boxes are short
   (not the tall default textareas), and the submit button sits at the LEFT
   edge of the form card rather than centred. */
.sh-lead-form .elementor-field-label {
	font-weight: 700 !important;
	font-size: 18px !important;
}
.sh-lead-form textarea.elementor-field-textual {
	height: 92px !important;
	min-height: 92px !important;
}
.sh-lead-form .elementor-field-type-submit {
	justify-content: flex-start !important;
}
.sh-lead-form .elementor-field-type-submit button {
	margin-inline-start: 0 !important;
}
.sh-lead-form .elementor-field-group:last-of-type {
	margin-bottom: 0 !important;
}

/* Testimonial carousel: Figma's own comments on this section call it
   "swipable" / "scrollable but auto shifts" — auto-animate by default (same
   infinite-marquee technique as the logo/text tickers) but pause and hand
   control to the user the moment they touch or drag it. */
/* Elementor's per-widget atomic CSS doesn't reliably compile for this deeply
   nested repeated structure, so the card carousel's critical box dimensions
   are pinned here directly instead of relying on generated widget classes. */
.sh-testi-track {
	animation-duration: 46s;
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-shrink: 0 !important;
	width: max-content !important;
	gap: 38px;
}
.sh-testi-card {
	width: 572px !important;
	height: 536px !important;
	flex: 0 0 572px !important;
}
.sh-testi-quote {
	width: 492px !important;
	white-space: normal !important;
}
.sh-testi-track.sh-drag-active,
.sh-marquee-viewport:has(.sh-testi-track.sh-drag-active) {
	cursor: grabbing;
}
.sh-marquee-viewport:has(.sh-testi-track) {
	cursor: grab;
}

/* ---- Infinite marquee ticker ----
   Two identical copies of the ticker text sit side by side in one row
   (.sh-marquee-track); animating that row from 0 to -50% loops seamlessly
   because the second copy lines up exactly where the first ends. The
   viewport clips overflow so only one "page" of text shows at a time.
   flex-wrap must stay "nowrap" at every breakpoint — the general mobile
   .e-flexbox-base rule above would otherwise stack the two copies and kill
   the scroll effect. */
.sh-marquee-viewport {
	overflow: hidden;
}
.sh-marquee-track {
	flex-wrap: nowrap !important;
	width: max-content;
	/* Client QA: the words were scrolling too fast to read (40s for two
	   copies). 72s keeps the motion without making anyone chase it. */
	animation: sh-marquee 72s linear infinite;
}
.sh-marquee-track .e-paragraph-base {
	white-space: nowrap !important;
	flex-shrink: 0;
}
/* The loop only closes when the track is exactly two copies wide, because the
   animation ends at translateX(-50%) of the track's OWN width. width:max-content
   was set, but as flex items the tracks kept the default flex-shrink:1 and were
   squeezed to their viewport (440px on a phone, 1512px on desktop) while the
   content ran 1,948-10,852px — so every ticker slid a fraction of one copy and
   snapped back. On mobile the ticker paragraphs were also capped at the
   viewport width by the generic max-width:100% rule. Direct children only, so
   testimonial card copy inside a track still wraps normally. */
.sh-marquee-track,
.sh-logo-track {
	flex-shrink: 0 !important;
	width: max-content !important;
	max-width: none !important;
}
.sh-marquee-track > .e-paragraph-base,
.sh-marquee-track > .e-heading-base {
	flex-shrink: 0 !important;
	max-width: none !important;
	width: max-content !important;
}
/* The four-span "The craft was always yours" ticker (Resources, Success
   Stories, Free SEO Tools): only the first span carries a mobile size (30px,
   Figma's), the other three fell back to 18px, so the two halves of the loop
   were different widths and the seam jumped. */
@media (max-width: 767px) {
	.sh-marquee-track > span.e-paragraph-base {
		font-size: 30px !important;
	}
	/* Same fault on the paragraph-built "The craft was always yours" tickers
	   (Homepage 17caf7e, About a98c46b): the duplicate copy was 18px. About's
	   brand-values ticker (13ff2da) is already uniform at 40px, so it is not
	   included. */
	.elementor-element-17caf7e > .e-paragraph-base,
	.elementor-element-a98c46b > .e-paragraph-base {
		font-size: 30px !important;
	}
}
/* Testimonial quotes sit inside a .sh-marquee-track (the whole card row
   scrolls as one marquee), but each quote itself must wrap normally within
   its card — the rule above was winning on specificity (0,2,0 vs 0,1,0)
   regardless of source order, silently forcing every testimonial quote
   sitewide onto one un-wrapped, overflowing line. Confirmed on the live
   Shop page, not just here. */
.sh-marquee-track .sh-testi-card .sh-testi-quote {
	white-space: normal !important;
}
@keyframes sh-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Mid-article "Radiance" service CTA, spliced into single-post content via
   the_content in functions.php — matches the Figma single-post design's
   promotional banner (was missing entirely before this pass). */
/* Figma runs this as a FULL-BLEED maroon diamond band (y=4368, 1512x698):
   deer ornament, a 70px heading, 22px copy and a cream button on the left,
   with a 860px photograph filling the right. It had been built as a narrow
   in-column banner with a 34px heading, so it read as a small aside rather
   than the section break the design intends. The negative margins break it
   out of the article measure without needing a template change. */
.sh-inline-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	/* Figma lays a maroon diamond pattern across this band. No such tile
	   existed in uploads — an earlier attempt reached for hero_bg_opt.jpg,
	   which is actually a near-black photograph (39,39,39) and turned the
	   band grey. The tile here was rendered from a clean patch of the design
	   PDF itself, so it matches exactly. */
	background: #A82840 url('../img/argyle-red.svg') center top / 76px 112px repeat; /* seamless one-diamond tile (2026-10-13); the old 304px tile showed seams */
	/* vw is in device px but the page is zoomed (body zoom = --sh-zoom), so
	   full bleed is 100vw / zoom in layout px. */
	margin: 72px calc(50% - 50vw / var(--sh-zoom, 1));
	width: calc(100vw / var(--sh-zoom, 1));
	max-width: calc(100vw / var(--sh-zoom, 1));
	min-height: 698px;
	overflow: hidden;
	position: relative;
}
.sh-inline-cta-text {
	flex: 1 1 640px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 64px 72px;
	color: #EAE4D8;
	/* the article sets its body copy centred; inside this band Figma ranges
	   everything left off x=72 */
	text-align: left;
}
.sh-inline-cta-text p,
.sh-inline-cta-text h3 {
	text-align: left !important;
	margin-inline: 0 !important;
}
/* Figma hangs the diagonal SOCIALHART tag over the band's top-right corner
   (y=4321, 230x238), overlapping the edge. */
.sh-inline-cta-tag {
	position: absolute;
	top: -46px;
	inset-inline-end: 96px;
	width: 230px;
	height: auto;
	pointer-events: none;
	z-index: 2;
}
@media (max-width: 767px) {
	.sh-inline-cta-tag { width: 140px; top: -28px; inset-inline-end: 16px; }
}

/* Figma's button here is 147x51 — it had been stretching to the column width
   and inheriting the article's underlined link styling. */
.sh-inline-cta-btn {
	align-self: flex-start;
	width: auto !important;
	min-width: 147px;
	min-height: 51px;
	text-decoration: none !important;
}
/* the deer sits above the heading in the design */
.sh-inline-cta-text::before {
	content: "";
	display: block;
	width: 66px;
	height: 98px;
	margin-bottom: 26px;
	background: url('../../../../uploads/2026/08/hero_deer_transparent.png') no-repeat center/contain;
}
.sh-inline-cta-eyebrow {
	display: block;
	font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 14px;
	margin-bottom: 10px;
}
.sh-inline-cta-text h3 {
	font-family: Cepelin, serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 70px;
	line-height: 58.8px;
	margin: 0 0 26px;
	max-width: 1013px;
	color: #EAE4D8 !important;
}
.sh-inline-cta-text p {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 22px;
	line-height: 1.5;
	margin: 0 0 30px;
	max-width: 601px;
	color: #EAE4D8 !important;
}
.sh-inline-cta-btn {
	display: inline-block;
	background: #DCC38B;
	color: #3B1919;
	font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 15px;
	text-decoration: none;
	padding: 14px 26px;
}
/* Figma insets the photograph inside the band's right half (image 38, 631x600
   sitting within an 860px panel), so it keeps a maroon margin all round
   rather than bleeding to the edges. */
.sh-inline-cta-photo {
	flex: 0 0 42%;
	width: 42%;
	max-width: none;
	align-self: center;
	height: 600px;
	margin: 0 70px 0 0;
	object-fit: cover;
}
/* Wider than the 1512 design the band stays full width, but its contents
   stretched with it: at 2560 the 500px photo was drawn 1075px wide (soft)
   beside copy that stayed its design size. The contents are held to the
   1512 design, centred; the tag follows them. */
@media (min-width: 1513px) {
	.sh-inline-cta {
		box-sizing: border-box;
		padding-inline: calc((100vw - 1512px) / 2);
	}
	.sh-inline-cta-tag {
		inset-inline-end: calc(96px + (100vw - 1512px) / 2);
	}
	body.single-post .sh-inline-cta .sh-inline-cta-tag {
		inset-inline-end: calc(39px + (100vw - 1512px) / 2) !important;
	}
}
@media (max-width: 1100px) {
	.sh-inline-cta { min-height: 0; }
	.sh-inline-cta-text { padding: 48px 40px; flex-basis: 420px; }
	.sh-inline-cta-text h3 { font-size: 44px; line-height: 1.05; }
	.sh-inline-cta-photo { height: 420px; margin-inline-end: 40px; }
}
@media (max-width: 767px) {
	.sh-inline-cta { margin: 48px calc(50% - 50vw / var(--sh-zoom, 1)); }
	.sh-inline-cta-text { padding: 36px 24px; }
	.sh-inline-cta-text h3 { font-size: 32px; }
	.sh-inline-cta-text p { font-size: 18px; }
	.sh-inline-cta-text::before { width: 44px; height: 66px; margin-bottom: 18px; }
	.sh-inline-cta-photo {
		flex: 1 1 100%;
		width: auto;
		max-width: 100%;
		height: 260px;
		margin: 0 24px 32px;
	}
}

/* Shared site header: nav-link text and the mobile hamburger icon are cream
   (#EAE4D8), which reads fine over the dark maroon hero on Homepage/About
   but is nearly illegible over the lighter heroes on Shop (light pink),
   Resources (sand), and every blog post (white/cream) — confirmed against
   the Figma exports, where the header text is genuinely dark on those
   pages, not just a coincidental design choice on our end. Services' olive
   hero sits in between and is borderline-acceptable, so left alone. */
body.page-id-35 .sh-nav-links .e-paragraph-base,
body.page-id-36 .sh-nav-links .e-paragraph-base,
:is(body.archive, body.search) .sh-nav-links .e-paragraph-base,
body.single-post .sh-nav-links .e-paragraph-base,
body.page-id-35 .sh-nav-toggle,
body.page-id-36 .sh-nav-toggle,
:is(body.archive, body.search) .sh-nav-toggle,
body.single-post .sh-nav-toggle {
	color: #462222 !important;
}
/* Shop/Resources/single-post heroes are light (pink, sand, white), and Figma
   draws the deer ornament on them in dark #3B1919 rather than the cream used
   on the dark maroon heroes. Only one cream deer PNG exists on disk, so it is
   darkened here instead of shipping a second asset. */
body.page-id-35 .e-image-base[src*="deer"],
body.page-id-36 .e-image-base[src*="deer"],
body.single-post .e-image-base[src*="deer"] {
	filter: brightness(0.18) saturate(0.4) !important;
}

/* Same pages: the center wordmark is a cream SVG <img>, invisible on these
   light heroes. brightness() darkens the cream fill toward the dark brown
   the nav text uses — the SVG itself has no dark variant on disk. */
body.page-id-35 .sh-nav > .e-flexbox-base img,
body.page-id-36 .sh-nav > .e-flexbox-base img,
:is(body.archive, body.search) .sh-nav > .e-flexbox-base img,
body.single-post .sh-nav > .e-flexbox-base img {
	/* Was filter: brightness(0.42) sepia(0.35), which renders a flat grey,
	   not the design's #462222. A recoloured copy of the same SVG is exact. */
	content: url('../img/socialhart-nav-logo-dark.svg');
	filter: none !important;
}
@media (max-width: 767px) {
	body.page-id-35 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.page-id-36 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	:is(body.archive, body.search) .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.single-post .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../img/socialhart-nav-logo-mobile-dark.svg');
	}
}

/* Homepage founder photo: desktop uses align-self:stretch so the photo
   matches the text column's height in a side-by-side row. On mobile the row
   wraps to a column, so align-items:stretch on the row stretches the photo
   to the height of the ENTIRE stacked column (photo + all the text below
   it) — measured at 220x1570px, a runaway sliver that object-fit:cover
   crops into an unrecognizably tight, zoomed-in portrait. Fix: stop the
   stretch and give the photo a sane aspect ratio instead. */
@media (max-width: 767px) {
	.sh-founder-section {
		align-items: flex-start !important;
		min-height: auto !important;
	}
	/* Figma's mobile frames draw this photo as a full-bleed SAND BAND, not a
	   bare image: Rectangle 134 (#DCC38B, 605px tall, bleeding past both edges)
	   with the portrait inset inside it — "image 28" at x=35, y+75, 370x455.
	   At the 440px artboard that is exactly a 605px-tall element with 75px of
	   vertical and 35px of horizontal padding, so the padding box IS the
	   photo. Painting the band as the image element's own background gets the
	   full-bleed colour without adding a wrapper, and box-sizing keeps the
	   inner photo at Figma's 370x455.

	   The identical block appears on Homepage (after the "learn more" CTA) and
	   About (after "I'm the Star Catcher"). About's image widget carries no
	   sh- class, so it is addressed by its generated atomic class — if the
	   About page data is ever regenerated, that id changes and this selector
	   must be updated with it. */
	.sh-founder-photo,
	.e-ca7304f-f79350 {
		width: 100% !important;
		max-width: none !important;
		height: 605px !important;
		padding: 75px 35px !important;
		box-sizing: border-box !important;
		background-color: var(--color-sand) !important;
		object-fit: cover !important;
		aspect-ratio: auto !important;
		align-self: auto !important;
		flex-shrink: 0 !important;
	}
	/* Homepage only: Figma puts the band AFTER the founder copy and its CTA
	   (text 4147-4951, band 5027). The DOM emits the photo first because the
	   desktop layout is a side-by-side row, where source order is invisible.
	   Once that row wraps to a column on mobile the photo lands above the
	   heading instead of below the button, which is the +630px / -633px pair
	   the mobile audit reports around "meet the founder". */
	.sh-founder-photo {
		order: 2 !important;
	}
}

/* Single-post template: the featured-image and author-avatar widgets use
   Elementor's dynamic image tags, which render with no src attribute at all
   when a post has no featured image / the author has no local avatar set —
   leaving an empty bordered box instead of collapsing. Hide any atomic image
   widget with no real source rather than showing a broken-image box. */
.elementor img.e-image-base:not([src]),
.elementor img.e-image-base[src=""] {
	display: none !important;
}

/* === GENERATED: mobile section-backdrop images (fix_backdrop_images.py) === */
/* Re-assert height:100% for full-bleed section backdrops, which the
   blanket .e-image-base{height:auto} mobile rule above collapses to a
   strip. Do NOT hand-edit: regenerate with fix_backdrop_images.py. */
@media (max-width: 767px) {
	/* Homepage */
	.e-a304f6c-73037c.e-a304f6c-73037c {
		height: 100% !important;
	}
	.e-d143911-953bb1.e-d143911-953bb1 {
		height: 100% !important;
	}
	.e-f943958-0a2632.e-f943958-0a2632 {
		height: 100% !important;
	}
	.e-01b0f0b-cac393.e-01b0f0b-cac393 {
		height: 100% !important;
	}
	.e-5c99246-462fca.e-5c99246-462fca {
		height: 100% !important;
	}
	.e-025df8f-d2ccf5.e-025df8f-d2ccf5 {
		height: 100% !important;
	}
	/* Contact */
	.e-924fbba-f17ec1.e-924fbba-f17ec1 {
		height: 100% !important;
	}
	.e-b88b719-7f2a92.e-b88b719-7f2a92 {
		height: 100% !important;
	}
	/* About */
	.e-2bbab1f-37ffa8.e-2bbab1f-37ffa8 {
		height: 100% !important;
	}
	.e-7c5c08d-589457.e-7c5c08d-589457 {
		height: 100% !important;
	}
	.e-98adb0b-d1bc17.e-98adb0b-d1bc17 {
		height: 100% !important;
	}
	.e-f9d4d84-413d31.e-f9d4d84-413d31 {
		height: 100% !important;
	}
	.e-b367ac5-abe8ae.e-b367ac5-abe8ae {
		height: 100% !important;
	}
	.e-e8596f8-cacca1.e-e8596f8-cacca1 {
		height: 100% !important;
	}
	.e-b05e87f-e24670.e-b05e87f-e24670 {
		height: 100% !important;
	}
	.e-f9950cf-cabf58.e-f9950cf-cabf58 {
		height: 100% !important;
	}
	/* Services */
	.e-a7eb507-9f4d16.e-a7eb507-9f4d16 {
		height: 100% !important;
	}
	.e-bc8afc8-b5e02c.e-bc8afc8-b5e02c {
		height: 100% !important;
	}
	.e-34c2a23-1a105f.e-34c2a23-1a105f {
		height: 100% !important;
	}
	.e-f387ba2-91c7c8.e-f387ba2-91c7c8 {
		height: 100% !important;
	}
	.e-8498e70-1a3af2.e-8498e70-1a3af2 {
		height: 100% !important;
	}
	/* Shop */
	.e-bdd2cbe-f50504.e-bdd2cbe-f50504 {
		height: 100% !important;
	}
	.e-57fc7ce-1b4785.e-57fc7ce-1b4785 {
		height: 100% !important;
	}
	.e-5bc69e1-de1838.e-5bc69e1-de1838 {
		height: 100% !important;
	}
	.e-78bdaa9-797c16.e-78bdaa9-797c16 {
		height: 100% !important;
	}
	.e-be3b525-6f8f90.e-be3b525-6f8f90 {
		height: 100% !important;
	}
	.e-1d28284-f91bf3.e-1d28284-f91bf3 {
		height: 100% !important;
	}
	.e-7d92174-72adb7.e-7d92174-72adb7 {
		height: 100% !important;
	}
	.e-e9b7e6d-95affe.e-e9b7e6d-95affe {
		height: 100% !important;
	}
	/* Resources */
	.e-157d258-4afe6e.e-157d258-4afe6e {
		height: 100% !important;
	}
	.e-2908ceb-a68a28.e-2908ceb-a68a28 {
		height: 100% !important;
	}
	.e-18b97f3-671418.e-18b97f3-671418 {
		height: 100% !important;
	}
	/* Success Stories */
	.e-967c390-cb1e1e.e-967c390-cb1e1e {
		height: 100% !important;
	}
	.e-7bb7cda-01ee37.e-7bb7cda-01ee37 {
		height: 100% !important;
	}
	.e-7b0eaee-121959.e-7b0eaee-121959 {
		height: 100% !important;
	}
	/* Growth Rizz */
	.e-4d156a4-ea5464.e-4d156a4-ea5464 {
		height: 100% !important;
	}
	.e-fa63bd7-b34a3c.e-fa63bd7-b34a3c {
		height: 100% !important;
	}
	.e-8e7b01d-24eace.e-8e7b01d-24eace {
		height: 100% !important;
	}
	.e-0d125cd-fa7dcd.e-0d125cd-fa7dcd {
		height: 100% !important;
	}
	.e-d1f7667-d139a7.e-d1f7667-d139a7 {
		height: 100% !important;
	}
	.e-a14bd9d-1a1d94.e-a14bd9d-1a1d94 {
		height: 100% !important;
	}
	.e-b4f8e4c-7f64b9.e-b4f8e4c-7f64b9 {
		height: 100% !important;
	}
	/* Spree */
	.e-c65acaa-24b7a0.e-c65acaa-24b7a0 {
		height: 100% !important;
	}
	.e-cfcef9d-ac7359.e-cfcef9d-ac7359 {
		height: 100% !important;
	}
	.e-afb0227-4133dc.e-afb0227-4133dc {
		height: 100% !important;
	}
	.e-61209bf-5677be.e-61209bf-5677be {
		height: 100% !important;
	}
	.e-e6ee82f-825a6a.e-e6ee82f-825a6a {
		height: 100% !important;
	}
	.e-548b3e4-ef60a1.e-548b3e4-ef60a1 {
		height: 100% !important;
	}
	.e-9899a8f-bedce9.e-9899a8f-bedce9 {
		height: 100% !important;
	}
	/* Etched Monthly */
	.e-1869ccd-0cce26.e-1869ccd-0cce26 {
		height: 100% !important;
	}
	.e-5bddfc1-7614c0.e-5bddfc1-7614c0 {
		height: 100% !important;
	}
	.e-79dde37-69a3fe.e-79dde37-69a3fe {
		height: 100% !important;
	}
	.e-32d6277-2ab9de.e-32d6277-2ab9de {
		height: 100% !important;
	}
	.e-0de2556-39595e.e-0de2556-39595e {
		height: 100% !important;
	}
	.e-524c109-e8800c.e-524c109-e8800c {
		height: 100% !important;
	}
	.e-00e0c3f-6ef8ce.e-00e0c3f-6ef8ce {
		height: 100% !important;
	}
	/* Free SEO Tools */
	.e-98b8e61-5bef14.e-98b8e61-5bef14 {
		height: 100% !important;
	}
	.e-444b8bf-83028c.e-444b8bf-83028c {
		height: 100% !important;
	}
	.e-c0f421b-2f8283.e-c0f421b-2f8283 {
		height: 100% !important;
	}
}
/* === END GENERATED: mobile section-backdrop images === */

/* Services process steps: the section is built as TWO side-by-side columns
   (elementor-element-140f85c at Figma x=168, elementor-element-6c758e0 at
   x=800) holding the SAME four steps. That duplication is in the Figma desktop
   frame itself — every step heading appears twice there, once per column — so
   the build copied it faithfully and desktop is left alone.

   Figma's MOBILE frame does not: it draws one column with the four steps once
   (y=2338 schedule / 2541 opportunity / 2832 finalize / 3057 brief evaluation).
   Stacking both columns on a phone therefore shows all four steps, then all
   four steps again — roughly 1,030px of duplicate content, and the single
   largest reason the Services page measured 23% taller than its mobile design.
   Hidden rather than deleted from the page data so desktop keeps matching its
   own frame, and so this is one line to revert if the design is corrected. */
@media (max-width: 767px) {
	.elementor-element-6c758e0 {
		display: none !important;
	}
}

/* Form field labels: Elementor's default label colour is #7a7a7a, which on the
   site's #EAE4D8 cream ground measures 3.39:1 — below the 4.5:1 WCAG AA needs
   for body text. It was the only real accessibility violation axe-core found
   across the whole site (29 elements, on Services, Shop and the single-post
   template — every page carrying a form). Using the site's own ink instead of
   a grey both clears the ratio (about 10:1) and matches the rest of the type.
   Found by build-scripts/qa-tools/run_axe.py. */
.elementor-field-label,
.sh-lead-form .elementor-field-group label,
.sh-newsletter-form .elementor-field-group label {
	color: var(--color-darkbrown) !important;
}

/* Elementor Pro gives form labels no family of their own, so they fell back to
   Roboto at 18px - the only Roboto text on the site, on every page carrying a
   form. Figma labels both forms' fields ("First Name", "Email Address") at
   20px Source Serif Pro. This also replaces the .sh-lead-form label rule's
   17px Sofia Sans, which was neither the design's font for this nor a size on
   its scale. */
.elementor-field-label,
.sh-lead-form .elementor-field-group label,
.sh-newsletter-form .elementor-field-group label {
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 20px !important;
	font-weight: 400;
}

/* Homepage hero fade. The maroon-to-cream gradient band spans y=498-843, which
   matches Figma's Rectangle 91 exactly — but its colour stops ramped from 0% to
   100% across that whole span, so the fade began 64px too early and finished
   99px too early. The effect on screen was the diamond texture washing out
   behind the SOCIALHART wordmark instead of carrying down behind it.

   Measured from the Figma PDF by averaging each pixel row: the design holds
   full maroon to y=580 and only reaches cream at y=824. Within a 345px band
   starting at 498 that is 24% to 95%, so the stops are placed there instead. */
.elementor-element-f3bbad4 {
	background-image: linear-gradient(
		rgba(234, 228, 216, 0)    24%,
		rgba(234, 228, 216, 0.25) 55%,
		rgba(234, 228, 216, 0.60) 80%,
		rgba(234, 228, 216, 0.92) 93%,
		rgb(234, 228, 216)        100%
	) !important;
}

/* The band is placed from the top (y=498, 345px tall) but the hero grows with
   the window - the wordmark scales with the viewport - so on screens wider
   than the 1512 design it ended above the hero's bottom edge: 28px short at
   1920, 107px at 2560, and the hero's maroon showed through as a red strip
   under SOCIALHART (client feedback 2026-10-10). Pinning it to the bottom
   keeps the fade ending exactly where the cream section starts; at 1512 the
   two positions are identical. */
.elementor-element-36e1ab2 > .elementor-element-f3bbad4 {
	top: auto !important;
	bottom: 0 !important;
}

/* Homepage hero stag. The source PNG had the animal sitting inside a large
   transparent canvas - the visible art was 102x175 inside a 260x300 file, so
   only 23% of it. Elementor sized the element correctly at Figma's 66x98, but
   the deer inside rendered at roughly half that and read as a faint speck.
   The asset is now trimmed to its own bounding box; object-fit:contain keeps
   the stag's proportions inside the 66x98 box rather than stretching it. */
.elementor img.e-image-base[src*="hero_deer"] {
	object-fit: contain !important;
}

/* Services add-on cards on mobile. Each card carried a desktop min-height of
   182px with 30px block padding, and nothing overrode it at the mobile
   breakpoint. Figma's mobile frame draws these as 133px tall with their tops
   162px apart (y=7590, 7752, 7904, 8058, 8220), so every card ran ~50px tall
   and the block finished roughly 970px longer than the design across the four
   gaps the structural audit flagged (+364, +306, +300 and a knock-on).

   min-height rather than height: two of the six cards carry more copy and must
   still be allowed to grow rather than clip.

   That first pass fixed the box but not the sequence, and the sequence was the
   real fault. These eight cards are a 2x4 grid: four two-up rows inside one
   column container. Column A is the "what's included" list, column B the paid
   add-ons. Reading DOWN the design they run A1-A4 then B1-B4; reading down the
   BUILD they ran A1, B1, A2, B2... because each row stacks its own pair before
   the next row begins. Every consecutive pair in the design was therefore
   separated by an unrelated card on the page, which is where +320, +250 and
   +238 came from - three "spacing" faults that were one layout fault.

   order cannot reach across separate parents, so the rows are collapsed with
   display:contents and all eight cards become items of the column container.
   Safe here specifically because those rows carry no background, border or
   padding - they are pure layout wrappers, and display:contents would discard
   any box they did have.

   Cards were also 287px wide against the design's 384: they kept a desktop
   width that no longer fills the mobile column.

   Keyed to Elementor element ids because these containers carry no semantic
   class. That is fragile - ids change when Elementor rebuilds its render
   cache - so re-measure this block after any structural edit to the page. */
@media (max-width: 767px) {
	.elementor-element-d874604 > .elementor-element-bcf7c8b,
	.elementor-element-d874604 > .elementor-element-5e5c3cf,
	.elementor-element-d874604 > .elementor-element-5dca9c0,
	.elementor-element-d874604 > .elementor-element-3714ca2 {
		/* !important because Elementor's .e-flexbox-base sets display:flex on
		   every atomic container and wins the cascade without it. */
		display: contents !important;
	}

	/* column A: what the engagement includes */
	.elementor-element-14e0c27 { order: 1; }   /* comprehensive audit      */
	.elementor-element-8cef912 { order: 2; }   /* monthly check-ins        */
	.elementor-element-7def154 { order: 3; }   /* technical expertise      */
	.elementor-element-8779d44 { order: 4; }   /* content strategy         */
	/* column B: the paid add-ons */
	.elementor-element-7b1b1aa { order: 5; }   /* slack access             */
	.elementor-element-440dddc { order: 6; }   /* development add-on       */
	.elementor-element-74ed923 { order: 7; }   /* content writing add-on   */
	.elementor-element-e6adaf3 { order: 8; }   /* templates & spreadsheets */

	/* The column carries 48px of horizontal padding, so width:100% on a card
	   resolved to 287px rather than the design's 384. The column is already
	   inset to x=28 to match the frame, so that padding is a second inset the
	   design does not have. */
	.elementor-element-d874604 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor-element-14e0c27,
	.elementor-element-8cef912,
	.elementor-element-7def154,
	.elementor-element-8779d44,
	.elementor-element-7b1b1aa,
	.elementor-element-440dddc,
	.elementor-element-74ed923,
	.elementor-element-e6adaf3 {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 133px !important;
		padding: 16px 24px !important;
	}
}

/* ── Keyboard access ─────────────────────────────────────────────────────
   The first tab stop on every page had no visible focus indicator at all, so
   a keyboard user could not tell where they were. Elementor's reset removes
   the browser default and never replaces it.

   :focus-visible rather than :focus, so the ring appears for keyboard users
   without putting an outline around every button a mouse user clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--color-darkbrown, #462222) !important;
	outline-offset: 3px !important;
	border-radius: 2px;
}

/* Cream-on-cream would be invisible; over the dark bands the ring inverts. */
.sh-footer a:focus-visible,
.sh-cta-band a:focus-visible,
.sh-cta-band button:focus-visible {
	outline-color: var(--color-sand, #EAE4D8) !important;
}

.sh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 14px 22px;
	background: var(--color-darkbrown, #462222);
	color: var(--color-sand, #EAE4D8);
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.sh-skip-link:focus {
	left: 12px;
	top: 12px;
}

/* ── 404 ─────────────────────────────────────────────────────────────────
   Built from the site's own tokens because the header and footer are
   per-page Elementor templates and are not available to a theme template. */
.sh-404 {
	background: var(--color-sand, #EAE4D8);
	color: var(--color-darkbrown, #462222);
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 120px 28px;
}

.sh-404-inner {
	max-width: 640px;
	text-align: center;
}

.sh-404-code {
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-size: 96px;
	line-height: 1;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
	opacity: 0.35;
}

.sh-404-title {
	font-family: Cepelin, "Source Serif Pro", Georgia, serif;
	font-size: 54px;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 20px;
	color: var(--color-ink, #3B1919);
}

.sh-404-body {
	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 20px;
	line-height: 1.5;
	margin: 0 auto 36px;
	max-width: 30em;
}

.sh-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 44px;
}

.sh-404-link {
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-size: 22px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-sand, #EAE4D8);
	background: var(--color-darkbrown, #462222);
	padding: 12px 26px;
	border-radius: 2px;
	transition: opacity 0.15s ease;
}

.sh-404-link:hover {
	opacity: 0.82;
}

.sh-404-search-label {
	display: block;
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-size: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sh-404-search-row {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.sh-404-search-row input {
	flex: 1 1 auto;
	max-width: 320px;
	padding: 12px 14px;
	border: 1px solid var(--color-darkbrown, #462222);
	background: transparent;
	color: var(--color-darkbrown, #462222);
	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 17px;
}

.sh-404-search-row button {
	padding: 12px 22px;
	border: 1px solid var(--color-darkbrown, #462222);
	background: var(--color-darkbrown, #462222);
	color: var(--color-sand, #EAE4D8);
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-size: 19px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 767px) {
	.sh-404 { padding: 80px 24px; }
	.sh-404-code { font-size: 68px; }
	.sh-404-title { font-size: 38px; }
	.sh-404-body { font-size: 18px; }
	.sh-404-search-row { flex-direction: column; align-items: stretch; }
	.sh-404-search-row input { max-width: none; }
}

/* ── Single post: order of the blocks after the article ──────────────────
   The design ends a post with author bio, then share, then the newsletter
   signup. The build rendered them in the opposite order - newsletter, share,
   bio - because the share/bio pair lives in one container (4b02aba) that sits
   after the newsletter container (fc1c0de) in the template.

   The gap report could not name this. It measured the distances between those
   blocks and reported a +2706px gap against a -2519px gap: two large spacing
   faults that were really one ordering fault. order_check.py found it by
   comparing sequence rather than distance.

   The parent is a plain block container, so it has to become a flex column
   before order applies. Every child is a full-width band, so the switch does
   not change how any of them lay out.

   Two corrections to an earlier attempt at this, both worth recording. The
   first targeted these as children of .elementor-194; they are not. Elementor
   was serving a stale render, and clearing its cache (any post save does it)
   exposed the real nesting - the newsletter and the bio/share pair are
   children of be4f7fb, one level further in. Ordering rules written against a
   cached structure silently stop applying the moment the cache clears, so
   these are scoped to the container that actually holds them. */
.elementor-element-be4f7fb > .elementor-element-c4a1dd4 { order: 0; }  /* article */
.elementor-element-be4f7fb > .elementor-element-4b02aba { order: 1; }  /* bio + share */
.elementor-element-be4f7fb > .elementor-element-fc1c0de { order: 2; }  /* newsletter */

/* ...and inside that pair, the design puts the author before the share row. */
.elementor-element-4b02aba { display: flex; flex-direction: column; }
.elementor-element-4b02aba > .elementor-element-fb5b8ed { order: 1; }  /* bio */
.elementor-element-4b02aba > .elementor-element-20d283f { order: 2; }  /* share */

/* The 404 band paints cream, but the page body behind it stayed white, so the
   colour stopped at the band's edges on tall screens. */
body.error404 {
	background: var(--color-cream, #EAE4D8);
}

/* Category tag pills (WP core's rel="tag" term links) - "SEO" was only 22px
   wide, under the WCAG AA 24px tap-target floor. */
a[rel="tag"] {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 8px;
}

/* Elementor Pro form checkbox/radio option labels - the label IS the real
   click target (toggles the tiny native control), but was only 20px tall. */
.elementor-field-option label {
	display: inline-flex !important;
	align-items: center;
	min-height: 24px;
	min-width: 24px;
	padding: 2px 4px;
}

/* ── Desktop nav dropdown (the four service pages under "Services") ─────
   CSS-only: the nav cell gets .sh-nav-has-dropdown and contains a
   .sh-nav-dropdown block, revealed on hover/focus. The mobile equivalent
   reuses the accordion already wired up in mobile-nav.js. */
.sh-nav-has-dropdown {
	position: relative;
}
.sh-nav-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	min-width: 100%;
	width: max-content;
	opacity: 0;
	visibility: hidden;
	/* No pointer-events:none here. visibility:hidden already blocks
	   interaction, and setting pointer-events from the :hover rule would make
	   the panel transparent to the mouse during the closing grace below - so
	   moving back into it would not re-trigger :hover, and the item under the
	   cursor could not be clicked. */
	/* Closing is deliberately delayed. A real hand moves fast and diagonally
	   from the label to an item, and a menu that closes the instant :hover is
	   lost will vanish if the pointer clips a corner outside the trigger for a
	   single frame - the item is then gone before it can be clicked. The 300ms
	   grace makes the menu survive those brief exits; opening stays instant. */
	transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.45s;
}
/* An invisible bridge over the seam between the trigger and the panel, so a
   pointer that drifts a few pixels while crossing stays within the hover
   target instead of falling through the gap. */
.sh-nav-dropdown::before {
	content: "";
	position: absolute;
	left: -12px;
	right: -12px;
	top: -16px;
	height: 18px;
}
.sh-nav-has-dropdown:hover .sh-nav-dropdown,
.sh-nav-has-dropdown:focus-within .sh-nav-dropdown {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s ease 0s, visibility 0s linear 0s;
}
.sh-nav-dropdown a:hover {
	opacity: 0.7;
}
/* The dropdown is desktop-only - on mobile the same links live in the
   hamburger menu's Services accordion instead. */
@media (max-width: 767px) {
	.sh-nav-dropdown {
		display: none !important;
	}
}

/* ── Cookie consent banner ─────────────────────────────────────────────── */
.sh-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	background: var(--color-darkbrown, #462222);
	color: var(--color-cream, #EAE4D8);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}

.sh-cookie-banner-text {
	margin: 0;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.5;
}

.sh-cookie-banner-text a {
	color: var(--color-cream, #EAE4D8);
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.sh-cookie-banner-actions {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.sh-cookie-banner-decline,
.sh-cookie-banner-accept {
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-size: 16px;
	padding: 10px 22px;
	min-height: 44px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid var(--color-cream, #EAE4D8);
}

.sh-cookie-banner-decline {
	background: transparent;
	color: var(--color-cream, #EAE4D8);
}

.sh-cookie-banner-accept {
	background: var(--color-maroon, #AF2A45);
	color: var(--color-cream, #EAE4D8);
	border-color: var(--color-maroon, #AF2A45);
}

@media (max-width: 640px) {
	.sh-cookie-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.sh-cookie-banner-actions {
		justify-content: center;
	}
}

/* Services "who is this for" personas on mobile — the same fault as the
   add-on cards above, in a different block.

   Four persona cells in a 2x2: column A is FOUNDERS and MARKETING TEAMS,
   column B is CREATORS and CONTENT TEAMS. Down the design they read A1, A2,
   B1, B2 (founders, marketing, creators, content). Down the build they read
   A1, B1, A2, B2, because each row stacks its own pair before the next row
   starts — so personas two and three arrive swapped.

   Both rows are bare layout wrappers (no background, border or padding), so
   collapsing them with display:contents is safe. !important because
   Elementor's atomic flexbox base sets display on every container. */
@media (max-width: 767px) {
	.elementor-element-4310cf9 > .elementor-element-4683db1,
	.elementor-element-4310cf9 > .elementor-element-92cde63 {
		display: contents !important;
	}

	.elementor-element-d183be5 { order: 1; }   /* founders that want results   */
	.elementor-element-3348ba9 { order: 2; }   /* marketing teams that need... */
	.elementor-element-fa1e4f4 { order: 3; }   /* creators that want scale     */
	.elementor-element-f0ea246 { order: 4; }   /* content teams that need...   */
}

/* Shop testimonial carousel: axe-core (WCAG color-contrast) found the
   marquee duplicates each of its 4 card colours twice, and two of the four
   have one copy correct and one copy broken - the same visual card renders
   with inconsistent text colour between its two DOM instances. Fixed per
   instance below since these atomic classes carry no shared "variant" hook.
   If the Shop Elementor data is ever regenerated these hashes will change
   and need re-finding via the failing element's data-interaction-id. */
/* Olive card (bg #776934): quote + byline both sat at 2.88:1 against the
   olive, just under the 3:1 large-text minimum. */
.e-f790562-7ba370,
.e-0688405-21fc90 {
	color: #2B1212 !important;
}
/* Pink card (bg #EAC8C6), first copy only: byline was left at the cream
   colour meant for the dark-background cards (1.22:1 - nearly invisible).
   The quote beside it, and this exact card's second copy, both correctly
   use the site's #EAC8C6-pairing colour already established in
   .sh-post-content .wp-block-button__link. */
.e-01d2ff7-07bd02 {
	color: #462222 !important;
}
/* Navy card (bg #13425B), first copy only: byline was left dark (1.46:1)
   instead of the cream its own quote sibling - and this card's second copy
   - both correctly use. */
.e-66c2443-d45cc5 {
	color: #EAE4D8 !important;
}

/* Single-post footer CTA band ("From content coal to content diamonds."):
   axe-core found 1.54:1 against its own text on mobile, and the identical
   flat colours produce the same failure on desktop (axe just marks it
   "incomplete" there because a small deer graphic elsewhere in the
   container makes it decline to auto-flatten the colour). There is no
   background photo anywhere in this container at any viewport - its whole
   background is this one translucent tint sitting directly on the page's
   cream, which is too light for the cream (#EAE4D8) text drawn over it.
   Raising the tint's opacity turns it into a real dark band standalone,
   which is what the cream text was designed against. */
.elementor-element-151b1d1 {
	background-color: rgba(59, 25, 25, 0.85) !important;
}

/* ══ Mobile vs Figma pass, 2026-09-16 ═══════════════════════════════════════
   Verified against the exported mobile frames at their 440px artboard width
   with an anchor checker (Figma node y/x/w/h vs live box, 3px tolerance).
   Scoped to max-width 767px; desktop is untouched. */

/* ── Buttons, site-wide mobile ──────────────────────────────────────────
   Every CTA rectangle in all six mobile frames has a 4px radius, and the
   exported art shows a soft inner shadow along the top edge (the top pixel
   row is ~25% darker than the fill and fades out over ~6px). */
@media (max-width: 767px) {
	.e-button-base,
	a.e-button-base,
	.elementor-button {
		border-radius: 4px !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
		/* 12px padding x2 + 27px line = Figma's 51px box. The site-wide
		   line-height:1.1 (27.5px) rounded every button up to 52px. */
		line-height: 27px !important;
	}
}
/* Desktop nav geometry, all six desktop frames (identical): link cells are
   193px rectangles on a 192px pitch (0/192/384 and 934/1126/1318), so each
   link group spans 577.6px of 1512 = 38.2%, not the 37.5% used above; the
   wordmark is 269.5x35.5 centred in the 356px middle cell. Figma's labels are
   not quite centred in their cells either; the nudges below put each label's
   left edge on the frame's x (79, 253, 460 / 984, 1166, 1387), measured with
   the live label widths. */
@media (min-width: 1025px) {
	.sh-nav-links {
		flex: 0 0 38.2% !important;
		width: 38.2% !important;
	}
	.sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		width: 269.5px !important;
		height: 35.5px !important;
		max-width: none !important;
	}
	.sh-nav-links > .e-flexbox-base > :first-child {
		position: relative;
	}
	.sh-nav-links:first-child > .e-flexbox-base:nth-child(2) > :first-child { left: -7.3px; }
	.sh-nav-links:first-child > .e-flexbox-base:nth-child(3) > :first-child { left: -4.8px; }
	.sh-nav-links:not(:first-child) > .e-flexbox-base:nth-child(1) > :first-child { left: -11.2px; }
	.sh-nav-links:not(:first-child) > .e-flexbox-base:nth-child(2) > :first-child { left: -4.7px; }
	.sh-nav-links:not(:first-child) > .e-flexbox-base:nth-child(3) > :first-child { left: -0.7px; }
}

/* Desktop and tablet: all six desktop frames draw every button (52 checked) as
   a 51px box with the same 4px radius and top inner shadow. The build ran them
   60px tall (16px block padding) with square corners. */
@media (min-width: 768px) {
	.e-button-base,
	a.e-button-base,
	.elementor-button {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		min-height: 51px !important;
		line-height: 27px !important;
		border-radius: 4px !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
	}
	/* Desktop nav wordmark: Figma's lockup carries "Rectangle 1" (54x3.7 at
	   x=158.8/y=19.7 inside the 269.5x35.5 group), the H crossbar run on across
	   the A. The uploaded SVG lacks it. */
	.sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../img/socialhart-nav-logo-bar.svg');
	}
	body.page-id-35 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.page-id-36 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	:is(body.archive, body.search) .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.single-post .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../img/socialhart-nav-logo-bar-dark.svg');
	}
}

/* ── Header, site-wide mobile ───────────────────────────────────────────
   Figma "Mobile Navigation": one 81px bar with a bottom rule, the wordmark
   LEFT-aligned at x=23 y=22 (303x39), a vertical rule at x=351 and a
   hamburger of three 51px hairlines at y=28/42/55 in the 89px right cell.
   The build centred the logo and let the generic .e-flexbox-base mobile
   flex-wrap drop the toggle (a text glyph) onto a second row, so the bar was
   99px tall with the icon under the logo on the left. */
@media (max-width: 767px) {
	.sh-nav {
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		height: 81px !important;
		border-bottom: 1px solid #EAE4D8;
		box-sizing: border-box;
	}
	body.page-id-35 .sh-nav,
	body.page-id-36 .sh-nav,
	:is(body.archive, body.search) .sh-nav,
	body.single-post .sh-nav {
		border-bottom-color: #462222;
	}
	.sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) {
		flex: 1 1 auto !important;
		min-width: 0;
		height: 80px !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		padding: 22px 0 0 23px !important;
		box-sizing: border-box;
	}
	/* The mobile lockup is the nav SVG plus Figma's "Rectangle 1": the H
	   crossbar carried on across the A. Stretched to 303x39 (the SVG is
	   preserveAspectRatio="none"), every letter lands within 1px of the frame. */
	.sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../img/socialhart-nav-logo-mobile.svg');
		width: 303px !important;
		max-width: 100% !important;
		height: 39px !important;
		object-fit: fill !important;
	}
	.sh-nav .sh-nav-toggle {
		flex: 0 0 89px !important;
		width: 89px !important;
		height: 80px !important;
		padding: 0 !important;
		border-left: 1px solid currentColor;
		box-sizing: border-box;
		font-size: 0 !important;
		line-height: 0 !important;
		color: #EAE4D8;
		background:
			linear-gradient(currentColor, currentColor) 18px 28px / 51px 1px no-repeat,
			linear-gradient(currentColor, currentColor) 18px 42px / 51px 1px no-repeat,
			linear-gradient(currentColor, currentColor) 18px 55px / 51px 1px no-repeat !important;
	}
}

/* ── Open mobile menu, site-wide (Figma 113:1010 "Hamburger Navigation -
   Open") ───────────────────────────────────────────────────────────────
   Top row is the header bar in dark ink: 81px, wordmark 303x39 at 23/22, a
   rule at x=351 and a hairline X (36x36 at 377/22). Rows are 60px (the first
   64px) with 25px labels at x=20 and 20x20 hairline plus/minus icons 17px
   from the right. The Shop dropdown is three pink ~41px rows with 20px labels
   at x=23. The stag is 98px tall, bottom-left at x=23, 17px off the bottom.
   The build had 85px rows, 18px labels, text-glyph icons, a boxed top row
   without the wordmark lockup, and a 148px stag centred mid-screen. */
@media (max-width: 767px) {
	.sh-mobile-menu > .e-flexbox-base:first-child {
		flex: 0 0 81px !important;
		height: 81px !important;
		padding: 22px 0 0 23px !important;
		border: 0 !important;
		border-bottom: 1px solid #462222 !important;
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		box-sizing: border-box !important;
	}
	.sh-mobile-menu > .e-flexbox-base:first-child > img {
		content: url('../img/socialhart-nav-logo-mobile-dark.svg');
		width: 303px !important;
		max-width: calc(100% - 89px) !important;
		height: 39px !important;
		object-fit: fill !important;
	}
	.sh-mobile-menu .sh-mobile-close {
		flex: 0 0 89px !important;
		width: 89px !important;
		height: 80px !important;
		margin: -22px 0 0 auto !important;
		border-left: 1px solid #462222;
		box-sizing: border-box;
		font-size: 0 !important;
		color: transparent !important;
		background:
			linear-gradient(to top right, transparent calc(50% - 0.5px), #462222 calc(50% - 0.5px), #462222 calc(50% + 0.5px), transparent calc(50% + 0.5px)) 25px 22px / 36px 36px no-repeat,
			linear-gradient(to bottom right, transparent calc(50% - 0.5px), #462222 calc(50% - 0.5px), #462222 calc(50% + 0.5px), transparent calc(50% + 0.5px)) 25px 22px / 36px 36px no-repeat !important;
	}
	.sh-mobile-menu .sh-mobile-item {
		height: 60px !important;
		min-height: 0 !important;
		padding: 0 17px 0 20px !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		border-bottom: 1px solid #462222 !important;
		box-sizing: border-box !important;
	}
	/* HOME sits 25px under the top rule in a 64px row (4px below centre). */
	.sh-mobile-menu > .e-flexbox-base:first-child + .sh-mobile-item {
		height: 64px !important;
		padding-top: 5px !important;
	}
	/* Figma's RESOURCES row is 58px (rules at 389 and 447). Keyed to the link
	   target because the row carries no class of its own. */
	.sh-mobile-menu .sh-mobile-item:has(a[href*="/resources"]) {
		height: 58px !important;
	}
	.sh-mobile-menu .sh-mobile-item .e-paragraph-base:not(.sh-mobile-accordion-icon),
	.sh-mobile-menu .sh-mobile-item a {
		font-family: "Sofia Sans Extra Condensed", sans-serif !important;
		font-size: 25px !important;
		font-weight: 700 !important;
		letter-spacing: -0.25px !important;
		line-height: 18px !important;
		text-transform: uppercase !important;
		color: #462222 !important;
	}
	.sh-mobile-menu .sh-mobile-accordion-icon {
		flex: 0 0 20px !important;
		width: 20px !important;
		height: 20px !important;
		margin-left: auto !important;
		font-size: 0 !important;
		color: transparent !important;
		background:
			linear-gradient(#462222, #462222) 0 9.5px / 20px 1px no-repeat,
			linear-gradient(#462222, #462222) 9.5px 0 / 1px 20px no-repeat !important;
	}
	.sh-mobile-menu .sh-mobile-accordion-toggle:has(+ .sh-submenu-open) .sh-mobile-accordion-icon {
		background: linear-gradient(#462222, #462222) 0 9.5px / 20px 1px no-repeat !important;
	}
	.sh-mobile-menu .sh-mobile-submenu > * {
		display: flex !important;
		align-items: center !important;
		height: 41px !important;
		min-height: 0 !important;
		padding: 0 24px 0 23px !important;
		border-bottom: 1px solid #462222 !important;
		box-sizing: border-box !important;
	}
	.sh-mobile-menu .sh-mobile-submenu > *:last-child {
		height: 42px !important;
	}
	.sh-mobile-menu .sh-mobile-submenu,
	.sh-mobile-menu .sh-mobile-submenu a {
		font-family: "Sofia Sans Extra Condensed", sans-serif !important;
		font-size: 20px !important;
		font-weight: 700 !important;
		letter-spacing: -0.2px !important;
		line-height: 16px !important;
		text-transform: uppercase !important;
		color: #462222 !important;
	}
	.sh-mobile-menu .sh-mobile-submenu a {
		min-height: 0 !important;
		height: 100% !important;
	}
	.sh-mobile-menu .sh-mobile-logo-row {
		margin-top: auto !important;
		padding: 0 0 17px 23px !important;
		justify-content: flex-start !important;
	}
	.sh-mobile-menu .sh-mobile-logo-row img {
		content: url('../img/deer-dark.png');
		width: auto !important;
		height: 98px !important;
		max-width: none !important;
	}
}

/* ── Homepage (Figma 109:3) ─────────────────────────────────────────────── */
@media (max-width: 767px) {
	/* Hero: h1 at y=115 (34 below the bar), four lines in a 375px measure;
	   stag 65x98 at y=353; stacked wordmark 376x173 at y=616; maroon ends at
	   y=825. The container was a fixed 772px with 45px top padding. */
	body.home .elementor-element-36e1ab2 {
		height: auto !important;
		min-height: 0 !important;
		padding: 34px 0 36px !important;
	}
	body.home .elementor-element-36e1ab2 > h1 {
		padding: 0 32px !important;
		margin: 0 !important;
	}
	body.home .elementor-element-36e1ab2 > img[src*="hero_deer"] {
		height: 98px !important;
		width: 66px !important;
		margin: 87px 0 0 !important;
	}
	body.home .elementor-element-36e1ab2 > .sh-wordmark-mobile {
		width: 376px !important;
		max-width: calc(100% - 64px) !important;
		height: 173px !important;
		object-fit: contain !important;
		margin: 165px auto 0 !important;
	}
	/* No maroon-to-cream fade on mobile: sampling the exported frame down x=8
	   the hero holds full maroon (~190,50,82) to its edge at y=825, while the
	   desktop fade was washing the stacked wordmark out from y=640. */
	body.home .elementor-element-36e1ab2 > .sh-hero-fade {
		display: none !important;
	}

	/* "For Founders and Brands" block: script at y=887 (62 below the hero),
	   h2 at 956, paragraph at 1373 in a 353px measure, ticker rule at 1545. */
	/* min-height: the desktop 912px floor carried over, pushing the ticker
	   193px down once the mobile padding shrank. */
	body.home .elementor-element-dd05eee {
		min-height: 0 !important;
		padding: 62px 28px 62px !important;
	}
	body.home .elementor-element-dd05eee > h2 {
		margin-top: 33px !important;
	}
	body.home .elementor-element-dd05eee > p:last-child {
		margin: 39px auto 0 !important;
		max-width: min(353px, 100%) !important;
	}

	/* Ticker: a 59px band between two rules (y=1545 / 1604), 30px text at
	   y=1563. The build ran 71px. */
	body.home .elementor-element-e0207cf {
		padding: 16px 0 !important;
	}
	body.home .elementor-element-e0207cf .sh-marquee-track,
	body.home .elementor-element-e0207cf .sh-marquee-track p {
		height: 25px !important;
		min-height: 0 !important;
		line-height: 25px !important;
	}

	/* "You're on the bright path": h2 is seven lines in a 359px measure; all
	   three paragraphs are 22px (the second and third were 18px); Figma has no
	   CTA in this block on mobile; the dark panel ends at y=2533. */
	body.home .elementor-element-c954591 {
		padding: 63px 28px 49px !important;
	}
	body.home .elementor-element-c954591 > h2 {
		margin-top: 3px !important;
		max-width: min(359px, 100%) !important;
	}
	body.home .elementor-element-c954591 > h2 ~ p {
		font-size: 22px !important;
		line-height: 22px !important;
		max-width: min(369px, 100%) !important;
	}
	body.home .elementor-element-c954591 > a.e-button-base {
		display: none !important;
	}
	/* Pink arch photo: full-bleed, 630px tall (Figma Group 163, y=2533-3163).
	   It was sharing a flex row and rendered 220x270. */
	body.home .elementor-element-afa2f29 > img {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: none !important;
		height: 630px !important;
		object-fit: cover !important;
	}

	/* Testimonial: quote at y=3299 in a 369px measure, attribution at 3878 in
	   a 175px measure (two lines), torn marble edge at 4071. The marble was
	   stretched with object-fit:fill into vertical streaks. */
	/* Figma fills a 2165px-wide rectangle with this marble (1.362x the
	   1590x895 asset), starting 112px above the band's visible top, and lets
	   the torn drips hang ~40px past the band into the founder section
	   (y=4041-4110 in the export). Reproduced exactly: same scale, same
	   offset, centred on the viewport, with clip-path trimming the sides and
	   top while leaving room below for the drips. */
	body.home .elementor-element-72a9033 {
		overflow: visible !important;
		clip-path: inset(0 0 -60px 0);
		z-index: 3 !important;
	}
	body.home .elementor-element-72a9033 > img {
		width: 2165px !important;
		max-width: none !important;
		height: 1219px !important;
		inset-block-start: -211px !important;
		inset-inline-start: calc(50% - 1207px) !important;
		object-fit: fill !important;
	}
	body.home .elementor-element-7715b76 {
		padding: 136px 28px 156px !important;
	}
	body.home .elementor-element-7715b76 > h3 {
		max-width: min(369px, 100%) !important;
		margin-inline: auto !important;
	}
	/* Figma's 175px attribution box sits at x=126, 6px left of true centre. */
	body.home .elementor-element-7715b76 > p {
		max-width: min(175px, 100%) !important;
		margin: 50px 0 0 calc(50% - 94px) !important;
		align-self: flex-start !important;
	}

	/* Meet the founder: eyebrow y=4147, h2 4199 (365px measure), copy 4491
	   (350px measure, all 22px), 141x51 "learn more" at 4900, sand band 5027. */
	body.home .elementor-element-035d063 {
		padding: 76px 28px 76px !important;
	}
	body.home .elementor-element-035d063 > h2 {
		max-width: min(365px, 100%) !important;
		margin-bottom: 43px !important;
	}
	body.home .elementor-element-035d063 > h2 ~ p {
		font-size: 22px !important;
		line-height: 22px !important;
		max-width: min(350px, 100%) !important;
	}
	body.home .elementor-element-035d063 > a.e-button-base {
		min-width: 141px !important;
		width: 141px !important;
		margin-top: 13px !important;
	}
	/* Sand band photo. The asset is a composite (diamond ground, gilt frame,
	   tag), so the shared 75/35px inset shrank the frame to 238x305. Figma's
	   frame is 332x422 at x=50 y=5118: the asset at 0.742 scale (562x632)
	   offset -60.5/-7.7 inside the 440x605 band. Horizontal overflow is
	   clipped by the section, the vertical bleed by clip-path, so the band
	   keeps its straight 605px edges. */
	body.home .sh-founder-section {
		overflow-x: clip !important;
	}
	/* .sh-founder-frame is that 562x632 box; the swappable portrait sits in
	   the frame's opening (381x501 at 188,168 in the 758x852 composite, at
	   0.742 scale, running 4px under the frame) and the frame is drawn over
	   it from founder-frame-overlay.png. */
	body.home .sh-founder-section > .sh-founder-frame {
		position: relative !important;
		display: block !important;
		order: 2 !important;
		flex: 0 0 auto !important;
		width: 562px !important;
		max-width: none !important;
		height: 632px !important;
		padding: 0 !important;
		margin: -7.7px 0 -19.3px calc(50% - 280.5px) !important;
		clip-path: inset(7.7px 0 19.3px 0);
		background: #DCC38B url('../img/founder-argyle-tile.png') repeat 0 222.5px / 109px 146.9px !important;
	}
	body.home .sh-founder-frame::after {
		content: '';
		position: absolute;
		inset: 0;
		background: url('../img/founder-frame-overlay.webp') 0 0 / 100% 100% no-repeat;
		pointer-events: none;
	}
	body.home .sh-founder-frame > .sh-founder-photo {
		position: absolute !important;
		top: 121px !important;
		left: 135px !important;
		width: 291px !important;
		max-width: none !important;
		height: 380px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		object-fit: cover !important;
		object-position: 50% 15% !important;
		order: 0 !important;
	}

	/* Client logos: one scrolling row centred on y=5695, directly under the
	   sand band, with "The Services" 134px below. On mobile the generic
	   .e-flexbox-base wrap rule beat .sh-logo-track's nowrap (same specificity,
	   later in the file), stacking the ten logos into a 996px column clipped
	   to 141px. Figma shows no separate label or edge fade on mobile. */
	body.home .elementor-element-941f1c8 {
		height: 116px !important;
		padding: 10px 0 0 !important;
		box-sizing: border-box;
	}
	body.home .elementor-element-941f1c8 > p,
	body.home .elementor-element-941f1c8 .sh-logo-fade {
		display: none !important;
	}
	body.home .elementor-element-941f1c8 > .e-flexbox-base {
		flex: 0 0 100% !important;
		height: 106px !important;
	}
	/* The marquee loops at translateX(-50%) over two copies of the logos, so
	   the seam is invisible only when the track's total side padding equals
	   one gap (then half the track = one copy + its trailing gap). */
	.sh-logo-track.sh-logo-track {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 34px !important;
		padding: 0 17px !important;
	}
	body.home .sh-logo-track img[src*="logo_autotrader"] { height: 49px !important; width: auto !important; }
	body.home .sh-logo-track img[src*="logo_kbb"]        { width: 195px !important; height: auto !important; }
	body.home .sh-logo-track img[src*="logo_peloton"]    { height: 50px !important; width: auto !important; }
	body.home .sh-logo-track img[src*="logo_wix"]        { height: 38px !important; width: auto !important; }
	body.home .sh-logo-track img[src*="logo_backlinko"]  { width: 151px !important; height: auto !important; }

	/* The Services intro: h3 at y=5904 (32 below the script); the spa-day
	   line is the SAME 45px text node one blank line later, not a smaller
	   26px heading; double rule at y=6462 / 6498 opens the card list. */
	body.home .elementor-element-8890028 {
		padding: 81px 28px 64px !important;
	}
	body.home .elementor-element-8890028 > h3:nth-of-type(1) {
		margin-top: 32px !important;
	}
	body.home .elementor-element-8890028 > h3:nth-of-type(2) {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: normal !important;
		margin-top: 38px !important;
	}
	body.home .elementor-element-38b997c > img[src*="envelope"] {
		display: none !important;
	}
	body.home .elementor-element-0c9b4b4 {
		border-top: 1px solid #3B1919;
		padding-top: 35px !important;
	}
	/* Service cards: 113x149 thumbnail 31px under the rule, heading 20px
	   under it at x=28, body 30px under the heading. The build laid thumbnail
	   and heading side by side in a wrapping row (heading indented 27px, no
	   gaps) and height:auto collapsed the thumbnail to 68px. Bottom padding is
	   per card because Figma's own rhythm varies (50/40/54/44px). */
	body.home .elementor-element-0c9b4b4 > .e-flexbox-base {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	body.home .elementor-element-e85a054 { border-top: 1px solid #3B1919; padding: 31px 28px 50px !important; }
	body.home .elementor-element-62b0b0f { padding: 31px 28px 40px !important; }
	body.home .elementor-element-4c53215 { padding: 31px 28px 54px !important; }
	body.home .elementor-element-9c4cd5d { padding: 31px 28px 44px !important; }
	body.home .elementor-element-0c9b4b4 > .e-div-block-base {
		background-color: #3B1919 !important;
	}
	body.home .elementor-element-0c9b4b4 > .e-flexbox-base > img {
		width: 113px !important;
		height: 149px !important;
		object-fit: cover !important;
		margin: 0 0 20px !important;
	}
	body.home .elementor-element-0c9b4b4 > .e-flexbox-base > .e-heading-base {
		margin: 0 0 30px !important;
		width: 100% !important;
	}
	/* Spree is the one card Figma sets 27px (not 20px) under its thumbnail. */
	body.home .elementor-element-0c9b4b4 > .elementor-element-4c53215 > img {
		margin-bottom: 27px !important;
	}
	body.home .elementor-element-52be995 {
		padding: 31px 28px 76px !important;
	}
	body.home .elementor-element-52be995 > a.e-button-base {
		min-width: 256px !important;
		width: 256px !important;
	}

	/* Blog: stag at y=8747 (50 into the red panel), h2 8875, script 9009,
	   posts from 9111 as full 384px cards with a 384x316 bordered image. */
	body.home .elementor-element-d4c12c5 {
		padding: 50px 28px 66px !important;
	}
	body.home .elementor-element-d4c12c5 > img {
		height: 98px !important;
		width: 66px !important;
	}
	body.home .elementor-element-d4c12c5 > h2 {
		margin-top: 30px !important;
	}
	body.home .elementor-element-d4c12c5 > h3 {
		margin-top: 21px !important;
	}
	/* Figma pitches the cards 545px apart; a card is 496px (316 image + 19 +
	   108 three-line title + 18 + 35 read-more), leaving a 49px gap. The last
	   read-more ends 46px above "view all resources". */
	body.home .elementor-element-cea9573 {
		padding: 0 28px 46px !important;
		row-gap: 49px !important;
	}
	/* "READ MORE" underline: Figma draws the rule 26px below the text top
	   (8px under the letters). It is this paragraph's bottom border, and the
	   44px tap-target link plus 8px padding pushed it 13px lower. A 34px link
	   (still above the 24px AA target) centres the text 8px down and puts the
	   border exactly at +26. */
	body.home .elementor-element-cea9573 > .e-flexbox-base > p {
		padding-bottom: 0 !important;
	}
	body.home .elementor-element-cea9573 > .e-flexbox-base > p > .e-paragraph-link-base {
		min-height: 34px !important;
	}
	body.home .elementor-element-cea9573 > .e-flexbox-base {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: none !important;
	}
	body.home .elementor-element-cea9573 > .e-flexbox-base > img {
		width: 100% !important;
		height: 316px !important;
		object-fit: cover !important;
		border: 1px solid #3B1919 !important;
		box-sizing: border-box !important;
	}
	body.home .elementor-element-cea9573 > .e-flexbox-base > h4 {
		width: 100% !important;
		margin: 19px 0 18px !important;
	}
	body.home .elementor-element-ab2a4d5 > a.e-button-base {
		min-width: 212px !important;
		width: 212px !important;
	}
	/* Luggage tag: 274x283 at x=131, hanging 225px into the olive band. */
	body.home .elementor-element-9f9419c > img[src*="tag_transparent"] {
		inset-block-start: auto !important;
		inset-block-end: -225px !important;
		inset-inline-start: 29.77% !important;
		width: 62.27% !important;
		max-width: none !important;
		height: auto !important;
		aspect-ratio: 274 / 283;
		object-fit: contain !important;
	}

	/* Content coal band: stag y=11034 (150 into the olive), h2 11159,
	   copy 11312, 238x51 CTA 11465, pink starts 11661. */
	body.home .elementor-element-dd085ae {
		padding: 150px 28px 145px !important;
	}
	body.home .elementor-element-dd085ae > img {
		height: 98px !important;
		width: 66px !important;
	}
	body.home .elementor-element-dd085ae > p {
		margin: 40px 0 43px !important;
	}
	body.home .elementor-element-dd085ae > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* Newsletter: 492px pink band ruled top and bottom; h2 at y=11720;
	   383x55 outlined fields 13px apart starting 49px under the heading, with
	   20px Source Serif placeholders; a 281x51 left-aligned button 27px under
	   the last field. The build ran the button full-width and 44px tall,
	   Roboto grey placeholders, and no space above the fields. */
	body.home .elementor-element-fc65b74 {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	body.home .elementor-element-1b6d130 {
		padding: 58px 28px 69px !important;
	}
	body.home .sh-newsletter-form {
		margin-top: 49px !important;
	}
	body.home .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	body.home .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	body.home .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	body.home .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.home .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	/* Figma's label sits 20px in from each side (x=49 in a box at x=29); the
	   Elementor default 24px padding wrapped the label onto two lines. */
	body.home .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's mobile footer has no "Socialhart helps founders" blurb.
	   NAVIGATION at x=60 and CONNECT at x=275 (y=12223, 70 under the pink),
	   links on a 28px pitch (still above the 24px WCAG 2.5.8 AA target), the
	   STACKED wordmark 376x173 at y=12493, and one 89px legal row. */
	body.home .elementor-element-dbf7cb7 {
		padding: 70px 28px 0 !important;
	}
	body.home .elementor-element-9ea8b76 {
		display: none !important;
	}
	body.home .elementor-element-5787a2a {
		margin-left: 32px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	body.home .elementor-element-b9d2512 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	/* Eight of the ten links were 18px; Figma sets every one at 20px. */
	body.home .elementor-element-5787a2a p:not(:first-child),
	body.home .elementor-element-5787a2a .e-paragraph-link-base {
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	body.home .elementor-element-5787a2a .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
	}
	body.home .elementor-element-b9d2512 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.home .elementor-element-c3d7822 {
		padding: 91px 28px 27px !important;
	}
	body.home .elementor-element-c3d7822 > 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.home .elementor-element-9de18a6 {
		padding: 23px 26px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	body.home .elementor-element-cab4cb4 {
		flex: 0 0 auto !important;
		width: auto !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
	}
	/* Desktop pins this cell at min-width 160px and right-aligns inside it,
	   which put "site credit" at x=398 instead of 326. */
	body.home .elementor-element-32f5307 {
		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.home .elementor-element-9de18a6,
	body.home .elementor-element-cab4cb4 {
		flex-wrap: wrap !important;
	}
}
/* Mobile-only line break inside a heading (the homepage hero h1 carries one,
   because Figma breaks "traffic / with SEO." with a hard line separator that
   no column width can reproduce). */
@media (min-width: 768px) {
	.sh-br-mobile { display: none; }
}

/* ══ Newsletter signup: Flodesk, site-wide (2026-09-17) ═══════════════════
   Every newsletter band now renders the real Flodesk form ([sh_newsletter_form],
   widget class sh-newsletter-flodesk) instead of an Elementor Pro form that
   had no submit action and no mail transport behind it - no signup ever
   reached Flodesk. Flodesk draws its own light-DOM form; it is restyled here
   to the geometry the Elementor form had been verified at against Figma:
   desktop two 339x55 fields 13px apart with the 281x51 button 17px below;
   mobile the fields stacked 13px apart and the button 27px below.
   Flodesk's decoy fields are display:none from Flodesk itself, so nothing
   below sets display on a field group. */
.sh-newsletter-form > .elementor-widget-shortcode,
.sh-newsletter-form .sh-newsletter-flodesk {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.sh-flodesk-form [data-ff-el="root"],
.sh-flodesk-form [data-ff-el="root"] [data-ff-el="form"],
.sh-flodesk-form [data-ff-el="root"] [class$="__container"],
.sh-flodesk-form [data-ff-el="root"] [data-ff-el="content"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.sh-flodesk-form [data-ff-el="root"] [class*="__title"],
.sh-flodesk-form [data-ff-el="root"] [class*="__subtitle"] {
	display: none !important;
}
.sh-flodesk-form [data-ff-el="fields"] {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 13px !important;
	width: 100% !important;
	margin: 0 !important;
}
.sh-flodesk-form .fd-form-group {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
}
.sh-flodesk-form input.fd-form-control {
	width: 100% !important;
	height: 55px !important;
	margin: 0 !important;
	padding: 0 19px !important;
	border: 1px solid #3B1919 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 20px !important;
	letter-spacing: -0.6px !important;
	text-transform: none !important;
	color: #3B1919 !important;
}
.sh-flodesk-form label.fd-form-label {
	/* block, not flex: Flodesk splits the label into spans at random
	   points, and flex items drop the space between "First" and "name" */
	display: block !important;
	height: 55px !important;
	line-height: 55px !important;
	white-space: nowrap !important;
	padding: 0 20px !important;
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: -0.6px !important;
	text-transform: none !important;
	color: #3B1919 !important;
}
.sh-flodesk-form [data-ff-el="root"] [data-ff-el="footer"] {
	width: auto !important;
	margin: 27px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
}
.sh-flodesk-form button.fd-btn {
	width: 281px !important;
	max-width: 100% !important;
	height: 51px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: #EAE4D8 !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
	color: #462222 !important;
	font-family: 'Sofia Sans Extra Condensed', sans-serif !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	line-height: 27px !important;
	letter-spacing: -0.25px !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	cursor: pointer;
}
/* Flodesk's form is configured with "Subscribe"; the design's label is
   "Subscribe to the newsletter" (Subscribe page: "Join the newsletter"). */
.sh-flodesk-form button.fd-btn > span {
	font-size: 0 !important;
}
.sh-flodesk-form button.fd-btn > span::after {
	content: "Subscribe to the newsletter";
	font-size: 25px;
}
body.page-id-4143 .sh-flodesk-form button.fd-btn > span::after {
	content: "Join the newsletter";
}
.sh-flodesk-form [data-ff-el="success"],
.sh-flodesk-form [data-ff-el="error"] {
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 20px !important;
	color: #3B1919 !important;
	text-align: left !important;
}
@media (min-width: 768px) {
	.sh-newsletter-form .sh-flodesk-form [data-ff-el="fields"] {
		flex-direction: row !important;
	}
	.sh-newsletter-form .sh-flodesk-form [data-ff-el="root"] [data-ff-el="footer"] {
		margin-top: 17px !important;
	}
	/* Subscribe page: 480px form, fields 33px apart, full-width button 49px
	   under the fields (as the verified Elementor version). */
	body.page-id-4143 .sh-newsletter-form .sh-flodesk-form [data-ff-el="fields"] {
		gap: 33px !important;
	}
	body.page-id-4143 .sh-newsletter-form .sh-flodesk-form [data-ff-el="root"] [data-ff-el="footer"] {
		margin-top: 49px !important;
	}
	body.page-id-4143 .sh-newsletter-form .sh-flodesk-form button.fd-btn {
		width: 100% !important;
	}
}
@media (max-width: 767px) {
	body.page-id-4143 .sh-newsletter-form .sh-flodesk-form [data-ff-el="root"] [data-ff-el="footer"] {
		text-align: center !important;
	}
}
/* Footer template 197 (posts, legal pages) and Free SEO Tools carry the same
   newsletter band as the homepage, but at desktop their form column was 631px
   at x=819 and the band centred vertically, where every desktop frame has the
   homepage geometry: content from the top at 55px, form 691px at x=773. */
@media (min-width: 1025px) {
	.elementor-element-310d2c1,
	.elementor-element-aeb97c4 {
		padding: 55px 47px 0 47px !important;
		align-items: flex-start !important;
		min-height: 261px !important;
		box-sizing: border-box !important;
	}
	.elementor-element-1e652bf,
	.elementor-element-0bbccbd {
		flex: 0 0 691px !important;
		width: 691px !important;
		max-width: 691px !important;
	}
}

/* ══ Responsive scaling (see functions.php "Responsive scaling") ══════════
   --sh-zoom is set in <head> per device range: 1512 desktop artboard,
   1024 tablet layout, 440 mobile artboard for small phones. */
body:not(.elementor-editor-active) {
	zoom: var(--sh-zoom, 1);
}

/* ---- Sticky navigation (Bevon, QC 2026-09-19) --------------------------
   The Figma has the nav scroll away with the hero; QC asked for it pinned.

   The bar is transparent by design and sits on whatever the page's hero is
   (maroon on Home, olive on Services, sand on Resources, cream on posts),
   and its link colour is chosen to suit that hero - cream links on the dark
   pages, coal on the light ones. So a single sticky background colour would
   make half the pages unreadable. mobile-nav.js reads the colour the bar is
   already sitting on and paints the pinned bar with it, which keeps every
   page's existing contrast.

   position:sticky is no use here: the nav is a child of the page's first
   section, so it would come unstuck as soon as that section scrolled past.
   Hence fixed, with the section taking the nav's height as padding so the
   page doesn't jump at the moment it pins. */
.sh-nav.sh-nav-stuck {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 60 !important;
	box-shadow: 0 2px 12px rgba(46, 22, 22, 0.16);
}
/* The open mobile menu already covers the screen; no shadow seam under it. */
.sh-nav.sh-nav-stuck.sh-nav-open {
	box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
	.sh-nav.sh-nav-stuck {
		animation: sh-nav-drop 0.18s ease-out;
	}
	@keyframes sh-nav-drop {
		from { transform: translateY(-100%); }
		to   { transform: translateY(0); }
	}
}

/* ── Coloured cards on the sales pages (client QA #20, #21, #27, #31, #32, #33)
   ──────────────────────────────────────────────────────────────────────────
   Asked for: cards that alternate colour "like in the review carousel:
   green, yellow, pink, blue". The brand palette has no green or blue, so the
   nearest brand equivalents are used - olive for green, sand for yellow, and
   for blue the navy from the client's own 2026 case-study artwork (#13425B),
   sampled from the files she sent. This is a deliberate step away from the
   Figma, which draws all of these cards plain.

   "Pick your focus" is the exception: she named those colours herself -
   white, yellow, pink, white. */
:root {
	--sh-card-green:  #776934;
	--sh-card-yellow: #DCC38B;
	--sh-card-pink:   #EAC8C6;
	--sh-card-blue:   #13425B;
	--sh-card-red:    #AF2A45;
	--sh-card-white:  #F6F1F0;
	--sh-on-dark:     #EAE4D8;
	--sh-on-light:    #462222;
}

.sh-card-green, .sh-card-yellow, .sh-card-pink, .sh-card-blue, .sh-card-white {
	transition: none;
}
.sh-card-green  { background-color: var(--sh-card-green) !important;  color: var(--sh-on-dark) !important; }
.sh-card-blue   { background-color: var(--sh-card-blue) !important;   color: var(--sh-on-dark) !important; }
.sh-card-yellow { background-color: var(--sh-card-yellow) !important; color: var(--sh-on-light) !important; }
.sh-card-pink   { background-color: var(--sh-card-pink) !important;   color: var(--sh-on-light) !important; }
.sh-card-white  { background-color: var(--sh-card-white) !important;  color: var(--sh-on-light) !important; }
:is(.sh-card-green, .sh-card-blue) :is(h1, h2, h3, h4, h5, p, span, li, a, strong) {
	color: var(--sh-on-dark) !important;
}
:is(.sh-card-yellow, .sh-card-pink, .sh-card-white) :is(h1, h2, h3, h4, h5, p, span, li, a, strong) {
	color: var(--sh-on-light) !important;
}
/* Cards drawn without a box of their own need room once they carry colour. */
.sh-card-pad {
	padding: 26px 32px !important;
	box-sizing: border-box;
}

/* #20 Bubbly "This sounds like you" - already bordered boxes, so colour only. */
body.page-id-35 .elementor-element-93a748f { background-color: var(--sh-card-green) !important; }
body.page-id-35 .elementor-element-13e2e64 { background-color: var(--sh-card-yellow) !important; }
body.page-id-35 .elementor-element-20202ce { background-color: var(--sh-card-pink) !important; }
body.page-id-35 .elementor-element-59bb4be { background-color: var(--sh-card-blue) !important; }
body.page-id-35 .elementor-element-c8f6e9e { background-color: var(--sh-card-green) !important; }
body.page-id-35 .elementor-element-6621855 { background-color: var(--sh-card-yellow) !important; }
body.page-id-35 :is(.elementor-element-93a748f, .elementor-element-59bb4be, .elementor-element-c8f6e9e) :is(h3, h4, p, span) {
	color: var(--sh-on-dark) !important;
}
body.page-id-35 :is(.elementor-element-13e2e64, .elementor-element-20202ce, .elementor-element-6621855) :is(h3, h4, p, span) {
	color: var(--sh-on-light) !important;
}

/* #21 Bubbly "Pick your focus" - her own colour order: white, yellow, pink,
   white. These rows run edge to edge with no side padding of their own. */
body.page-id-35 :is(.elementor-element-4c2598c, .elementor-element-249c1f1,
                    .elementor-element-210fcef, .elementor-element-7dfacbf) {
	padding-left: 40px !important;
	padding-right: 40px !important;
	box-sizing: border-box;
}
body.page-id-35 .elementor-element-4c2598c { background-color: var(--sh-card-white) !important; }
body.page-id-35 .elementor-element-249c1f1 { background-color: var(--sh-card-yellow) !important; }
body.page-id-35 .elementor-element-210fcef { background-color: var(--sh-card-pink) !important; }
body.page-id-35 .elementor-element-7dfacbf { background-color: var(--sh-card-white) !important; }
body.page-id-35 :is(.elementor-element-4c2598c, .elementor-element-249c1f1,
                    .elementor-element-210fcef, .elementor-element-7dfacbf) :is(h3, h4, p, span) {
	color: var(--sh-on-light) !important;
}

/* #27 Growth Rizz breakdown, #33 Etched core consulting breakdown,
   #31 Spree payment plans, #32 Etched "How it works" - cards drawn plain in
   the Figma, so each needs padding as well as its colour. */
body.page-id-4144 :is(.elementor-element-f4da92c, .elementor-element-f9fbe27,
                      .elementor-element-e8150c2, .elementor-element-eae8ce5),
body.page-id-4146 :is(.elementor-element-54bcaf8, .elementor-element-d64bea8,
                      .elementor-element-630d4e0, .elementor-element-f4d4f43),
body.page-id-4145 :is(.elementor-element-6a9ad87, .elementor-element-2e30a5c,
                      .elementor-element-2c4def4, .elementor-element-cd50d03,
                      .elementor-element-0491f36, .elementor-element-6783658,
                      .elementor-element-371f8a1, .elementor-element-ad2da3b),
body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-a6c5bf8,
                      .elementor-element-05a436b, .elementor-element-1284e5f,
                      .elementor-element-f9b638b, .elementor-element-9315a90,
                      .elementor-element-e159c96, .elementor-element-5b56fa5,
                      .elementor-element-a76b18f) {
	padding: 26px 30px !important;
	box-sizing: border-box;
}

/* green / yellow / pink / blue, in that order, repeating */
body.page-id-4144 .elementor-element-f4da92c,
body.page-id-4146 .elementor-element-54bcaf8,
body.page-id-4145 :is(.elementor-element-6a9ad87, .elementor-element-0491f36),
body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-f9b638b, .elementor-element-a76b18f) {
	background-color: var(--sh-card-green) !important;
}
body.page-id-4144 .elementor-element-f9fbe27,
body.page-id-4146 .elementor-element-d64bea8,
body.page-id-4145 :is(.elementor-element-2e30a5c, .elementor-element-6783658),
body.page-id-4146 :is(.elementor-element-a6c5bf8, .elementor-element-9315a90) {
	background-color: var(--sh-card-yellow) !important;
}
body.page-id-4144 .elementor-element-e8150c2,
body.page-id-4146 .elementor-element-630d4e0,
body.page-id-4145 :is(.elementor-element-2c4def4, .elementor-element-371f8a1),
body.page-id-4146 :is(.elementor-element-05a436b, .elementor-element-e159c96) {
	background-color: var(--sh-card-pink) !important;
}
body.page-id-4144 .elementor-element-eae8ce5,
body.page-id-4146 .elementor-element-f4d4f43,
body.page-id-4145 :is(.elementor-element-cd50d03, .elementor-element-ad2da3b),
body.page-id-4146 :is(.elementor-element-1284e5f, .elementor-element-5b56fa5) {
	background-color: var(--sh-card-blue) !important;
}

/* text colours to match */
body.page-id-4144 :is(.elementor-element-f4da92c, .elementor-element-eae8ce5),
body.page-id-4146 :is(.elementor-element-54bcaf8, .elementor-element-f4d4f43,
                      .elementor-element-61ad261, .elementor-element-f9b638b,
                      .elementor-element-a76b18f, .elementor-element-1284e5f,
                      .elementor-element-5b56fa5),
body.page-id-4145 :is(.elementor-element-6a9ad87, .elementor-element-0491f36,
                      .elementor-element-cd50d03, .elementor-element-ad2da3b) {
	color: var(--sh-on-dark) !important;
}
body.page-id-4144 :is(.elementor-element-f4da92c, .elementor-element-eae8ce5) :is(h3, h4, p, span, strong),
body.page-id-4146 :is(.elementor-element-54bcaf8, .elementor-element-f4d4f43,
                      .elementor-element-61ad261, .elementor-element-f9b638b,
                      .elementor-element-a76b18f, .elementor-element-1284e5f,
                      .elementor-element-5b56fa5) :is(h3, h4, p, span, strong),
body.page-id-4145 :is(.elementor-element-6a9ad87, .elementor-element-0491f36,
                      .elementor-element-cd50d03, .elementor-element-ad2da3b) :is(h3, h4, p, span, strong) {
	color: var(--sh-on-dark) !important;
}
body.page-id-4144 :is(.elementor-element-f9fbe27, .elementor-element-e8150c2) :is(h3, h4, p, span, strong),
body.page-id-4146 :is(.elementor-element-d64bea8, .elementor-element-630d4e0,
                      .elementor-element-a6c5bf8, .elementor-element-9315a90,
                      .elementor-element-05a436b, .elementor-element-e159c96) :is(h3, h4, p, span, strong),
body.page-id-4145 :is(.elementor-element-2e30a5c, .elementor-element-6783658,
                      .elementor-element-2c4def4, .elementor-element-371f8a1) :is(h3, h4, p, span, strong) {
	color: var(--sh-on-light) !important;
}

/* Growth Rizz and Etched breakdowns, per box (client feedback 2026-10-11):
   one colour band per row made each pair of boxes read as one item, and
   they are eight separate things. The bands are cleared and every box carries its own
   colour - green, yellow / pink, red / blue, green / yellow, pink - so no two
   neighbours match, with the frame drawn just inside its edge. */
body.page-id-4144 :is(.elementor-element-f4da92c, .elementor-element-f9fbe27,
                      .elementor-element-e8150c2, .elementor-element-eae8ce5),
body.page-id-4146 :is(.elementor-element-54bcaf8, .elementor-element-d64bea8,
                      .elementor-element-630d4e0, .elementor-element-f4d4f43) {
	background-color: transparent !important;
	padding-block: 0 !important;
}
body.page-id-4144 :is(.elementor-element-d798126, .elementor-element-d800fd0,
                      .elementor-element-7f32214, .elementor-element-2c63d77,
                      .elementor-element-c485a34, .elementor-element-200d737,
                      .elementor-element-97bf21d, .elementor-element-3e08157),
body.page-id-4146 :is(.elementor-element-2c522d9, .elementor-element-aba3ae8,
                      .elementor-element-ff07200, .elementor-element-c77db8d,
                      .elementor-element-b6f5910, .elementor-element-1b3b0be,
                      .elementor-element-e8d935f, .elementor-element-c095191) {
	--sh-box: var(--sh-card-green);
	--sh-box-ink: var(--sh-on-dark);
	background-color: var(--sh-box) !important;
	border-color: transparent !important;
	outline: 1px solid var(--sh-box-ink);
	outline-offset: -10px;
	padding: 26px 28px !important;
}
body.page-id-4144 :is(.elementor-element-d800fd0, .elementor-element-97bf21d),
body.page-id-4146 :is(.elementor-element-aba3ae8, .elementor-element-e8d935f) {
	--sh-box: var(--sh-card-yellow);
	--sh-box-ink: var(--sh-on-light);
}
body.page-id-4144 :is(.elementor-element-7f32214, .elementor-element-3e08157),
body.page-id-4146 :is(.elementor-element-ff07200, .elementor-element-c095191) {
	--sh-box: var(--sh-card-pink);
	--sh-box-ink: var(--sh-on-light);
}
body.page-id-4144 .elementor-element-2c63d77,
body.page-id-4146 .elementor-element-c77db8d { --sh-box: var(--sh-card-red); }
body.page-id-4144 .elementor-element-c485a34,
body.page-id-4146 .elementor-element-b6f5910 { --sh-box: var(--sh-card-blue); }
body.page-id-4144 :is(.elementor-element-d798126, .elementor-element-d800fd0,
                      .elementor-element-7f32214, .elementor-element-2c63d77,
                      .elementor-element-c485a34, .elementor-element-200d737,
                      .elementor-element-97bf21d, .elementor-element-3e08157) :is(h3, h4, p, span, strong),
body.page-id-4146 :is(.elementor-element-2c522d9, .elementor-element-aba3ae8,
                      .elementor-element-ff07200, .elementor-element-c77db8d,
                      .elementor-element-b6f5910, .elementor-element-1b3b0be,
                      .elementor-element-e8d935f, .elementor-element-c095191) :is(h3, h4, p, span, strong) {
	color: var(--sh-box-ink) !important;
}

/* Etched "How it works" (client feedback 2026-10-11): both columns ran
   green / yellow / pink / blue, so matching colours sat side by side and
   read as pairs, and the pink step vanished into the pink band. Now, with
   the steps level in rows (desktop-pages/site-fixes.css), no box matches
   the one beside, above or below it, and pink is left out:
     1 green  | 6 red
     2 yellow | 7 blue
     3 red    | 8 green
     4 blue   | 9 yellow
     5 green  |                                                          */
body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-f9b638b, .elementor-element-5b56fa5) {
	--sh-step: var(--sh-card-green);  --sh-step-ink: var(--sh-on-dark);
}
body.page-id-4146 :is(.elementor-element-a6c5bf8, .elementor-element-a76b18f) {
	--sh-step: var(--sh-card-yellow); --sh-step-ink: var(--sh-on-light);
}
body.page-id-4146 :is(.elementor-element-05a436b, .elementor-element-9315a90) {
	--sh-step: var(--sh-card-red);    --sh-step-ink: var(--sh-on-dark);
}
body.page-id-4146 :is(.elementor-element-1284e5f, .elementor-element-e159c96) {
	--sh-step: var(--sh-card-blue);   --sh-step-ink: var(--sh-on-dark);
}
body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-a6c5bf8,
                      .elementor-element-05a436b, .elementor-element-1284e5f,
                      .elementor-element-f9b638b, .elementor-element-9315a90,
                      .elementor-element-e159c96, .elementor-element-5b56fa5,
                      .elementor-element-a76b18f) {
	background-color: var(--sh-step) !important;
	color: var(--sh-step-ink) !important;
}
body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-a6c5bf8,
                      .elementor-element-05a436b, .elementor-element-1284e5f,
                      .elementor-element-f9b638b, .elementor-element-9315a90,
                      .elementor-element-e159c96, .elementor-element-5b56fa5,
                      .elementor-element-a76b18f) :is(h3, h4, p, span, strong) {
	color: var(--sh-step-ink) !important;
}

/* Reviews you can scroll yourself (client QA #25) — see mobile-nav.js. */
.sh-marquee-viewport.sh-testi-scroller {
	/* The review row was only ever on the Bubbly page, where a page-specific
	   rule gave the viewport its height. Now that the module is reused on the
	   services and sales pages, it sizes to the cards instead. */
	height: auto !important;
	min-height: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	scrollbar-width: none;                 /* the arrows are the affordance */
	-ms-overflow-style: none;
	position: relative;
	cursor: grab;
	overscroll-behavior-x: contain;
}
.sh-marquee-viewport.sh-testi-scroller::-webkit-scrollbar { display: none; }
.sh-marquee-viewport.sh-testi-dragging { cursor: grabbing; }
.sh-testi-frame { position: relative; }
.sh-testi-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(70, 34, 34, 0.25);
	background: rgba(246, 241, 240, 0.92);
	color: #462222;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s ease;
}
.sh-testi-arrow:hover { background: #F6F1F0; }
.sh-testi-prev { left: 16px; }
.sh-testi-next { right: 16px; }
@media (max-width: 767px) {
	.sh-testi-arrow { width: 38px; height: 38px; font-size: 16px; }
}

/* ── "With Bubbly… you'll" gentle motion (client QA #23) ──────────────────
   "Can this section also have some motion but keep content visible the
   entire time?"

   So: no fade-in, nothing hidden waiting to be scrolled to. The four cards
   drift up and down a few pixels on a long, staggered cycle - enough to feel
   alive, never enough to move text away from a reader. Anyone who has asked
   their system to reduce motion gets the static version. */
@media (prefers-reduced-motion: no-preference) {
	body.page-id-35 :is(.elementor-element-78f7593, .elementor-element-0a0fccd,
	                    .elementor-element-47f5529, .elementor-element-4899a2f) {
		animation: sh-drift 7s ease-in-out infinite;
		will-change: transform;
	}
	body.page-id-35 .elementor-element-0a0fccd { animation-delay: -1.75s; }
	body.page-id-35 .elementor-element-47f5529 { animation-delay: -3.5s; }
	body.page-id-35 .elementor-element-4899a2f { animation-delay: -5.25s; }

	@keyframes sh-drift {
		0%, 100% { transform: translateY(-5px); }
		50%      { transform: translateY(5px); }
	}
}

/* #29 Spree "Who is this for?" — the same alternating treatment as the other
   sales pages (her "This sounds like you" section on Spree). */
body.page-id-4145 :is(.elementor-element-526234c, .elementor-element-afad424,
                      .elementor-element-07c328e) {
	padding: 26px 30px !important;
	box-sizing: border-box;
}
body.page-id-4145 .elementor-element-526234c { background-color: var(--sh-card-green) !important; }
body.page-id-4145 .elementor-element-afad424 { background-color: var(--sh-card-yellow) !important; }
body.page-id-4145 .elementor-element-07c328e { background-color: var(--sh-card-pink) !important; }
body.page-id-4145 .elementor-element-526234c :is(h3, h4, p, span, strong) { color: var(--sh-on-dark) !important; }
body.page-id-4145 :is(.elementor-element-afad424, .elementor-element-07c328e) :is(h3, h4, p, span, strong) {
	color: var(--sh-on-light) !important;
}

/* ── Newsletter pop-up (client QA #1) ──────────────────────────────────────
   Appears once a visitor is reading (see mobile-nav.js for the timing) and
   stays away for a fortnight afterwards. Sits above everything, including the
   pinned nav and the cookie banner's backdrop, and is counter-scaled so it
   reads at its intended size whatever zoom the page is under. */
.sh-popup[hidden] { display: none; }
.sh-popup {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: grid;
	place-items: center;
	padding: 24px;
	zoom: calc(1 / var(--sh-zoom, 1));
}
.sh-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(46, 22, 22, 0.55);
}
/* Figma newsletter pop-up (2026-10-10): the 703x766 gold card - #DCC38B
   under the argyle tile - with a thin close cross top-left, the deer, the
   title in Cepelin capitals, the copy, and the Flodesk form as a 360px
   column: two cream fields 13px apart and a dark button under them. */
.sh-popup-card {
	position: relative;
	box-sizing: border-box;
	width: min(703px, 100%);
	min-height: min(766px, calc(100vh - 48px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #DCC38B url('../img/founder-argyle-tile.png') repeat center top / 147px 198px;
	padding: 56px 60px 64px;
	box-shadow: 0 18px 60px rgba(46, 22, 22, 0.35);
	text-align: center;
}
.sh-popup-close,
.sh-popup-close:hover,
.sh-popup-close:focus,
.sh-popup-close:active {
	position: absolute;
	top: 28px;
	left: 30px;
	right: auto;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #462222;
	cursor: pointer;
}
.sh-popup-close::before,
.sh-popup-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transform: rotate(45deg);
}
.sh-popup-close::after { transform: rotate(-45deg); }
.sh-popup-close:focus { outline: none; }
.sh-popup-close:focus-visible { outline: 1px solid #462222; outline-offset: 2px; }
.sh-popup-deer {
	display: block;
	width: 57px;
	height: auto;
	margin: 0 auto 26px;
}
.sh-popup-card .sh-popup-title {
	font-family: 'Cepelin', serif;
	font-weight: 400;
	font-size: 70px;
	line-height: 0.84;
	letter-spacing: 0;
	text-transform: uppercase;
	max-width: 470px;
	margin: 0 auto 22px;
	color: #462222;
}
.sh-popup-card .sh-popup-copy {
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 20px;
	line-height: 1.05;
	letter-spacing: -0.4px;
	max-width: 420px;
	margin: 0 auto 32px;
	color: #462222;
}
.sh-popup-card .sh-flodesk-form {
	width: 360px;
	max-width: 100%;
	margin: 0 auto;
}
.sh-popup-card .sh-flodesk-form input.fd-form-control {
	background: #EAE4D8 !important;
	border-color: #98837A !important;
}
.sh-popup-card .sh-flodesk-form [data-ff-el="root"] [data-ff-el="footer"] {
	margin-top: 13px !important;
	text-align: center !important;
}
.sh-popup-card .sh-flodesk-form button.fd-btn {
	width: 100% !important;
	background: #3B1919 !important;
	box-shadow: none !important;
	border-radius: 4px !important;
	color: #EAE4D8 !important;
}
.sh-popup-card .sh-flodesk-form button.fd-btn > span::after {
	font-size: 24px;
}
.sh-popup-card .sh-flodesk-form [data-ff-el="success"],
.sh-popup-card .sh-flodesk-form [data-ff-el="error"] {
	text-align: center !important;
	color: #462222 !important;
}
/* After a signup Flodesk adds fd-has-success to the form and shows its
   thank-you; the fields and button go so only that message is left. */
.sh-popup-card .sh-flodesk-form form.fd-has-success [data-ff-el="content"] {
	display: none !important;
}
.sh-popup-card .sh-flodesk-form [data-ff-el="success"],
.sh-popup-card .sh-flodesk-form [data-ff-el="success"] * {
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 24px !important;
	color: #462222 !important;
}
/* Short laptop screens: tighten the vertical rhythm before the card has to
   scroll. */
@media (max-height: 820px) {
	.sh-popup-card { padding-top: 48px; padding-bottom: 48px; }
	.sh-popup-deer { width: 48px; margin-bottom: 18px; }
	.sh-popup-card .sh-popup-title { font-size: 60px; margin-bottom: 16px; }
	.sh-popup-card .sh-popup-copy { margin-bottom: 24px; }
}
@media (max-width: 767px) {
	.sh-popup { padding: 16px; }
	.sh-popup-card { min-height: 0; padding: 64px 24px 40px; }
	.sh-popup-close, .sh-popup-close:hover, .sh-popup-close:focus, .sh-popup-close:active { top: 18px; left: 18px; }
	.sh-popup-deer { width: 46px; margin-bottom: 18px; }
	.sh-popup-card .sh-popup-title { font-size: 46px; margin-bottom: 16px; }
	.sh-popup-card .sh-popup-copy { font-size: 18px; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
	.sh-popup-card { animation: sh-popup-in 0.22s ease-out; }
	@keyframes sh-popup-in {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}
}

/* The Shop page reuses the homepage's services module, which carries the
   red envelope as a decoration positioned for the homepage's layout. On Shop
   it lands on top of the client logo strip, so it is hidden there. */
body.page-id-4187 img[src*="envelope_clean2"] {
	display: none !important;
}

/* ── Waitlist forms (client QA #2, #28) ───────────────────────────────────
   The "Now Enrolling" forms on Growth Rizz and Spree are Elementor forms
   with no submit action, on a host with no mail transport: every submission
   went nowhere. A button to the Flodesk waitlist page sits beside them now
   (see 14-waitlist-to-flodesk.php) and the dead form is hidden rather than
   deleted, so it can come back if she wants it. */
body:is(.page-id-4144, .page-id-4145) .elementor-element-f81209f,
body:is(.page-id-4144, .page-id-4145) .elementor-element-e1aa6e7 {
	display: none !important;
}
body:is(.page-id-4144, .page-id-4145) .sh-waitlist-flodesk {
	align-self: center;
	margin-top: 8px;
}