/* Extreme — service hero: split, copy left, tall slanted photo right; arc rule under the title. */
.ex.svchero { --shr-acc: var(--ex-green); position: relative; padding: calc(var(--ex-hdr) + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 104px); background: radial-gradient(120% 90% at 100% 0%, var(--ex-navy-700) 0%, var(--ex-navy-900) 45%, var(--ex-ink) 100%); color: var(--ex-text); overflow: hidden; }
.ex.svchero--amber { --shr-acc: var(--ex-amber); }
.ex .shr-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ex .shr-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-text-dim); }
.ex .shr-crumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.ex .shr-crumb a { color: var(--ex-text-dim); }
.ex .shr-crumb a:hover { color: #fff; }
.ex .shr-crumb [aria-current] { color: var(--shr-acc); }
.ex .shr-kick { display: inline-block; margin-bottom: 18px; padding: 6px 14px; border: 1px solid var(--shr-acc); border-radius: 3px; transform: skewX(-10deg); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--shr-acc); }
.ex .shr-h { font-size: clamp(44px, 6vw, 96px); line-height: .9; font-weight: 880; font-stretch: 125%; font-style: italic; letter-spacing: -.025em; text-transform: uppercase; color: #fff; }
.ex .shr-h::after { content: ""; display: block; width: min(260px, 50%); height: 5px; margin-top: 26px; background: var(--ex-arc); transform: skewX(-24deg); transform-origin: left; }
.ex.svchero--amber .shr-h::after { background: linear-gradient(90deg, var(--ex-amber), rgba(255, 197, 61, 0)); }
.ex .shr-lead { margin: 24px 0 32px; font-size: var(--ex-fs-lead); line-height: 1.55; color: var(--ex-text-dim); max-width: 46ch; }
.ex .shr-acts { display: flex; flex-wrap: wrap; gap: 14px; }
.ex.svchero--amber .shr-acts .btn--go { background: var(--ex-amber); color: #2a1d00; }
.ex.svchero--amber .shr-acts .btn--go:hover { background: #ffd56e; }
.ex .shr-facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid var(--ex-line); }
.ex .shr-facts li { flex: 1 1 0; min-width: 120px; padding: 18px 20px 0 0; }
.ex .shr-facts li + li { padding-left: 20px; border-left: 1px solid var(--ex-line); }
.ex .shr-facts b { display: block; font-size: 26px; font-weight: 850; font-stretch: 120%; font-style: italic; line-height: 1.1; color: #fff; }
.ex .shr-facts span { font-size: var(--ex-fs-small); color: var(--ex-text-dim); }
.ex .shr-media { position: relative; isolation: isolate; }
.ex .shr-media img, .ex .shr-ph { display: block; width: 100%; height: clamp(420px, 62vh, 640px); object-fit: cover; border-radius: 4px; clip-path: polygon(calc(var(--ex-cut) * 3) 0, 100% 0, 100% calc(100% - var(--ex-cut) * 3), calc(100% - var(--ex-cut) * 3) 100%, 0 100%, 0 calc(var(--ex-cut) * 3)); }
.ex .shr-ph { background: var(--ex-navy-800); }
.ex .shr-media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border: 2px solid var(--shr-acc); border-radius: 4px; opacity: .45; clip-path: polygon(calc(var(--ex-cut) * 3) 0, 100% 0, 100% calc(100% - var(--ex-cut) * 3), calc(100% - var(--ex-cut) * 3) 100%, 0 100%, 0 calc(var(--ex-cut) * 3)); }
.ex .shr-tag { position: absolute; left: -12px; bottom: 32px; padding: 12px 18px; background: var(--shr-acc); color: var(--ex-green-ink); font-weight: 800; font-stretch: 112%; transform: skewX(-10deg); }
.ex.svchero--amber .shr-tag { color: #2a1d00; }
.ex .shr-tag > span { display: inline-block; transform: skewX(10deg); }
@media (max-width: 900px) {
	.ex .shr-grid { grid-template-columns: minmax(0, 1fr); }
	.ex .shr-media { order: -1; }
	.ex .shr-media img, .ex .shr-ph { height: auto; aspect-ratio: 4 / 3; }
	.ex .shr-media::before { display: none; }
	.ex .shr-tag { left: 0; bottom: 16px; }
}
@media (max-width: 640px) {
	.ex.svchero { padding: calc(var(--ex-hdr) + 16px) 0 48px; }
	/* sized so the longest word ("MANAGEMENT.") fits a 390px phone */
	.ex .shr-h { font-size: clamp(32px, 9.4vw, 54px); }
	.ex .shr-lead { font-size: 16.5px; }
	.ex .shr-acts .btn { flex: 1 1 100%; }
	.ex .shr-facts li { min-width: 0; padding-right: 12px; }
	.ex .shr-facts li + li { padding-left: 12px; }
	.ex .shr-facts b { font-size: 21px; }
}