/* Carry the homepage's space and connected rails through interior pages. */
:root {
	--sj-page-pad: clamp(32px, 4vw, 64px);
	--sj-page-space: clamp(64px, 7vw, 104px);
}
body:not(.home) .sj-footer { --sj-footer-content-pad: var(--sj-page-pad); }

.sj-standard-page .sj-page-hero,
.sj-blog .sj-blog-hero,
.elementor :is(.sj-about-hero, .sj-pricing-hero).e-con {
	padding-block: 56px 64px;
}
.sj-standard-page .sj-page-title,
.elementor .sj-pricing-hero .sj-pricing-title .elementor-heading-title {
	font-size: clamp(48px, 5.4vw, 78px);
	line-height: 1.04;
	letter-spacing: -.045em;
}
.sj-standard-page .sj-page-hero-inner:has(.sj-page-summary) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px 64px;
	align-items: end;
}
.sj-standard-page .sj-page-hero-inner:has(.sj-page-summary) > .sj-breadcrumbs { grid-column: 1 / -1; margin-bottom: 0; }
.sj-standard-page .sj-page-summary { margin: 0; max-width: 55ch; line-height: 1.85; }

/* These editable pages own a single frame, not a second box inside the frame. */
.sj-standard-page:has(.sj-visitor-content) .sj-page-body { padding: 0; }
.sj-standard-page:has(.sj-visitor-content) .sj-page-body::before { content: none; }
.sj-standard-page:has(.sj-visitor-content) .sj-page-body-inner {
	width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width));
	max-width: none;
	margin-inline: auto;
	border-inline: 1px solid var(--sj-rule-ink);
}
.sj-page-body .elementor .sj-visitor-content.e-con { gap: 0; padding: 0; }
.sj-page-body .elementor .sj-visitor-intro.e-con {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px 64px;
	align-items: start;
	max-width: none;
	padding: var(--sj-page-space) var(--sj-page-pad);
}
.sj-page-body .sj-visitor-intro > .elementor-widget-button { grid-column: 2; }
.sj-page-body .sj-visitor-content .elementor-widget-text-editor { line-height: 1.85; }
.sj-page-body .sj-visitor-content p + p { margin-top: 20px; }
.sj-page-body .sj-visitor-content .elementor-widget-text-editor :is(p, ul):last-child { margin-bottom: 0; }
.sj-page-body .sj-visitor-intro h2 {
	font-size: clamp(36px, 3.8vw, 54px);
	line-height: 1.1;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.sj-page-body .elementor .sj-visitor-grid.e-con {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	background: transparent;
	border: 0;
}
.sj-page-body .sj-visitor-content > .e-con + .e-con { border-top: 1px solid var(--sj-rule-ink); }
.sj-page-body .elementor .sj-visitor-card.e-con {
	position: relative;
	gap: 24px;
	padding: 48px var(--sj-page-pad);
	border: 0;
	background: var(--color-white);
}
.sj-page-body .sj-visitor-grid > .sj-visitor-card:nth-child(even) { border-left: 1px solid var(--sj-rule-ink); }
.sj-page-body .sj-visitor-grid > .sj-visitor-card:nth-child(n + 3) { border-top: 1px solid var(--sj-rule-ink); }
.sj-page-body .sj-visitor-card h2 { font-size: clamp(27px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -.025em; }
.sj-page-body .sj-visitor-card > .elementor-widget-button { margin-top: auto; }
.sj-page-body .elementor .sj-visitor-card-accent.e-con {
	background-color: var(--color-lime);
	background-image: var(--sj-citrus-material);
	background-size: var(--sj-citrus-background-size);
	background-repeat: var(--sj-citrus-background-repeat);
	background-blend-mode: var(--sj-citrus-background-blend);
}
.sj-page-body .sj-visitor-grid > .sj-visitor-card:only-child {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px 64px;
	padding-block: 56px;
}
.sj-page-body .sj-visitor-card ul { padding-left: 20px; }
.sj-page-body .sj-visitor-card li { padding-left: 4px; }
.sj-page-body .sj-visitor-card li::marker { color: var(--color-forest); }
.sj-page-body .sj-visitor-card li + li { margin-top: 24px; }

/* Contact's editable details follow the booking form inside the same rails. */
.sj-page-body .elementor .sj-contact-details.e-con { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; gap: 0; margin: 0; padding: 0; border-bottom: 1px solid var(--sj-rule-ink); }
.sj-page-body .elementor .sj-contact-details-cell.e-con { min-width: 0; width: auto; gap: 20px; margin: 0; padding: 40px var(--sj-page-pad); }
.sj-contact-details-cell + .sj-contact-details-cell { border-left: 1px solid var(--sj-rule-ink); }
.sj-contact-details h2 { margin: 0; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.sj-contact-details .sj-contact-links p { margin: 0; }
.sj-contact-details .sj-contact-links p + p { margin-top: 12px; }
.sj-page-body .sj-contact-details .sj-contact-links a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; max-width: 100%; color: inherit; text-decoration: none; }
.sj-contact-links a > span:not(.sj-icon) { min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: .2em; }
.sj-contact-links .sj-icon { color: var(--color-forest); }
.sj-page-body .sj-contact-details .sj-contact-links a:is(:hover, :focus-visible) { color: var(--color-forest); }
.sj-contact-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1100px) and (min-width: 768px) {
    .sj-page-body .elementor .sj-contact-details.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sj-contact-details-cell:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--sj-rule-ink); }
    .sj-contact-details-cell:last-child .elementor-widget-container { display: flex; flex-wrap: wrap; gap: 12px 28px; }
    .sj-contact-details-cell:last-child .sj-contact-links p + p { margin-top: 0; }
}
@media (max-width: 767px) {
    .sj-page-body .elementor .sj-contact-details.e-con { grid-template-columns: minmax(0, 1fr); }
    .sj-page-body .elementor .sj-contact-details-cell.e-con { padding: 28px 20px; gap: 12px; }
    .sj-contact-details-cell + .sj-contact-details-cell { border-left: 0; border-top: 1px solid var(--sj-rule-ink); }
}

