/* ==========================================================================
   EM3 Energy - services.css
   Service detail template (theme/inc/services.php + page-service.php). Loaded
   ONLY on a built service page (functions.php gate). Reuses the brand.css
   component system + resources.css (hero shell, breadcrumb, em3_res_cta) and
   adds only the service-specific layout. No new visual style; tokens from brand.css.

   Bands alternate dark (.em3-bg-deep) / white (.em3-bg-snow.on-light); every
   service component below has a base (dark) rule and an .on-light override.
   Markup contract: inc/services.php. No em dashes anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (extends .em3-res-hero)
   Background image made genuinely prominent (vs the faint default), with a
   left-weighted navy scrim that keeps the white text AA-legible, plus a subtle
   load zoom. Scoped to .em3-svc-hero so the resources/industries heroes are untouched.
   -------------------------------------------------------------------------- */
.em3-svc-hero .em3-res-hero__bg {
	opacity: 0.7;
	transform-origin: center;
	/* Rests slightly zoomed (overscan headroom) so the pointer parallax can drift the
	   image a few px without ever exposing an edge. */
	transform: scale(1.06);
	animation: em3-svc-hero-zoom 1.6s ease-out both;
	will-change: transform;
}
/* Once the load zoom finishes, services.js adds .is-parallax and the image drifts
   a few px opposite the pointer (offsets set via --em3-hero-px/py), giving the hero
   a subtle living-image response to mouse movement. */
.em3-svc-hero.is-parallax .em3-res-hero__bg {
	animation: none;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	transform: scale(1.06) translate3d(var(--em3-hero-px, 0px), var(--em3-hero-py, 0px), 0);
}
.em3-svc-hero.em3-res-hero--image::before {
	background: linear-gradient(
		90deg,
		rgba(5, 13, 51, 0.94) 0%,
		rgba(5, 13, 51, 0.74) 42%,
		rgba(5, 13, 51, 0.46) 74%,
		rgba(5, 13, 51, 0.34) 100%
	);
}
@keyframes em3-svc-hero-zoom {
	from { transform: scale(1.14); }
	to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.em3-svc-hero .em3-res-hero__bg { animation: none; }
	.em3-svc-hero.is-parallax .em3-res-hero__bg { transition: none; transform: scale(1.06); }
}
/* On narrow screens the text is full-width over the image, so swap the left-weighted
   scrim for a uniform vertical one to keep every line crisp. */
@media (max-width: 860px) {
	.em3-svc-hero.em3-res-hero--image::before {
		background: linear-gradient(
			180deg,
			rgba(5, 13, 51, 0.88) 0%,
			rgba(5, 13, 51, 0.72) 50%,
			rgba(5, 13, 51, 0.82) 100%
		);
	}
}

.em3-svc-hero__sub { max-width: 760px; }

.em3-svc-hero__bullets {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 720px;
}
.em3-svc-hero__bullets li {
	position: relative;
	padding-left: 26px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--em3-ink-muted);
}
.em3-svc-hero__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 14px;
	height: 1px;
	background: var(--em3-accent-hot);
}

.em3-svc-hero__actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.em3-svc-hero__trust {
	list-style: none;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--em3-line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
}
.em3-svc-hero__trust li {
	position: relative;
	padding-left: 16px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--em3-ink-dim);
}
.em3-svc-hero__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	background: var(--em3-accent-hot);
	border-radius: var(--em3-radius);
}

/* --------------------------------------------------------------------------
   Section head + prose measure
   -------------------------------------------------------------------------- */
.em3-svc-sechead { margin-bottom: 40px; max-width: 820px; }
.em3-svc-sechead .em3-eyebrow { margin-bottom: 14px; }
.em3-svc-sechead h2 { margin: 0; }

/* Narrower measure for the text-led sections (what / challenge / engage / faq). */
.em3-wrap.em3-svc-measure { max-width: 900px; }

.em3-svc-prose { max-width: 760px; }
.em3-svc-prose p {
	margin: 0 0 1em;
	font-size: 17px;
	line-height: 1.65;
	color: var(--em3-ink-muted);
}
.em3-svc-prose p:last-child { margin-bottom: 0; }
.on-light .em3-svc-prose p { color: var(--em3-charcoal); }

/* Governing-standard tag (section 2) */
.em3-svc-standard {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 0;
	padding: 9px 16px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius);
}
.em3-svc-standard__k {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--em3-ink-dim);
}
.em3-svc-standard__v { font-weight: 700; color: var(--em3-accent-hot); }
.on-light .em3-svc-standard { border-color: var(--em3-line-onwhite); }
.on-light .em3-svc-standard__k { color: rgba(10, 24, 88, 0.72); }
.on-light .em3-svc-standard__v { color: var(--em3-accent); }

