.ph { position: relative; overflow: hidden; background: var(--graphite); }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eyebrow { margin: 0 0 1.1rem; font-size: 0.8125rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0.09em; line-height: 1.3; text-transform: uppercase; color: var(--copper-ink); }
.sec-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(24px, 5vw, 88px); align-items: start; margin-bottom: clamp(28px, 3.4vw, 48px); }
.sec-top p { margin: 0.3rem 0 0; color: var(--slate); max-width: 58ch; text-wrap: pretty; }
.sec-top p + .more-link { margin-top: 1rem; }
@media (max-width: 900px) { .sec-top { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.sec-dark { background: var(--carbon); color: #fff; }
.sec.sec-dark, .sec-dark + .sec, .sec + .sec-dark { border-top: 0; }
.sec-dark p, .sec-dark .sec-top p { color: var(--fog); }
.sec-dark a { text-decoration-color: var(--copper); }
.sec-dark a:hover { color: var(--copper); }
.sec-dark :focus-visible, .phero :focus-visible, .statband :focus-visible, .split-dark :focus-visible, .fam-panel :focus-visible { outline-color: var(--copper); }
.phero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(340px, 40vw, 540px); background: var(--carbon); color: #fff; }
.phero-img { position: absolute; inset: 0; z-index: -1; }
.phero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 14, 17, 0.8) 0%, rgba(11, 14, 17, 0.6) 46%, rgba(11, 14, 17, 0.12) 100%), linear-gradient(180deg, rgba(11, 14, 17, 0.5) 0%, rgba(11, 14, 17, 0) 34%, rgba(11, 14, 17, 0) 55%, rgba(11, 14, 17, 0.62) 100%); }
@media (max-width: 900px) { .phero-img::after { background: linear-gradient(180deg, rgba(11, 14, 17, 0.5) 0%, rgba(11, 14, 17, 0.4) 24%, rgba(11, 14, 17, 0.84) 62%, rgba(11, 14, 17, 0.95) 100%); } }
.phero-copy { padding-block: clamp(96px, 12vw, 180px) clamp(32px, 4.5vw, 60px); }
.phero h1 { font-size: clamp(2rem, 3.8vw, 3.375rem); max-width: 20ch; text-wrap: balance; }
.phero .lede { margin: 1.1rem 0 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.5; color: #dfe4e8; }
.phero ~ .sec { padding-block: clamp(48px, 6vw, 96px); }
.lead-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(24px, 5vw, 88px); align-items: end; }
.lead { margin: 0; font-size: clamp(1.5rem, 2.7vw, 2.375rem); line-height: 1.18; font-weight: 500; font-stretch: 108%; letter-spacing: -0.02em; text-wrap: balance; }
.lead-side p { margin: 0; color: var(--slate); max-width: 48ch; text-wrap: pretty; }
.lead-side .actions { margin-top: 1.5rem; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps > li { position: relative; margin: 0; padding: 1.6rem clamp(16px, 2.2vw, 32px) 0 0; border-top: 1px solid var(--ink); }
.steps > li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper-ink); }
.step-n { display: block; margin-bottom: 0.55rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; color: var(--copper-ink); font-variant-numeric: tabular-nums lining-nums; }
.steps h3 { margin-bottom: 0.45rem; }
.steps p { margin: 0; color: var(--slate); font-size: 0.9688rem; line-height: 1.5; }
@media (max-width: 1000px) {
.steps { grid-template-columns: minmax(0, 1fr); }
.steps > li { padding: 0 0 1.6rem 1.75rem; border-top: 0; border-left: 1px solid var(--ink); }
.steps > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.steps > li::before { left: -5px; top: 0.3rem; }
.steps p { max-width: 52ch; }
}
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { margin: 0; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hair); border-top: 2px solid var(--ink); padding: clamp(1.25rem, 2.2vw, 1.9rem); }
.card h3 { font-size: 1.1875rem; margin-bottom: 0.6rem; text-wrap: balance; }
.card p { margin: 0; color: var(--slate); }
.card .std { margin-top: auto; padding-top: 1.1rem; font-size: 0.875rem; color: var(--slate); font-variant-numeric: tabular-nums lining-nums; }
.card .ticks { margin-bottom: 0.4rem; }
@media (max-width: 900px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; margin: 0; padding: 0.42rem 0 0.42rem 1.5rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.22em; width: 0.7rem; height: 1px; background: var(--copper-ink); }
.dlist { margin: 1.5rem 0 0; border-bottom: 1px solid var(--hair); }
.dlist > div { padding: 0.95rem 0 1rem; border-top: 1px solid var(--hair); }
.dlist > div:first-child { border-top-color: var(--ink); }
.dlist dt { font-weight: 500; font-stretch: 104%; }
.dlist dd { margin: 0.2rem 0 0; color: var(--slate); text-wrap: pretty; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.panel { background: var(--paper); border: 1px solid var(--hair); padding: clamp(1.5rem, 3vw, 2.5rem); }
.panel > p { margin: 0.8rem 0 0; color: var(--slate); max-width: 48ch; }
@media (max-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--wrap) / 2)) minmax(0, calc(var(--wrap) / 2)) minmax(var(--gutter), 1fr); background: var(--mist); }
.split-media { grid-column: 1 / 3; grid-row: 1; min-height: clamp(340px, 40vw, 600px); }
.split-body { grid-column: 3 / 4; grid-row: 1; align-self: center; padding: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px); }
.split-rev .split-media { grid-column: 3 / 5; }
.split-rev .split-body { grid-column: 2 / 3; padding-left: 0; padding-right: clamp(28px, 5vw, 80px); }
.split-body > p { color: var(--slate); max-width: 56ch; text-wrap: pretty; }
.split-body > h2 + p { margin-top: 1rem; }
.split-body .statement { color: var(--ink); }
.split-body .caps { margin-top: 1.75rem; }
.split-body .ticks { margin-top: 1.25rem; border-top: 1px solid var(--ink); padding-top: 0.6rem; }
.split .caps > div, .split .dlist > div, .split .dlist { border-color: #d5dadd; }
.split .dlist > div:first-child { border-top-color: var(--ink); }
.split-paper { background: var(--paper); }
.split-paper .dlist > div, .split-paper .dlist { border-color: var(--hair); }
.split-paper .dlist > div:first-child { border-top-color: var(--ink); }
.split-dark { background: var(--carbon); color: #fff; }
.split-dark .split-body > p, .split-dark .caps dd { color: var(--fog); }
.split-dark .caps { border-top-color: #5c6772; }
.split-dark .caps > div { border-bottom-color: var(--line-dark); }
@media (max-width: 900px) {
.split { grid-template-columns: minmax(0, 1fr); }
.split-media, .split-rev .split-media { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
.split-body, .split-rev .split-body { grid-column: 1; grid-row: auto; padding: clamp(36px, 7vw, 56px) var(--gutter) clamp(40px, 8vw, 64px); }
}
.statband { position: relative; isolation: isolate; background: var(--carbon); color: #fff; padding-block: clamp(64px, 8vw, 128px); }
.statband-img { position: absolute; inset: 0; z-index: -1; }
.statband-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 14, 17, 0.93), rgba(11, 14, 17, 0.86) 42%, rgba(11, 14, 17, 0.58)), linear-gradient(180deg, rgba(11, 14, 17, 0.2), rgba(11, 14, 17, 0.6)); }
.statband-img img { filter: saturate(0.55); }
@media (max-width: 760px) { .statband-img::after { background: rgba(11, 14, 17, 0.86); } }
.statband .eyebrow { color: var(--copper); }
.statband .lead { max-width: 34em; font-size: clamp(1.375rem, 2.3vw, 2rem); }
.stats-of { margin: clamp(36px, 5vw, 64px) 0 0.9rem; font-size: 0.875rem; color: #c3cad0; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.32); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1.5rem 1.5rem 0 0; }
.stats > div + div { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid rgba(255, 255, 255, 0.2); }
.stats dt { margin-top: 0.55rem; font-size: 0.875rem; color: #c3cad0; }
.stats dd { margin: 0; font-size: clamp(1.75rem, 3.5vw, 3.125rem); line-height: 1.02; font-weight: 500; font-stretch: 112%; letter-spacing: -0.025em; font-variant-numeric: lining-nums; text-wrap: balance; }
.statband .more-link { color: #fff; }
.statband .more-link:hover { color: var(--copper); }
@media (max-width: 760px) {
.stats { grid-template-columns: minmax(0, 1fr); }
.stats > div { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.stats > div + div { padding-left: 0; border-left: 0; }
}
.stats-stack { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.stats-stack > div, .stats-stack > div + div { padding: 0 0 1.2rem; margin-bottom: 1.2rem; border-left: 0; border-bottom: 1px solid var(--line-dark); }
.stats-stack > div:last-child { margin-bottom: 0; }
.stats-stack dd { font-size: clamp(1.75rem, 3vw, 2.625rem); }
.mkts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.mkt { margin: 0; grid-column: span 2; }
.mkt:nth-child(-n + 2) { grid-column: span 3; }
.mkt .ph { aspect-ratio: 3 / 2; margin-bottom: 1.1rem; }
.mkt:nth-child(-n + 2) .ph { aspect-ratio: 16 / 9; }
.mkt h3 { font-size: 1.1875rem; margin-bottom: 0.35rem; }
.mkt p { margin: 0; color: var(--slate); font-size: 0.9688rem; max-width: 48ch; text-wrap: pretty; }
@media (max-width: 900px) {
.mkts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mkt, .mkt:nth-child(-n + 2) { grid-column: auto; }
.mkt:first-child { grid-column: 1 / -1; }
.mkt:nth-child(2) .ph { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) { .mkts { grid-template-columns: minmax(0, 1fr); } .mkt .ph, .mkt:nth-child(-n + 2) .ph { aspect-ratio: 16 / 9; } }
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.pcards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { position: relative; margin: 0; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hair); transition: border-color 0.15s; }
.pcard:hover { border-color: var(--ink); }
.pcard-fig { background: var(--carbon); aspect-ratio: 2 / 1; overflow: hidden; }
.pcard-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 90% 50%; transform-origin: 100% 50%; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard:hover .pcard-fig img { transform: scale(1.05); }
.pcard-body { flex: 1; display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1.25rem; }
.pcard h3 { font-size: 1.0938rem; line-height: 1.25; margin-bottom: 0.4rem; text-wrap: balance; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard:hover h3 a { color: var(--copper-ink); }
.pcard p { margin: 0; font-size: 0.9063rem; line-height: 1.45; color: var(--slate); }
.pcard .pcard-span { margin-top: auto; padding-top: 0.9rem; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.pcard:has(a:focus-visible) { outline: 2px solid var(--copper-ink); outline-offset: 3px; }
.pcard h3 a:focus-visible { outline: none; }
@media (max-width: 1100px) { .pcards, .pcards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcards-3 .pcard:nth-child(3) { display: none; } }
@media (max-width: 560px) { .pcards, .pcards-3 { grid-template-columns: minmax(0, 1fr); } .pcard-fig { aspect-ratio: 5 / 2; } .pcards-3 .pcard:nth-child(3) { display: flex; } }
@media (prefers-reduced-motion: reduce) { .pcard-fig img { transition: none; } .pcard:hover .pcard-fig img { transform: none; } }
.fam-head { padding-bottom: clamp(28px, 4vw, 48px); }
.fam-head .meta { margin-top: clamp(24px, 3.5vw, 44px); }
.cut { margin-top: clamp(28px, 4vw, 48px); }
.cut-stage { position: relative; width: min(100%, calc(50% + 620px), 1440px); aspect-ratio: 4 / 1; min-height: 170px; }
.cut-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.cut-labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; font-family: var(--font); }
.cut-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; font-size: 0.875rem; color: #c3cad0; }
.cut-legend li { margin: 0; }
.cut-legend .cut-key { color: var(--fog); flex-basis: 100%; }
@media (min-width: 1100px) {
.cut { margin-top: 5.5rem; }
.cut.has-below { margin-bottom: 3rem; }
.cut-labels { display: block; }
.cut-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sys { padding-block: 0 clamp(48px, 6vw, 88px); }
.sys .sec-top { padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-dark); margin-bottom: clamp(16px, 2.4vw, 32px); }
.sys-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.sys-legend { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); border-top: 1px solid #5c6772; }
.sys-legend li { margin: 0; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.15rem 0.8rem; align-content: start; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line-dark); }
.sys-n { grid-row: 1 / 3; align-self: start; margin-top: 0.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--copper); color: var(--carbon); font-size: 0.8125rem; font-weight: 600; line-height: 1.5rem; text-align: center; font-variant-numeric: tabular-nums lining-nums; }
.sys-legend a { grid-column: 2; color: #fff; font-weight: 500; text-decoration: none; text-wrap: balance; }
.sys-legend a:hover { color: var(--copper); text-decoration: underline; text-decoration-color: var(--copper); }
.sys-role { grid-column: 2; color: var(--fog); font-size: 0.9063rem; line-height: 1.45; }
@media (max-width: 1099px) { .sys { display: none; } }
.fams { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 6vw, 88px); }
.fam { padding-block: clamp(20px, 2.6vw, 36px); }
.fam-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--carbon); color: #fff; }
.fam-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.5rem); }
.fam-n { margin: 0 0 0.9rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; color: var(--copper); font-variant-numeric: tabular-nums lining-nums; }
.fam-copy h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); text-wrap: balance; }
.fam-copy h2 a { color: #fff; text-decoration: none; }
.fam-copy h2 a:hover { color: var(--copper); }
.fam-copy p { margin: 0.8rem 0 1.5rem; color: var(--fog); font-size: 0.9688rem; max-width: 46ch; text-wrap: pretty; }
.fam-copy .more-link { margin-top: auto; color: #fff; }
.fam-copy .more-link:hover { color: var(--copper); }
.fam-cut { position: relative; overflow: hidden; min-height: 230px; }
.fam-cut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.fam .types { border-top: 0; margin-top: 0.4rem; }
@media (max-width: 900px) {
.fam-panel { grid-template-columns: minmax(0, 1fr); }
.fam-cut { grid-row: 1; min-height: 0; aspect-ratio: 3 / 1; }
}
@media (min-width: 1101px) { .fam .types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.statband + .band, .split-dark + .band, .sec-dark + .band { border-top: 1px solid var(--line-dark); }
.phero + .sys .sec-top { border-top: 0; }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps-4 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; } .trio .panel { padding: clamp(1.25rem, 2vw, 1.9rem); } }
.trio .panel h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.sub-label { margin-top: 1.75rem; }
.field-notes { margin-top: 0; }
.aside h2 ~ h2 { margin-top: 0; }
@media (max-width: 1100px) { .form-grid .aside { order: -1; } .form-grid .aside ul { margin-bottom: 1.5rem; } }
.fam-cut::after { content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(40px, 14%, 120px); background: linear-gradient(90deg, #0b0e11, rgba(11, 14, 17, 0)); pointer-events: none; }
@media (min-width: 901px) { .fam-cut img { top: 14%; bottom: 14%; height: 72%; } }
@media (max-width: 900px) { .fam-cut { aspect-ratio: 5 / 2; } }
.fam .types li.types-all { display: none; }
@media (max-width: 700px) {
.fam .types-long li:nth-child(n + 7):not(.types-all) { display: none; }
.fam .types li.types-all { display: flex; }
}
.types-all a { font-weight: 500; text-decoration: none; padding-block: 0.65rem; border-bottom: 1px solid var(--copper-ink); }
.ph-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 17, 0.42), rgba(11, 14, 17, 0.12) 30%, rgba(11, 14, 17, 0) 55%); }
.split-media img, .mkt .ph img { filter: saturate(0.68) contrast(1.03); }
.sec-cat + .sec-cat { border-top: 0; padding-top: 0; }
.sec-cat .sec-head h2 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
@media (min-width: 1100px) { .cut.has-below { margin-bottom: 4.5rem; } }
.sec-top h2, .split-body h2, .panel h2 { text-wrap: balance; }
h2, h3, legend, dt, .lead, .statement { overflow-wrap: break-word; }
@media (min-width: 601px) and (max-width: 900px) { .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.nav-toggle { min-height: 44px; }
.crumb a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
.sys-svg { overflow: visible; }
.split-body .stats-stack { margin-top: 2rem; }
.mkts-plain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem clamp(16px, 2vw, 28px); }
.mkts-plain li { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.mkts-plain h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; text-wrap: balance; }
.mkts-plain p { margin: 0; color: var(--slate); font-size: 0.9375rem; text-wrap: pretty; }
@media (min-width: 1101px) { .mkts-plain h3 { min-height: 2.6em; } }
@media (min-width: 561px) and (max-width: 1100px) {
.mkts-plain { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mkts-plain li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(24px, 5vw, 88px); align-items: baseline; padding-block: 1.1rem; border-top-color: #d5dadd; }
.mkts-plain li:first-child { border-top-color: var(--ink); }
.mkts-plain li:last-child { border-bottom: 1px solid #d5dadd; }
.mkts-plain h3 { margin: 0; }
}
@media (max-width: 560px) { .mkts-plain { grid-template-columns: minmax(0, 1fr); } }
.band-row > div, .fam-copy h2 { min-width: 0; max-width: 100%; }
.form legend { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .more-link::after, .range .go::before { transition: none; } .more-link:hover::after { transform: none; } }
@media (forced-colors: active) { .field select, .lf select { appearance: auto; -webkit-appearance: auto; background-image: none; } }