/* Extreme — sectors index: paper page, huge typographic rows, photo frame on the right. */
.ex.sectorlist { background: var(--ex-paper); color: var(--ex-ink-text); padding: calc(var(--ex-hdr) + clamp(48px, 7vw, 104px)) 0 var(--ex-sec); }
.ex.sectorlist .eyebrow { color: var(--ex-green-dark); }
.ex.sectorlist .lead { color: var(--ex-ink-dim); }
.ex .sl-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 2px solid var(--ex-ink-text); }
.ex .sl-h { font-size: var(--ex-fs-hero); line-height: .9; font-weight: 880; font-stretch: 125%; font-style: italic; letter-spacing: -.025em; text-transform: uppercase; color: var(--ex-navy-900); text-wrap: balance; }
.ex .sl-head .lead { margin: 0; }

.ex .sl-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ex .sl-list { counter-reset: none; }
.ex .sl-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--ex-line-light); color: inherit; text-decoration: none; }
.ex .sl-num { font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ex-ink-dim); transition: color .25s; }
.ex .sl-thumb { display: none; }
.ex .sl-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex .sl-name { font-size: clamp(28px, 3.4vw, 52px); line-height: .95; font-weight: 850; font-stretch: 122%; font-style: italic; letter-spacing: -.02em; text-transform: uppercase; color: var(--ex-ink-text); transition: color .25s, transform .35s var(--ex-ease); }
.ex .sl-line { font-size: 16px; color: var(--ex-ink-dim); }
.ex .sl-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--ex-line-light); border-radius: 50%; color: var(--ex-ink-text); transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ex-ease); }
.ex .sl-arrow svg { width: 20px; height: 20px; }
.ex .sl-row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ex-arc); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ex-ease); }
.ex .sl-row.is-on .sl-num, .ex .sl-row:hover .sl-num { color: var(--ex-green-dark); }
.ex .sl-row.is-on .sl-name, .ex .sl-row:hover .sl-name { color: var(--ex-brand); transform: translateX(8px); }
.ex .sl-row.is-on::before, .ex .sl-row:hover::before { transform: scaleX(1); }
.ex a.sl-row:hover .sl-arrow, .ex a.sl-row:focus-visible .sl-arrow { background: var(--ex-green); border-color: var(--ex-green); color: var(--ex-green-ink); transform: translateX(4px); }

.ex .sl-frame { position: sticky; top: calc(var(--ex-hdr) + 24px); aspect-ratio: 4 / 5; margin-top: 26px; overflow: hidden; border-radius: 4px; background: var(--ex-navy-800); clip-path: polygon(var(--ex-cut) 0, 100% 0, 100% calc(100% - var(--ex-cut)), calc(100% - var(--ex-cut)) 100%, 0 100%, 0 var(--ex-cut)); }
.ex .sl-pic { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .45s var(--ex-ease), transform .7s var(--ex-ease); }
.ex .sl-pic.is-on { opacity: 1; transform: none; }
.ex .sl-pic img { width: 100%; height: 100%; object-fit: cover; }
.ex .sl-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ex-arc); }

@media (max-width: 900px) {
	.ex .sl-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ex .sl-body { grid-template-columns: minmax(0, 1fr); }
	.ex .sl-frame { display: none; }
	.ex .sl-row { grid-template-columns: 96px minmax(0, 1fr) 40px; padding: 18px 0; }
	.ex .sl-num { display: none; }
	.ex .sl-thumb { display: block; width: 96px; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--ex-navy-800); }
	.ex .sl-thumb img { width: 100%; height: 100%; object-fit: cover; }
	.ex .sl-arrow { width: 40px; height: 40px; }
	.ex .sl-row.is-on .sl-name, .ex .sl-row:hover .sl-name { transform: none; }
	.ex .sl-row.is-on::before { transform: scaleX(0); }
}
@media (max-width: 640px) {
	.ex .sl-h { font-size: clamp(40px, 12vw, 54px); }
	.ex .sl-row { grid-template-columns: 76px minmax(0, 1fr) 36px; gap: 14px; }
	.ex .sl-thumb { width: 76px; }
	.ex .sl-name { font-size: 22px; }
	.ex .sl-line { font-size: 14px; }
	.ex .sl-arrow { width: 36px; height: 36px; }
}