/**
 * Rasa June mobile layout system.
 *
 * Intentionally limited to phones. Elementor content and all per-widget
 * controls remain editable; this layer only supplies one dependable mobile
 * grid and a shared vertical rhythm.
 */

@media (max-width: 767px) {
	/* Preserve the original homepage composition, but do not pull statistics
	 * 70px over the photograph on phones. No height, typography or Elementor
	 * content controls are overridden here. */
	body.home.rj-unified-mobile-layout #content .elementor-element-41cb771 {
		margin-bottom: 0 !important;
		/* The Astra mobile header is positioned above the document flow. Clear
		 * it before the eyebrow and H1 so neither line can sit underneath it. */
		padding-top: 100px !important;
	}

	/* Mobile vertical rhythm ------------------------------------------------
	 * Elementor can apply vertical padding to both a boxed section and its
	 * inner wrapper. That doubled the apparent space between neighbouring
	 * blocks even when the editor displayed matching values. Keep one 64px
	 * transition per section and a consistent 48px first-content offset. */
	body.rj-unified-mobile-layout {
		--rj-mobile-page-start: 48px;
		--rj-mobile-section-half-gap: calc(var(--rj-mobile-section-gap) / 2);
	}

	body.rj-unified-mobile-layout #content .elementor > .elementor-element.e-con > .e-con-inner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* About: one gap per transition, natural content height and no legacy
	 * overlap between Results and Design med mening. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content :is(
		.elementor-element-b8ff3fc,
		.elementor-element-f1874d4,
		.elementor-element-77af4cb,
		.elementor-element-556b1f3,
		.elementor-element-5771d13,
		.elementor-element-41410a9,
		.elementor-element-2e24d71
	) {
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: var(--rj-mobile-section-half-gap) !important;
		padding-bottom: var(--rj-mobile-section-half-gap) !important;
	}

	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-b8ff3fc {
		padding-top: var(--rj-mobile-page-start) !important;
	}

	/* Homepage: remove obsolete empty separator containers and stop adjacent
	 * top/bottom padding from adding up to 128px. */
	body.home.rj-unified-mobile-layout #content .elementor > :is(
		.elementor-element-58767b1,
		.elementor-element-6ea49e9,
		.elementor-element-112d3d4
	) {
		display: none !important;
	}

	body.home.rj-unified-mobile-layout #content :is(
		.elementor-element-6ae8c95,
		.elementor-element-ca1c47f,
		.elementor-element-1187ee5,
		.elementor-element-d6afe63,
		.elementor-element-469da29
	) {
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: var(--rj-mobile-section-half-gap) !important;
		padding-bottom: var(--rj-mobile-section-half-gap) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1d7eae0 {
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: var(--rj-mobile-section-gap) !important;
		padding-bottom: var(--rj-mobile-section-gap) !important;
	}

	/* The customer-title wrapper was saved at zero height, forcing the title
	 * outside normal document flow. Restore it so the following logo grid can
	 * follow with a real, measurable gap. */
	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 .elementor-element-711efc9 {
		display: flex !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Samarbeid: the plugin blocks keep their editable content, while their
	 * Elementor parents lose fixed phone heights. Media remains deliberately
	 * separated by a single 24px gap. */
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(
		.elementor-element-de60756,
		.elementor-element-1ba4e76,
		.elementor-element-b27a4f5,
		.elementor-element-83efabb
	) {
		height: auto !important;
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: var(--rj-mobile-section-half-gap) !important;
		padding-bottom: var(--rj-mobile-section-half-gap) !important;
	}

	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content .elementor-element-de60756 {
		padding-top: var(--rj-mobile-page-start) !important;
	}

	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(
		.elementor-element-8c77944,
		.elementor-element-4f981c2
	) {
		margin-top: var(--rj-mobile-image-gap) !important;
		margin-bottom: var(--rj-mobile-image-gap) !important;
	}

	/* Shared contact sections should begin after one normal transition, not a
	 * large empty viewport. */
	body.rj-unified-mobile-layout #content :is(
		.elementor-element-469da29,
		.elementor-element-2e24d71,
		.elementor-element-83efabb
	) {
		justify-content: flex-start !important;
	}

	/* Samarbeid page -------------------------------------------------------
	 * Elementor stored three competing mobile edges here: 10px for media,
	 * 20px for process rows and 30px for the introduction. Bring every direct
	 * section and nested content container onto the shared editable gutter. */
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content .elementor > .elementor-element.e-con {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: var(--rj-mobile-gutter) !important;
		padding-left: var(--rj-mobile-gutter) !important;
		box-sizing: border-box;
	}

	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content .elementor > .elementor-element.e-con :is(.e-con, .e-con-inner) {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		box-sizing: border-box;
	}

	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(
		.elementor-widget-heading,
		.elementor-widget-text-editor,
		.elementor-widget-button,
		.elementor-widget-wpforms,
		.elementor-widget-image
	) {
		max-width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	/* The intro widgets retained a saved 330px initial width and were centered
	 * inside the section, leaving a different left edge than the process rows. */
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(
		.elementor-element-5f022d5,
		.elementor-element-85d1d6b
	) {
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
	}

	/* The lavender argument block and FAQ had narrower saved widget widths.
	 * Their visible outer edge and their existing inner content now both use
	 * the same 24px guide. */
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(.rjab-block, .rjfaq) {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	/* Both media sections use exactly the same viewport column as the text.
	 * Background images stay replaceable in Elementor and keep their saved
	 * focal position; only the mobile container edge is normalized. */
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(
		.elementor-element-8c77944,
		.elementor-element-a1c5e30,
		.elementor-element-4f981c2
	) {
		position: relative !important;
		left: 50% !important;
		width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		transform: translateX(-50%) !important;
		box-sizing: border-box;
	}

	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content .elementor-element-4f981c2 > .e-con {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* About page -----------------------------------------------------------
	 * The page was built from several independent Elementor containers with
	 * conflicting mobile padding, fixed heights and one negative margin. Keep
	 * every widget editable, but place the existing blocks on one mobile grid
	 * and let their content determine their height. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor > .elementor-element.e-con {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		padding-right: var(--rj-mobile-gutter) !important;
		padding-left: var(--rj-mobile-gutter) !important;
		box-sizing: border-box;
	}

	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content :is(
		.elementor-element-b8ff3fc,
		.elementor-element-f1874d4,
		.elementor-element-77af4cb,
		.elementor-element-556b1f3,
		.elementor-element-5771d13,
		.elementor-element-41410a9,
		.elementor-element-2e24d71
	) {
		padding-top: var(--rj-mobile-section-gap) !important;
		padding-bottom: var(--rj-mobile-section-gap) !important;
	}

	/* The opening image pair is media, not a text section. It uses the same
	 * side guide and the shared editable image gap. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-75ec379 {
		gap: var(--rj-mobile-image-gap) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Every About-page photo uses the exact same viewport-based column. This
	 * avoids differences caused by nested Elementor flexbox widths even when
	 * every visible Padding field says zero. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-75ec379 > .e-con,
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-071b196 {
		position: relative !important;
		left: 50% !important;
		width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		transform: translateX(-50%) !important;
		box-sizing: border-box;
	}

	/* Remove the legacy spacer between Results and Design med mening. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-5039449 {
		display: none !important;
	}

	/* This nested column carried an extra 15px left inset, making its heading
	 * and copy narrower than its image and CTA. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-c70bf5a {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	/* A saved negative margin pulled the competence lists under the heading. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-7dc84f3 {
		margin-top: var(--rj-mobile-heading-gap) !important;
	}

	/* Preserve the uploaded image's real proportions. Elementor still controls
	 * the image itself, while replacement files automatically keep their own
	 * aspect ratio instead of being forced into a 350x400 rectangle. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-071b196 .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
	}

	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-071b196 img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center center !important;
	}

	/* Buttons follow the copy on the same edge and use the shared CTA gap. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content :is(
		.elementor-element-5844a20,
		.elementor-element-f0f6917
	) {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: var(--rj-mobile-button-gap) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		text-align: left !important;
	}

	/* Homepage grid ---------------------------------------------------------
	 * The original Elementor document mixes a 20px page inset with nested
	 * 23–40px insets and a few full-viewport text widgets. On phones that
	 * produces several unrelated left edges and visibly narrower blocks.
	 * Keep Elementor content editable, but give every homepage content widget
	 * the same viewport-based guide. */
	body.home.rj-unified-mobile-layout #content .elementor > .elementor-element.e-con {
		padding-right: var(--rj-mobile-gutter) !important;
		padding-left: var(--rj-mobile-gutter) !important;
		box-sizing: border-box;
	}

	body.home.rj-unified-mobile-layout #content .elementor > .elementor-element.e-con:has(h2) {
		padding-top: var(--rj-mobile-section-gap) !important;
		padding-bottom: var(--rj-mobile-section-gap) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor > .elementor-element.e-con :is(.e-con, .e-con-inner) {
		max-width: 100%;
		box-sizing: border-box;
	}

	body.home.rj-unified-mobile-layout #content .elementor > .elementor-element.e-con .e-con {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	/* A viewport formula fixes the few full-page widgets that are outside a
	 * normal Elementor content container. It is deliberately limited to direct
	 * page children so headings inside two-column statistics stay in place. */
	body.home.rj-unified-mobile-layout #content .elementor > :is(
		.elementor-widget-heading,
		.elementor-widget-text-editor,
		.elementor-widget-button,
		.elementor-widget-wpforms,
		.elementor-widget-image-box
	) {
		position: relative;
		left: 50%;
		width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter));
		width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter));
		max-width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter));
		max-width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter));
		margin-right: 0;
		margin-left: 0;
		transform: translateX(-50%);
		box-sizing: border-box;
	}

	/* These are the current homepage's single-column content sections. Old
	 * instance widths (for example the 304px About column and 310px Services
	 * column) must not make one block narrower than the shared mobile grid. */
	body.home.rj-unified-mobile-layout #content :is(
		.elementor-element-6ae8c95,
		.elementor-element-ca1c47f,
		.elementor-element-1187ee5,
		.elementor-element-d6afe63,
		.elementor-element-469da29
	) :is(
		.elementor-widget-heading,
		.elementor-widget-text-editor,
		.elementor-widget-button,
		.elementor-widget-wpforms,
		.elementor-widget-image-box
	) {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0;
		margin-left: 0;
	}

	/* Customer logos -------------------------------------------------------
	 * The saved mobile document gives several logo widgets zero height. Their
	 * images then overflow and visually collide. Build one predictable 2 × 4
	 * phone grid while keeping every logo image replaceable in Elementor. */
	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 .elementor-element-dd05324 {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		padding-top: calc(var(--rj-mobile-content-gap) * 2) !important;
		gap: var(--rj-mobile-image-gap) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 :is(
		.elementor-element-1b5f820,
		.elementor-element-d4c71ab
	) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
		height: auto !important;
		gap: var(--rj-mobile-image-gap) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 :is(
		.elementor-element-1b5f820,
		.elementor-element-d4c71ab
	) > .e-con {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 120px !important;
		min-height: 120px !important;
		padding: 16px !important;
		overflow: hidden;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 .elementor-widget-image {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		transform: none !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 .elementor-widget-image img {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 72px !important;
		margin: 0 auto !important;
		object-fit: contain !important;
		object-position: center center !important;
	}

	/* The source PNG canvases are identical, but Apiventor and Kiga contain
	 * more transparent space around the actual mark. Compensate optically on
	 * phones without stretching the files or changing their aspect ratio. */
	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 :is(
		.elementor-element-1ba8f2d,
		.elementor-element-18bcd43
	) img {
		transform: scale(1.4) !important;
		transform-origin: center center !important;
	}

	/* About section --------------------------------------------------------
	 * One grid line for image, heading, copy and CTA. Do not lock typography:
	 * font family, size and weight remain controlled from Elementor. */
	body.home.rj-unified-mobile-layout #content .elementor-element-faec198,
	body.home.rj-unified-mobile-layout #content .elementor-element-faec198 .e-con {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-faec198 .e-con {
		background-position: center center !important;
		background-size: cover !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-faec198 .e-con:not(.elementor-hidden-mobile) {
		position: relative !important;
		left: 50% !important;
		width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		transform: translateX(-50%) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 :is(
		.elementor-widget-heading,
		.elementor-widget-text-editor,
		.elementor-widget-button
	) {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 :is(
		.elementor-heading-title,
		.elementor-widget-text-editor,
		.elementor-widget-text-editor p
	) {
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 .elementor-element-1fa17ba,
	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 .elementor-element-1fa17ba .elementor-button-wrapper {
		text-align: left !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 .elementor-element-1fa17ba .elementor-widget-container,
	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 .elementor-element-1fa17ba .elementor-button-wrapper {
		width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-d6afe63 .elementor-element-1fa17ba .elementor-button {
		margin-right: auto !important;
		margin-left: 0 !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-widget-heading + .elementor-widget-text-editor {
		margin-top: var(--rj-mobile-heading-gap) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-widget-text-editor + .elementor-widget-text-editor {
		margin-top: var(--rj-mobile-content-gap) !important;
	}

	/* Image widgets use the same available column, while their own Elementor
	 * width, aspect ratio and object-position controls remain untouched. */
	body.home.rj-unified-mobile-layout #content .elementor-widget-image {
		max-width: 100%;
		box-sizing: border-box;
	}

	body.home.rj-unified-mobile-layout #content :is(
		.elementor-widget-image img,
		.elementor-widget-image-box img
	) {
		display: block;
		max-width: 100%;
		height: auto;
		object-position: center center;
	}

	/* Use the same two-sided gutter for every plugin text and media block,
	 * even when an Elementor parent has its own width or negative margin. */
	body.rj-unified-mobile-layout #content :is(
		.rjcs-hero__intro-inner,
		.rjcs-edtext__inner,
		.rjcs-results__inner,
		.rjcs-testimonial__inner,
		.rjcs-nextproject__inner,
		.rjp-process__inner,
		.rjab-block__inner,
		.rjfaq__inner,
		.rjfaq-all-link-wrap
	) {
		position: relative !important;
		left: 50% !important;
		width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		transform: translateX(-50%) !important;
		box-sizing: border-box;
	}

	/* Project media always shares the text grid. This supersedes old per-page
	 * contained/wide/full-bleed values only on phones. */
	body.rj-unified-mobile-layout #content :is(
		.rjcs-width-contained,
		.rjcs-width-wide,
		.rjcs-width-full_bleed,
		.rjcs-results--width-wide,
		.rjcs-results--width-full_bleed
	) {
		position: relative !important;
		left: 50% !important;
		width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100vw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		max-width: calc(100dvw - var(--rj-mobile-gutter) - var(--rj-mobile-gutter)) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		transform: translateX(-50%) !important;
	}

	body.rj-unified-mobile-layout #content :is(
		.rjcs-hero,
		.rjcs-edtext,
		.rjcs-images,
		.rjcs-webpres,
		.rjcs-results,
		.rjcs-testimonial,
		.rjcs-nextproject,
		.rjp-process,
		.rjab-block,
		.rjfaq
	) {
		max-width: 100%;
		box-sizing: border-box;
		overflow: visible;
	}

	/* Only adjacent plugin blocks receive the shared section distance. The
	 * first block keeps the page's own top spacing, and unrelated Elementor
	 * sections are not touched. */
	body.rj-unified-mobile-layout #content :is(
		[class*="elementor-widget-rjcs-"],
		.elementor-widget-rjp-process,
		.elementor-widget-rjab-argument-block,
		.elementor-widget-rjfaq
	) + :is(
		[class*="elementor-widget-rjcs-"],
		.elementor-widget-rjp-process,
		.elementor-widget-rjab-argument-block,
		.elementor-widget-rjfaq
	) {
		margin-top: var(--rj-mobile-section-gap) !important;
	}

	/* Consistent stacking and spacing inside project components. */
	body.rj-unified-mobile-layout #content .rjcs-images__row,
	body.rj-unified-mobile-layout #content .rjcs-webpres--desktop-mobile .rjcs-webpres__row {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--rj-mobile-image-gap) !important;
	}

	body.rj-unified-mobile-layout #content .rjcs-webpres--desktop-mobile .rjcs-webpres__row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	body.rj-unified-mobile-layout #content .rjcs-webpres--desktop-mobile :is(.rjcs-webpres__desktop, .rjcs-webpres__mobile),
	body.rj-unified-mobile-layout #content .rjcs-webpres__mobile-only,
	body.rj-unified-mobile-layout #content .rjcs-images--large .rjcs-images__single {
		width: 100%;
		max-width: 100% !important;
	}

	body.rj-unified-mobile-layout #content :is(
		.rjcs-hero__image img,
		.rjcs-images img,
		.rjcs-webpres img,
		.rjcs-nextproject__img
	) {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		border-radius: var(--rj-mobile-image-radius) !important;
		object-position: center center !important;
	}

	body.rj-unified-mobile-layout.rj-mobile-images-natural #content :is(
		.rjcs-hero__image img,
		.rjcs-images img,
		.rjcs-webpres img
	) {
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
	}

	body.rj-unified-mobile-layout.rj-mobile-images-landscape #content :is(.rjcs-hero__image img, .rjcs-images img, .rjcs-webpres img),
	body.rj-unified-mobile-layout.rj-mobile-images-portrait #content :is(.rjcs-hero__image img, .rjcs-images img, .rjcs-webpres img),
	body.rj-unified-mobile-layout.rj-mobile-images-square #content :is(.rjcs-hero__image img, .rjcs-images img, .rjcs-webpres img) {
		height: auto !important;
		object-fit: cover !important;
	}

	body.rj-unified-mobile-layout.rj-mobile-images-landscape #content :is(.rjcs-hero__image img, .rjcs-images img, .rjcs-webpres img) {
		aspect-ratio: 4 / 3 !important;
	}

	body.rj-unified-mobile-layout.rj-mobile-images-portrait #content :is(.rjcs-hero__image img, .rjcs-images img, .rjcs-webpres img) {
		aspect-ratio: 4 / 5 !important;
	}

	body.rj-unified-mobile-layout.rj-mobile-images-square #content :is(.rjcs-hero__image img, .rjcs-images img, .rjcs-webpres img) {
		aspect-ratio: 1 / 1 !important;
	}

	/* One text rhythm, without changing copy, font choices or Elementor's
	 * responsive font-size controls. */
	body.rj-unified-mobile-layout #content :is(
		.rjcs-hero__eyebrow,
		.rjcs-hero__title,
		.rjcs-edtext__eyebrow,
		.rjcs-edtext__heading,
		.rjcs-results__heading,
		.rjp-process__heading,
		.rjfaq__heading,
		.rjab-block__heading,
		.rjab-block__item-heading
	) {
		margin-top: 0 !important;
		margin-bottom: var(--rj-mobile-heading-gap) !important;
	}

	body.rj-unified-mobile-layout #content :is(
		.rjcs-hero__description,
		.rjcs-edtext__paragraph,
		.rjcs-results__text,
		.rjcs-testimonial__quote,
		.rjp-process__intro,
		.rjp-process__description,
		.rjfaq__intro,
		.rjab-block__item-text
	) {
		margin-top: 0;
	}

	body.rj-unified-mobile-layout #content .rjcs-edtext__paragraph:not(:last-child) {
		margin-bottom: var(--rj-mobile-content-gap) !important;
	}

	body.rj-unified-mobile-layout #content :is(.rjab-block__faq-link, .rjfaq-topic-link, .rjfaq-all-link-wrap) {
		margin-top: var(--rj-mobile-button-gap) !important;
	}

	body.rj-unified-mobile-layout #content .rjcs-hero__meta {
		gap: var(--rj-mobile-content-gap) !important;
	}

	body.rj-unified-mobile-layout #content .rjp-process__list,
	body.rj-unified-mobile-layout #content .rjfaq__body {
		margin-top: calc(var(--rj-mobile-content-gap) * 2) !important;
	}

	body.rj-unified-mobile-layout #content .rjab-block__inner {
		gap: var(--rj-mobile-section-gap) !important;
	}

	body.rj-unified-mobile-layout #content .rjab-block__right {
		gap: var(--rj-mobile-section-gap) !important;
	}

	body.rj-unified-mobile-layout #content .rjcs-edtext__divider {
		margin-bottom: var(--rj-mobile-section-gap) !important;
	}

	/* Optional alignment is global for project widgets but leaves FAQ rows
	 * left-aligned for faster scanning and predictable plus-icon placement. */
	body.rj-unified-mobile-layout.rj-mobile-align-center #content :is(
		.rjcs-hero__intro-inner,
		.rjcs-edtext__inner,
		.rjcs-results__inner,
		.rjcs-testimonial__inner,
		.rjp-process__inner,
		.rjab-block__inner
	) {
		text-align: center;
	}

	body.rj-unified-mobile-layout.rj-mobile-align-center #content :is(
		.rjcs-hero__meta,
		.rjp-process__heading-row,
		.rjab-block__faq-link
	) {
		justify-content: center;
	}

	/* Keep standard Elementor action widgets a comfortable distance below a
	 * preceding heading/text widget, while leaving their content editable. */
	body.rj-unified-mobile-layout #content .elementor-widget-text-editor + .elementor-widget-button,
	body.rj-unified-mobile-layout #content .elementor-widget-heading + .elementor-widget-button {
		margin-top: var(--rj-mobile-button-gap) !important;
	}

	/* Final cascade layer: earlier compatibility rules intentionally retain
	 * broad selectors, so the rhythm values are repeated here as the single
	 * authoritative phone spacing layer. */
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content :is(
		.elementor-element-b8ff3fc,
		.elementor-element-f1874d4,
		.elementor-element-77af4cb,
		.elementor-element-556b1f3,
		.elementor-element-5771d13,
		.elementor-element-41410a9,
		.elementor-element-2e24d71
	),
	body.home.rj-unified-mobile-layout #content :is(
		.elementor-element-6ae8c95,
		.elementor-element-ca1c47f,
		.elementor-element-1187ee5,
		.elementor-element-d6afe63,
		.elementor-element-469da29
	),
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content :is(
		.elementor-element-de60756,
		.elementor-element-1ba4e76,
		.elementor-element-b27a4f5,
		.elementor-element-83efabb
	) {
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: var(--rj-mobile-section-half-gap) !important;
		padding-bottom: var(--rj-mobile-section-half-gap) !important;
	}

	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-b8ff3fc,
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content .elementor-element-de60756 {
		padding-top: var(--rj-mobile-page-start) !important;
	}

	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-5771d13 {
		margin-top: 0 !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1d7eae0 {
		margin-top: 0 !important;
		padding-top: var(--rj-mobile-section-gap) !important;
		padding-bottom: var(--rj-mobile-section-gap) !important;
	}

	body.rj-unified-mobile-layout #content .rjab-block__inner {
		gap: calc(var(--rj-mobile-section-gap) * .75) !important;
	}

	body.rj-unified-mobile-layout #content .rjab-block__right {
		gap: calc(var(--rj-mobile-section-gap) / 2) !important;
	}

	/* Homepage divider rhythm ---------------------------------------------
	 * The project groups had 84px/64px saved spacing around their separator
	 * lines. On a phone that made every line look detached from both pieces of
	 * information. Keep a compact, equal 32px distance around those lines. */
	body.home.rj-unified-mobile-layout #content .elementor-element-ca1c47f .elementor-element-29064f5 {
		margin-top: calc(var(--rj-mobile-section-gap) / 2) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-ca1c47f .elementor-element-22e6bbb {
		padding-top: calc(var(--rj-mobile-section-gap) / 2) !important;
	}

	/* The final project divider is the boundary between the projects and
	 * customer-logo sections. Give it the same compact space on both sides. */
	body.home.rj-unified-mobile-layout #content .elementor-element-ca1c47f {
		padding-bottom: var(--rj-mobile-button-gap) !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor-element-1187ee5 {
		padding-top: var(--rj-mobile-button-gap) !important;
	}

	/* NOTE: a former rule here hid .elementor-element-8537aae / 322890f / 744f79f /
	 * c0388a2 on phones as "empty separator helpers". They are in fact the CONTENT
	 * containers of the three Services nested accordions, so the rule stopped the
	 * Norwegian accordion from ever revealing its text on mobile. Removed; Elementor
	 * already hides these while the accordion item is collapsed. */

	/* Homepage hero boundary: keep the image and statistics as two consecutive
	 * blocks on phones. These final-cascade declarations intentionally reset
	 * legacy negative spacing and transforms without fixing either block's
	 * height, so Elementor content and typography controls remain editable. */
	body.home.rj-unified-mobile-layout #content .elementor > .elementor-element.elementor-element-41cb771 {
		margin-bottom: 0 !important;
		transform: none !important;
	}

	body.home.rj-unified-mobile-layout #content .elementor > .elementor-element.elementor-element-bf43563 {
		position: relative !important;
		inset: auto !important;
		margin-top: 0 !important;
		transform: none !important;
		clear: both !important;
	}
}


