/* ==========================================================================
   EM3 Industries - hub (/industries/) + the nine industry pages.
   Markup: inc/industries.php. Loaded WITH resources.css (hero/breadcrumb/CTA
   chrome) + case-studies.css (proof cards). Uses brand.css tokens/components.

   Section rhythm: dark hero + reality / white challenges / dark systems /
   white pillars / dark proof / white compliance / dark experts / white
   resources + FAQ / dark CTA. All anchors declare their own hover colours at
   >= (0,2,0) (reset.css + Elementor gotcha family).
   ========================================================================== */

/* ---- Section heading group ---- */
/* Full width (Sam, 2026-06-12): headlines + their intro paragraphs span the
   1180px content column, matching the full-width hero-headline house rule. */
.em3-ind-sechead {
	max-width: var(--em3-maxw);
	margin-bottom: 44px;
}
.em3-ind-sechead h2 {
	margin: 14px 0 0;
}
.em3-ind-sechead__intro {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--em3-ink-muted);
}
.on-light .em3-ind-sechead__intro {
	color: var(--em3-charcoal);
}

/* ---- 1. Hero ---- */
.em3-ind-hero {
	padding-bottom: var(--em3-space-3);
}
.em3-ind-hero__title {
	margin: 14px 0 0;
	max-width: var(--em3-maxw); /* full-width hero headline (house rule) */
}
.em3-ind-hero__sub {
	margin: 20px 0 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--em3-ink-muted);
	/* Full width like the headline (was 720px). */
	max-width: var(--em3-maxw);
}
.em3-ind-hero__actions {
	margin-top: 34px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.em3-ind-hero__actions .em3-btn-primary,
.em3-ind-hero__actions .em3-btn-ghost {
	min-height: 58px;
}

/* ---- 2. Sector reality (dark stat band) ---- */
.em3-ind-reality {
	padding-top: 0;
}
.em3-ind-reality .em3-ind-sechead {
	margin-bottom: 36px;
}
.em3-ind-reality__stats.em3-stat-grid,
.em3-ind-hubstats__grid.em3-stat-grid {
	grid-template-columns: repeat(var(--em3-ind-statcols, 4), 1fr);
	gap: 28px;
	padding: 36px 28px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius-card);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}
.em3-ind-stat .em3-stat-num {
	font-size: clamp(34px, 3.6vw, 52px);
	color: var(--em3-accent-hot);
}
.em3-ind-stat .em3-stat-label {
	max-width: 220px;
}
.em3-ind-reality__source {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--em3-ink-dim);
}

/* ---- 3. Challenges (white numbered cards) ---- */
.em3-ind-challenges__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.em3-ind-challenge {
	position: relative;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	padding: 26px 24px 28px;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.em3-ind-challenge:hover {
	transform: translateY(-4px);
	border-color: rgba(46, 93, 255, 0.4);
	box-shadow: 0 30px 60px -28px rgba(10, 24, 88, 0.28);
}
.em3-ind-challenge__num {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--em3-accent);
	margin-bottom: 14px;
}
.em3-ind-challenge__title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--em3-ink-navy);
}
.em3-ind-challenge__body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--em3-charcoal);
}

/* ---- 4. What we engineer (dark, the centre of gravity) ---- */
.em3-ind-systems__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.em3-ind-system {
	position: relative;
	padding: 22px 24px 24px 28px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
	transition: border-color 0.3s, background 0.3s;
}
.em3-ind-system::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	background: var(--em3-accent);
	opacity: 0.65;
}
.em3-ind-system:hover {
	border-color: rgba(106, 138, 255, 0.5);
}
.em3-ind-system__title {
	margin: 0 0 8px;
	font-size: 17.5px;
	line-height: 1.3;
	color: var(--em3-ink);
}
.em3-ind-system__body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--em3-ink-dim);
}

