/* ---------------------------------------------------------------------------
   SCAACH modern homepage - the "modern pass" from the design canvas
   https://claude.ai/artifact/QKpUWasaPGrN7mq7y6aVDM

   Staging only for now (app2.scaach.com). Loaded by mu-plugin
   scaach-redesign.php; deployed with: node redesign/deploy.mjs

   Every rule hangs off an .sx* class that the page's own Elementor elements
   carry, so nothing here reaches pages that were not built for it - except
   the sidebar block at the bottom, which is site-wide on purpose.

   Elementor writes its layout through CSS variables on .e-con (--padding-*,
   --row-gap, --flex-direction ...). Setting those variables, rather than the
   properties, is what keeps Elementor's own rules and these from fighting.
   --------------------------------------------------------------------------- */

:root {
	--sx-bg: #0d0d0c;
	--sx-panel: #121211;
	--sx-line: #222220;
	--sx-line-2: #2a2a27;
	--sx-text: #f4f4f1;
	--sx-soft: #c9c9c4;
	--sx-muted: #a8a8a3;
	--sx-faint: #8f8f89;
	--sx-lime: #c5db1f;
	--sx-lime-hi: #ddeb6a;
	--sx-photo: #2c2e27;
	--sx-wide: 'Archivo', 'Arial Narrow', sans-serif;
	--sx-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sx-gutter: 64px;
	--sx-ease: cubic-bezier(.2, .7, .2, 1);
}

body.sx-page,
body.sx-page .page_wrap {
	background-color: var(--sx-bg);
}

/* ---- reset Elementor's spacing inside the redesign --------------------- */

.sx.e-con,
.sx .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--gap: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
}

.sx.e-con {
	--width: 100%;
	--content-width: 100%;
	background-color: var(--sx-bg);
	color: var(--sx-text);
	font-family: var(--sx-body);
	font-size: 16px;
	line-height: 1.6;
}

.sx .elementor-widget.elementor-widget,
.sx .elementor-widget.elementor-widget:not(:last-child) {
	margin: 0;
	margin-block-end: 0;
}

.sx .elementor-widget-text-editor p {
	margin: 0;
}

.sx a {
	color: inherit;
}

/* ---- type -------------------------------------------------------------- */

.sx .sx-kicker .elementor-heading-title,
.sx .sx-label .elementor-heading-title {
	font-family: var(--sx-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sx-faint);
}

.sx .sx-label .elementor-heading-title {
	font-size: 12px;
}

.sx .sx-display .elementor-heading-title {
	font-family: var(--sx-wide);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(44px, 6.4vw, 104px);
	line-height: .95;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--sx-text);
}

/* PROJECTS: the site's own heading face (DM Sans), capped at 40px - the
   size of the largest heading elsewhere on the site. */
.sx .sx-h2 .elementor-heading-title {
	font-family: var(--sx-body);
	font-weight: 700;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--sx-text);
}

.sx .sx-statement .elementor-heading-title {
	max-width: 1000px;
	font-family: var(--sx-wide);
	font-stretch: 112%;
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 52px);
	line-height: 1.1;
	letter-spacing: -.015em;
	text-transform: none;
	color: var(--sx-text);
}

.sx .sx-hl {
	color: var(--sx-lime);
}

/* ---- buttons ----------------------------------------------------------- */

.sx .sx-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--sx-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: background-color .25s, color .25s, border-color .25s;
}

.sx .sx-btn--lime .elementor-button {
	background-color: var(--sx-lime);
	border-color: var(--sx-lime);
	color: var(--sx-bg);
}

.sx .sx-btn--lime .elementor-button:hover,
.sx .sx-btn--lime .elementor-button:focus-visible {
	background-color: var(--sx-lime-hi);
	border-color: var(--sx-lime-hi);
	color: var(--sx-bg);
}

.sx .sx-btn--ghost .elementor-button {
	background-color: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
	font-weight: 400;
}