/* Challenge bullets (extends brand .em3-bullet, which is dark by default) */
.em3-svc-bullets { margin-top: 26px; max-width: 760px; }
.on-light .em3-bullet li { border-bottom-color: var(--em3-line-onwhite); color: var(--em3-charcoal); }
.on-light .em3-svc-bullets li::before { background: var(--em3-accent); }

/* --------------------------------------------------------------------------
   2 + 3. Two-column split (What we do = image left, The challenge = image right)
   -------------------------------------------------------------------------- */
.em3-svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.em3-svc-split--noimg { grid-template-columns: 1fr; max-width: 820px; }
.em3-svc-split__media {
	margin: 0;
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--em3-radius-card);
	border: 1px solid var(--em3-line-soft);
	box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.6);
}
.on-light .em3-svc-split__media { border-color: var(--em3-line-onwhite); box-shadow: 0 40px 80px -44px rgba(10, 24, 88, 0.32); }
/* The image rounds itself (border-radius: inherit), so the frame needs no overflow clip
   and can host the corner crop-marks just outside its edges. */
/* Absolute-fill so the image NEVER drives the row height (a tall portrait would otherwise
   leave empty space in the shorter text column). The text drives the height; the image
   crops to fill via object-fit:cover. Clips itself via border-radius:inherit (no overflow
   clip on the frame, so the corner crop-marks still sit just outside). */
.em3-svc-split__media .em3-svc-split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* What we do / The challenge: the framed image fills the full height of the section
   (stretches to the text column) instead of a small fixed 4:3 box. */
.em3-svc-split .em3-svc-split__media { aspect-ratio: auto; min-height: 360px; }
.em3-svc-split__body { min-width: 0; }
.em3-svc-split__body .em3-svc-sechead { margin-bottom: 24px; }
.em3-svc-split__body .em3-svc-prose { max-width: none; }

/* Engineering corner crop-marks (brand signal, same language as the careers testimonial
   card) on the What we do / The challenge / Why EM3 framed images. They sit just OUTSIDE
   the frame (negative inset), which is why the frame must not clip. Brighter accent on the
   navy bands, deeper accent on the white band. */
.em3-svc-what .em3-svc-split__media::after,
.em3-svc-challenge .em3-svc-split__media::after,
.em3-svc-why .em3-svc-split__media::after {
	content: "";
	position: absolute;
	inset: -9px;
	z-index: 2;
	pointer-events: none;
	--cm: var(--em3-accent-hot);
	background:
		linear-gradient(var(--cm), var(--cm)) left top / 13px 1.5px no-repeat,
		linear-gradient(var(--cm), var(--cm)) left top / 1.5px 13px no-repeat,
		linear-gradient(var(--cm), var(--cm)) right top / 13px 1.5px no-repeat,
		linear-gradient(var(--cm), var(--cm)) right top / 1.5px 13px no-repeat,
		linear-gradient(var(--cm), var(--cm)) left bottom / 13px 1.5px no-repeat,
		linear-gradient(var(--cm), var(--cm)) left bottom / 1.5px 13px no-repeat,
		linear-gradient(var(--cm), var(--cm)) right bottom / 13px 1.5px no-repeat,
		linear-gradient(var(--cm), var(--cm)) right bottom / 1.5px 13px no-repeat;
}
.em3-svc-what .em3-svc-split__media::after { --cm: var(--em3-accent); }