/* ---- 5. Service pillars (white linked cards) ---- */
.em3-ind-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.em3-ind-pillar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	padding: 28px 26px 30px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.em3-ind-pillar:hover,
.em3-ind-pillar:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(46, 93, 255, 0.4);
	box-shadow: 0 30px 60px -28px rgba(10, 24, 88, 0.28);
	color: inherit;
}
.em3-ind-pillar__icon {
	width: 28px;
	height: 28px;
	margin-bottom: 4px;
}
.em3-ind-pillar__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	color: var(--em3-ink-navy);
}
.em3-ind-pillar__body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--em3-charcoal);
}
.em3-ind-pillar__cta {
	margin-top: auto;
	padding-top: 8px;
	font-size: 14px;
}
.em3-ind-pillar:hover .em3-ind-pillar__cta {
	color: var(--em3-ink-navy);
	gap: 12px;
}

/* ---- 6. Proof (dark; cards come from case-studies.css) ---- */
.em3-ind-proof__cards {
	margin-bottom: 8px;
}
.em3-ind-proof__all {
	margin-top: 28px;
}
.em3-ind-proof__all .em3-link {
	color: var(--em3-accent-hot);
}
.em3-ind-proof__all .em3-link:hover,
.em3-ind-proof__all .em3-link:focus {
	color: var(--em3-white);
}
.em3-ind-proof__fallback {
	color: var(--em3-ink-dim);
}

/* ---- 7. Compliance drivers (white) ---- */
.em3-ind-compliance__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.em3-ind-comp {
	position: relative;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	padding: 24px 22px 26px;
}
.em3-ind-comp::before {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	background: var(--em3-accent);
	margin-bottom: 16px;
}
.em3-ind-comp__title {
	margin: 0 0 8px;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--em3-ink-navy);
}
.em3-ind-comp__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--em3-charcoal);
}

/* ---- 8. Sector experts (dark) ---- */
.em3-ind-experts__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.em3-ind-expert {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius-card);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
	padding: 20px 20px 22px;
}
.em3-ind-expert__media {
	margin: 0 0 14px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--em3-radius);
	background: var(--em3-bg);
}
.em3-ind-expert__media .em3-ind-expert__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.em3-ind-expert__mono,
.em3-ind-expert__rolemark {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin-bottom: 14px;
	border-radius: var(--em3-radius);
	background: rgba(46, 93, 255, 0.12);
	color: var(--em3-accent-hot);
	font-size: 42px;
	font-weight: 700;
}
.em3-ind-expert__rolemark svg {
	width: 44px;
	height: 44px;
}
.em3-ind-expert--role {
	border-style: dashed;
}
.em3-ind-expert__name {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--em3-ink);
}
.em3-ind-expert__role {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--em3-ink-dim);
}
.em3-ind-experts__cta {
	margin-top: 36px;
}

/* ---- 9. Related resources (white) + sector FAQ ---- */
.em3-ind-resources__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.em3-ind-rescard {
	display: flex;
}
/* Native report/webinar cards inside the industry resources grid: stretch to
   the row and keep their archive look (their own stylesheets are loaded). */
.em3-ind-resources__grid .em3-rep-card,
.em3-ind-resources__grid .em3-web-card {
	display: flex;
}
.em3-ind-resources__grid .em3-rep-card__link,
.em3-ind-resources__grid .em3-web-card__link {
	width: 100%;
}
/* Equal media height across all three card types in the Related resources grid
   (Sam, 2026-06-12): the report cover panel is the reference, the webinar +
   article photos match it so the row reads as one set. */
.em3-ind-resources__grid .em3-rep-card__coverwrap {
	min-height: 0;
	height: 232px;
	padding: 24px 28px;
}
.em3-ind-resources__grid .em3-rep-card__cover {
	max-height: 100%;
	max-width: 58%;
}
.em3-ind-resources__grid .em3-web-card__media,
.em3-ind-resources__grid .em3-ind-rescard__media {
	aspect-ratio: auto;
	height: 232px;
}
.em3-ind-rescard__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.em3-ind-rescard__link:hover,
.em3-ind-rescard__link:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(46, 93, 255, 0.4);
	box-shadow: 0 30px 60px -28px rgba(10, 24, 88, 0.28);
	color: inherit;
}
.em3-ind-rescard__media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--em3-bg-deep);
}
.em3-ind-rescard__media .em3-ind-rescard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}
.em3-ind-rescard__link:hover .em3-ind-rescard__img {
	transform: scale(1.04);
}
.em3-ind-rescard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 22px;
	flex: 1;
}
.em3-ind-rescard__type {
	color: var(--em3-accent);
}
.em3-ind-rescard__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
	color: var(--em3-ink-navy);
}
.em3-ind-rescard__cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
}