.sx .sx-btn--outline .elementor-button {
	background-color: transparent;
	border-color: #333330;
	color: var(--sx-text);
	font-weight: 400;
}

.sx .sx-btn--ghost .elementor-button:hover,
.sx .sx-btn--outline .elementor-button:hover,
.sx .sx-btn--ghost .elementor-button:focus-visible,
.sx .sx-btn--outline .elementor-button:focus-visible {
	background-color: var(--sx-text);
	border-color: var(--sx-text);
	color: var(--sx-bg);
}

.sx .sx-btn--dark .elementor-button {
	min-height: 56px;
	padding: 0 30px;
	background-color: var(--sx-bg);
	border-color: var(--sx-bg);
	color: var(--sx-text);
}

.sx .sx-btn--dark .elementor-button:hover,
.sx .sx-btn--dark .elementor-button:focus-visible {
	background-color: #2a2a27;
	border-color: #2a2a27;
	color: var(--sx-text);
}

/* the diagonal arrow, drawn in CSS so no icon library is needed */
.sx .sx-arrow .elementor-button-text::after,
.sx .sx-arrow-link a::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sx .sx-btns.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--row-gap: 12px;
	--column-gap: 12px;
	--width: auto;
}

/* ---- 1. hero ----------------------------------------------------------- */

.sx-hero.e-con {
	--justify-content: flex-end;
	min-height: 860px;
	background-color: #3a3c34;
}

.sx .sx-hero__inner.e-con {
	--padding-top: 200px;
	--padding-right: var(--sx-gutter);
	--padding-bottom: 56px;
	--padding-left: var(--sx-gutter);
	background-image: linear-gradient(to top, rgba(13, 13, 12, .9), rgba(13, 13, 12, .55) 55%, rgba(13, 13, 12, .3) 100%);
}

.sx-hero .sx-kicker .elementor-heading-title {
	margin-bottom: 24px;
	color: #f4f4f1;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

.sx .sx-hero__row.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: center;
	--row-gap: 24px;
	--column-gap: 48px;
	margin-top: 40px;
}

.sx .sx-lead {
	max-width: 420px;
	font-size: 17px;
	font-weight: 300;
	color: #e4e4df;
}

.sx .sx-hero__strip.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--row-gap: 12px;
	--column-gap: 12px;
	--padding-top: 20px;
	margin-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 13px;
	color: #cfcfc9;
}

.sx .sx-hero__strip a {
	color: #cfcfc9;
	text-decoration: none;
}

.sx .sx-hero__strip a:hover {
	color: var(--sx-lime);
}

/* ---- 2. clients -------------------------------------------------------- */

.sx-clients.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--row-gap: 16px;
	--column-gap: 56px;
	--padding-top: 40px;
	--padding-bottom: 40px;
	--padding-left: var(--sx-gutter);
	--padding-right: var(--sx-gutter);
	border-bottom: 1px solid var(--sx-line);
}

.sx .sx-client .elementor-heading-title {
	font-family: var(--sx-wide);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--sx-text);
}

/* ---- 3. work ----------------------------------------------------------- */

.sx-work.e-con {
	--padding-top: 128px;
	--padding-bottom: 96px;
	--padding-left: var(--sx-gutter);
	--padding-right: var(--sx-gutter);
}

/* scaach.com: the heading row on its own, above the page's existing grid */
.sx-work--head.e-con {
	--padding-bottom: 40px;
}

.sx-work--head .sx-work__head.e-con {
	margin-bottom: 0;
}

.sx .sx-work__head.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: flex-end;
	--row-gap: 32px;
	--column-gap: 32px;
	margin-bottom: 56px;
}

.sx .sx-work__head .sx-kicker .elementor-heading-title {
	margin-bottom: 16px;
}

.sx .sx-col.e-con {
	--width: auto;
}

.sx .sx-filters.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--row-gap: 6px;
	--column-gap: 6px;
	--width: auto;
}

