/* Extreme — related jobs: dark band, slanted-corner cards in a grid; a swipe row on phones. */
.ex.related { --rel-acc: var(--ex-green); padding: clamp(64px, 7vw, 112px) 0; background: var(--ex-navy-900); color: var(--ex-text); }
.ex.related--amber { --rel-acc: var(--ex-amber); }
.ex .rel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.ex .rel-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-stretch: 110%; color: var(--rel-acc); }
.ex .rel-all svg, .ex .rel-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s var(--ex-ease); }
.ex .rel-all:hover svg { transform: translateX(4px); }
/* columns chosen from the number of cards so no row is left part-filled: 4 a row, 3 for 3/6/9, 2 for 2 */
.ex .rel-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.ex .rel-row:has(> li:nth-child(3):last-child), .ex .rel-row:has(> li:nth-child(6):last-child), .ex .rel-row:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex .rel-row:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
	.ex .rel-row, .ex .rel-row:has(> li:nth-child(3):last-child), .ex .rel-row:has(> li:nth-child(6):last-child), .ex .rel-row:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ex .rel-row > li { display: flex; }
.ex .rel-card { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 200px; padding: 26px 24px 24px; background: var(--ex-navy-800); border: 1px solid var(--ex-line); color: inherit; clip-path: polygon(0 0, calc(100% - var(--ex-cut)) 0, 100% var(--ex-cut), 100% 100%, 0 100%); transition: background-color .25s, border-color .25s; }
.ex .rel-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rel-acc); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ex-ease); }
.ex a.rel-card:hover { background: var(--ex-navy-700); border-color: rgba(255, 255, 255, .24); }
.ex a.rel-card:hover::before { transform: scaleY(1); }
.ex .rel-card h3 { font-size: 20px; font-weight: 800; font-stretch: 112%; font-style: italic; line-height: 1.15; text-transform: uppercase; color: #fff; }
.ex .rel-card p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ex-text-dim); }
.ex .rel-go { margin-top: auto; padding-top: 18px; color: var(--rel-acc); }
.ex a.rel-card:hover .rel-go svg { transform: translateX(5px); }

@media (max-width: 640px) {
	.ex.related { padding: 56px 0; }
	.ex .rel-row { display: flex; gap: 12px; margin: 0 calc(var(--ex-gutter) * -1); padding: 0 var(--ex-gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ex-gutter); scrollbar-width: none; }
	.ex .rel-row::-webkit-scrollbar { display: none; }
	.ex .rel-row > li { flex: 0 0 78%; scroll-snap-align: start; }
	.ex .rel-card { min-height: 180px; }
}