.em3-ind-faq {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--em3-line-onwhite);
	max-width: 860px;
	/* Centred in the content column (was hugging the left edge). */
	margin-left: auto;
	margin-right: auto;
}
.em3-ind-faq__title {
	margin: 0 0 18px;
	font-size: 20px;
	color: var(--em3-ink-navy);
	text-align: center;
}
.em3-ind-faq__item {
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius);
	background: #fff;
	margin-bottom: 10px;
}
.em3-ind-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 18px 48px 18px 20px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--em3-ink-navy);
	position: relative;
	min-height: 44px;
}
.em3-ind-faq__q::-webkit-details-marker {
	display: none;
}
.em3-ind-faq__q::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	color: var(--em3-accent);
}
.em3-ind-faq__item[open] .em3-ind-faq__q::after {
	content: "\2212";
}
.em3-ind-faq__a {
	margin: 0;
	padding: 0 20px 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--em3-charcoal);
}

/* (The .em3-ind-sectorband backlink band renders on case-study / report /
   webinar / blog singles, NOT on industry pages, so its styles live in
   resources.css + blog.css, the sheets those views actually load.) */

/* ---- Hub: nine-industry grid (white) ---- */
.em3-ind-hubgrid__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.em3-ind-cell {
	display: flex;
}
.em3-ind-cell__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	padding: 26px 24px 28px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.em3-ind-cell__link:hover,
.em3-ind-cell__link:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(46, 93, 255, 0.4);
	box-shadow: 0 30px 60px -28px rgba(10, 24, 88, 0.28);
	color: inherit;
}
.em3-ind-cell__icon {
	width: 28px;
	height: 28px;
	margin-bottom: 6px;
}
.em3-ind-cell__name {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	color: var(--em3-ink-navy);
}
.em3-ind-cell__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--em3-charcoal);
}
.em3-ind-cell__cta {
	margin-top: auto;
	padding-top: 8px;
	font-size: 14px;
}

/* ---- Hub: differentiator band (dark) ---- */
.em3-ind-diff__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
.em3-ind-diff__item {
	border-top: 1px solid var(--em3-line-soft);
	padding-top: 20px;
	position: relative;
}
.em3-ind-diff__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 42px;
	height: 2px;
	background: var(--em3-accent-hot);
}
.em3-ind-diff__num {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--em3-accent-hot);
	margin-bottom: 12px;
}
.em3-ind-diff__title {
	margin: 0 0 8px;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--em3-ink);
}
.em3-ind-diff__body {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--em3-ink-dim);
}