.sx .sx-chips .e-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sx .sx-chips .e-filter .e-filter-item {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid #333330;
	background-color: transparent;
	color: var(--sx-soft);
	font-family: var(--sx-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.sx .sx-chips .e-filter .e-filter-item:hover {
	border-color: var(--sx-soft);
	color: var(--sx-text);
}

.sx .sx-chips .e-filter .e-filter-item[aria-pressed='true'] {
	background-color: var(--sx-text);
	border-color: var(--sx-text);
	color: var(--sx-bg);
	font-weight: 500;
}

/* Two filter groups - Sector (Commercial / Private) and Service
   (Construction / Design) - each labelled, with a rule between them, so it
   is plain they are separate choices. */
.sx .sx-filters.e-con {
	--align-items: center;
	--row-gap: 14px;
	--column-gap: 24px;
}

.sx .sx-fgroup.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--row-gap: 6px;
	--column-gap: 12px;
	--width: auto;
}

.sx .sx-fgroup.e-con + .sx-fgroup.e-con {
	--padding-left: 24px;
	border-left: 1px solid #333330;
}

.sx .sx-fgroup__label .elementor-heading-title {
	font-family: var(--sx-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sx-faint);
}

/* the editorial grid: one big card beside two small ones, sides alternating */
.sx .sx-grid .elementor-loop-container.elementor-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: 24px;
}

.sx .sx-grid .e-loop-item:nth-of-type(6n+1) { grid-column: 1 / 3; grid-row: span 2; }
.sx .sx-grid .e-loop-item:nth-of-type(6n+2),
.sx .sx-grid .e-loop-item:nth-of-type(6n+3) { grid-column: 3; }
.sx .sx-grid .e-loop-item:nth-of-type(6n+4) { grid-column: 2 / 4; grid-row: span 2; }
.sx .sx-grid .e-loop-item:nth-of-type(6n+5),
.sx .sx-grid .e-loop-item:nth-of-type(6n+6) { grid-column: 1; }

.sx-card.e-con {
	--flex-direction: column;
	--row-gap: 14px;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	height: 100%;
	color: var(--sx-text);
	text-decoration: none;
	background: none;
	border: 0;
}

.sx-card .sx-card__media.e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	position: relative;
	height: 230px;
	flex: 0 0 auto;
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--sx-photo);
	isolation: isolate;
}

.sx .sx-grid .e-loop-item:nth-of-type(3n+1) .sx-card__media.e-con {
	height: auto;
	min-height: 460px;
	flex: 1 1 auto;
}

.sx-card .sx-card__photo.e-con {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	transition: transform .7s var(--sx-ease);
}

.sx-card:hover .sx-card__photo.e-con {
	transform: scale(1.04);
}

.sx-card .sx-card__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	width: auto;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: rgba(13, 13, 12, .72);
}

.sx-card .sx-card__tag ul,
.sx-card .sx-card__meta ul {
	margin: 0;
	padding: 0;
}

.sx-card .sx-card__tag .elementor-icon-list-text,
.sx-card .sx-card__tag .elementor-post-info__terms-list-item {
	font-family: var(--sx-body);
	font-size: 12px;
	line-height: 1.3;
	color: var(--sx-text);
}

.sx-card .sx-card__go {
	position: absolute;
	top: 16px;
	right: 16px;
	width: auto;
}

.sx-card .sx-card__go span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
	transition: background-color .3s, color .3s, border-color .3s;
}

.sx-card:hover .sx-card__go span {
	background-color: var(--sx-lime);
	border-color: var(--sx-lime);
	color: var(--sx-bg);
}

.sx-card .sx-card__text.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: baseline;
	--row-gap: 4px;
	--column-gap: 12px;
}

.sx-card .sx-card__title .elementor-heading-title {
	font-family: var(--sx-wide);
	font-stretch: 112%;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	color: var(--sx-text);
}