/* Service directory: the same quiet grid and pixel feedback as Home. */
.sj-page-body .elementor .sj-service-card.e-con {
	--sj-service-icon: var(--color-forest);
	--sj-pixel-ink: var(--color-offwhite);
	transition: background-color 140ms ease-out, color 140ms ease-out;
}
.sj-service-card-title .elementor-heading-title { display: flex; align-items: baseline; gap: 14px; }
.sj-service-card-title .elementor-heading-title::before {
	flex: 0 0 24px;
	align-self: center;
	color: var(--sj-service-icon);
	font: 24px/1 "pixelart-icons-font";
	content: var(--sj-service-glyph) / "";
}
.sj-service-card--web-design { --sj-service-glyph: "\ee04"; }
.sj-service-card--software-development { --sj-service-glyph: "\eb35"; }
.sj-service-card--seo { --sj-service-glyph: "\ed18"; }
.sj-service-card--automation-ai { --sj-service-glyph: "\ed4d"; }
.sj-service-card--voice { --sj-service-glyph: "\ec97"; }
.sj-service-card--video { --sj-service-glyph: "\ede8"; }
.sj-service-card > .elementor-widget-button,
.sj-service-card .elementor-button { position: static; }
/* A filter would make the link its own containing block and shrink its hit area. */
.sj-page-body .elementor .sj-service-card .elementor-button,
.sj-page-body .elementor .sj-service-card .elementor-button:is(:link, :visited, :hover, :focus, :focus-visible, :active) { filter: none; transition: none; }
.sj-service-card .elementor-button::after { position: absolute; inset: 0; content: ''; }
.sj-service-card.e-con::before {
	position: absolute;
	inset: 0;
	background-image: repeating-conic-gradient(var(--sj-pixel-ink) 0% 25%, transparent 0% 50%);
	background-size: 4px 4px;
	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;
	pointer-events: none;
	content: '';
}
.sj-service-card.e-con::after {
	position: absolute;
	right: 16px;
	bottom: 12px;
	color: var(--sj-service-icon);
	font: 24px/1 "pixelart-icons-font";
	opacity: 0;
	pointer-events: none;
	content: "\ea73" / "";
}
@media (hover: hover) {
	.sj-page-body .elementor .sj-service-card.e-con:hover {
		--sj-service-icon: var(--color-yellow);
		--sj-primary-button-background: var(--color-yellow);
		--sj-primary-button-material: var(--sj-citrus-material);
		--sj-primary-button-text: var(--color-navy);
		background: var(--color-navy);
		color: var(--color-white);
	}
	.sj-service-card.e-con:hover::before,
	.sj-service-card.e-con:hover::after { opacity: 1; }
}
.sj-page-body .elementor .sj-service-card.e-con:has(a:focus-visible) {
	--sj-service-icon: var(--color-yellow);
	--sj-primary-button-background: var(--color-yellow);
	--sj-primary-button-material: var(--sj-citrus-material);
	--sj-primary-button-text: var(--color-navy);
	background: var(--color-navy);
	color: var(--color-white);
	outline: 2px solid var(--color-yellow);
	outline-offset: -3px;
}
.sj-service-card.e-con:has(a:focus-visible)::before,
.sj-service-card.e-con:has(a:focus-visible)::after { opacity: 1; }
.sj-page-body .elementor .sj-service-card.e-con:has(a:active) {
	--sj-service-icon: var(--color-navy);
	--sj-pixel-ink: var(--color-navy);
	--sj-primary-button-background: var(--color-navy);
	--sj-primary-button-material: var(--sj-citrus-noise), linear-gradient(var(--color-navy), var(--color-navy));
	--sj-primary-button-text: var(--color-white);
	background: var(--color-lime);
	color: var(--color-navy);
}
.sj-service-card.e-con:has(a:active)::before,
.sj-service-card.e-con:has(a:active)::after { opacity: 1; }
.sj-page-body .sj-service-card .elementor-heading-title { color: inherit; }