/* ---- Hub: proof strip (white) ---- */
.em3-ind-hubstats__grid.em3-stat-grid {
	background: #fff;
	border-color: var(--em3-line-onwhite);
}
.on-light .em3-ind-stat .em3-stat-num {
	color: var(--em3-accent);
}
.on-light .em3-ind-stat .em3-stat-label {
	color: var(--em3-charcoal);
}
.em3-ind-hubstats__source {
	color: rgba(10, 24, 88, 0.55);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.em3-ind-challenges__grid,
	.em3-ind-services__grid,
	.em3-ind-compliance__grid,
	.em3-ind-resources__grid,
	.em3-ind-hubgrid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.em3-ind-systems__grid {
		grid-template-columns: 1fr;
	}
	.em3-ind-experts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.em3-ind-diff__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}
	.em3-ind-reality__stats.em3-stat-grid,
	.em3-ind-hubstats__grid.em3-stat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 20px;
	}
}
@media (max-width: 600px) {
	.em3-ind-challenges__grid,
	.em3-ind-services__grid,
	.em3-ind-compliance__grid,
	.em3-ind-resources__grid,
	.em3-ind-hubgrid__grid,
	.em3-ind-experts__grid {
		grid-template-columns: 1fr;
	}
	.em3-ind-diff__list {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 480px) {
	.em3-ind-reality__stats.em3-stat-grid,
	.em3-ind-hubstats__grid.em3-stat-grid {
		grid-template-columns: 1fr;
		padding: 28px 22px;
	}
	.em3-ind-hero__actions .em3-btn-primary,
	.em3-ind-hero__actions .em3-btn-ghost {
		width: 100%;
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.em3-ind-challenge,
	.em3-ind-pillar,
	.em3-ind-rescard__link,
	.em3-ind-rescard__img,
	.em3-ind-cell__link,
	.em3-ind-system {
		transition: none;
	}
}

/* ==========================================================================
   Enrichment acts (2026-06-12): "How the work gets done" (elevated navy,
   photo + 4 steps), "Explore the other industries" strip, hub flagship proof
   + full-bleed image band. Markup: em3_ind_process_act / em3_ind_other_industries
   / em3_ind_render_hub in inc/industries.php.
   ========================================================================== */

/* ---- How the work gets done (elevated navy --em3-bg, tonal step from bg-deep) ---- */
.em3-ind-process {
	position: relative;
	background: var(--em3-bg);
	color: var(--em3-ink);
	overflow: hidden;
}
.em3-ind-process::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 14% 0%, rgba(46, 93, 255, 0.16), transparent 55%);
	pointer-events: none;
}
.em3-ind-process__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 56px;
	align-items: center;
}
.em3-ind-process__media {
	margin: 0;
	position: relative;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius-card);
	overflow: hidden;
	align-self: stretch;
	min-height: 380px;
	/* NO aspect-ratio here: with align-self:stretch the resolved height would
	   drive the width PAST the grid column and overlap the text column. The
	   image absolute-fills instead (careers mission pattern). */
}
/* 2-class selector beats Elementor .elementor img { height:auto }. */
.em3-ind-process__media .em3-ind-process__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.em3-ind-process__body .em3-ind-sechead {
	margin-bottom: 30px;
}
.em3-ind-process__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
}
.em3-ind-step {
	border-top: 1px solid var(--em3-line-soft);
	padding-top: 16px;
	position: relative;
}
.em3-ind-step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 34px;
	height: 2px;
	background: var(--em3-accent-hot);
}
.em3-ind-step__num {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--em3-accent-hot);
	margin-bottom: 8px;
}
.em3-ind-step__title {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--em3-ink);
}
.em3-ind-step__body {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--em3-ink-dim);
}
/* Now a primary button (was an accent link). Sits on its own line after the
   steps; NO colour overrides here (they would beat .em3-btn-primary's white,
   equal specificity + later source) - only spacing. */
.em3-ind-process__cta.em3-btn-primary {
	margin-top: 30px;
	align-self: flex-start;
}

/* ---- Explore the other industries (closing strip) ----
   On --em3-bg-deep (darker than the footer's --em3-bg) so the page's last
   section steps down into the lighter footer manifesto instead of merging with
   it (the page's own final CTA was removed). A hairline marks the boundary. */
.em3-ind-others {
	background: var(--em3-bg-deep);
	color: var(--em3-ink);
	padding-top: var(--em3-space-3);
	padding-bottom: var(--em3-space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.em3-ind-others__head {
	margin-bottom: 30px;
}
.em3-ind-others__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.em3-ind-others__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
	color: var(--em3-ink-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.em3-ind-others__link:hover,
.em3-ind-others__link:focus,
.em3-ind-others__link:focus-visible,
.em3-ind-others__link:active {
	border-color: rgba(106, 138, 255, 0.55);
	color: var(--em3-white);
}
.em3-ind-others__link:focus-visible {
	outline: 2px solid var(--em3-accent-hot);
	outline-offset: 2px;
}
.em3-ind-others__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

/* ---- Hub: flagship proof + full-bleed image band ---- */
.em3-ind-hubproof__all {
	margin-top: 28px;
}
.em3-ind-hubband {
	height: clamp(240px, 30vw, 400px);
	overflow: hidden;
}
.em3-ind-hubband .em3-ind-hubband__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.em3-ind-process__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.em3-ind-process__media {
		/* Single column: width is definite, so aspect-ratio is safe here. */
		aspect-ratio: 16 / 9;
		align-self: auto;
		min-height: 0;
	}
	.em3-ind-others__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.em3-ind-process__steps {
		grid-template-columns: 1fr;
	}
	.em3-ind-others__grid {
		grid-template-columns: 1fr;
	}
}