.sx .sx-grid .e-loop-item:nth-of-type(3n+1) .sx-card__title .elementor-heading-title {
	font-size: 26px;
	line-height: 1.15;
}

.sx-card .sx-card__meta .elementor-icon-list-text,
.sx-card .sx-card__meta .elementor-post-info__terms-list-item {
	font-family: var(--sx-body);
	font-size: 14px;
	color: var(--sx-faint);
}

.sx .sx-center.e-con {
	--flex-direction: row;
	--justify-content: center;
	margin-top: 56px;
}

/* ---- 4. about ---------------------------------------------------------- */

.sx-about.e-con {
	--padding-top: 128px;
	--padding-bottom: 128px;
	--padding-left: var(--sx-gutter);
	--padding-right: var(--sx-gutter);
	border-top: 1px solid var(--sx-line);
}

.sx-about .sx-kicker .elementor-heading-title {
	margin-bottom: 24px;
}

/* the widget reset above is (0,3,0); this has to beat it */
.sx.sx-about .sx-statement.elementor-widget {
	margin-bottom: 64px;
}

.sx .sx-about__row.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--row-gap: 48px;
	--column-gap: 48px;
}

.sx .sx-about__photo {
	flex: 1 1 360px;
	min-width: 0;
}

.sx .sx-about__photo img {
	display: block;
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: 20px;
}

.sx .sx-about__copy.e-con {
	--justify-content: space-between;
	--row-gap: 40px;
	--width: auto;
	flex: 1 1 380px;
	min-width: 0;
}

.sx .sx-about__copy .sx-lead {
	max-width: none;
	font-size: 18px;
	color: var(--sx-soft);
}

.sx .sx-stats.e-con {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--sx-line-2);
}

.sx .sx-stat.e-con {
	--padding-top: 24px;
	--padding-right: 16px;
	--padding-left: 16px;
	--row-gap: 8px;
}

.sx .sx-stat.e-con:first-child {
	--padding-left: 0px;
}

.sx .sx-stat.e-con + .sx-stat.e-con {
	border-left: 1px solid var(--sx-line-2);
}

.sx .sx-stat__n .elementor-heading-title {
	font-family: var(--sx-wide);
	font-stretch: 112%;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	color: var(--sx-text);
}

.sx .sx-stat__l {
	font-size: 13px;
	line-height: 1.45;
	color: var(--sx-faint);
}

/* ---- 5. how we work ---------------------------------------------------- */

.sx-process.e-con {
	--padding-bottom: 128px;
	--padding-left: var(--sx-gutter);
	--padding-right: var(--sx-gutter);
}

.sx-process .sx-kicker .elementor-heading-title {
	margin-bottom: 32px;
}

.sx .sx-steps.e-con {
	border-top: 1px solid var(--sx-line-2);
}

.sx .sx-step.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: baseline;
	--row-gap: 8px;
	--column-gap: 40px;
	--padding-top: 28px;
	--padding-bottom: 28px;
	border-bottom: 1px solid var(--sx-line-2);
}

.sx .sx-step__n {
	width: 56px;
	flex: 0 0 56px;
}

.sx .sx-step__n .elementor-heading-title {
	font-family: var(--sx-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--sx-faint);
}

.sx .sx-step__t {
	flex: 1 1 260px;
}

.sx .sx-step__t .elementor-heading-title {
	font-family: var(--sx-wide);
	font-stretch: 125%;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sx-text);
}

.sx .sx-step__d {
	flex: 1 1 320px;
	color: var(--sx-muted);
}

.sx .sx-step__d a {
	color: var(--sx-lime);
	font-weight: 500;
}

.sx .sx-step__d a:hover {
	color: var(--sx-lime-hi);
}

/* ---- 6. call to action ------------------------------------------------- */

.sx-cta-wrap.e-con {
	--padding-bottom: 128px;
	--padding-left: var(--sx-gutter);
	--padding-right: var(--sx-gutter);
}

