/* Extreme — services that apply: compact horizontal cards with a slanted coloured left edge. */
.ex.svcfit { padding: clamp(64px, 7vw, 104px) 0; background: #fff; color: var(--ex-ink-text); }
.ex.svcfit .eyebrow { color: var(--ex-green-dark); }
.ex.svcfit .h2 { color: var(--ex-navy-900); }
.ex .sf-head { margin-bottom: clamp(28px, 3vw, 44px); }
.ex .sf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ex .sf-cards li { display: flex; }
.ex .sf-card { --sf-edge: var(--ex-brand); position: relative; display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 22px 24px 46px; background: var(--ex-paper); border-radius: 4px; color: inherit; text-decoration: none; overflow: hidden; transition: background-color .25s, transform .25s var(--ex-ease); }
.ex .sf-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: var(--sf-edge); clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%); }
.ex .sf-card--x { --sf-edge: var(--ex-amber); }
.ex .sf-txt { flex: 1; min-width: 0; }
.ex .sf-card b { display: block; font-size: 21px; font-weight: 850; font-stretch: 118%; font-style: italic; line-height: 1.05; text-transform: uppercase; color: var(--ex-navy-900); margin-bottom: 6px; }
.ex .sf-card p { font-size: 15px; line-height: 1.5; color: var(--ex-ink-dim); }
.ex .sf-arrow { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ex-ink-text); transition: background-color .25s, color .25s, transform .25s var(--ex-ease); }
.ex .sf-arrow svg { width: 18px; height: 18px; }
.ex a.sf-card:hover, .ex a.sf-card:focus-visible { background: #eaeef6; }
.ex a.sf-card:hover .sf-arrow, .ex a.sf-card:focus-visible .sf-arrow { background: var(--ex-green); color: var(--ex-green-ink); transform: translateX(3px); }
.ex a.sf-card--x:hover .sf-arrow, .ex a.sf-card--x:focus-visible .sf-arrow { background: var(--ex-amber); color: var(--ex-ink-text); }

@media (max-width: 1000px) {
	.ex .sf-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ex .sf-card { padding: 20px 16px 20px 38px; gap: 14px; }
	.ex .sf-card::before { width: 18px; }
	.ex .sf-card b { font-size: 19px; }
	.ex .sf-arrow { width: 38px; height: 38px; }
}