@media (max-width: 1100px) {
	:root { --sj-page-pad: 32px; }
}
@media (max-width: 1000px) {
	.sj-standard-page .sj-page-hero-inner:has(.sj-page-summary),
	.sj-page-body .elementor .sj-visitor-intro.e-con,
	.sj-page-body .sj-visitor-grid > .sj-visitor-card:only-child { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.sj-page-body .sj-visitor-intro > .elementor-widget-button { grid-column: auto; }
}
@media (max-width: 767px) {
	:root { --sj-page-pad: 20px; --sj-page-space: 56px; }
	.sj-standard-page .sj-page-hero,
	.sj-blog .sj-blog-hero,
	.elementor :is(.sj-about-hero, .sj-pricing-hero).e-con { padding: 32px 20px 40px; }
	.sj-standard-page .sj-page-title,
	.elementor .sj-pricing-hero .sj-pricing-title .elementor-heading-title { font-size: clamp(36px, 9vw, 48px); }
	.sj-standard-page:has(.sj-visitor-content) .sj-page-body-inner { width: 100%; border-inline: 0; }
	.sj-page-body .elementor .sj-visitor-grid.e-con { grid-template-columns: minmax(0, 1fr); }
	.sj-page-body .elementor .sj-visitor-card.e-con { padding-block: 36px; }
	.sj-page-body .sj-visitor-grid > .sj-visitor-card:nth-child(n) { border: 0; }
	.sj-page-body .sj-visitor-grid > .sj-visitor-card + .sj-visitor-card { border-top: 1px solid var(--sj-rule-ink); }
	.sj-page-body .sj-visitor-intro h2 { font-size: clamp(32px, 8vw, 40px); }
	.sj-page-body .sj-visitor-card h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	.sj-page-body .elementor .sj-service-card.e-con { transition: none; }
}