/* A calmer homepage. All rules live inside its editable main container;
   the shared header, footer, other pages and game internals are untouched. */
.elementor .sj-home-page.sj-home-calm {
	--sj-calm-gutter: 32px;
	--sj-calm-pad: clamp(32px, 4vw, 64px);
	--sj-calm-space: clamp(64px, 7vw, 104px);
	--sj-calm-rule: var(--sj-rule-ink);
}

/* The introduction has a clear hierarchy and room before the playable scene. */
.elementor .sj-home-page.sj-home-calm .sj-home-hero.e-con {
	padding-block: 64px 64px;
	padding-inline: max(var(--sj-calm-gutter), calc((100% - var(--sj-site-width)) / 2));
}
.elementor .sj-home-page.sj-home-calm .sj-home-intro.e-con {
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	align-items: end;
	column-gap: 64px;
	row-gap: 28px;
	margin-bottom: 32px;
}
.elementor .sj-home-page.sj-home-calm .sj-home-intro > * { grid-column: auto; }
.elementor .sj-home-page.sj-home-calm .sj-home-heading.e-con { gap: 20px; }
.elementor .sj-home-page.sj-home-calm .sj-home-title .elementor-heading-title {
	font-size: clamp(52px, 5.4vw, 78px);
	line-height: 1.04;
	letter-spacing: -.045em;
}
.elementor .sj-home-page.sj-home-calm .sj-home-description {
	max-width: 40ch;
	font-size: var(--font-size-body);
	line-height: 1.8;
}
.elementor .sj-home-page.sj-home-calm .sj-home-hero-actions.e-con { margin-bottom: 48px; gap: 16px 28px; }

