/**
 * SJ Morse — Services page (Figma frame 15:67)
 *
 * Scoped under .sj-morse-services so it can't leak into the Home / other
 * pages. Conventions match the Home build (Barlow Condensed titles,
 * Source Sans Pro body, #BEC852 CTA, #333638 dark grid).
 *
 * Header + footer styles come from figma-32-3.css and must NOT be touched.
 */

.sj-morse-services {
	--sj-svc-page-canvas: 1440px;
	--sj-svc-page-bg-light: #e7e7e7;
	--sj-svc-page-bg-dark: #333638;
	--sj-svc-page-bg-black: #0a0000;
	--sj-svc-page-cta: #bec852;
}

/* Body background matches the black CTA band so dark sections butt together
   cleanly when no border is drawn between them. */
body.sj-morse-services {
	background-color: #0a0000;
}

/* =========================================================================
   Hero — Figma frame 15:67 hero rectangle 1440 × 884.
   Background image: hero-micron-bg.jpg (same as Home; avoid tall service-hero.jpg + cover zoom)
   Overlay: #3C3C3C @ 50% + top band (style.css)
   Title group X 176 Y 184, two H1 lines, gap 38 (Barlow Condensed Bold 96/115)
   Body @ X 127 Y 517, W 1224 (Source Sans Pro Regular 32/50, #fff)
   CTA  @ X 546 Y 668, 328 × 70, fill #BEC852
   ========================================================================= */
.sj-morse-services .sj-svc-page-hero.elementor-section {
	position: relative;
	overflow: hidden;
	min-height: 884px;
}

