/* Desktop vs Figma fixes: Contact (page 210, frame unknown) at the 1512px
   artboard. mobile-nav.js zooms proportionally from 1025px, so all px values
   are artboard px. Scoped to body.page-id-210 and min-width 768px; mobile
   rules live in mobile-pages/contact.css and are untouched. */

@media (min-width: 768px) {

	/* ── Hero (olive, 0-835) ─────────────────────────────────────────────
	   Olive band ends at y=835 (71px nav bar + 764px content). Elementor
	   does not compile an explicit height here, so the band expanded to fit
	   its content on some viewports. Same treatment as About (0ea961f). */
	body.page-id-210 .elementor-element-4260150 {
		height: 835px !important;
		min-height: 0 !important;
	}

	/* ── Footer ──────────────────────────────────────────────────────────
	   Same Figma footer geometry as About and Resources: NAVIGATION at x=1143
	   (links indented 4px), CONNECT at x=1358 (215+107=322px nav group at
	   the right); wordmark 1414x186 at x=50, 490px below the footer top;
	   legal bar 89px tall with labels 18px in at x=46. */
	body.page-id-210 .elementor-element-c39cd8b {
		padding-right: 65px !important;
		padding-left: 46px !important;
	}
	body.page-id-210 .elementor-element-9ced73d {
		flex: 0 0 322px !important;
		width: 322px !important;
		gap: 0 !important;
	}
	body.page-id-210 .elementor-element-e19be5c {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-210 .elementor-element-e19be5c > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-210 .elementor-element-af6ca02 {
		flex: 0 0 107px !important;
		width: 107px !important;
	}
	body.page-id-210 .elementor-element-dc858c7 {
		padding: 256px 48px 25px 50px !important;
	}
	body.page-id-210 .elementor-element-dc858c7 > img,
	body.page-id-210 .elementor-element-afaeab4 {
		width: 1414px !important;
		max-width: 100% !important;
		height: 186px !important;
		margin: 0 !important;
		object-fit: fill !important;
	}
	body.page-id-210 .elementor-element-1fdb30d {
		height: 89px !important;
		align-items: flex-start !important;
		padding: 18px 51px 53px 46px !important;
		box-sizing: border-box !important;
	}
	body.page-id-210 .elementor-element-977094e {
		gap: 12px !important;
	}
}

/* Tablet (laid out at 1024): the 1414px wordmark is wider than the page, and
   with max-width:none it ran off both edges ("OCIALHAR"). Fit it to the
   footer width and let the height follow, as tablet.css does for Resources. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-210 .elementor-element-dc858c7 > img,
	body.page-id-210 .elementor-element-afaeab4 {
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Tablet: "For collaborations" band. The copy and Learn More button are
   absolutely placed at left:993px, i.e. off-screen at the 1024 layout, so
   only the heading showed. Same in-flow stack tablet.css gives About (33),
   which is scoped to that page only. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-210 .sh-collab-frame {
		height: auto !important;
		min-height: 625px;
		flex-direction: column !important;
		justify-content: flex-end !important;
		padding: 200px 55px 55px !important;
		box-sizing: border-box !important;
		gap: 24px;
	}
	body.page-id-210 .sh-collab-photo {
		height: 100% !important;
	}
	body.page-id-210 :is(.sh-collab-heading, .sh-collab-text) {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		inset: auto !important;
		width: auto !important;
		max-width: 100% !important;
		z-index: 1;
	}
}