/* One frame per section, with generous open space inside it. */
.elementor .sj-home-page.sj-home-calm .sj-home-section {
	--sj-home-line: var(--sj-calm-rule);
	border-bottom-color: var(--sj-calm-rule);
	background: var(--color-surface);
}
.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-section-inner.e-con {
	width: min(calc(100% - var(--sj-calm-gutter) * 2), var(--sj-site-width));
	padding: var(--sj-calm-space) var(--sj-calm-pad);
	gap: 48px;
	border-inline: 1px solid var(--sj-home-line);
}
.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-section-heading.e-con {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px 64px;
	align-items: end;
	border: 0;
}
.elementor .sj-home-page.sj-home-calm .sj-home-section-heading > .elementor-widget {
	display: block;
	padding: 0;
	border: 0;
	grid-column: auto;
}
.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-section-title .elementor-heading-title {
	font-size: clamp(36px, 3.8vw, 54px);
	line-height: 1.1;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.elementor .sj-home-page.sj-home-calm .sj-home-section .elementor-widget-text-editor {
	font-size: var(--font-size-body);
	line-height: 1.85;
}
.elementor .sj-home-page.sj-home-calm .sj-home-section p + p { margin-top: 20px; }
.elementor .sj-home-page.sj-home-calm .sj-home-section-intro { max-width: 50ch; }

/* The remit is one story, with four modest practical examples underneath. */
.elementor .sj-home-page.sj-home-calm .sj-home-story-grid.e-con {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 64px;
	align-items: start;
}
.elementor .sj-home-page.sj-home-calm .sj-home-story-grid > * { grid-column: auto; }
.elementor .sj-home-page.sj-home-calm .sj-home-story-heading.e-con {
	padding: 0;
	gap: 24px;
	justify-content: flex-start;
	background: transparent;
	border: 0;
}
.elementor .sj-home-page.sj-home-calm .sj-home-story-heading .sj-home-section-title .elementor-heading-title {
	font-size: clamp(48px, 5.2vw, 72px);
	line-height: 1.02;
}
.elementor .sj-home-page.sj-home-calm .sj-home-story-copy {
	padding: 0;
	border: 0;
	max-width: 60ch;
}
.elementor .sj-home-page.sj-home-calm .sj-home-checks.e-con {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding-top: 40px;
	border-top: 1px solid var(--sj-home-line);
}
/* Dividers meet the frame; text keeps its comfortable inset. */
.elementor .sj-home-page.sj-home-calm :is(.sj-home-checks, .sj-home-credentials, .sj-home-service-grid).e-con {
	width: calc(100% + var(--sj-calm-pad) * 2);
	max-width: none;
	margin-inline: calc(-1 * var(--sj-calm-pad));
}
.elementor .sj-home-page.sj-home-calm :is(.sj-home-checks, .sj-home-credentials).e-con { padding-inline: var(--sj-calm-pad); }
.elementor .sj-home-page.sj-home-calm .sj-home-checks > .sj-home-check.e-con {
	grid-column: auto;
	padding: 0;
	gap: 14px;
	border: 0;
	background: transparent;
}
.elementor .sj-home-page.sj-home-calm .sj-home-check .sj-home-card-title .elementor-heading-title { font-size: 22px; line-height: 1.2; }
.elementor .sj-home-page.sj-home-calm .sj-home-check .elementor-widget-text-editor { font-size: var(--font-size-body); line-height: 1.8; }

/* Service cells share continuous rules; interaction stays inside that grid. */
.elementor .sj-home-page.sj-home-calm .sj-home-service-grid.e-con {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 0;
	border-bottom: 1px solid var(--sj-home-line);
}
.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con {
	grid-column: auto;
	gap: 14px;
	padding: 28px var(--sj-calm-pad) 44px;
	border: 0;
	border-top: 1px solid var(--sj-home-line);
	background: transparent;
	transition: background-color 140ms ease-out, color 140ms ease-out;
}
.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con:nth-child(even) { border-left: 1px solid var(--sj-home-line); }
.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con:last-child:nth-child(odd) { grid-column: 1 / -1; }
.elementor .sj-home-page.sj-home-calm .sj-home-service-title .elementor-heading-title { font-size: 27px; }
.elementor .sj-home-page.sj-home-calm .sj-home-service .sj-home-card-copy { max-width: 48ch; color: var(--sj-home-copy); }
.elementor .sj-home-page.sj-home-calm .sj-home-service .sj-home-service-icon { color: var(--color-forest); }
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con::before {
	--sj-pixel-ink: var(--color-offwhite);
	--sj-pixel-pattern: repeating-conic-gradient(var(--sj-pixel-ink) 0% 25%, transparent 0% 50%);
	inset: 0;
	height: auto;
	background-image: var(--sj-pixel-pattern);
	background-size: var(--sj-pixel-pattern-size);
	clip-path: polygon(calc(100% - 8px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 8px), calc(100% - 8px) calc(100% - 8px));
	opacity: 0;
	transition: opacity 140ms ease-out;
}
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con::after {
	position: absolute;
	z-index: 1;
	right: 16px;
	bottom: 12px;
	width: 24px;
	height: 24px;
	color: var(--color-yellow);
	font: 24px/1 "pixelart-icons-font";
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease-out;
	/* The shared decorative arrow has an empty spoken alternative. */
	content: "\ea73" / "";
}
/* Touch gets the pressed state; hovering pointers and keyboards get the preview. */
@media (hover: hover) {
	.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con:hover {
		--sj-home-copy: var(--color-offwhite);
		background: var(--color-navy);
		color: var(--color-white);
	}
	.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:hover .sj-home-service-icon { color: var(--color-yellow); }
	.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:hover::before,
	.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:hover::after { opacity: 1; }
}
.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con:has(a:focus-visible) {
	--sj-home-copy: var(--color-offwhite);
	background: var(--color-navy);
	color: var(--color-white);
	outline: 2px solid var(--color-yellow);
	outline-offset: -3px;
}
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:focus-within:not(:has(a:focus-visible)) { outline: none; }
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:has(a:focus-visible) .sj-home-service-icon { color: var(--color-yellow); }
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:has(a:focus-visible)::before,
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:has(a:focus-visible)::after { opacity: 1; }
.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con:has(a:active) {
	--sj-home-copy: var(--color-navy);
	background: var(--color-lime);
	color: var(--color-navy);
	outline-color: var(--color-navy);
	transition: none;
}
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:has(a:active) .sj-home-service-icon { color: var(--color-navy); }
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:has(a:active)::before { --sj-pixel-ink: var(--color-navy); opacity: 1; transition: none; }
.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con:has(a:active)::after { color: var(--color-navy); opacity: 1; transition: none; }

/* A portrait, a short introduction and a quiet band of original credentials. */
.elementor .sj-home-page.sj-home-calm .sj-home-about-grid.e-con {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 64px;
	align-items: center;
}
.elementor .sj-home-page.sj-home-calm .sj-home-about-grid > * { grid-column: auto; }
.elementor .sj-home-page.sj-home-calm .sj-home-about-image.e-con { padding: 0; gap: 14px; }
.elementor .sj-home-page.sj-home-calm .sj-home-about-copy.e-con { padding: 0; border: 0; gap: 24px; }
.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-image-caption { font-size: var(--font-size-body); line-height: 1.6; }
/* Share the band's existing whitespace equally above and below the logos. */
.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-section-inner.e-con:has(> .sj-home-credentials) { padding-bottom: 0; }
.elementor .sj-home-page.sj-home-calm .sj-home-credentials.e-con {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	align-items: center;
	padding-block: calc((var(--sj-calm-space) + 40px) / 2);
	border-top: 1px solid var(--sj-home-line);
	background: transparent;
}
.elementor .sj-home-page.sj-home-calm .sj-home-credentials > .sj-home-credential:nth-child(n) {
	grid-column: auto;
	min-height: 60px;
	padding: 0;
	border: 0;
	background: transparent;
}
.elementor .sj-home-page.sj-home-calm .sj-home-credential::before { content: none; }
.elementor .sj-home-page.sj-home-calm .sj-home-credential img { max-width: min(100%, 190px); max-height: 45px; }

/* Quotes read as quotations rather than another set of cards. */
.elementor .sj-home-page.sj-home-calm .sj-home-proof { background: var(--color-surface); }
.elementor .sj-home-page.sj-home-calm .sj-home-proof .sj-home-section-heading.e-con { grid-template-columns: minmax(0, 1fr); }
.elementor .sj-home-page.sj-home-calm .sj-home-quotes.e-con {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
}
.elementor .sj-home-page.sj-home-calm .sj-home-quotes > .sj-home-quote.e-con {
	grid-column: auto;
	padding: 0;
	border: 0;
	min-height: 220px;
	background: transparent;
}
.elementor .sj-home-page.sj-home-calm .sj-home-quotes[data-sj-carousel-visible="2"] > .sj-home-quote:not([hidden]) + .sj-home-quote:not([hidden]) { border-left: 0; }
.elementor .sj-home-page.sj-home-calm .sj-home-quotes[data-sj-carousel-visible="1"] > .sj-home-quote.e-con { grid-column: 1 / -1; }
.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-quote-text {
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.7vw, 36px);
	line-height: 1.35;
	letter-spacing: -.025em;
	margin-bottom: 32px;
}
.elementor .sj-home-page.sj-home-calm .sj-testimonials-controls {
	padding: 0;
	border: 0;
	min-height: 44px;
	margin-top: -24px;
}