/* ---------------------------------------------------------------------------
 * KIGA Studio - Resultatet block, phone only
 *
 * The green block is pulled outward with margin: -20px -10px 0, which on a
 * phone made it 14px wider on each side than the case-study images stacked
 * above it, so its edges did not line up with the photos. The parent gives
 * 20px of side padding and the images sit at 24px, so +4px puts the block on
 * exactly the same left and right edge as the photo above it.
 *
 * The vertical -20px pull is left alone, and tablet/desktop keep the
 * full-bleed treatment because this rule stops at 767px.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	body:is(.page-id-3617, .page-id-4475, .page-id-4630) #content .elementor-element.elementor-element-724228a {
		margin-left: 4px !important;
		margin-right: 4px !important;
		/* The block keeps its own width, so the margin alone would only shift it
		 * and push the right edge past the photo. Pin the width to the same
		 * measure the images use so both edges land together. */
		width: calc(100% - 8px) !important;
		max-width: calc(100% - 8px) !important;
	}

	/* The unified mobile layout pins every __inner wrapper to the page gutter
	 * so text columns line up site-wide. Inside this green block that cancels
	 * the block's own 20px padding and the text ends up touching its edges,
	 * so here the inner wrapper keeps the block padding instead. */
	body.rj-unified-mobile-layout #content .elementor-element.elementor-element-724228a .rjcs-edtext__inner {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ---------------------------------------------------------------------------
 * Bauhaus Urban Studio - cover image edge to edge, phone only
 *
 * The project hero already carries the widget's full-bleed option, but the
 * unified mobile layout pins every image to the 24px page gutter, so on a
 * phone the cover stopped short of the screen edges. Only the image wrapper
 * breaks out here - the eyebrow, title and meta under it stay on the gutter
 * like the rest of the page, and nothing above 767px is touched.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	body:is(.page-id-3627, .page-id-4480, .page-id-4584) #content .elementor-element.elementor-element-eed8c12 .rjcs-hero__image-wrap {
		width: calc(100% + 40px) !important;
		max-width: calc(100% + 40px) !important;
		/* The hero section centres its children, so a 100vw-wide wrapper already
		 * lands flush on both edges - no negative pull needed. */
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body:is(.page-id-3627, .page-id-4480, .page-id-4584) #content .elementor-element.elementor-element-eed8c12 .rjcs-hero__image,
	body:is(.page-id-3627, .page-id-4480, .page-id-4584) #content .elementor-element.elementor-element-eed8c12 .rjcs-hero__img {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ---------------------------------------------------------------------------
 * Resultatet block (rjcs-results), phone only
 *
 * The results block has no side padding of its own, and the unified mobile
 * layout pins its inner wrapper to the page gutter, so the heading and copy
 * sat right on the beige edges. Give the block the same 20px inner margin
 * the other case-study text blocks use, and let the wrapper follow it.
 *
 * Applies to every page that uses this widget - Hverdagsplan, ZuriLit,
 * Apiventor, Bauhaus Urban Studio and DELITA - so the block reads the same
 * way across all the case studies.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	body.rj-unified-mobile-layout #content .rjcs-results.rjcs-results {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	body.rj-unified-mobile-layout #content .rjcs-results.rjcs-results .rjcs-results__inner {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Case study hero cover image - full bleed, phone only
 * Applies to every page that uses the rjcs-project-hero widget:
 * KIGA Studio, Bauhaus Urban Studio, Hverdagsplan, Apiventor, ZuriLit, DELITA.
 * The hero section centres its children, so a 100dvw-wide wrapper lands flush
 * on both edges. min-width defeats flex-shrink inside the hero.
 */