.sx .sx-cta.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: flex-end;
	--row-gap: 32px;
	--column-gap: 32px;
	--padding-top: 80px;
	--padding-bottom: 80px;
	--padding-left: 56px;
	--padding-right: 56px;
	border-radius: 28px;
	background-color: var(--sx-lime);
	color: var(--sx-bg);
}

.sx .sx-cta__h .elementor-heading-title {
	font-family: var(--sx-wide);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(40px, 5.4vw, 88px);
	line-height: .95;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--sx-bg);
}

.sx .sx-cta__act.e-con {
	--row-gap: 16px;
	--align-items: flex-start;
	--width: auto;
}

.sx .sx-cta__call a {
	color: var(--sx-bg);
	font-size: 15px;
}

/* ---- 7. footer --------------------------------------------------------- */

.sx-footer.e-con {
	--padding-top: 56px;
	--padding-bottom: 32px;
	--padding-left: var(--sx-gutter);
	--padding-right: var(--sx-gutter);
	border-top: 1px solid var(--sx-line);
}

.sx .sx-footer__top.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--row-gap: 40px;
	--column-gap: 40px;
}

.sx .sx-footer__brand.e-con {
	--row-gap: 14px;
	--width: auto;
	font-size: 14px;
}

.sx .sx-brand .elementor-heading-title {
	font-family: var(--sx-wide);
	font-stretch: 125%;
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	color: var(--sx-lime);
}

.sx .sx-footer__contact a {
	color: var(--sx-text);
	text-decoration: none;
}

.sx .sx-footer__contact a:hover {
	color: var(--sx-lime);
}

.sx .sx-footer__contact p + p {
	margin-top: 10px;
}

.sx .sx-footer__address {
	color: var(--sx-faint);
}

.sx .sx-footer__navs.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--column-gap: 48px;
	--row-gap: 32px;
	--width: auto;
}

.sx .sx-footer__nav {
	font-size: 15px;
}

.sx .sx-footer__nav p {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sx .sx-footer__nav a {
	color: var(--sx-text);
	text-decoration: none;
}

.sx .sx-footer__nav a:hover {
	color: var(--sx-lime);
}

.sx .sx-footer__nav .sx-flabel {
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sx-faint);
}

.sx .sx-footer__bottom.e-con {
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--row-gap: 8px;
	--column-gap: 8px;
	--padding-top: 20px;
	margin-top: 56px;
	border-top: 1px solid var(--sx-line);
	font-size: 13px;
	color: var(--sx-faint);
}

/* ---- tablet: uniform two-column grid ----------------------------------- */

@media (max-width: 1024px) {
	:root {
		--sx-gutter: 40px;
	}

	.sx .sx-grid .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sx .sx-grid .e-loop-item.e-loop-item {
		grid-column: auto;
		grid-row: auto;
	}

	.sx .sx-grid .e-loop-item:nth-of-type(3n+1) .sx-card__media.e-con {
		height: 300px;
		min-height: 0;
		flex: 0 0 auto;
	}

	.sx-card .sx-card__media.e-con {
		height: 300px;
	}

	.sx .sx-grid .e-loop-item:nth-of-type(3n+1) .sx-card__title .elementor-heading-title {
		font-size: 19px;
	}
}

