/* "Meet the founder" on Services (34) and Success Stories (37).

   These pages carry a copy of the homepage block. As on the homepage, the
   portrait is its own image inside .sh-founder-frame so it can be swapped in
   Elementor without touching the design; the gilt frame, tag and diamond
   ground are drawn over it from founder-frame-overlay.png (the original
   758x852 composite with the 381x501 opening at 188,168 cut out, and its top
   30px transparent so the tile shows there). The homepage's own rules live
   in desktop-pages/home.css, desktop-pages/tablet.css and custom.css; this
   file holds all three widths for the two copies. */

/* ── Desktop: the panel is the 852px composite, top-aligned ─────────────── */
@media (min-width: 1025px) {
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-section > .sh-founder-frame {
		position: relative !important;
		display: block !important;
		flex: 0 0 50% !important;
		width: 50% !important;
		height: 852px !important;
		padding: 0 !important;
		overflow: hidden !important;
		align-self: flex-start !important;
		background: #DCC38B url('../../img/founder-argyle-tile.png') repeat calc(50% - 305.5px) 300px !important;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-frame::after {
		content: '';
		position: absolute;
		inset: 0;
		background: url('../../img/founder-frame-overlay.webp') 50% 0 / 758px 852px no-repeat;
		pointer-events: none;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-frame > .sh-founder-photo {
		position: absolute !important;
		top: 163px !important;
		left: calc(50% - 196px) !important;
		width: 391px !important;
		max-width: none !important;
		height: 511px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		object-fit: cover !important;
		object-position: 50% 15% !important;
	}
}

/* ── Tablet: frame at 0.75 scale, centred in a panel as tall as the copy ── */
@media (min-width: 768px) and (max-width: 1024px) {
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-section > .sh-founder-frame {
		position: relative !important;
		display: block !important;
		flex: 0 0 50% !important;
		width: 50% !important;
		min-height: 700px !important;
		padding: 0 !important;
		overflow: hidden !important;
		align-self: stretch !important;
		background: #DCC38B url('../../img/founder-argyle-tile.png') repeat calc(50% - 229.1px) calc(50% - 20.25px) / 110.25px 148.5px !important;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-frame::after {
		content: '';
		position: absolute;
		inset: 0;
		background: url('../../img/founder-frame-overlay.webp') 50% 50% / 568.5px 639px no-repeat;
		pointer-events: none;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-frame > .sh-founder-photo {
		position: absolute !important;
		top: calc(50% - 197px) !important;
		left: calc(50% - 147px) !important;
		width: 294px !important;
		max-width: none !important;
		height: 384px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		object-fit: cover !important;
		object-position: 50% 15% !important;
	}
}

/* ── Phone: the homepage's band, the composite at 0.742 scale (562x632)
   centred in the 440px artboard and clipped to a straight 605px band ───── */
@media (max-width: 767px) {
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .sh-founder-section {
		overflow-x: clip !important;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .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;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .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;
	}
	:is(body.page-id-34, body.page-id-37, body.page-id-210) .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;
	}
}

/* ── About (33) and Contact (210): a frame that fits any box ──────────────
   These blocks give the founder image their own sizes (About: half the row,
   819px; Contact: a 420x520 card), where the old composite was simply
   cover-cropped. .sh-founder-frame-fluid reproduces that: the wrapper is a
   size container, the overlay covers it from the centre, and the portrait
   is placed in the overlay's opening with container units, so it stays put
   whatever the box. --sh-w is the width the 758x852 overlay is drawn at
   (cover: the larger of the box width and 758/852 of its height).
   founder-frame-full.png is the overlay with the diamond ground painted
   back into its top 30px, so no tile is needed behind it. */
.sh-founder-frame-fluid {
	position: relative !important;
	display: block !important;
	padding: 0 !important;
	overflow: hidden !important;
	container-type: size;
	background-color: #DCC38B !important;
}
.sh-founder-frame-fluid::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../../img/founder-frame-full.webp') 50% 50% / cover no-repeat;
	pointer-events: none;
	z-index: 1;
}
.sh-founder-frame-fluid > img {
	--sh-w: max(100cqw, 88.97cqh);
	position: absolute !important;
	left: calc(50cqw - var(--sh-w) * 0.2586) !important;
	top: calc(50cqh - var(--sh-w) * 0.347) !important;
	width: calc(var(--sh-w) * 0.5145) !important;
	height: calc(var(--sh-w) * 0.6742) !important;
	max-width: none !important;
	min-width: 0 !important;
	aspect-ratio: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	clip-path: none !important;
	object-fit: cover !important;
	object-position: 50% 15% !important;
	order: 0 !important;
}

/* About: half the row, 819px tall, from tablet up. The phone band is set in
   mobile-pages/about.css, where the rest of that block's phone layout is. */
@media (min-width: 768px) {
	body.page-id-33 .elementor-element-0a12729 > .sh-founder-frame-fluid {
		flex: 0 0 50% !important;
		width: 50% !important;
		height: 819px !important;
		align-self: flex-start !important;
	}
}

/* About on desktop: the panel is half the window, so past the 1512 design
   (wider screens, or a zoomed-out browser) "cover" kept enlarging the
   frame to the panel width while the height stayed 819px - at 2560 the
   portrait was 659px wide and the frame and tag were cropped off the top
   and bottom (client feedback 2026-10-10). From 1025 up the panel is never
   narrower than the design's 756px, so the frame is held at that size,
   centred, and the space beside it is the diamond tile, phased to the
   artwork's own ground (tile origin = overlay origin + 73.5,300 at the
   overlay's 756/758 scale) so the argyle runs on unbroken. At 1512 this is
   exactly what cover drew. */
@media (min-width: 1025px) {
	body.page-id-33 .elementor-element-0a12729 > .sh-founder-frame-fluid {
		background: #DCC38B url('../../img/founder-argyle-tile.png') repeat
			calc(50% - 304.7px) calc(50% - 26.95px) / 146.6px 197.5px !important;
	}
	body.page-id-33 .elementor-element-0a12729 > .sh-founder-frame-fluid::after {
		background-size: 756px 849.8px;
	}
	body.page-id-33 .elementor-element-0a12729 > .sh-founder-frame-fluid > img {
		--sh-w: 756px;
	}
}

/* Contact: the 420x520 card beside the copy on desktop; below that it
   stacks, full width up to the same 420px, centred. */
body.page-id-210 .elementor-element-6f9f4e5 > .sh-founder-frame-fluid {
	width: 100% !important;
	max-width: 420px !important;
	height: auto !important;
	aspect-ratio: 420 / 520 !important;
	margin-inline: auto !important;
	flex: 0 0 auto !important;
}
@media (min-width: 1025px) {
	body.page-id-210 .elementor-element-6f9f4e5 > .sh-founder-frame-fluid {
		flex: 0 0 420px !important;
		width: 420px !important;
		height: 520px !important;
		margin-inline: 0 !important;
	}
}