@media (max-width: 767px) {
	body.rj-unified-mobile-layout #content .elementor-widget-rjcs-project-hero .rjcs-hero__image-wrap {
		width: 100dvw !important;
		min-width: 100dvw !important;
		max-width: 100dvw !important;
		flex: 0 0 100dvw !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}
	body.rj-unified-mobile-layout #content .elementor-widget-rjcs-project-hero .rjcs-hero__image,
	body.rj-unified-mobile-layout #content .elementor-widget-rjcs-project-hero .rjcs-hero__img {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ==========================================================================
 * About page responsive rhythm - shared by Om meg (1066), About Me (4520)
 * and Apie mane (4571). The three translations use identical Elementor element
 * ids, so one rule set covers all languages instead of per-language hacks.
 *
 * Two defects this fixes:
 *  1. The existing mobile spacing rules above are scoped to body:is(.page-id-1066, .page-id-4520, .page-id-4571),
 *     so the English and Lithuanian copies got no section padding at all
 *     (0px top/bottom) and text sat flush against the section edges.
 *  2. Between 768px and 1024px no rule set supplies vertical padding, so every
 *     section collapsed to 0px in all three languages, and section 5771d13 kept
 *     a negative block start margin that pulled the Results/metrics block up
 *     onto the image above it.
 * Desktop (>1024px) is deliberately untouched.
 * ========================================================================== */