/* ---- phone ------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--sx-gutter: 20px;
	}

	.sx-hero.e-con {
		min-height: 640px;
	}

	.sx .sx-hero__inner.e-con {
		--padding-top: 140px;
		--padding-bottom: 40px;
	}

	.sx-work.e-con,
	.sx-about.e-con {
		--padding-top: 80px;
		--padding-bottom: 72px;
	}

	.sx-process.e-con,
	.sx-cta-wrap.e-con {
		--padding-bottom: 80px;
	}

	.sx-work--head.e-con {
		--padding-bottom: 28px;
	}

	/* phones: one group per line, labels in a column so the chips line up */
	.sx .sx-filters.e-con {
		--flex-direction: column;
		--align-items: flex-start;
	}

	.sx .sx-fgroup.e-con + .sx-fgroup.e-con {
		--padding-left: 0px;
		border-left: 0;
	}

	.sx .sx-fgroup__label {
		width: 64px;
	}

	.sx .sx-grid .elementor-loop-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sx-card .sx-card__media.e-con,
	.sx .sx-grid .e-loop-item:nth-of-type(3n+1) .sx-card__media.e-con {
		height: 260px;
	}

	.sx .sx-about__photo img {
		height: 300px;
	}

	.sx .sx-stat.e-con {
		--padding-right: 10px;
		--padding-left: 10px;
	}

	.sx .sx-stat__n .elementor-heading-title {
		font-size: 32px;
	}

	.sx .sx-step__t .elementor-heading-title {
		font-size: 24px;
	}

	/* the wide face needs room: size the two big lines to the screen, so the
	   longest words (CONFIDENCE., SOMETHING.) always fit */
	.sx .sx-display .elementor-heading-title {
		font-size: 9.4vw;
	}

	.sx .sx-cta__h .elementor-heading-title {
		font-size: 8.6vw;
	}

	.sx .sx-cta.e-con {
		--padding-top: 48px;
		--padding-bottom: 48px;
		--padding-left: 24px;
		--padding-right: 24px;
		border-radius: 22px;
	}
}

/* ---- scaach.com hero: the new statements inside the ORIGINAL hero --------
   The live hero keeps its project slideshow and scroll-down animation; only
   its three lines of text are new. They sit in the original's 45% text
   column, set in the site's own DM Sans like its other headings. The
   extra .elementor-widget outranks Elementor's own heading colour rule. */

