/* Desktop vs Figma fixes: About (post 33) against Figma frame 18:2907 at the
   1512px artboard. mobile-nav.js zooms the root proportionally from 1025 to
   1511px, so px values here are artboard px. Everything is scoped to
   body.page-id-33 and min-width 768px; mobile rules live in
   mobile-pages/about.css and are untouched. */

@media (min-width: 768px) {

	/* ── Buttons ─────────────────────────────────────────────────────────
	   Height (51px), 4px radius and inner top shadow are site-wide in
	   custom.css; only this frame's per-button widths are set here. */
	/* Figma widths: founder and collaborations "learn more" 141px, mission
	   "let's work together" 201px, coal "show me service details" 238px. */
	body.page-id-33 .e-6d0f776-7ca84d,
	body.page-id-33 .sh-collab-text a.e-button-base {
		min-width: 141px !important;
		width: 141px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.page-id-33 .e-8d77da0-9206a3 {
		min-width: 201px !important;
		width: 201px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.page-id-33 .e-b991186-b3afd7 {
		min-width: 238px !important;
		width: 238px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ── Section rhythm ──────────────────────────────────────────────────
	   Hero band ends at y=835 (the build 836, one px of the 71px nav bar);
	   Cinderella ends at 1650 (82px under its CTA, the build 84); the
	   overview band ends 59px under its lists; the services list's closing
	   rule sits on the imposter band's top edge, as in the frame. */
	body.page-id-33 .elementor-element-0ea961f {
		height: 835px !important;
		min-height: 0 !important;
	}
	body.page-id-33 .elementor-element-61c0355 {
		padding-bottom: 82px !important;
	}
	body.page-id-33 .elementor-element-88f54db {
		padding-bottom: 59px !important;
	}
	body.page-id-33 .elementor-element-b1ea6d2 {
		margin-bottom: -1px !important;
	}
	/* Logo strip label: Figma sets it 94px into the 197px band, 5px below
	   the band's vertical centre. */
	body.page-id-33 .e-7fefea3-4c5f8b {
		margin-top: 10px !important;
	}

	/* ── A quick overview of our proof (Figma 86:781, 1512x1117) ─────────
	   One 770px accordion column at x=374 replacing the four side-by-side
	   lists. Heading 70/58.8 on a 606px measure from y=109. Rows: 40/36
	   Cepelin titles 39px under the previous rule (38 + the 1px rule), each closed by a 1px
	   #3B1919 rule 20px under the title (rows 95px apart closed); a 33px
	   #3B1919 toggle, top-aligned with the title, 14px in from the rule's
	   end, crossed by 20x1px cream bars (minus open, plus closed). "Who my
	   clients beat" opens 31px under its rule in two columns 207px apart at
	   22/30.6. The 141x51 button sits 65px under the last rule; the band
	   ends 76px below it. Same rows as the phone accordion: sh-faq-row /
	   sh-faq-head in the post data, toggled by mobile-nav.js. Tablets
	   (768-1024) lay this out at 1024, where the 768px column still fits. */
	body.page-id-33 .elementor-element-88f54db {
		min-height: 0 !important;
		padding: 109px 0 76px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
	body.page-id-33 .elementor-element-88f54db > h2 {
		max-width: 606px !important;
		margin: 0 auto 64px !important;
		font-size: 70px !important;
		line-height: 58.8px !important;
		text-align: center !important;
	}
	body.page-id-33 .elementor-element-3831c00 {
		display: block !important;
		width: 770px !important;
		max-width: calc(100% - 56px) !important;
		margin: 0 auto !important;
		position: relative;
		left: 3px;
		padding: 0 !important;
	}
	body.page-id-33 .elementor-element-3831c00 > .sh-ov-row {
		display: block !important;
		flex: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.page-id-33 .elementor-element-3831c00 .sh-ov-head {
		position: relative;
		max-width: none !important;
		margin: 0 !important;
		padding: 38px 60px 20px 0 !important;
		height: auto !important;
		min-height: 0 !important;
		border-bottom: 1px solid #3B1919;
		font-size: 40px !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
		text-align: left !important;
		cursor: pointer;
		user-select: none;
	}
	body.page-id-33 .elementor-element-3831c00 .sh-ov-head::after {
		content: "";
		position: absolute;
		right: 14px;
		top: 38px;
		width: 33px;
		height: 33px;
		border-radius: 50%;
		background:
			linear-gradient(#EAE4D8, #EAE4D8) center / 20px 1px no-repeat,
			linear-gradient(#EAE4D8, #EAE4D8) center / 1px 20px no-repeat,
			#3B1919;
	}
	body.page-id-33 .elementor-element-3831c00 .sh-faq-open > .sh-ov-head::after {
		background:
			linear-gradient(#EAE4D8, #EAE4D8) center / 20px 1px no-repeat,
			#3B1919;
	}
	body.page-id-33 .elementor-element-3831c00 .sh-ov-head:focus-visible {
		outline: 2px solid #462222;
		outline-offset: 4px;
	}
	body.page-id-33 .elementor-element-3831c00 .sh-ov-body {
		margin: 0 !important;
		padding: 30px 0 17px !important;
		font-size: max(22px, calc(15px / var(--sh-zoom, 1))) !important;
		line-height: 30.6px !important;
		letter-spacing: -0.66px !important;
		text-align: left !important;
		columns: 2;
		column-gap: 40px;
	}
	body.page-id-33 .elementor-element-3831c00 .sh-faq-row:not(.sh-faq-open) > .sh-ov-body {
		display: none !important;
	}
	/* Figma puts the first rule 14px under its title (20px elsewhere).
	   List and card copy use max(22px, 15px / --sh-zoom): the page is scaled
	   to the window, and at 1025 the design's 22px would render at 14.9px. */
	body.page-id-33 .elementor-element-3831c00 .elementor-element-45d9c05 > .sh-ov-head {
		padding-bottom: 14px !important;
	}
	/* Figma's client list: two columns 207px apart, 7 and 7. */
	body.page-id-33 .elementor-element-3831c00 .e-796409a-842de6 {
		width: 414px !important;
		max-width: 100% !important;
		column-gap: 0;
	}
	/* Experience: Figma leaves ONE blank line between "(Employers, Clients,
	   Projects)" and the list; the copy carries three <br>s (two blank lines). */
	body.page-id-33 .e-7a21bfd-5346af > br:nth-of-type(3) {
		display: none;
	}
	body.page-id-33 .elementor-element-88f54db > .sh-proof-more {
		align-self: center !important;
		min-width: 141px !important;
		height: 51px !important;
		margin: 64px auto 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	/* ── The Services ────────────────────────────────────────────────────
	   Double rule at y=4312/4339 (intro 726px tall, the build 724px). */
	body.page-id-33 .elementor-element-b1ea6d2 {
		min-height: 0 !important;
	}
	body.page-id-33 .elementor-element-06d4d6d {
		padding-bottom: 2px !important;
	}
	body.page-id-33 .e-4204501-f41012 {
		margin-bottom: 97px !important;
	}
	/* Service rows. Figma pins thumbnail at x=51, heading at x=191 (27px
	   after the thumbnail) and copy at x=862, each at its own offset from
	   the row's top rule; the build centred all three vertically and spread
	   them with space-between, so headings sat at x=254 and rows were 229px
	   tall where Figma's are 215/239/228/235px. */
	body.page-id-33 .elementor-element-9aa6b94 > .e-flexbox-base:not(.elementor-element-afdba5a) {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding-right: 49px !important;
		padding-left: 51px !important;
		padding-bottom: 40px !important;
	}
	body.page-id-33 .elementor-element-9aa6b94 > .e-flexbox-base > .e-heading-base {
		flex: 0 1 auto !important;
		width: auto !important;
		margin-left: 27px !important;
	}
	body.page-id-33 .elementor-element-9aa6b94 > .e-flexbox-base > .e-paragraph-base {
		margin-left: auto !important;
	}
	body.page-id-33 .elementor-element-769aae4 { padding-top: 26px !important; }
	body.page-id-33 .e-d83274c-2a76b8 { margin-top: 30px !important; }
	body.page-id-33 .e-60fd8f3-9be0cd { margin-top: 34px !important; }
	body.page-id-33 .elementor-element-d309475 { padding-top: 50px !important; }
	body.page-id-33 .e-aebb6c6-fa99a0 { margin-top: 30px !important; }
	body.page-id-33 .e-1a5f05b-43a50f { margin-top: 27px !important; }
	body.page-id-33 .elementor-element-3d94271 { padding-top: 39px !important; }
	body.page-id-33 .e-f286d45-578999 { margin-top: 7px !important; }
	body.page-id-33 .e-c89827f-102e1f { margin-top: 27px !important; }
	body.page-id-33 .elementor-element-94bc971 { padding-top: 46px !important; }
	body.page-id-33 .e-cca56f4-f5a1e5 {
		margin-top: 26px !important;
		max-width: 395px !important;   /* "TIMELESS / MARKETING TIPS" */
	}
	body.page-id-33 .e-c45d299-57ea1a { margin-top: 50px !important; }

	/* Intro h3: no forced break in the frame; Figma's measure breaks
	   "DRAWN-OUT CONTRACTS. / JUST WHAT YOU NEED TO PLAN". With this font's
	   metrics that happens between 889px and 908px; 895px reproduces it. */
	body.page-id-33 .e-e84ccf9-cceef6 {
		max-width: 895px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Collaborations sand band: the frame's argyle is barely there (5th-95th
	   percentile luminance 189-196); the overlay at 22% opacity drew it at
	   160-196, a hard pattern around the photo. */
	body.page-id-33 .e-b367ac5-abe8ae {
		opacity: 0.05 !important;
	}

	/* ── Imposter band ───────────────────────────────────────────────────
	   The column's 22px flex gap is ALSO applied under the heading, on top of
	   its 44px margin: copy started 301px below the heading, Figma 279px. */
	body.page-id-33 .e-c128d5f-8917eb {
		margin-bottom: 22px !important;
	}

	/* ── Stats: flip cards (Figma 85:687 resting, 85:691 hover) ──────────
	   Each stat is a 470x318 card with a 1px #462222 rule. At rest the stat
	   fills it: Cepelin 70/58.8 caps, centred on a 416px measure. On hover
	   (and keyboard focus, and a tap where there is no hover - mobile-nav.js
	   adds .sh-stat-revealed) the pink argyle face fades in over it with the
	   supporting copy centred on a 313px measure at 22/22 (Figma's design
	   note: "reveals on hover"). The face is the copy paragraph itself, so
	   the content stays the Elementor text. Three cards 25px apart.
	   Bubbly Power Hour (35) has the same three stats and, since client
	   feedback 2026-10-11, the same cards: its .sh-stat-grid is in every
	   selector here and in mobile-pages/about.css. */
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 25px !important;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card {
		position: relative !important;
		flex: 0 0 470px !important;
		width: 470px !important;
		max-width: 100% !important;
		height: 318px !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 27px !important;
		margin: 0 !important;
		border: 1px solid #462222 !important;
		overflow: hidden !important;
		cursor: default;
		outline: none;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card > h3 {
		width: 100% !important;
		max-width: 416px !important;
		height: auto !important;
		margin: 0 auto !important;
		font-size: 70px !important;
		line-height: 58.8px !important;
		letter-spacing: 0 !important;
		text-align: center !important;
	}
	/* "760% increase in cross-promotional revenue." is longer than the
	   frame's example and runs to five lines at 70px, 12px off the card's
	   edges; at 60/50.4 it keeps the same breathing room as the others. */
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > :is(.elementor-element-fd14394, .elementor-element-3713092) > h3 {
		font-size: 60px !important;
		line-height: 50.4px !important;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card > p {
		position: absolute !important;
		inset: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		width: auto !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 78px !important;
		background: #EAC8C6 url('../../img/stat-card-hover.webp') center / cover no-repeat;
		font-size: max(22px, calc(15px / var(--sh-zoom, 1))) !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
		text-align: center !important;
		opacity: 0 !important;
		transition: opacity 0.25s ease !important;
		pointer-events: none;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card:focus-visible {
		outline: 2px solid #462222;
		outline-offset: 4px;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card:is(:focus-visible, .sh-stat-revealed) > p {
		opacity: 1 !important;
	}
}
/* Desktop: the three cards and their gaps are 1460px, wider than the
   section's padded column, so the row takes that width and sits centred. */
@media (min-width: 1025px) {
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) {
		flex-wrap: nowrap !important;
		flex-shrink: 0 !important;
		width: 1460px !important;
		max-width: none !important;
		align-self: center !important;
		margin-inline: calc(50% - 730px) !important;
	}
}
/* Tablet (laid out at 1024): two cards a row, the third centred under them;
   the stat steps down to 56/47 to keep its four lines inside the card. */
@media (min-width: 768px) and (max-width: 1024px) {
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card {
		flex: 0 1 calc(50% - 12.5px) !important;
		width: auto !important;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card > h3 {
		font-size: 56px !important;
		line-height: 47px !important;
	}
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card > p {
		padding: 0 48px !important;
	}
}
@media (min-width: 768px) and (hover: hover) {
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card:hover > p {
		opacity: 1 !important;
	}
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	:is(body.page-id-33 .elementor-element-e6968ce, body.page-id-35 .sh-stat-grid) > .sh-stat-card > p {
		transition: none !important;
	}
}
@media (min-width: 768px) {

	/* ── Mission ─────────────────────────────────────────────────────────
	   Copy column is 514px at x=604 (the build 499px at x=588); with the
	   201px CTA that puts the button at Figma's x=1265. The pink tag hangs
	   at x=1040, 719px below the band top, at 274x283. It is placed as a
	   share of the band (1040 / 1512): a fixed 1040px held it in place while
	   wider screens grew, so on a big monitor it slid toward the middle and
	   sat on the values ticker (client feedback 2026-10-10). At 1512 the two
	   are the same. */
	body.page-id-33 .elementor-element-da3a210 {
		flex: 0 0 514px !important;
		width: 514px !important;
		margin-left: 16px !important;
	}
	/* The client's fawn photo (2026-10-10, attachment about-mission-fawn,
	   2560x1300 with WordPress's smaller sizes in srcset) replaced a 500x300
	   image that went soft once stretched over the band. Its pale spots sit
	   under cream text, so the band's 20% black wash is now a warm coal
	   gradient: densest behind the copy on the left, easing off to the right
	   where only the button and the fur are. */
	body.page-id-33 .elementor-element-9631dec {
		background: linear-gradient(90deg,
			rgba(43, 20, 16, 0.74) 0%,
			rgba(43, 20, 16, 0.66) 48%,
			rgba(43, 20, 16, 0.42) 100%) !important;
	}
	body.page-id-33 .elementor-element-4e2d7a9 > .sh-hover-nudge {
		inset-block-start: 719px !important;
		inset-inline-start: calc(100% * 1040 / 1512) !important;
		width: 274px !important;
		height: 283px !important;
	}
	/* Wider than the 1512 design the fawn photo still fills the band, but
	   the heading, copy and button kept their artboard x and hugged the left
	   edge (client feedback 2026-10-11). The row is held to the 1512 design
	   and centred. The tag stays on the right of the band, as on a laptop:
	   at 1512 its right edge is 198px in from the edge (1512 - 1040 - 274),
	   and it keeps that gap at any width rather than following the centred
	   row toward the middle. */
	@media (min-width: 1513px) {
		body.page-id-33 .elementor-element-333ea16 {
			box-sizing: border-box !important;
			width: 100% !important;
			max-width: 1512px !important;
			margin-inline: auto !important;
		}
		body.page-id-33 .elementor-element-4e2d7a9 > .sh-hover-nudge {
			inset-inline-start: auto !important;
			inset-inline-end: 198px !important;
		}
	}

	/* Brand values: Figma's ink gap between values is ~96px (authenticity
	   514 -> trust 608, trust 710 -> humor 807). The copy separates values
	   with three spaces, but white-space:nowrap collapses them to one, so the
	   site-wide 22px word-spacing gave 29px gaps. Preserving the three spaces
	   (pre) with 25px word-spacing gives 3 x (6.6 + 25) = 95px. The single
	   space inside "brand values:" widens to ~32px as a side effect. */
	body.page-id-33 .elementor-element-13ff2da > .e-paragraph-base {
		white-space: pre !important;
		word-spacing: 25px !important;
	}
	/* ── Brand values ticker: 40px text 21px under the band top (83px). ── */
	body.page-id-33 .elementor-element-39e9873 {
		padding: 21px 0 26px !important;
	}

	/* ── Newsletter ──────────────────────────────────────────────────────
	   263px pink band ruled top and bottom; heading at x=47 58px down; two
	   339x55 fields at x=774 and x=1126 (13px apart) 13px below the heading
	   top; a 281x51 button at x=774, 17px under the fields. The build
	   centred both columns vertically in a 283px band, used 299px fields and
	   stretched the button across the whole 631px form. */
	body.page-id-33 .elementor-element-5281e34 {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	body.page-id-33 .elementor-element-3d493e6 {
		align-items: flex-start !important;
		padding: 57px 47px 68px 47px !important;
	}
	body.page-id-33 .elementor-element-cb07b67 {
		flex: 0 0 691px !important;
		width: 691px !important;
		margin-top: 13px !important;
	}
	body.page-id-33 .sh-newsletter-form .elementor-form-fields-wrapper {
		margin: 0 !important;
		column-gap: 13px !important;
		row-gap: 0 !important;
	}
	body.page-id-33 .sh-newsletter-form .elementor-field-group {
		padding: 0 !important;
		margin: 0 !important;
	}
	body.page-id-33 .sh-newsletter-form .elementor-field-group:not(.e-form__buttons) {
		flex: 0 0 339px !important;
		width: 339px !important;
		max-width: 339px !important;
	}
	body.page-id-33 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 17px !important;
		justify-content: flex-start !important;
	}
	body.page-id-33 .sh-newsletter-form input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	body.page-id-33 .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-33 .sh-newsletter-form .e-form__buttons .elementor-button {
		flex: 0 0 auto !important;
		min-width: 281px !important;
		width: 281px !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}

	/* ── Footer ──────────────────────────────────────────────────────────
	   NAVIGATION at x=1143 (links indented to 1147) and CONNECT at x=1358;
	   the build right-aligned two 90px columns 108px apart (x=1177/1375).
	   Legal bar starts 701px below the footer top (the build 694px), is 89px
	   tall with its labels 18px down, and TERMS sits 12px after PRIVACY. */
	body.page-id-33 .elementor-element-35cc2eb {
		flex: 0 0 322px !important;
		width: 322px !important;
		gap: 0 !important;
	}
	body.page-id-33 .elementor-element-c3ab206 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-33 .elementor-element-c3ab206 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-33 .elementor-element-c1a1df0 {
		flex: 0 0 107px !important;
		width: 107px !important;
	}
	body.page-id-33 .elementor-element-aac3aff {
		padding-bottom: 30px !important;
	}
	body.page-id-33 .elementor-element-70ba940 {
		height: 89px !important;
		align-items: flex-start !important;
		padding: 18px 50px 0 47px !important;
		box-sizing: border-box;
	}
	body.page-id-33 .elementor-element-e15a7a4 {
		column-gap: 12px !important;
	}
}