@media (max-width: 767px) {
	body:is(.page-id-1066, .page-id-4520, .page-id-4571) .elementor .e-con.e-parent {
		padding-block-start: 32px !important;
		padding-block-end: 32px !important;
	}

	body:is(.page-id-1066, .page-id-4520, .page-id-4571) .elementor .e-con.e-parent.elementor-element-b8ff3fc {
		padding-block-start: 48px !important;
	}

	body:is(.page-id-1066,.page-id-4520,.page-id-4571) :is(
		.elementor-element-75ec379,
		.elementor-element-5771d13,
		.elementor-element-7dc84f3
	) {
		--margin-block-start: 0px !important;
		margin-block-start: 0 !important;
	}

	body:is(.page-id-1066,.page-id-4520,.page-id-4571) .elementor img {
		height: auto !important;
		max-width: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body:is(.page-id-1066,.page-id-4520,.page-id-4571) .elementor .e-con.e-parent {
		padding-block-start: 48px !important;
		padding-block-end: 48px !important;
	}

	body:is(.page-id-1066,.page-id-4520,.page-id-4571) .elementor .e-con.e-parent.elementor-element-b8ff3fc {
		padding-block-start: 64px !important;
	}

	body:is(.page-id-1066,.page-id-4520,.page-id-4571) :is(
		.elementor-element-75ec379,
		.elementor-element-5771d13,
		.elementor-element-7dc84f3
	) {
		--margin-block-start: 0px !important;
		margin-block-start: 0 !important;
	}

	body:is(.page-id-1066,.page-id-4520,.page-id-4571) .elementor img {
		height: auto !important;
		max-width: 100% !important;
	}
}

/* Match the EN/LT About photo section bottom spacing to the NO page. */
@media (max-width: 767px) {
	body:is(.page-id-1066, .page-id-4520, .page-id-4571).rj-unified-mobile-layout #content .elementor-element-071b196 {
		margin-bottom: 0 !important;
	}
}
/* EN/LT Bauhaus text blocks inherit the same internal edge as the NO layout. */
@media (max-width: 1024px) {
	body:is(.page-id-4480, .page-id-4584) #content :is(
		.elementor-element-0488d01,
		.elementor-element-54fb86e
	) {
		padding-right: var(--rj-mobile-gutter) !important;
		padding-left: var(--rj-mobile-gutter) !important;
		box-sizing: border-box;
	}
}