/* The homepage closes with an enquiry; rates belong on the Pricing page. */
.elementor .sj-home-page.sj-home-calm .sj-home-next.sj-dark-section {
	--sj-home-line: var(--sj-rule-on-dark);
	background: var(--color-navy);
	color: var(--color-offwhite);
}
.elementor .sj-home-page.sj-home-calm .sj-home-next-grid.e-con {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 80px;
	align-items: center;
}
.elementor .sj-home-page.sj-home-calm .sj-home-next-grid > .e-con {
	grid-column: auto;
	padding: 0;
	border: 0;
	gap: 28px;
}
.elementor .sj-home-page.sj-home-calm .sj-home-next .sj-home-section-title .elementor-heading-title { font-size: clamp(44px, 4.8vw, 64px); }
.elementor .sj-home-page.sj-home-calm .sj-home-next-grid > .sj-home-contact-actions.e-con { align-items: center; }

@media (max-width: 1100px) {
	.elementor .sj-home-page.sj-home-calm { --sj-calm-pad: 32px; }
	.elementor .sj-home-page.sj-home-calm :is(.sj-home-intro, .sj-home-story-grid, .sj-home-about-grid, .sj-home-next-grid, .sj-home-section-heading, .sj-home-quotes).e-con { column-gap: 40px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-title .elementor-heading-title { font-size: clamp(48px, 5.8vw, 66px); }
	.elementor .sj-home-page.sj-home-calm .sj-home-checks.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-service-title .elementor-heading-title { font-size: 24px; }
}

@media (max-width: 767px) {
	.elementor .sj-home-page.sj-home-calm { --sj-calm-gutter: 20px; --sj-calm-pad: 20px; --sj-calm-space: 56px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-hero.e-con { padding: 36px 20px 40px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-intro.e-con { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-heading.e-con { gap: 16px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-title .elementor-heading-title { font-size: clamp(34px, 9.5vw, 54px); line-height: 1.07; }
	.elementor .sj-home-page.sj-home-calm .sj-home-description { font-size: var(--font-size-body); max-width: 48ch; }
	.elementor .sj-home-page.sj-home-calm .sj-home-hero-actions.e-con { gap: 12px 20px; margin-bottom: 32px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-hero-actions .elementor-button { padding-inline: 16px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-section-inner.e-con { width: 100%; border-inline: 0; gap: 32px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-section :is(.sj-home-story-grid, .sj-home-section-heading, .sj-home-service-grid, .sj-home-about-grid, .sj-home-next-grid, .sj-home-quotes).e-con {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-section-title .elementor-heading-title { font-size: clamp(32px, 8.5vw, 42px); }
	.elementor .sj-home-page.sj-home-calm .sj-home-story-heading .sj-home-section-title .elementor-heading-title { font-size: clamp(44px, 12vw, 60px); }
	.elementor .sj-home-page.sj-home-calm .sj-home-section .elementor-widget-text-editor { font-size: var(--font-size-body); line-height: 1.85; }
	.elementor .sj-home-page.sj-home-calm .sj-home-story-heading.e-con { gap: 18px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-checks.e-con { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-checks > .sj-home-check.e-con { gap: 8px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-check .sj-home-card-title .elementor-heading-title { font-size: 22px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-service-grid.e-con { gap: 0; }
	.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con:nth-child(even) { border-left: 0; }
	.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con { padding: 24px var(--sj-calm-pad) 44px; gap: 10px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-service-title .elementor-heading-title { font-size: 25px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-about-grid.e-con { gap: 32px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-about-copy.e-con { gap: 20px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-credentials.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: calc((var(--sj-calm-space) + 28px) / 2); gap: 24px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-credential img { max-width: min(100%, 160px); max-height: 42px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-quotes > .sj-home-quote.e-con { min-height: 230px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-section .sj-home-quote-text { font-size: 28px; line-height: 1.35; }
	.elementor .sj-home-page.sj-home-calm .sj-testimonials-controls { margin-top: 0; }
	.elementor .sj-home-page.sj-home-calm .sj-home-next-grid.e-con { gap: 40px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-next .sj-home-section-title .elementor-heading-title { font-size: 42px; }
	.elementor .sj-home-page.sj-home-calm .sj-home-next-grid > .sj-home-contact-actions.e-con { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .sj-home-page.sj-home-calm .sj-home-service-grid > .sj-home-service.e-con,
	.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con::before,
	.elementor .sj-home-page.sj-home-calm .sj-home-service.e-con::after { transition: none; }
}