/* Background on section — slightly zoomed out vs cover (shows more of the photo). */
.sj-morse-services .sj-svc-page-hero.elementor-section,
.sj-morse-services .sj-svc-page-hero.elementor-section.elementor-section-height-min-height {
	background-color: #333638 !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.sj-morse-services .sj-svc-hero-col > .elementor-widget-wrap,
.sj-morse-services .sj-svc-hero-col.elementor-column > .elementor-element-populated {
	background-color: transparent !important;
	max-width: var(--sj-svc-page-canvas);
	margin-left: auto;
	margin-right: auto;
}

/* Clear Elementor's default 20px widget bottom-margin so JSON _margin values
   are the only source of vertical rhythm. */
.sj-morse-services .sj-svc-hero-col .elementor-widget {
	margin-bottom: 0 !important;
}

.sj-morse-services .sj-svc-hero-h .elementor-heading-title {
	font-family: "Barlow Condensed", sans-serif !important;
	font-weight: 700 !important;
	font-size: 96px;
	line-height: 1;
	letter-spacing: 2.88px;
	color: #ffffff !important;
	text-transform: uppercase;
	margin: 0;
}

.sj-morse-services .sj-svc-hero-body {
	max-width: 1224px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.sj-morse-services .sj-svc-hero-body p {
	font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important;
	font-weight: 400 !important;
	font-size: 32px;
	line-height: 50px;
	color: #ffffff !important;
	margin: 0;
	text-align: center;
}

/* CTA — Figma rectangle 328 × 70, fill #BEC852, square corners,
   Open Sans Condensed Bold 40 uppercase, centred. */
.sj-morse-services .sj-svc-hero-cta,
.sj-morse-services .sj-svc-bottom-cta {
	text-align: center;
}

.sj-morse-services .sj-svc-hero-cta .elementor-button,
.sj-morse-services .sj-svc-bottom-cta .elementor-button,
.sj-morse-services .sj-svc-hero-cta .elementor-button .elementor-button-text,
.sj-morse-services .sj-svc-bottom-cta .elementor-button .elementor-button-text {
	background-color: var(--sj-svc-page-cta) !important;
	color: #000000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: "Open Sans Condensed", sans-serif !important;
	font-weight: 700 !important;
	font-size: 40px !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	box-shadow: none;
	box-sizing: border-box;
}

.sj-morse-services .sj-svc-hero-cta .elementor-button,
.sj-morse-services .sj-svc-bottom-cta .elementor-button {
	width: 328px !important;
	min-height: 70px !important;
	height: 70px !important;
	padding: 0 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.sj-morse-services .sj-svc-hero-cta .elementor-button .elementor-button-text,
.sj-morse-services .sj-svc-bottom-cta .elementor-button .elementor-button-text {
	background: transparent !important;
	padding: 0 !important;
}

.sj-morse-services .sj-svc-hero-cta .elementor-button:hover,
.sj-morse-services .sj-svc-bottom-cta .elementor-button:hover {
	background-color: #aebb43 !important;
	color: #000000 !important;
}

/* =========================================================================
   Intro — light grey band, left-aligned title + supporting body.
   ========================================================================= */
.sj-morse-services .sj-svc-intro.elementor-section {
	background-color: var(--sj-svc-page-bg-light) !important;
}

.sj-morse-services .sj-svc-intro > .elementor-container {
	max-width: var(--sj-svc-page-canvas);
	margin-left: auto;
	margin-right: auto;
}

.sj-morse-services .sj-svc-intro-title .elementor-heading-title {
	font-family: "Barlow Condensed", sans-serif !important;
	font-weight: 700 !important;
	color: #000000 !important;
	text-transform: uppercase;
	letter-spacing: 1.32px;
	margin: 0;
}

.sj-morse-services .sj-svc-intro-body p {
	font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important;
	color: #000000 !important;
	max-width: 1120px;
	margin: 0;
}

/* =========================================================================
   Services grid — dark band, 6 cards in a 2 × 3 layout.
   Each card stacks image (top) + caption (bottom).
   ========================================================================= */
.sj-morse-services .sj-svc-grid.elementor-section {
	background-color: var(--sj-svc-page-bg-dark) !important;
}

.sj-morse-services .sj-svc-grid > .elementor-container {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: transparent !important;
}

.sj-morse-services .sj-svc-grid-col > .elementor-widget-wrap,
.sj-morse-services .sj-svc-grid-col.elementor-column > .elementor-element-populated {
	background-color: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Inner rows: Elementor 3+ removed .elementor-row, so flex/gap must apply
 * to .elementor-container (and .elementor-row when present for legacy).
 */
.sj-morse-services .sj-svc-grid-row.elementor-section,
.sj-morse-services .sj-svc-grid-row > .elementor-container {
	background-color: transparent !important;
}

.sj-morse-services .sj-svc-grid-row > .elementor-container,
.sj-morse-services .sj-svc-grid-row > .elementor-container > .elementor-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	column-gap: 108px;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	padding-left: 32px;
	padding-right: 32px;
}

.sj-morse-services .sj-svc-grid-row.elementor-section > .elementor-container,
.sj-morse-services .sj-svc-grid-row > .elementor-container > .elementor-row {
	max-width: none !important;
	width: 100%;
}

/* Each card column — Figma image 520×446, sit on the left, do not stretch. */
.sj-morse-services .sj-svc-card {
	flex: 0 0 520px;
	width: 520px !important;
	max-width: 520px !important;
	box-sizing: border-box;
	background-color: transparent !important;
}

.sj-morse-services .sj-svc-card > .elementor-widget-wrap,
.sj-morse-services .sj-svc-card.elementor-column > .elementor-element-populated {
	background-color: transparent !important;
	padding: 0 !important;
}

/* Image-box internals — same defensive pattern as the home Services cards. */
.sj-morse-services .sj-svc-card .elementor-widget-image-box {
	width: 100%;
	max-width: 100%;
	margin-bottom: 0 !important;
}

.sj-morse-services .sj-svc-card .elementor-widget-image-box .elementor-widget-container {
	width: 100%;
	max-width: 100%;
}

.sj-morse-services .sj-svc-card .elementor-widget-image-box .elementor-image-box-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	box-sizing: border-box;
	text-align: left;
}

/* Figma: each image is exactly 520 × 446, sits on the left of the card. */
.sj-morse-services .sj-svc-card .elementor-image-box-img {
	display: block !important;
	width: 520px !important;
	max-width: 100% !important;
	height: 446px !important;
	margin: 0 !important;
	overflow: hidden;
	flex-shrink: 0;
	align-self: flex-start;
	box-sizing: border-box;
}

.sj-morse-services .sj-svc-card .elementor-image-box-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sj-morse-services .sj-svc-card .elementor-image-box-content {
	width: 470px;
	max-width: 100%;
	padding: 6px 0 0 8px;
	margin: 0;
	background-color: transparent !important;
	text-align: left;
}

/* Figma caption: Source Sans Pro SemiBold 32 / 49, letter-spacing  0.96px, white. */
.sj-morse-services .sj-svc-card .elementor-image-box-title {
	font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important;
	font-weight: 600 !important;
	font-size: 32px;
	line-height: 49px;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 !important;
}

/*
 * Hover — dim the photo and reveal the Image Box description (same as Home).
 * Descriptions can stay empty in Elementor until copy is ready.
 */
.sj-morse-services .sj-svc-card .elementor-widget-image-box .elementor-image-box-wrapper {
	position: relative;
}

.sj-morse-services .sj-svc-card .elementor-image-box-img {
	position: relative;
	cursor: pointer;
}

.sj-morse-services .sj-svc-card .elementor-image-box-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 1;
}

.sj-morse-services .sj-svc-card .elementor-image-box-wrapper:hover .elementor-image-box-img::after {
	opacity: 1;
}

.sj-morse-services .sj-svc-card .elementor-image-box-description {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 520px;
	max-width: 100%;
	height: 446px;
	margin: 0;
	padding: 68px 56px 0;
	display: block;
	text-align: center;
	font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important;
	font-weight: 400 !important;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.5px;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	pointer-events: none;
	z-index: 2;
	box-sizing: border-box;
}

.sj-morse-services .sj-svc-card .elementor-image-box-description p {
	width: 100%;
	margin: 0;
	text-align: center;
}

.sj-morse-services .sj-svc-card .elementor-image-box-wrapper:hover .elementor-image-box-description:not(:empty) {
	opacity: 1;
	visibility: visible;
}

/* =========================================================================
   Bottom CTA — dark band, centred Request-a-Quote button.
   White hairline borders sit on the top + bottom edges per Figma.
   ========================================================================= */
.sj-morse-services .sj-svc-cta.elementor-section,
.sj-morse-services .sj-svc-cta {
	background-color: var(--sj-svc-page-bg-black) !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 2px solid #ffffff !important;
	border-bottom: 2px solid #ffffff !important;
}

.sj-morse-services .sj-svc-cta-col {
	text-align: center;
}

.sj-morse-services .sj-svc-cta-col > .elementor-widget-wrap {
	background-color: transparent !important;
	align-items: center;
	justify-content: center;
}

.sj-morse-services .sj-svc-bottom-cta {
	text-align: center;
	margin: 0 !important;
}

/* Make sure the button itself has no inherited border/outline either. */
.sj-morse-services .sj-svc-hero-cta .elementor-button,
.sj-morse-services .sj-svc-bottom-cta .elementor-button {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.sj-morse-services .sj-svc-hero-cta .elementor-button:focus,
.sj-morse-services .sj-svc-bottom-cta .elementor-button:focus {
	outline: 0 !important;
	box-shadow: none !important;
}

/* =========================================================================
   Responsive — collapse to a single column under the 1440 design width.
   ========================================================================= */
@media (max-width: 1300px) {
	.sj-morse-services .sj-svc-grid-row > .elementor-container,
	.sj-morse-services .sj-svc-grid-row > .elementor-container > .elementor-row {
		column-gap: 40px;
		padding-left: 32px;
		padding-right: 32px;
	}
	.sj-morse-services .sj-svc-card {
		flex: 1 1 0 !important;
		width: auto !important;
		max-width: 520px !important;
	}
	.sj-morse-services .sj-svc-card .elementor-image-box-img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 520 / 446;
	}
	.sj-morse-services .sj-svc-card .elementor-image-box-content {
		width: 100%;
	}
	.sj-morse-services .sj-svc-card .elementor-image-box-description {
		width: 100% !important;
		height: auto;
		aspect-ratio: 520 / 446;
	}
}

@media (max-width: 1200px) {
	.sj-morse-services .sj-svc-intro-col > .elementor-element-populated {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

@media (max-width: 767px) {
	.sj-morse-services .sj-svc-hero-h .elementor-heading-title {
		font-size: clamp(48px, 10vw, 72px) !important;
		line-height: 1.05 !important;
	}
	.sj-morse-services .sj-svc-intro-title .elementor-heading-title {
		font-size: clamp(28px, 6vw, 40px) !important;
	}
	.sj-morse-services .sj-svc-grid-row > .elementor-container,
	.sj-morse-services .sj-svc-grid-row > .elementor-container > .elementor-row {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: wrap !important;
		row-gap: 40px;
		column-gap: 0;
	}
	.sj-morse-services .sj-svc-card {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.sj-morse-services .sj-svc-card .elementor-image-box-img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 520 / 446;
	}
	.sj-morse-services .sj-svc-card .elementor-image-box-title {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}