.elementor-widget.sxh-kicker .elementor-heading-title {
	margin: 0 0 16px;
	font-family: var(--sx-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #f4f4f1;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

.elementor-widget.sxh-title .elementor-heading-title {
	margin: 0;
	font-family: var(--sx-body); /* the site's heading face, as Michael chose */
	font-weight: 700;
	/* Two lines, one sentence each, never wrapping. The longer one, BUILD
	   WITH CONFIDENCE., is 12.4em wide; the text column is about a third of
	   the screen on desktop and tablet (measured 26 Oct at 800-1440px), so
	   2.4vw fits with a few percent to spare. */
	font-size: clamp(18px, 2.4vw, 40px);
	line-height: 1.12;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-transform: uppercase;
	color: #f4f4f1;
}

/* ---- phones and tablets: a slim, transparent header ---------------------
   Asked for 26 Oct: the black band with the big SCAACH logo at the top of
   the page was too tall - make it slimmer, transparent, smaller logo, on
   every page. It was a 20px header strip, then on most pages a logo-only
   band (logo at 90% width, hidden on desktop), and a navy box behind the
   menu button. Desktop is untouched: these elements only show below 1025px.

   All pages: no strip, and the menu button (fixed, header template 7282)
   without its box, a little higher up. */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-element.elementor-element-616a02c {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		min-height: 0;
		overflow: visible;
	}

	body .elementor-location-header .elementor-element.elementor-element-714d8408 {
		top: 14px;
	}

	body .elementor-location-header .elementor-element.elementor-element-714d8408 > .elementor-widget-container {
		background-color: transparent;
	}

	/* Homepage: the photo starts at the top and the logo floats over it, with
	   a soft fade so logo and menu read on bright photos. */
	body.sx-page .elementor-7305 .elementor-element.elementor-element-4dd1e4f {
		--padding-top: 0px;
		position: relative;
	}

	body.sx-page .elementor-7305 .elementor-element.elementor-element-4dd1e4f::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 130px;
		background: linear-gradient(rgba(13, 13, 12, .6), rgba(13, 13, 12, 0));
		z-index: 2;
		pointer-events: none;
	}

	body.sx-page .elementor-7305 .elementor-element.elementor-element-ad7fbc6 {
		position: absolute;
		top: 29px;   /* measured: logo centre level with the menu icon's, as on the other pages */
		left: 17px;
		width: 136px; /* the widget has 3px padding a side; this makes the logo itself 130px */
		max-width: 136px;
		margin: 0;
		z-index: 3;
	}

	body.sx-page .elementor-7305 .elementor-element.elementor-element-ad7fbc6 img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* Portfolio, Our Services, Our Products, Who we are, Contact, Reports:
	   their logo-only band (first container on each page) becomes a slim bar
	   with the same 130px logo on the left, level with the menu button. It
	   stays in the flow - floating it would put it over the page's heading.
	   The project pages have no such band; their photo now starts at the top.
	   Selectors are body + .elementor + 2 classes = (0,3,1), to outrank
	   Elementor's own .elementor-NNNN .elementor-element.elementor-element-X
	   (0,3,0). Without the .elementor they lose and nothing changes. */
	body .elementor .elementor-element.elementor-element-dcddcc5,
	body .elementor .elementor-element.elementor-element-06a6f35,
	body .elementor .elementor-element.elementor-element-67b86b3,
	body .elementor .elementor-element.elementor-element-f1b0200,
	body .elementor .elementor-element.elementor-element-c801190,
	body .elementor .elementor-element.elementor-element-4952a8e {
		--padding-top: 29px; /* logo centre level with the menu icon's, 39px down (measured) */
		--padding-bottom: 16px;
		--padding-left: 20px;
		--padding-right: 20px;
		--align-items: flex-start;
		background: transparent;
	}

	body .elementor .elementor-element.elementor-element-e550b76,
	body .elementor .elementor-element.elementor-element-d12e934,
	body .elementor .elementor-element.elementor-element-db710fc,
	body .elementor .elementor-element.elementor-element-a48a49a,
	body .elementor .elementor-element.elementor-element-afb509a,
	body .elementor .elementor-element.elementor-element-2d1a155 {
		width: 130px;
		max-width: 130px;
		margin: 0;
		text-align: left;
	}

	body .elementor .elementor-element.elementor-element-e550b76 img,
	body .elementor .elementor-element.elementor-element-d12e934 img,
	body .elementor .elementor-element.elementor-element-db710fc img,
	body .elementor .elementor-element.elementor-element-a48a49a img,
	body .elementor .elementor-element.elementor-element-afb509a img,
	body .elementor .elementor-element.elementor-element-2d1a155 img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/* "Lead with excellence." - the second line, not bold */
.elementor-widget.sxh-title .sxh-title__sub {
	font-weight: 400;
}

.elementor-widget.elementor-widget-text-editor.sxh-lead {
	font-family: var(--sx-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: #e4e4df;
}

@media (max-width: 767px) {
	/* phones: the column is about 90% of the screen */
	.elementor-widget.sxh-title .elementor-heading-title {
		font-size: 6.8vw;
	}
}

/* ---- sidebar (header template 7282), site-wide --------------------------
   Quieter: the same structure and behaviour, in the new type and with pill
   buttons. Colours only - widths and the collapse animation are untouched. */

.elementor-location-header .navigation .elementor-icon-list-text,
.elementor-location-header .collapse-button .elementor-button {
	font-family: var(--sx-body);
}

.elementor-location-header .collapse-button .elementor-button {
	border-radius: 999px;
	font-weight: 600;
}

.elementor-location-header .elementor-element.collapse-button:last-of-type .elementor-button {
	background-color: transparent;
	border: 1px solid #333330;
	color: var(--sx-text);
}

@media (prefers-reduced-motion: reduce) {
	.sx-card .sx-card__photo.e-con,
	.sx .sx-btn .elementor-button {
		transition: none;
	}

	.sx-card:hover .sx-card__photo.e-con {
		transform: none;
	}
}