/* Extreme — sectors: light paper section, photo tiles with names over a shade. */
.ex.sectors { background: var(--ex-paper); color: var(--ex-ink-text); }
.ex.sectors .eyebrow { color: var(--ex-green-dark); }
.ex.sectors .lead { color: var(--ex-ink-dim); }
.ex .sec-head--row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; max-width: none; }
.ex .sec-head--row .lead { margin-top: 0; }
.ex .sec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.ex .sector { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 4px; background: var(--ex-navy-800); color: #fff; }
.ex .sector--wide { grid-column: span 2; }
.ex .sector img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ex-ease); }
.ex a.sector:hover img { transform: scale(1.05); }
.ex .sector::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 15, 34, .92) 0%, rgba(7, 15, 34, .25) 55%, rgba(7, 15, 34, 0) 75%); }
.ex .sector span { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; }
.ex .sector b { font-size: 22px; font-weight: 800; font-stretch: 115%; font-style: italic; line-height: 1.05; text-transform: uppercase; }
.ex .sector small { font-size: var(--ex-fs-small); color: #d3dbec; }

@media (max-width: 1100px) {
	.ex .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.ex .sec-head--row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
	.ex .sec-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; gap: 12px; }
	.ex .sector--wide { grid-column: auto; }
}