/* Samarbeid process image - full bleed on phones (<=767px) only.
 * the mobile duplicate a1c5e30 sits inside the intro section so it
 * introduces the steps. Inside that section it inherits the 24px content
 * gutter and renders 342px at a 390px viewport, so this rule restores the
 * original edge-to-edge width: 100% of the gutter-constrained box plus the
 * two 24px gutters. Applies only while the element sits inside de60756,
 * i.e. only after the mobile move, and only below 768px - tablet and desktop
 * never match. Same three page ids, so NO/EN/LT are identical.
 *
 * !important and the long selector are both required: the existing shared rule
 * ...#content .elementor > .elementor-element.e-con :is(.e-con, .e-con-inner)
 * already sets width:100% !important at specificity (1,6,1). This selector
 * reaches (1,7,1) by qualifying the target with the classes it already has,
 * so it wins on specificity rather than by broadening scope. */
@media (max-width: 767px) {
	body:is(.page-id-2232, .page-id-4536, .page-id-4592).rj-unified-mobile-layout #content .elementor-element-de60756 .elementor-element-a1c5e30.e-con.e-atomic-element.e-flexbox-base {
		width: calc(100% + 48px) !important;
		max-width: calc(100% + 48px) !important;
	}
}


/* Samarbeid process image - one visible copy per breakpoint.
 * The image now exists twice in the Elementor document. 8c77944 stays at
 * root level and owns desktop and tablet exactly as before. a1c5e30 is an
 * identical duplicate placed inside de60756 between the hero (618a939) and
 * the steps grid (cfd4841), so mobile reading order is Hero, image, Step 01,
 * 02, 03, 04 with no JavaScript. These two rules are the visibility switch
 * and replace the former anchor-nav.js relocation. !important is required
 * because Elementor atomic containers set display:flex from .e-con. */
@media (min-width: 768px) {
	body:is(.page-id-2232, .page-id-4536, .page-id-4592) .elementor-element-a1c5e30.e-con {
		display: none !important;
	}
}

@media (max-width: 767px) {
	body:is(.page-id-2232, .page-id-4536, .page-id-4592) .elementor > .elementor-element-8c77944.e-con {
		display: none !important;
	}
}

/* Samarbeid mobile process image - intro to image gap.
 * The Elementor element carries its own mobile-only margin-block-start of
 * 24px, which stacked on top of the 40px row-gap of the de60756 inner
 * container and produced a 64px gap under the intro text. Zeroing that one
 * margin leaves the section gap alone as the single source of the spacing,
 * so intro to image and image to Step 01 are both 40px. Mobile only, and the
 * duplicate is display:none above 767px, so desktop and tablet cannot be
 * reached by this rule. */
@media (max-width: 767px) {
	body:is(.page-id-2232, .page-id-4536, .page-id-4592) .elementor-element-a1c5e30.e-con {
		margin-block-start: 0;
	}
}