:root { --text: #171717; --accent: #8e3b46; --muted: #494949; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left,rgba(0,0,0,.06),transparent 34%),linear-gradient(180deg,#fafafa 0%,#f0f0f0 46%,#f7f7f7 100%); }
.app-shell { max-width: 1280px; margin: auto; padding: 1.35rem 1rem 2.75rem; }
.toc-navbar { height: 100dvh; overflow-y: auto; padding: 1.25rem 1rem; border-right: 1px solid rgba(70,70,70,.14); background: rgba(250,250,250,.97); }
.toc-heading { padding: .25rem .65rem 1.15rem; }
.toc-brand { color: var(--accent); font-size: .82rem; font-weight: 900; letter-spacing: .18em; }
.toc-title { margin-top: .5rem; color: #171717; font-size: 1.42rem; font-weight: 850; line-height: 1.12; }
.toc-credit { margin-top: .8rem; color: #666; font-size: .78rem; }
.toc-credit a { color: var(--accent); font-weight: 750; text-decoration: none; }
.toc-credit a:hover { text-decoration: underline; }
.toc-credit a:focus-visible { border-radius: 3px; outline: 3px solid rgba(142,59,70,.22); outline-offset: 3px; }
.toc-copy { margin-top: .65rem; color: var(--muted); font-size: .98rem; line-height: 1.55; }
.toc-link { min-height: 50px; padding: .7rem .85rem; border-radius: 14px; font-weight: 700; }
.toc-link .mantine-NavLink-label { font-size: .96rem; font-weight: 800; }
.toc-link[data-active="true"] { background: var(--accent); }
.hero-shell { padding: 1.8rem 2rem; border-radius: 24px; color: #f8f8f8; background: linear-gradient(135deg,#161616,#545454); box-shadow: 0 16px 34px rgba(0,0,0,.13); }
.hero-eyebrow,.section-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800; }
.hero-title { max-width: 18ch; margin: .5rem 0; font-size: 2.55rem; line-height: 1.02; }
.hero-copy { max-width: 58ch; font-size: 1.05rem; line-height: 1.7; }
.hero-note { max-width: 70ch; color: #e5e5e5; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; margin: .8rem 0; }
.metric-card,.section-card { padding: 1.1rem; border: 1px solid rgba(70,70,70,.16); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.metric-label,.insight-label { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.metric-value { margin: .45rem 0; color: #111; font-size: 1.65rem; font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; }
.metric-value-long { font-size: clamp(1.25rem,1.75vw,1.45rem); }
.metric-copy,.section-copy,.insight-text { color: #3f3f3f; line-height: 1.55; }
.section-card { margin-bottom: 1rem; }
.section-title { margin: .25rem 0 .4rem; font-size: 1.4rem; font-weight: 800; }
.insight-card { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(80,80,80,.08); border-radius: 16px; background: #f1f1f1; }
.insight-card summary { position: relative; padding-right: 1.5rem; cursor: pointer; list-style: none; }
.insight-card summary::-webkit-details-marker { display: none; }
.insight-card summary::after { position: absolute; right: 0; content: "+"; color: var(--accent); font-size: 1.1rem; line-height: .8; }
.insight-card[open] summary::after { content: "−"; }
.insight-card summary:focus-visible { border-radius: 4px; outline: 3px solid rgba(142,59,70,.28); outline-offset: 4px; }
.insight-text { margin-top: .4rem; white-space: pre-line; }
.two-column-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: start; margin: 1rem 0; }
.overview-grid { align-items: stretch; }
.overview-grid > .section-card { height: 100%; margin-bottom: 0; }
.methodology-chart-card { margin-top: 0; }
.methodology-chart-card .chart-shell { margin-top: .5rem; }
.methodology-definition-card { margin-top: 1.25rem; }
.methodology-definition-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1rem; }
.methodology-definition-grid .insight-card { height: 100%; margin-top: 0; }
.methodology-analysis-grid { grid-template-columns: minmax(0,2.2fr) minmax(20rem,1fr); align-items: center; margin-top: 1.5rem; }
.methodology-analysis-grid > .section-card { min-width: 0; margin-bottom: 0; }
.graph-first-grid { grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); }
.graph-last-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.9fr); }
.explore-industry-grid { grid-template-columns: minmax(18rem,1fr) minmax(0,2.25fr); align-items: stretch; }
.explore-industry-grid > .section-card { height: 100%; margin-bottom: 0; }
.chart-summary-card .insight-card { margin-top: 0; }
.explore-stakeholder-stack { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin: 1rem 0; }
.explore-stakeholder-stack > div,
.explore-stakeholder-stack .section-card { min-width: 0; }
.explore-stakeholder-stack .section-card { margin-bottom: 0; }
.stakeholder-analysis-grid { grid-template-columns: minmax(0,2.25fr) minmax(18rem,1fr); align-items: stretch; margin: 0; }
.stakeholder-analysis-grid .section-card { min-width: 0; height: 100%; margin-bottom: 0; }
.stakeholder-pattern-card .insight-card { margin-top: 0; }
.explore-chart-card { display: flex; align-items: center; padding: 1rem 1.15rem; }
.explore-chart-card .chart-shell { min-width: 0; }
.chart-summary-card { display: flex; align-items: center; padding: 1.2rem 1.25rem; }
.chart-insight { width: 100%; }
.chart-insight-label { margin-bottom: .8rem; color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.chart-insight-lead { color: #282528; font-size: 1.12rem; font-weight: 700; line-height: 1.55; }
.chart-insight-note { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; color: #514b50; background: #f7eff1; font-size: .96rem; line-height: 1.55; white-space: pre-line; }
.chart-insight-footer { margin-top: 1rem; color: #514f51; font-size: .92rem; line-height: 1.55; }
.chart-insight-footer p { margin: 0; }
.chart-insight-footer p + p { margin-top: .75rem; }
.related-case-card .section-title { overflow-wrap: anywhere; font-size: clamp(1.3rem,2vw,1.55rem); }
.related-case-card .section-title,.case-summary,.related-case-card .insight-card { max-width: 85ch; }
.case-summary { color: #333; line-height: 1.55; }
.case-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 1rem; }
.case-actions .dash-button { margin-top: 0; }
.filter-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(18rem,.8fr); gap: 1rem; align-items: stretch; margin-top: 1rem; }
.filter-block { min-width: 0; padding: 1rem 1.1rem; border: 1px solid rgba(70,70,70,.1); border-radius: 16px; background: rgba(255,255,255,.72); }
.filter-heading { margin-bottom: 1rem; }
.filter-title { color: #171717; font-size: 1rem; font-weight: 800; }
.filter-description { margin-top: .18rem; color: var(--muted); font-size: .82rem; }
.year-slider-shell { position: relative; z-index: 2; min-height: 64px; margin: .35rem .75rem .9rem; padding-top: .35rem; }
.year-slider-shell .mantine-Slider-root { margin-top: .5rem; }
.year-slider-shell .mantine-Slider-track { background: #e5d9dc; }
.year-slider-shell .mantine-Slider-bar { background: var(--accent); }
.year-slider-shell .mantine-Slider-thumb { border-color: var(--accent); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.year-slider-shell .mantine-Slider-markFilled { border-color: var(--accent); }
.year-slider-shell .mantine-Slider-markLabel { margin-top: .35rem; color: #4f535a; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.stakeholder-filter-block { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; overflow: hidden; padding: 1.2rem 1.25rem; border-color: rgba(142,59,70,.18); background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,241,243,.88)); }
.stakeholder-filter-block::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: linear-gradient(180deg,var(--accent),#c78d96); }
.stakeholder-filter-heading { margin-bottom: 1.15rem; }
.filter-eyebrow { margin-bottom: .55rem; color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.stakeholder-filter-title { font-size: 1.15rem; }
.stakeholder-filter-description { max-width: 28rem; margin-top: .35rem; font-size: .86rem; line-height: 1.45; }
.stakeholder-select { width: 100%; }
.stakeholder-select .mantine-Select-input { min-height: 48px; border: 1px solid rgba(77,77,77,.2); background: rgba(255,255,255,.96); font-weight: 650; box-shadow: 0 5px 16px rgba(49,34,38,.06); transition: border-color .18s ease,box-shadow .18s ease; }
.stakeholder-select .mantine-Select-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(142,59,70,.12),0 7px 18px rgba(49,34,38,.08); }
.stakeholder-filter-note { position: relative; margin-top: 1rem; padding-left: 1rem; color: #656066; font-size: .74rem; line-height: 1.45; }
.stakeholder-filter-note::before { position: absolute; top: .42rem; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--accent); box-shadow: 0 0 0 4px rgba(142,59,70,.1); }
.partial-year-check { margin-top: 0; }
.partial-year-check label { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 0; font-weight: 700; line-height: 1.45; }
.partial-year-check input { margin-top: .2rem; accent-color: var(--accent); }
.partial-year-note { margin-top: 1rem; padding: .8rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; color: #444; background: #f4eeee; font-size: .84rem; line-height: 1.55; }
.explore-intro-card { background: linear-gradient(135deg,rgba(248,248,248,.98),rgba(236,236,236,.98)); }
.chart-shell { width: 100%; }
.dash-button { margin-top: 1rem; border: 0; border-radius: 999px; padding: .7rem 1.1rem; color: white; background: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.dash-button:hover { background: #71303a; }
@media (max-width: 800px) { .metric-grid,.two-column-grid,.filter-grid,.methodology-definition-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2.25rem; } .app-shell { padding: 1rem .75rem 3rem; } .toc-navbar { padding: 1rem .65rem; } }