/* Extreme — sub-service hero: copy left on a dark band, "At a glance" card right that overlaps the band's bottom edge. */
.ex.subhero { --sbh-acc: var(--ex-green); --sbh-acc-ink: var(--ex-green-ink); position: relative; padding: calc(var(--ex-hdr) + clamp(36px, 5vw, 72px)) 0 clamp(48px, 6vw, 88px); background: linear-gradient(180deg, var(--ex-ink) 0%, var(--ex-navy-900) 100%); color: var(--ex-text); overflow: hidden; }
.ex.subhero--amber { --sbh-acc: var(--ex-amber); --sbh-acc-ink: #2a1d00; }
/* faint diagonal stripes behind the copy */
.ex.subhero::before { content: ""; position: absolute; inset: 0 45% 0 0; background: repeating-linear-gradient(-60deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px); pointer-events: none; }
.ex .sbh-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ex .sbh-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-text-dim); }
.ex .sbh-crumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.ex .sbh-crumb a { color: var(--ex-text-dim); }
.ex .sbh-crumb a:hover { color: #fff; }
.ex .sbh-crumb [aria-current] { color: var(--sbh-acc); }
.ex .sbh-tag { display: inline-block; margin-bottom: 20px; padding: 7px 16px; background: var(--sbh-acc); color: var(--sbh-acc-ink); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: skewX(-12deg); }
.ex .sbh-tag > span { display: inline-block; transform: skewX(12deg); }
.ex .sbh-h { font-size: clamp(40px, 5.2vw, 84px); line-height: .92; font-weight: 880; font-stretch: 125%; font-style: italic; letter-spacing: -.025em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.ex .sbh-lead { margin: 24px 0 32px; padding-left: 18px; border-left: 4px solid var(--sbh-acc); font-size: var(--ex-fs-lead); line-height: 1.55; color: var(--ex-text-dim); max-width: 50ch; }
.ex .sbh-acts { display: flex; flex-wrap: wrap; gap: 14px; }
.ex.subhero--amber .sbh-acts .btn--go { background: var(--ex-amber); color: #2a1d00; }
.ex.subhero--amber .sbh-acts .btn--go:hover { background: #ffd56e; }

.ex .sbh-card { position: relative; background: var(--ex-navy-800); border: 1px solid var(--ex-line); border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); clip-path: polygon(0 0, calc(100% - var(--ex-cut) * 1.5) 0, 100% calc(var(--ex-cut) * 1.5), 100% 100%, 0 100%); }
.ex .sbh-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 4px; background: var(--sbh-acc); }
.ex.subhero:not(.subhero--amber) .sbh-card::before { background: var(--ex-arc); }
.ex .sbh-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ex .sbh-body { padding: 22px 26px 26px; }
.ex .sbh-ct { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sbh-acc); }
.ex .sbh-rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--ex-line); }
.ex .sbh-rows > div:first-child { border-top: 0; }
.ex .sbh-rows dt { font-size: var(--ex-fs-small); color: var(--ex-text-dim); }
.ex .sbh-rows dd { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.4; color: #fff; }

@media (max-width: 960px) {
	.ex .sbh-grid { grid-template-columns: minmax(0, 1fr); }
	.ex.subhero::before { inset: 0; }
}
/* tablet: the card spans the width, photo beside the facts (it sat at 560px, leaving a gap on the right) */
@media (min-width: 641px) and (max-width: 960px) {
	.ex .sbh-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
	.ex .sbh-media img { height: 100%; aspect-ratio: auto; min-height: 280px; }
	.ex .sbh-body { align-self: center; }
}
@media (max-width: 640px) {
	.ex.subhero { padding: calc(var(--ex-hdr) + 16px) 0 48px; }
	.ex .sbh-h { font-size: clamp(36px, 11vw, 50px); }
	.ex .sbh-lead { font-size: 16.5px; }
	.ex .sbh-acts .btn { flex: 1 1 100%; }
	.ex .sbh-body { padding: 18px 18px 20px; }
	.ex .sbh-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}