/*
 * EC Service Detail — editorial treatment for the 6 individual service pages.
 *
 * Outer wrapper carries class "ec-services ec-service-detail-wrap" so hero,
 * closing CTA, eyebrow, and --ec-* token rules from services.css all apply
 * without duplication. This file adds only detail-page-specific rules:
 *   - Hero height / padding variant (no stats block)
 *   - Back-link breadcrumb
 *   - Body container layout
 *   - WPBakery structural resets (vc_row, vc_column-inner)
 *   - Heading / body text brand skin inside .ec-service-detail-body
 *   - Lists (override .ec-services ul reset)
 *   - FAQ accordion brand skin (.vc_tta_accordion)
 */

/* =========================================================================
 *  HERO VARIANT — tighter padding, no stats row
 * ========================================================================= */
.ec-service-detail-wrap .ec-service-detail-hero {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Back-link breadcrumb above eyebrow */
.ec-detail-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	margin-bottom: 20px;
	transition: color 0.18s ease;
}
.ec-detail-back:hover { color: var(--ec-gold, #F9BE17); }
.ec-detail-back svg { flex-shrink: 0; }

/* =========================================================================
 *  BODY CONTENT CONTAINER
 * ========================================================================= */
.ec-service-detail-body {
	max-width: 860px;
	margin: 0 auto;
	padding: 60px 24px 40px;
}

/* WPBakery structural wrapper resets */
.ec-service-detail-body .vc_row-fluid,
.ec-service-detail-body .vc_row {
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-bottom: 1px solid rgba(4,23,26,0.07);
	padding-bottom: 2.5rem !important;
	margin-bottom: 2.5rem !important;
}
.ec-service-detail-body .vc_row:last-child { border-bottom: none; margin-bottom: 0 !important; }
.ec-service-detail-body .vc_column-inner { padding: 0 !important; }
.ec-service-detail-body .wpb_wrapper { padding: 0; }

/* =========================================================================
 *  HEADINGS
 * ========================================================================= */
.ec-service-detail-body h1,
.ec-service-detail-body h2,
.ec-service-detail-body .wpb_content_element h2 {
	font-family: var(--ec-font-display); /* Manrope (was hardcoded Poppins) */
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	color: #04171A;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	margin: 2.5rem 0 0.75rem;
}
.ec-service-detail-body h2:first-child,
.ec-service-detail-body .vc_row:first-child h2 { margin-top: 0; }

.ec-service-detail-body h3,
.ec-service-detail-body .wpb_content_element h3 {
	font-family: var(--ec-font-display); /* Manrope (was hardcoded Poppins) */
	font-weight: 600;
	color: #04171A;
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	line-height: 1.3;
	margin: 1.75rem 0 0.5rem;
}

/* WPBakery [vc_custom_heading] renders the heading element ITSELF with the
 * .vc_custom_heading class plus an empty font-family that out-specifies the
 * rules above, so body H2/H3 fall back to Arial (the ec-oneup-anchor-font-zero
 * specificity family). Force the brand display font (Poppins) — verified live:
 * this selector + !important flips computed font Arial -> Poppins. */
.ec-service-detail-body h2.vc_custom_heading,
.ec-service-detail-body h3.vc_custom_heading,
.ec-service-detail-body h4.vc_custom_heading {
	font-family: var(--ec-font-display) !important;
}

/* =========================================================================
 *  BODY TEXT
 * ========================================================================= */
.ec-service-detail-body p,
.ec-service-detail-body .vc_column_text p,
.ec-service-detail-body .wpb_text_column p {
	font-size: 1rem;
	line-height: 1.75;
	color: #2a3a3c;
	margin-bottom: 1.15em;
}
.ec-service-detail-body strong { font-weight: 700; color: #04171A; }
.ec-service-detail-body a:not(.ec-cta-btn):not(.ec-detail-back) {
	color: #1a7a60;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ec-service-detail-body a:not(.ec-cta-btn):not(.ec-detail-back):hover {
	color: var(--ec-green-text);
}

/* =========================================================================
 *  LISTS — override .ec-services ul/ol reset in services.css
 * ========================================================================= */
.ec-service-detail-body ul,
.ec-service-detail-body .vc_column_text ul,
.ec-service-detail-body .wpb_text_column ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0.5em 0 1.25em !important;
}
.ec-service-detail-body ul li,
.ec-service-detail-body .vc_column_text ul li {
	padding-left: 1.4em;
	position: relative;
	margin-bottom: 0.4em;
	line-height: 1.65;
}
.ec-service-detail-body ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #39DBB0;
}

/* =========================================================================
 *  FAQ ACCORDION — brand skin over .vc_tta_accordion
 * ========================================================================= */
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel {
	border: none !important;
	margin-bottom: 6px !important;
	border-radius: 6px !important;
	overflow: hidden;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-heading {
	background: #04171A !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-title {
	margin: 0 !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-title > a {
	color: #ffffff !important;
	font-family: var(--ec-font-family) !important; /* Manrope (was hardcoded Plus Jakarta Sans) */
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	padding: 16px 48px 16px 20px !important;
	display: block !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_active .vc_tta-panel-heading {
	background: #39DBB0 !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_active .vc_tta-panel-title > a {
	color: #04171A !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-body {
	background: #f6faf9 !important;
	border: 1px solid rgba(4,23,26,0.08) !important;
	border-top: none !important;
	padding: 0 !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-body .vc_column-inner {
	padding: 16px 20px !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-body p {
	margin: 0 0 0.6em !important;
	font-size: 0.9375rem !important;
	color: #2a3a3c;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-panel-body p:last-child { margin: 0 !important; }
/* Arrow icon */
.ec-service-detail-body .vc_tta-accordion .vc_tta-controls-icon-position-right .vc_tta-controls-icon {
	right: 18px !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_tta-controls-icon::before,
.ec-service-detail-body .vc_tta-accordion .vc_tta-controls-icon::after {
	border-color: rgba(255,255,255,0.55) !important;
}
.ec-service-detail-body .vc_tta-accordion .vc_active .vc_tta-controls-icon::before,
.ec-service-detail-body .vc_tta-accordion .vc_active .vc_tta-controls-icon::after {
	border-color: #04171A !important;
}

/* =========================================================================
 *  CTA ROW — WPBakery [ult_buttons] wrapper spacing
 * ========================================================================= */
.ec-service-detail-body .ult-btn-block { padding: 8px 0; }
.ec-service-detail-body .ubtn-wrap { justify-content: center; }

/* =========================================================================
 *  MOBILE
 * ========================================================================= */
@media (max-width: 767px) {
	.ec-service-detail-wrap .ec-service-detail-hero {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.ec-service-detail-body {
		padding: 40px 20px 32px;
	}
	.ec-service-detail-body h2 { font-size: 1.4rem; }
	.ec-service-detail-body h3 { font-size: 1.15rem; }
	.ec-service-detail-body .vc_row {
		padding-bottom: 1.75rem !important;
		margin-bottom: 1.75rem !important;
	}
}

/* =========================================================================
 *  EDITORIAL BODY SECTIONS (.ec-sd-*) — "Editorial spread" (approved 2026-06-26)
 *  Data-driven overview / pillars / FAQ from services-detail-inventory.json.
 *  Scoped to .ec-service-detail-wrap; uses the shared --ec-* tokens.
 * ========================================================================= */
.ec-service-detail-wrap .ec-sd-wrap { max-width: 1260px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); }
.ec-service-detail-wrap .ec-sd-band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.ec-service-detail-wrap .ec-sd-band--white { background: var(--ec-white, #fff); }
.ec-service-detail-wrap .ec-sd-band--warm { background: var(--ec-warm-white, #FAF8F4); }

.ec-service-detail-wrap .ec-sd-h2 {
	font-family: var(--ec-font-display) !important;
	font-weight: 700; color: var(--ec-navy, #04171A);
	font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0;
}
.ec-service-detail-wrap .ec-sd-italic { font-style: italic; font-weight: 600; color: var(--ec-green-text); }

.ec-service-detail-wrap .ec-sd-section-tag { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.4rem; }
.ec-service-detail-wrap .ec-sd-eyebrow {
	font-family: var(--ec-font-display) !important; font-weight: 600; font-size: .74rem;
	/* Client "Final Remarks" #7: recolor "THE SERVICE" eyebrow to a brand color.
	   Brand gold (#F9BE17) fails AA on white, so use the brand green ink (#13805F,
	   --ec-green-text on light bg) — a brand color that passes 4.5:1. Scoped to the
	   eyebrow only; pillar/FAQ numerals keep their --ec-gold-text. */
	letter-spacing: .26em; text-transform: uppercase; color: var(--ec-green-text); white-space: nowrap;
}
.ec-service-detail-wrap .ec-sd-line { flex: 1; height: 1px; background: var(--ec-rule-dim, rgba(4,23,26,.10)); }

/* --- OVERVIEW (asymmetric editorial spread) --- */
.ec-service-detail-wrap .ec-sd-overview__grid {
	/* Client "Final Remarks" #8: "a lot of empty space — the picture needs to cover
	   more of the page." Give the photo column a larger share (was 1fr / 1.75fr) and
	   tighten the gap so the image dominates the spread. */
	display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,2.1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem); align-items: stretch;
}
.ec-service-detail-wrap .ec-sd-overview__grid--solo { grid-template-columns: 1fr; max-width: 64ch; }
/* #8: center the text column beside the taller photo so the left side reads
   balanced, not top-heavy with a void below. */
.ec-service-detail-wrap .ec-sd-overview__lead { align-self: center; }
.ec-service-detail-wrap .ec-sd-overview__lead h2 { margin-bottom: 1.6rem; max-width: 16ch; }
.ec-service-detail-wrap .ec-sd-overview__lead p { color: var(--ec-text-dim); font-size: 1.08rem; margin: 0 0 1.1rem; max-width: 48ch; }
.ec-service-detail-wrap .ec-sd-lead { font-size: 1.3rem !important; line-height: 1.55; color: var(--ec-navy) !important; font-weight: 500; }
/* Frame removed per client feedback 2026-06-30 — bare full-bleed photo, no white mat / gold offset frame. */
/* #8: let the media column + photo fill the row height so the image reads large, not
   a small tile floating in whitespace. The frame stretches to the taller of the two
   columns; the photo covers it. Min-height keeps it substantial when the text is short. */
.ec-service-detail-wrap .ec-sd-overview__media { display: flex; }
.ec-service-detail-wrap .ec-sd-photo-frame { position: relative; width: 100%; }
.ec-service-detail-wrap .ec-sd-photo { display: block; width: 100%; height: 100%; min-height: clamp(320px, 42vw, 560px); aspect-ratio: 4/3.4; object-fit: cover; }
.ec-service-detail-wrap .ec-sd-photo-cap { font-family: var(--ec-font-display); font-style: italic; font-size: .86rem; color: var(--ec-text-dim); margin: 1rem 0 0; display: flex; align-items: center; gap: .6rem; }
.ec-service-detail-wrap .ec-sd-photo-cap::before { content: ""; width: 22px; height: 1px; background: var(--ec-gold-text); }

/* --- PILLARS (oversized numerals + hairline rules) --- */
.ec-service-detail-wrap .ec-sd-pillars__intro { color: var(--ec-text-dim); font-size: 1.1rem; max-width: 48ch; margin: .6rem 0 3rem; }
.ec-service-detail-wrap .ec-sd-pillar {
	display: grid; grid-template-columns: minmax(120px,.9fr) minmax(0,2.6fr);
	gap: clamp(1.5rem,5vw,4rem); align-items: baseline;
	padding: clamp(1.8rem,4vw,2.8rem) 0; border-top: 1px solid var(--ec-rule-dim, rgba(4,23,26,.10));
}
.ec-service-detail-wrap .ec-sd-pillar:last-child { border-bottom: 1px solid var(--ec-rule-dim, rgba(4,23,26,.10)); }
.ec-service-detail-wrap .ec-sd-pillar__num { font-family: var(--ec-font-display); font-weight: 700; font-size: clamp(3.4rem,8vw,6.5rem); line-height: .82; color: var(--ec-gold-text); letter-spacing: -.04em; }
.ec-service-detail-wrap .ec-sd-pillar__kicker { display: block; font-family: var(--ec-font-display); font-style: italic; font-weight: 500; font-size: .92rem; color: var(--ec-green-text); margin-bottom: .3rem; }
.ec-service-detail-wrap .ec-sd-pillar__title { font-family: var(--ec-font-display) !important; font-weight: 600; color: var(--ec-navy); font-size: clamp(1.4rem,2.6vw,1.95rem); line-height: 1.1; margin: 0 0 .7rem; }
.ec-service-detail-wrap .ec-sd-pillar__body p { color: var(--ec-text-dim); font-size: 1.06rem; max-width: 52ch; margin: 0; }

/* --- FAQ (details accordion) --- */
.ec-service-detail-wrap .ec-sd-faq__head { max-width: 40ch; margin-bottom: 2.4rem; }
.ec-service-detail-wrap .ec-sd-faq-list { border-top: 1px solid var(--ec-rule-dim, rgba(4,23,26,.10)); }
.ec-service-detail-wrap details.ec-sd-faq-item { border-bottom: 1px solid var(--ec-rule-dim, rgba(4,23,26,.10)); }
.ec-service-detail-wrap .ec-sd-faq-item summary {
	list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between;
	gap: 1.5rem; padding: 1.4rem 0; font-family: var(--ec-font-display); font-weight: 600;
	font-size: clamp(1.05rem,2.2vw,1.25rem); color: var(--ec-navy);
}
.ec-service-detail-wrap .ec-sd-faq-item summary::-webkit-details-marker { display: none; }
.ec-service-detail-wrap .ec-sd-faq-num { font-family: var(--ec-font-display); font-weight: 600; font-size: .95rem; color: var(--ec-gold-text); min-width: 2.4ch; padding-top: .18rem; }
.ec-service-detail-wrap .ec-sd-faq-q { flex: 1; }
.ec-service-detail-wrap .ec-sd-faq-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--ec-rule-dim, rgba(4,23,26,.10)); display: grid; place-items: center; position: relative; }
.ec-service-detail-wrap .ec-sd-faq-icon::before, .ec-service-detail-wrap .ec-sd-faq-icon::after { content: ""; position: absolute; background: var(--ec-gold-text); transition: transform .25s ease, opacity .2s ease; }
.ec-service-detail-wrap .ec-sd-faq-icon::before { width: 12px; height: 2px; }
.ec-service-detail-wrap .ec-sd-faq-icon::after { width: 2px; height: 12px; }
.ec-service-detail-wrap details[open] .ec-sd-faq-icon { background: var(--ec-navy); border-color: var(--ec-navy); }
.ec-service-detail-wrap details[open] .ec-sd-faq-icon::before, .ec-service-detail-wrap details[open] .ec-sd-faq-icon::after { background: var(--ec-gold); }
.ec-service-detail-wrap details[open] .ec-sd-faq-icon::after { transform: scaleY(0); opacity: 0; }
.ec-service-detail-wrap .ec-sd-faq-a { margin: 0; padding: 0 0 1.6rem calc(2.4ch + 1.5rem); color: var(--ec-text-dim); font-size: 1.05rem; max-width: 64ch; }

/* --- responsive --- */
@media (max-width: 820px) {
	.ec-service-detail-wrap .ec-sd-overview__grid { grid-template-columns: 1fr; }
	.ec-service-detail-wrap .ec-sd-overview__media { order: -1; }
	.ec-service-detail-wrap .ec-sd-pillar { grid-template-columns: 1fr; gap: .4rem; }
	.ec-service-detail-wrap .ec-sd-pillar__num { font-size: clamp(3rem,16vw,4.5rem); }
	.ec-service-detail-wrap .ec-sd-faq-a { padding-left: calc(2.4ch + 1rem); }
	.ec-service-detail-wrap .ec-sd-photo-frame::after { transform: translate(10px,10px); }
}
@media (prefers-reduced-motion: reduce) {
	.ec-service-detail-wrap .ec-sd-faq-icon::before, .ec-service-detail-wrap .ec-sd-faq-icon::after { transition: none; }
}

/* =========================================================================
 *  CTA STRIP — "Bringing brands to life on the trade show floor"
 *  Client "Final Remarks" #6. Full-bleed recent booth photo + navy scrim +
 *  headline + one gold CTA. The photo is the single bold element; type and
 *  button stay quiet. Reuses brand tokens (navy/gold/Manrope) for cohesion.
 * ========================================================================= */
.ec-service-detail-wrap .ec-sd-cta-strip {
	position: relative;
	background: var(--ec-navy, #04171A);
	background-size: cover;
	background-position: center 38%;   /* bias toward booth structure, not the floor */
	overflow: hidden;
	text-align: center;
}
.ec-service-detail-wrap .ec-sd-cta-strip--has-photo {
	background-image: var(--ec-strip-photo-url);
}
/* Navy scrim for legibility over the photo — dark enough for white type at AA. */
.ec-service-detail-wrap .ec-sd-cta-strip::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(4, 23, 26, 0.72) 0%,
		rgba(4, 23, 26, 0.60) 50%,
		rgba(3, 16, 18, 0.82) 100%);
}
.ec-service-detail-wrap .ec-sd-cta-strip__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(4.5rem, 11vw, 8.5rem) clamp(1.5rem, 5vw, 4rem);
}
.ec-service-detail-wrap .ec-sd-cta-strip__title {
	font-family: var(--ec-font-display) !important;
	font-weight: 700;
	/* !important: a broad .ec-services heading rule paints headings navy — over the
	   dark photo the title vanished. Force white so it stays legible on the scrim. */
	color: #fff !important;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
}
.ec-service-detail-wrap .ec-sd-cta-strip__sub {
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1rem, 2vw, 1.18rem);
	line-height: 1.55;
	max-width: 48ch;
	margin: 1.4rem auto 0;
}
.ec-service-detail-wrap .ec-sd-cta-strip__btn { margin-top: 2.4rem; }



/* ==========================================================================
   Hero photo — three-column band:  blur | photo | blur
   ==========================================================================
   Client 2026-07-21, refined over several passes and finally specified as
   "grid1 (blur) | grid2 (image) | grid3 (blur)".

   The band is ~1440x618 but the photo is 4:3 (2400x1800), so `cover` cropped
   most of it away and `contain` left bare gaps at the sides. This paints the
   photo SHARP and WHOLE in a centre column at its natural aspect (618px tall
   -> ~824px wide), and fills the leftover column each side with a blurred,
   dimmed copy so there is no empty space.

   Implemented with a real 3-column grid rather than layered backgrounds: the
   element's own background paints BELOW its ::before in the same stacking
   context, so a z-index:-1 blur layer covered the sharp copy entirely. Three
   columns each own their paint — no negative z-index, no stacking games.

   NOTE ::after is deliberately untouched: `.ec-services .ec-hero::after` owns
   the gold accent tick at the hero's bottom-left.

   Scoped to .ec-service-detail-hero — hero-photo.php is shared by seven page
   types and none of the others should change. */
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo {
	position: relative;
	overflow: hidden;
	background-color: var(--ec-navy) !important;
	background-image: none !important;
}

/* The photo band itself: one blurred column, the sharp photo, one blurred
   column. `1fr auto 1fr` lets the centre sit at the photo's true aspect while
   the side columns absorb whatever is left. */
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-bg,
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	pointer-events: none;
	/* Columns 1 and 3: the blurred fill. Column 2 is left transparent and the
	   sharp photo is painted by the element's ::before background below. */
	/* !important throughout: lib/hero-photo.php sets this pseudo-element's
	   background-image to a navy gradient with !important, which otherwise
	   wins and paints the side columns flat navy instead of blurred photo. */
	background-image: var(--ec-hero-photo-url) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	filter: blur(22px) saturate(0.95) brightness(0.62);
	transform: scale(1.08);
}

/* Sharp, whole photo centred on top of the blurred fill. aspect-ratio keeps it
   at the image's true 4:3 so nothing is cropped. */
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-photo-sharp {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Anchored to the RIGHT half by WIDTH, not by aspect-ratio. An
	   aspect-ratio box grows with the hero's height, and reserving text space
	   via padding increases that height — a feedback loop that kept the photo
	   expanding back over the copy. A width-based column is stable. */
	right: 0;
	width: 52%;
	z-index: 1;
	background-image: var(--ec-hero-photo-url);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Copy sits above both layers, with a soft scrim so it reads over the photo. */
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo > *:not(.ec-hero-photo-sharp) {
	position: relative;
	z-index: 2;
}
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-title,
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-sub,
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-eyebrow,
.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-detail-back {
	text-shadow: 0 2px 20px rgba(2, 13, 15, 0.95), 0 1px 5px rgba(2, 13, 15, 0.9);
}

/* Copy is constrained to the left blurred column so it no longer overlaps the
   sharp photo. The centre column starts at (100% - photoWidth)/2; the photo is
   4:3 and full-bleed vertically, so its width == hero height * 4/3. Reserving
   that much padding-right keeps the text clear of it at any viewport. */
@media ( min-width: 1024px ) {
	.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo {
		/* photo occupies the right 52%; keep the copy inside the left 48% */
		padding-right: 54% !important;
	}
	.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-title,
	.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-sub {
		max-width: 100% !important;
	}
}

@media ( max-width: 1023px ) {
	/* Narrow viewports: the copy centres over the frame, so a sharp photo
	   behind it hurts legibility. Drop the sharp column and let the blurred
	   fill carry the whole band. */
	.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo .ec-hero-photo-sharp {
		display: none;
	}
	.ec-service-detail-wrap .ec-service-detail-hero.ec-hero--has-photo::before {
		filter: blur(30px) saturate(0.85) brightness(0.34);
	}
}