@media (max-width: 860px) {
	.em3-svc-split { grid-template-columns: 1fr; gap: 30px; }
	.em3-svc-split__media { order: -1; aspect-ratio: 16 / 10; }
	/* Stacked: the image is full-width on top, so revert to a landscape ratio. */
	.em3-svc-split .em3-svc-split__media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* --------------------------------------------------------------------------
   4. Method (vertical timeline; centered on the white band)
   -------------------------------------------------------------------------- */
/* Centered so the section reads balanced instead of hugging the left with dead space
   on the right. The heading centres; the timeline block centres under it (steps stay
   left-reading internally). */
.em3-svc-method .em3-svc-sechead { margin-left: auto; margin-right: auto; text-align: center; }
.em3-svc-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; counter-reset: none; }
.em3-svc-tstep { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding-bottom: 38px; }
.em3-svc-tstep:last-child { padding-bottom: 0; }
.em3-svc-tstep::before {
	content: "";
	position: absolute;
	left: 31px;
	top: 60px;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--em3-accent) 0%, rgba(46, 93, 255, 0.12) 100%);
}
.em3-svc-tstep:last-child::before { display: none; }
.em3-svc-tstep__marker {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	box-shadow: 0 12px 30px -16px rgba(10, 24, 88, 0.4);
	position: relative;
	z-index: 1;
	transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.em3-svc-tstep__num { font-family: var(--em3-font-serif); font-style: italic; font-weight: 400; font-size: 30px; line-height: 1; color: var(--em3-accent); }
.em3-svc-tstep__body { padding-top: 6px; min-width: 0; }
.em3-svc-tstep__title { font-size: 19px; font-weight: 600; color: var(--em3-ink-navy); margin: 0 0 8px; }
.em3-svc-tstep__text { font-size: 15.5px; line-height: 1.6; color: var(--em3-charcoal); margin: 0; max-width: 600px; }
.em3-svc-tstep:hover .em3-svc-tstep__marker { transform: translateY(-3px); border-color: rgba(46, 93, 255, 0.55); box-shadow: 0 18px 38px -16px rgba(46, 93, 255, 0.4); }
@media (max-width: 600px) {
	.em3-svc-tstep { grid-template-columns: 48px 1fr; gap: 18px; padding-bottom: 30px; }
	.em3-svc-tstep__marker { width: 48px; height: 48px; }
	.em3-svc-tstep__num { font-size: 24px; }
	.em3-svc-tstep::before { left: 23px; top: 48px; }
}

/* --------------------------------------------------------------------------
   5. What you receive (full-width image + blue overlay + frosted-glass cards)
   -------------------------------------------------------------------------- */
.em3-svc-receive { position: relative; overflow: hidden; isolation: isolate; background: var(--em3-bg-deep); color: var(--em3-ink); }
.em3-svc-receive__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.em3-svc-receive__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(130deg, rgba(5, 13, 51, 0.93) 0%, rgba(8, 18, 74, 0.84) 40%, rgba(29, 58, 209, 0.6) 100%);
}
.em3-svc-receive__inner { position: relative; z-index: 2; }
.em3-svc-glasscards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.em3-svc-glasscard {
	padding: 28px 26px;
	border-radius: var(--em3-radius-card);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.em3-svc-glasscard:hover {
	transform: translateY(-4px);
	border-color: rgba(106, 138, 255, 0.6);
	background: rgba(255, 255, 255, 0.13);
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55);
}
.em3-svc-glasscard__title { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.em3-svc-glasscard__body { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; }
@media (max-width: 900px) { .em3-svc-glasscards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .em3-svc-glasscards { grid-template-columns: 1fr; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.em3-svc-glasscard { background: rgba(13, 27, 102, 0.72); }
}

/* --------------------------------------------------------------------------
   6. Proven outcome (count-up metrics + animated bar + narrative + image)
   -------------------------------------------------------------------------- */
.em3-svc-ometrics { display: grid; grid-template-columns: repeat(var(--em3-svc-statcols, 3), minmax(0, 1fr)); gap: 36px 40px; margin-bottom: 52px; align-items: start; text-align: center; width: min(1280px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.em3-svc-ometric__val { display: block; font-family: var(--em3-font-sans); font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--em3-ink-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em3-svc-ometric__bar { display: block; height: 3px; width: 72px; margin: 16px auto 12px; background: linear-gradient(90deg, var(--em3-accent), var(--em3-accent-hot)); transform: scaleX(0); transform-origin: center; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
.em3-svc-ometric.is-revealed .em3-svc-ometric__bar { transform: scaleX(1); }
.em3-svc-ometric__label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(10, 24, 88, 0.72); }
.em3-svc-outcome__row { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: stretch; }
.em3-svc-outcome__row--noimg { grid-template-columns: 1fr; max-width: 820px; }
.em3-svc-outcome__narr p { margin: 0 0 1em; font-size: 17px; line-height: 1.65; color: var(--em3-charcoal); }
.em3-svc-outcome__narr p:last-child { margin-bottom: 0; }
/* Image to the right fills the full height of the narrative + CTA column beside it. */
.em3-svc-outcome__row .em3-svc-split__media { aspect-ratio: auto; height: 100%; min-height: 300px; }
@media (max-width: 860px) {
	.em3-svc-outcome__row { grid-template-columns: 1fr; gap: 32px; }
	.em3-svc-outcome__row .em3-svc-split__media { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 760px) { .em3-svc-ometrics { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }
@media (max-width: 440px) { .em3-svc-ometrics { grid-template-columns: 1fr; } }

.em3-svc-quote { max-width: 760px; margin: 36px auto 0; text-align: center; }
.em3-svc-quote__q {
	font-family: var(--em3-font-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.4;
	color: var(--em3-white);
	margin: 0;
}
.on-light .em3-svc-quote__q { color: var(--em3-ink-navy); }
.em3-svc-quote__by {
	margin-top: 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--em3-ink-dim);
}
.on-light .em3-svc-quote__by { color: rgba(10, 24, 88, 0.72); }

/* CTA at the bottom-left of the narrative column (inline-CTA style, like the rest of
   the site); it lives inside .em3-svc-outcome__narr so the image matches its height. */
.em3-svc-outcome__cta { margin-top: 32px; display: flex; justify-content: flex-start; }

/* --------------------------------------------------------------------------
   7. Why EM3 (image LEFT; the RIGHT column stacks the eyebrow + heading ABOVE the
   feature checklist, on the dark band). The image fills the full height of that
   whole right column (heading + checklist), so it gets more presence.
   -------------------------------------------------------------------------- */
.em3-svc-why__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: stretch; }
.em3-svc-why__grid--noimg { grid-template-columns: 1fr; max-width: 860px; }
.em3-svc-why__grid .em3-svc-split__media { aspect-ratio: auto; height: 100%; min-height: 340px; }
.em3-svc-why__col { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.em3-svc-why__col .em3-svc-sechead { margin-bottom: 28px; max-width: none; }
.em3-svc-whylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.em3-svc-whyitem { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.em3-svc-whyitem__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--em3-radius); background: rgba(46, 93, 255, 0.16); border: 1px solid rgba(106, 138, 255, 0.4); color: var(--em3-accent-hot); }
.em3-svc-whyitem__icon svg { width: 20px; height: 20px; }
.em3-svc-whyitem__title { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 5px; }
.em3-svc-whyitem__text { font-size: 15px; line-height: 1.6; color: var(--em3-ink-muted); margin: 0; }
@media (max-width: 860px) {
	.em3-svc-why__grid, .em3-svc-why__grid--noimg { grid-template-columns: 1fr; gap: 32px; }
	/* Stacked: image on top (global split order:-1), landscape crop, then the checklist. */
	.em3-svc-why__grid .em3-svc-split__media { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
}

/* --------------------------------------------------------------------------
   8. How we engage (one wide HORIZONTAL commitment bar: image accent | typical
   duration | engagement model | proposal CTA. Reads across, deliberately unlike
   the stacked sections, so the section no longer feels empty. Never a price.)
   -------------------------------------------------------------------------- */
.em3-svc-engage__bar {
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	box-shadow: 0 40px 80px -44px rgba(10, 24, 88, 0.3);
	overflow: hidden;
}
.em3-svc-engage__media { margin: 0; position: relative; flex: 0 0 240px; overflow: hidden; background: var(--em3-bg-deep); }
.em3-svc-engage__media .em3-svc-engage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.em3-svc-engage__body { flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0; }
.em3-svc-engage__spec { display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; min-width: 0; }
.em3-svc-engage__spec--duration { flex: 0 0 auto; max-width: 280px; border-right: 1px solid var(--em3-line-onwhite); }
.em3-svc-engage__spec--model { flex: 1 1 auto; }
.em3-svc-engage__k { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10, 24, 88, 0.72); margin-bottom: 10px; }
.em3-svc-engage__dur { font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--em3-ink-navy); }
.em3-svc-engage__model p { margin: 0 0 0.5em; font-size: 15px; line-height: 1.55; color: var(--em3-charcoal); }
.em3-svc-engage__model p:last-child { margin: 0; }
.em3-svc-engage__action { flex: 0 0 auto; display: flex; align-items: center; padding: 34px 40px; border-left: 1px solid var(--em3-line-onwhite); }
@media (max-width: 900px) {
	.em3-svc-engage__bar { flex-direction: column; }
	.em3-svc-engage__media { flex-basis: auto; aspect-ratio: 16 / 7; }
	.em3-svc-engage__body { flex-direction: column; }
	.em3-svc-engage__spec--duration { max-width: none; border-right: none; border-bottom: 1px solid var(--em3-line-onwhite); }
	.em3-svc-engage__action { border-left: none; border-top: 1px solid var(--em3-line-onwhite); }
	.em3-svc-engage__action .em3-btn-primary { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   9. Where it applies (interactive sector cards; auto icon + description, on dark)
   -------------------------------------------------------------------------- */
.em3-svc-sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.em3-svc-sector {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 28px 26px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius-card);
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
	transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.em3-svc-sector:hover {
	transform: translateY(-4px);
	border-color: rgba(106, 138, 255, 0.5);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.5);
}
.em3-svc-sector__icon { width: 40px; height: 40px; }
.em3-svc-sector__label { font-size: 19px; font-weight: 600; color: #fff; margin: 0; }
.em3-svc-sector__desc { font-size: 14.5px; line-height: 1.55; color: var(--em3-ink-muted); margin: 0; }
.em3-svc-sector__cta { margin-top: auto; }
@media (max-width: 900px) { .em3-svc-sectors { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   10. FAQ (accordion)
   -------------------------------------------------------------------------- */
.em3-svc-faq__list { border-top: 1px solid var(--em3-line-soft); }
.on-light .em3-svc-faq__list { border-top-color: var(--em3-line-onwhite); }
.em3-svc-faq__item { border-bottom: 1px solid var(--em3-line-soft); }
.on-light .em3-svc-faq__item { border-bottom-color: var(--em3-line-onwhite); }
.em3-svc-faq__q {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 22px 44px 22px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--em3-white);
}
.on-light .em3-svc-faq__q { color: var(--em3-ink-navy); }
.em3-svc-faq__q::-webkit-details-marker { display: none; }
.em3-svc-faq__q::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 18px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--em3-accent-hot);
}
.on-light .em3-svc-faq__q::after { color: var(--em3-accent); }
.em3-svc-faq__item[open] .em3-svc-faq__q::after { content: "\2013"; }
.em3-svc-faq__a { padding: 0 0 24px; max-width: 800px; }
.em3-svc-faq__a p { margin: 0 0 0.8em; font-size: 15.5px; line-height: 1.65; color: var(--em3-ink-muted); }
.em3-svc-faq__a p:last-child { margin-bottom: 0; }
.on-light .em3-svc-faq__a p { color: var(--em3-charcoal); }

/* --------------------------------------------------------------------------
   11. Related services + resource
   -------------------------------------------------------------------------- */
.em3-svc-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.em3-svc-relcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 28px 26px;
	border: 1px solid var(--em3-line-soft);
	border-radius: var(--em3-radius-card);
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
	transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.em3-svc-relcard:hover { transform: translateY(-4px); border-color: rgba(106, 138, 255, 0.5); background: rgba(255, 255, 255, 0.06); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.5); }
.em3-svc-relcard__arrow { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--em3-line-soft); border-radius: var(--em3-radius); color: var(--em3-accent-hot); transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s; }
.em3-svc-relcard__arrow svg { width: 16px; height: 16px; }
.em3-svc-relcard:hover .em3-svc-relcard__arrow { background: var(--em3-accent); border-color: transparent; color: #fff; transform: translate(2px, -2px); }
.em3-svc-relcard__title { font-size: 18px; font-weight: 600; margin: 0; color: #fff; padding-right: 42px; }
.em3-svc-relcard__cta { margin-top: auto; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--em3-accent-hot); }
.em3-svc-resource { margin: 30px 0 0; }
@media (max-width: 900px) { .em3-svc-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .em3-svc-related__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. Dig deeper (auto-pulled resources; uniform cards on the white closing band)
   -------------------------------------------------------------------------- */
.em3-svc-digcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.em3-svc-digcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--em3-line-onwhite);
	border-radius: var(--em3-radius-card);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.em3-svc-digcard__link:hover {
	transform: translateY(-4px);
	border-color: rgba(46, 93, 255, 0.4);
	box-shadow: 0 28px 56px -28px rgba(10, 24, 88, 0.32);
}
.em3-svc-digcard__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, var(--em3-ink-navy), var(--em3-accent));
}
.em3-svc-digcard__media .em3-svc-digcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s;
}
.em3-svc-digcard__link:hover .em3-svc-digcard__img { transform: scale(1.05); }
.em3-svc-digcard__ph { display: block; width: 100%; height: 100%; }
.em3-svc-digcard__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.em3-svc-digcard__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--em3-ink-navy); margin: 0; }
.em3-svc-digcard__cta { margin-top: auto; }
@media (max-width: 900px) { .em3-svc-digcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .em3-svc-digcards { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Scroll-reveal utility (driven by assets/js/services.js)
   -------------------------------------------------------------------------- */
/* Hidden initial state applies ONLY when JS is present (html.em3-js), so visitors
   without JS see all content normally (no permanently-hidden sections). */
.em3-js .em3-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.em3-js .em3-reveal.is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.em3-svc-sector, .em3-svc-relcard, .em3-svc-relcard__arrow, .em3-svc-digcard__link, .em3-svc-digcard__img,
	.em3-svc-tstep__marker, .em3-svc-glasscard { transition: none; }
	.em3-js .em3-reveal { opacity: 1; transform: none; transition: none; }
}