.intro-panel-main--map {
  display: grid;
  gap: 1.2rem;
}
.intro-section {
  position: relative;
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
}

.intro-hero-plain {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  padding: clamp(3.2rem, 6vw, 4.6rem) clamp(2.4rem, 7vw, 5.2rem);
  color: #121212;
  display: grid;
  gap: clamp(2rem, 3.6vw, 3rem);
}

.intro-hero-shell {
  display: grid;
  gap: clamp(2rem, 3vw, 2.8rem);
  max-width: 1080px;
}

.intro-hero-head {
  display: grid;
  gap: 0.6rem;
}

.intro-hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.84rem;
  color: rgba(22, 22, 21, 0.58);
}

.intro-hero-title {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.intro-hero-leadline {
  margin: 0;
  font-size: clamp(1.12rem, 2.3vw, 1.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-body {
  display: grid;
  grid-template-columns: minmax(260px, 3fr) minmax(240px, 2fr);
  gap: clamp(2.4rem, 4vw, 3.6rem);
  align-items: start;
}

.intro-hero-text {
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(22, 22, 21, 0.82);
  display: grid;
  gap: 1.15rem;
}

.intro-hero-text p {
  margin: 0;
}

.intro-hero-aside {
  background: #ffffff;
  border: 1px solid rgba(15, 15, 15, 0.12);
  box-shadow: 0 24px 64px rgba(15, 15, 15, 0.08);
  border-radius: 14px;
  padding: clamp(1.8rem, 3vw, 2.2rem);
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.intro-hero-aside__title {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(22, 22, 21, 0.6);
}

.intro-hero-aside__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.64;
  color: rgba(22, 22, 21, 0.72);
}

.intro-hero-aside__metrics {
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.2rem);
}

.intro-hero-aside__metric {
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.intro-hero-aside__metric dt {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-aside__metric dd {
  margin: 0;
  display: grid;
  gap: 0.2rem;
}

.intro-hero-aside__value {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(17, 17, 17, 0.9);
}

.intro-hero-aside__note {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.54);
  font-style: italic;
}

@media (max-width: 900px) {
  .intro-hero-aside__metrics {
    gap: 0.75rem;
  }

  .intro-hero-aside__metric {
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    padding-top: 0.65rem;
  }

  .intro-hero-aside__metric:first-child {
    border-top: none;
    padding-top: 0;
  }
}

.intro-hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
}

.intro-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.6rem;
  border-radius: 999px;
  background: #161615;
  color: #f7f7f5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.92rem;
  transition: background 160ms ease, transform 160ms ease;
}

.intro-hero-cta:hover,
.intro-hero-cta:focus-visible {
  background: #1f1f1d;
  transform: translateY(-2px);
}

.intro-hero-credit {
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(22, 22, 21, 0.54);
}

.intro-hero-plain [data-animate] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 260ms ease, transform 320ms ease;
}

.intro-hero-plain [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .intro-hero-body {
    grid-template-columns: 1fr;
  }

  .intro-hero-aside {
    order: -1;
  }
}
.viz-article-grid {
  display: grid;
  gap: clamp(1.8rem, 2.8vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.viz-article-grid .viz-rail {
  display: grid;
  gap: var(--spacing-2);
}

.viz-analysis-block {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06);
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.4rem);
}

.viz-analysis-block header {
  display: grid;
  gap: 0.35rem;
}

.viz-analysis-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz-analysis-block h4 {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  letter-spacing: -0.01em;
  color: rgba(17, 17, 17, 0.9);
}

.viz-analysis-text {
  display: grid;
  gap: clamp(0.8rem, 1.2vw, 1.1rem);
  font-size: 0.98rem;
  line-height: 1.68;
  color: rgba(17, 17, 17, 0.74);
}

.viz-analysis-block p {
  margin: 0;
}

.insight-card {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06);
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  display: grid;
  gap: clamp(1.1rem, 1.4vw, 1.4rem);
}

.insight-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.insight-card__kicker {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.insight-card__title {
  margin: 0;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: rgba(17, 17, 17, 0.86);
}

.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.7rem, 1.1vw, 1rem);
  font-size: 0.97rem;
  color: rgba(17, 17, 17, 0.74);
}

.insight-list li {
  display: grid;
  gap: 0.25rem;
}

.insight-list strong {
  font-weight: 600;
  color: rgba(17, 17, 17, 0.82);
}

@media (max-width: 860px) {
  .viz-article-grid {
    grid-template-columns: 1fr;
  }

  .viz-analysis-block,
  .insight-card {
    padding: clamp(1.2rem, 3vw, 1.6rem);
  }
}
.viz06-treemap {
  width: 100%;
}
.viz-helper {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.68);
}

.essentiel-block {
  display: grid;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.essentiel-block h3,
.essentiel-block h4 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.essentiel-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.5rem, 1vw, 0.8rem);
}

.essentiel-block li {
  display: grid;
  gap: 6px;
  font-size: 15px;
  color: rgba(17, 17, 17, 0.82);
}

.essentiel-block li span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: rgba(17, 17, 17, 0.52);
}

.essentiel-block li span:last-child {
  font-weight: 600;
  color: #111111;
}

.viz-callout {
  border: none;
  padding: 0;
  display: grid;
  gap: clamp(0.6rem, 1vw, 0.9rem);
  font-size: 15px;
  color: rgba(17, 17, 17, 0.82);
}

.viz-callout::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: clamp(0.45rem, 1vw, 0.7rem);
}

.viz-callout strong {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  color: rgba(17, 17, 17, 0.56);
}
.viz01b-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
  box-sizing: border-box;
  align-items: start;
  row-gap: clamp(2.2rem, 3vw, 3rem);
}

.viz01b-keypoints {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.7);
}

.viz01b-keypoints strong {
  color: var(--color-noir);
  font-weight: 600;
}

.viz01b-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.viz01b-layout--dest {
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}


.viz01b-conf,
.viz01b-dest {
  grid-column: span 7;
  display: grid;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}

.viz01b-conf header,
.viz01b-dest header {
  display: grid;
  gap: 0.6rem;
}

.viz01b-conf-meta,
.viz01b-dest-meta {
  grid-column: span 5;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.6rem);
}

.viz01b-meta-block {
  display: grid;
  gap: clamp(0.6rem, 1vw, 0.9rem);
}

.viz01b-meta-block h5 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.viz01b-chart {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.4rem);
}

.viz01b-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 3vw, 2.4rem);
}

.viz01b-chart-panel {
  display: grid;
  gap: clamp(0.6rem, 1vw, 0.9rem);
}

.viz01b-chart-panel .viz01b-subtitle {
  margin: 0;
}

.viz01b-chart figcaption {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.6);
}

.viz01b-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.viz01b-matrix th,
.viz01b-matrix td {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  text-align: left;
  vertical-align: top;
}

.viz01b-matrix th {
  font-weight: 600;
  color: var(--color-noir);
}

.viz01b-matrix tbody th {
  font-weight: 500;
  color: rgba(17, 17, 17, 0.75);
}

.viz01b-matrix strong {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--color-noir);
}

.viz01b-matrix-detail {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(17, 17, 17, 0.56);
}

.viz01b-analysis {
  background: transparent;
  border: none;
  padding: 0;
  max-width: none;
}

.viz01b-analysis h5 {
  margin: 0 0 0.5rem;
}

.viz01b-analysis-text {
  display: grid;
  gap: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.75);
}

.viz01b-analysis-text strong {
  color: var(--color-noir);
}

.viz01b-highlights {
  display: grid;
  gap: 0.85rem;
}

.viz01b-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.viz-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: rgba(17, 17, 17, 0.05);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.68);
}

@media (max-width: 1100px) {
  .viz01b-shell {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .viz01b-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .viz01b-conf,
  .viz01b-dest,
  .viz01b-conf-meta,
  .viz01b-dest-meta {
    grid-column: 1 / -1;
  }

  .viz01b-chart-grid {
    grid-template-columns: 1fr;
  }

  .viz01b-chart figcaption {
    max-width: 48ch;
  }
}
.intro-hero-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--layout-padding);
  display: grid;
  gap: clamp(3rem, 4vw, 3.6rem);
}

.intro-hero-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  column-gap: clamp(2.6rem, 4vw, 3.6rem);
  align-items: start;
}

.intro-hero-leadcol {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 2rem);
  max-width: 640px;
}

.intro-hero-lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.75);
}

.intro-hero-bullets {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.68);
}

.intro-hero-bullets strong {
  color: var(--color-noir);
  font-weight: 600;
}

.intro-hero-cta {
  justify-self: flex-start;
  padding: 0.8rem 2.2rem;
  border: 1px solid var(--color-noir);
  background: var(--color-noir);
  color: var(--color-blanc);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  transition: background 160ms ease, color 160ms ease;
}

.intro-hero-cta:hover,
.intro-hero-cta:focus {
  background: transparent;
  color: var(--color-noir);
}

.intro-hero-metrics {
  display: grid;
  gap: clamp(1.4rem, 2.2vw, 1.8rem);
}

.intro-hero-metrics .hero-metric {
  display: grid;
  gap: 0.55rem;
}

.intro-hero-metrics .hero-metric::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: var(--color-noir);
}

.intro-hero-metrics .hero-metric strong {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.intro-hero-metrics .hero-metric span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-metrics .hero-metric em {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.7);
}

.intro-map-panel {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 2rem);
}

.intro-panel-heading {
  display: grid;
  gap: 0.55rem;
}

.intro-map-canvas {
  min-height: clamp(360px, 46vw, 520px);
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.intro-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(2rem, 3.6vw, 3rem);
}

.intro-article-main {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.78);
  display: grid;
  gap: 1.2rem;
}

.intro-article-main strong {
  color: var(--color-noir);
}

.intro-article-rail {
  border-left: 1px solid rgba(17, 17, 17, 0.16);
  padding-left: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  gap: 1.4rem;
}

.intro-analytics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: clamp(2rem, 3vw, 2.6rem);
  align-items: start;
}

.intro-analytics-main {
  display: grid;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}

.intro-analytics-rail {
  border-left: 1px solid rgba(17, 17, 17, 0.16);
  padding-left: clamp(1.2rem, 2vw, 1.6rem);
}

.intro-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2.2rem, 3.6vw, 3rem);
}

.intro-compare-card {
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.6rem);
}
.rail-facts strong {
  color: var(--color-noir);
  font-weight: 600;
}
.rail-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.68);
}
.intro-hero-actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}

.intro-hero-rail {
  border-left: 1px solid rgba(17, 17, 17, 0.16);
  padding-left: clamp(1.8rem, 2.6vw, 2.2rem);
  display: grid;
  gap: clamp(1.6rem, 2.4vw, 2.2rem);
}

.intro-hero-rail .hero-metric {
  display: grid;
  gap: 0.6rem;
}

.intro-hero-rail .hero-metric::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: #111;
}

.intro-hero-rail .hero-metric strong {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.intro-hero-rail .hero-metric span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-rail .hero-metric em {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.68);
}

.intro-section {
  display: grid;
  gap: clamp(3rem, 5vw, 4rem);
  padding: 0 var(--layout-padding);
}



.intro-hero {
  margin: clamp(3.4rem, 6vw, 4.8rem) auto clamp(3rem, 5vw, 4.4rem);
  max-width: min(960px, 72vw);
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
  padding-bottom: clamp(2.8rem, 4.2vw, 3.8rem);
}


.intro-hero-inner {
  display: grid;
  gap: clamp(1.6rem, 2.6vw, 2.4rem);
  color: var(--color-noir);
}

.intro-hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}


.intro-hero-title {
  margin: 0;
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(2.9rem, 6.4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}


.intro-hero-lead {
  margin: 0;
  font-size: clamp(1.18rem, 2.6vw, 1.45rem);
  line-height: 1.82;
  color: rgba(17, 17, 17, 0.8);
  max-width: 72ch;
}

.intro-hero-lead strong {
  color: var(--color-noir);
  font-weight: 600;
}

.intro-hero-cta {
  justify-self: flex-start;
  display: inline-flex;
  gap: 0.6rem;
  padding: 0.85rem 2.4rem;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: transparent;
  color: var(--color-noir);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.intro-hero-cta::after {
  content: "→";
  font-size: 0.9rem;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.intro-hero-cta:hover,
.intro-hero-cta:focus-visible {
  color: var(--color-noir);
  border-color: rgba(17, 17, 17, 0.42);
}

.intro-hero-cta:hover::after,
.intro-hero-cta:focus-visible::after {
  transform: translateX(4px);
}

.intro-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-title {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-noir);
}

.intro-lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(17, 17, 17, 0.78);
}

.intro-summary {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-summary li + li {
  margin-top: 0.4rem;
}





.intro-summary li + li {
  margin-top: 0.4rem;
}

.intro-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.2rem, 2vw, 1.8rem);
}

.intro-metric-card {
  display: grid;
  gap: 0.45rem;
  border-top: 2px solid rgba(17, 17, 17, 0.9);
  padding-top: 0.9rem;
}

.intro-metric-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.62);
}

.intro-metric-value {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 600;
  color: var(--color-noir);
}

.intro-metric-card em {
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.6);
}





@media (max-width: 900px) {
  .intro-hero {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }

  .intro-hero-main {
    max-width: none;
  }

  .intro-hero-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-2);
  }

  .intro-hero-rail .hero-metric {
    gap: 0.35rem;
  }

  .intro-article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .intro-metrics-grid,
  .intro-hero-rail,
  .intro-panels--grid {
    grid-template-columns: 1fr;
  }
}
.viz-section .viz-article {
  font-size: 15px;
  line-height: 1.74;
  color: rgba(17, 17, 17, 0.82);
  display: grid;
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
}

.viz-section .viz-article::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: clamp(0.4rem, 1vw, 0.7rem);
}

.viz-section .viz-article h4,
.viz-section .viz-article h5 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.article-kicker {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
  margin: 0;
}
.viz12-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz12-hero {
  display: grid;
  gap: var(--spacing-3);
}

.viz12-chart-shell {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}

.viz12-text-grid {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.viz12-text-grid .viz-helper {
  padding: var(--spacing-3);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
}

.viz12-analysis,
.viz12-focus {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
}

.viz12-analysis h4,
.viz12-focus h4 {
  margin: 0 0 var(--spacing-2);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}
.profile-card {
  position: relative;
}
.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), transparent);
  opacity: 0;
  transition: opacity 150ms ease;
}

.profile-card:hover::before {
  opacity: 1;
}
#viz01b-conf-analysis.viz-analysis-block,
#viz01b-dest-analysis.viz-analysis-block,
.viz01b-compare + .viz-analysis-block,
.viz01b-analysis-text,
.viz-card-list,
.viz-card-list .viz10-card,
.viz-callout strong,
.viz-callout p {
  /* styles deprecated with new viz01b layout */
}
.dropcap::first-letter {
  font-size: 3.2rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  margin: 6px 12px 0 0;
  color: var(--color-noir);
}
:root {
  --grid-columns: 12;
  --grid-gutter: clamp(24px, 2vw, 32px);
  --grid-max-width: 1280px;
  --layout-padding: clamp(32px, 4vw, 64px);
  --baseline: 8px;

  --sidebar-width: 280px;
  --rail-width: 320px;

  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-7: 56px;
  --spacing-8: 64px;
  --spacing-10: 80px;
  --spacing-12: 96px;

  --color-noir: #111111;
  --color-gris-fonce: #2b2b2b;
  --color-gris-moyen: #6f6f6f;
  --color-gris: #a0a0a0;
  --color-gris-clair: #f3f3f0;
  --color-blanc: #ffffff;
  --color-accent: #b5963c;
  --color-diaspora: #b5554f;
  --color-residents: #2e6a89;
  --color-highlight: #f0d68a;

  --font-display: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Space Grotesk", "Fira Mono", monospace;

  --shadow-soft: 0 16px 40px -32px rgba(0, 0, 0, 0.25);
  --shadow-flat: 0 12px 24px -18px rgba(0, 0, 0, 0.22);
}
.root-vars {
}
.viz-section--grid .viz01a-grid,
.viz-section--grid .viz01b-grid {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.viz01a-shell {
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.viz01b-article {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  padding-top: var(--spacing-6);
}

.viz01b-shell {
  display: grid;
  gap: clamp(2rem, 3.4vw, 2.8rem);
}

.viz01a-card--narrative,
.viz-card--metrics {
  background: #fafaf7;
}

.viz-card--metrics {
  border: 1px solid rgba(17, 17, 17, 0.08);
}
.picto-dot {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(17, 17, 17, 0.12);
  transform-origin: center;
  animation: picto-pop 280ms ease forwards;
  opacity: 0;
}

.picto-dot--void {
  background: rgba(17, 17, 17, 0.08);
}

.picto-dot--confession,
.picto-dot--dest {
  background: var(--dot-color, rgba(17, 17, 17, 0.16));
}

.picto-dot--other {
  background: rgba(17, 17, 17, 0.25);
}
.sidebar-collapsed #sidebar {
  transform: translateX(-100%);
}
.intro-animate {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.intro-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-animate[data-animate="scale-in"] {
  transform: scale(0.95);
}

.intro-animate[data-animate="scale-in"].is-visible {
  transform: scale(1);
}
.intro-body-text,
.intro-compare-caption {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.78);
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--grid-gutter);
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(17, 17, 17, 0.82);
  background: var(--color-blanc);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

p {
  margin: 0;
}

p + p {
  margin-top: var(--spacing-2);
}

.text-spotlight {
  background: rgba(255, 231, 122, 0.4);
  padding: 0 6px;
  display: inline-block;
  box-decoration-break: clone;
}

.text-underline {
  position: relative;
  display: inline-block;
}

.text-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--color-accent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
  box-sizing: border-box;
}

/* Utility classes for column spans */
[class^="grid-span-"] {
  grid-column: auto / span 12;
}

.grid-span-3 { grid-column: auto / span 3; }
.grid-span-4 { grid-column: auto / span 4; }
.grid-span-5 { grid-column: auto / span 5; }
.grid-span-6 { grid-column: auto / span 6; }
.grid-span-7 { grid-column: auto / span 7; }
.grid-span-8 { grid-column: auto / span 8; }
.grid-span-9 { grid-column: auto / span 9; }
.grid-span-12 { grid-column: 1 / -1; }

@media (max-width: 960px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid-span-6,
  .grid-span-7,
  .grid-span-8,
  .grid-span-9,
  .grid-span-12 {
    grid-column: 1 / -1;
  }
}
.viz01a-pill-row {
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-end;
}
.viz01a-pill {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.viz01a-pill--residents {
  color: var(--color-residents);
}

.viz01a-pill--diaspora {
  color: var(--color-diaspora);
}
.viz01a-card-footer {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.viz01a-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
}

.viz01-zone {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.viz-graph-zone #plotly-12-map {
  min-height: 560px;
}
.viz12-aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-right: var(--spacing-1);
}

.viz12-slider {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.viz12-slider input[type="range"] {
  width: 220px;
}

.viz12-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--color-noir);
}

.viz12-mode-toggle button {
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-blanc);
  border: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.viz12-mode-toggle button[aria-pressed="true"] {
  background: var(--color-highlight);
}
.country-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-4);
  background: var(--color-blanc);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.5);
}

.country-table thead {
  background: var(--color-noir);
  color: var(--color-blanc);
}

.country-table th,
.country-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.country-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.country-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.04);
}

.country-table tbody tr:hover {
  background: rgba(255, 234, 0, 0.25);
}

.flux-table td:first-child,
.flux-table th:first-child {
  width: 4ch;
  text-align: right;
}

.flux-table td:nth-child(5),
.flux-table td:nth-child(6) {
  text-align: right;
}
/* RESET */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* -------------------------------------------------- */
/*  SHARED VIZUALISATION LAYOUT                       */
/* -------------------------------------------------- */

.viz-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-inline: var(--layout-padding);
  margin-block: var(--spacing-6);
}

.viz-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.viz-kicker {
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-gris);
}

.viz-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--color-noir);
  line-height: 1.2;
}

.viz-subtitle {
  font-family: var(--font-text);
  font-size: 18px;
  color: var(--color-gris-moyen);
  line-height: 1.6;
}

.viz-split-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: var(--spacing-4);
  align-items: flex-start;
  padding-inline: var(--layout-padding);
}

.viz-graph-zone {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz-text-zone {
  position: sticky;
  top: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  align-self: flex-start;
}

.viz-text-zone.compact {
  max-width: 280px;
}

.viz-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz-analysis-block {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  font-size: 15px;
  line-height: 1.74;
  color: rgba(17, 17, 17, 0.78);
}

.viz-analysis-block h4,
.viz-analysis-block h5 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.viz-analysis-block p,
.viz-analysis-block ul {
  margin: 0;
  padding: 0;
  color: inherit;
}

.viz-analysis-block ul {
  list-style: none;
  display: grid;
  gap: clamp(0.55rem, 1vw, 0.85rem);
}

.viz-analysis-block li {
  position: relative;
  padding-left: 1.2rem;
}

.viz-analysis-block li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(17, 17, 17, 0.4);
}

.viz-legend-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-size: 13px;
  color: var(--color-gris);
}

.viz-legend-inline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viz-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-gris);
}

.viz-helper {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.62);
}

.essentiel-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.essentiel-block h3,
.essentiel-block h4 {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.essentiel-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.essentiel-block li {
  display: grid;
  gap: 4px;
  font-size: 16px;
  color: rgba(17, 17, 17, 0.82);
}

.essentiel-block li span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: rgba(17, 17, 17, 0.56);
}

.essentiel-block li span:last-child {
  font-weight: 600;
  color: #111111;
}

.viz-callout {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: 16px;
  color: rgba(17, 17, 17, 0.82);
}

.viz-callout::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-1);
}

.viz-callout strong {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: rgba(17, 17, 17, 0.56);
}

.highlight-band,
.highlight-card {
  background: #f7e27f;
  color: #111111;
}

.highlight-band {
  display: inline-block;
  padding: 0.12rem 0.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.highlight-card {
  padding: 1.1rem 1.3rem;
  border-left: 3px solid #111111;
  line-height: 1.6;
  font-size: 0.95rem;
  background: #f7e27f;
}

.highlight-card--critical {
  background: #111111;
  color: #ffffff;
  border-left-color: #f7e27f;
}

.viz-caption {
  font-size: var(--font-size-caption);
  color: var(--color-gris);
  text-align: left;
}

.viz-key-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-2);
}

.viz-key-number {
  padding: var(--spacing-2);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--color-blanc);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.viz-key-number span:first-child {
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-gris);
}

.viz-key-number span:last-child {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-noir);
}

@media (max-width: 1200px) {
  .viz-split-container {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1024px) {
  .viz01b-compare,
  .viz01b-aside,
  #viz01b-conf-analysis,
  #viz01b-dest-analysis {
    grid-column: span 12;
  }
}



.viz01b-analysis {
  background: transparent;
  border: none;
  padding: 0;
  max-width: none;
}

.viz01b-analysis h4 {
  margin-bottom: var(--spacing-2);
}

.viz01b-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz01b-column--conf {
  grid-column: span 5;
}

.viz01b-column--legend {
  grid-column: span 2;
  align-items: center;
  text-align: center;
}

.viz01b-column--dest {
  grid-column: span 5;
}

.viz01b-column--metrics {
  grid-column: span 3;
}

.viz01b-subtitle {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.viz01b-helper {
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.72);
}

.viz01b-conf-compare {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.75);
}

.viz01b-conf-compare li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-1);
  align-items: baseline;
}

.viz01b-conf-compare strong {
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.6);
}

.viz01b-metrics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.75);
}

.viz01b-metrics-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-1);
  align-items: baseline;
}

.viz01b-metrics-list li strong {
  font-weight: 600;
  color: var(--color-noir);
}

.viz01b-metrics-list li span {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.58);
}

.viz01b-metrics-list .metric-detail {
  grid-column: 1 / -1;
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: rgba(17, 17, 17, 0.5);
}

.viz01b-analysis-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  font-size: 1.02rem;
  line-height: 1.78;
  color: rgba(17, 17, 17, 0.84);
  max-width: 72ch;
  margin-left: clamp(1rem, 3vw, 2.5rem);
}


.viz01b-aside {
  grid-column: 10 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  position: sticky;
  top: var(--spacing-8);
}

.viz01b-aside-card {
  background: var(--color-blanc);
  border: 1px solid var(--color-noir);
  padding: var(--spacing-3);
}

.viz01b-aside-card h5 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.viz01b-aside-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.75);
}

.viz01b-aside-facts strong {
  font-weight: 600;
}

.viz01b-aside-facts span {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gris);
  display: inline-block;
  margin-bottom: 4px;
}

.picto-grid.is-interactive {
  cursor: pointer;
}

.picto-grid.is-interactive .picto-dot:hover {
  transform: scale(1.08);
  transition: transform 120ms ease;
}

@media (max-width: 768px) {
  .viz01b-compare {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-3);
  }

  .viz01b-column--legend,
  .viz01b-column--metrics,
  .viz01b-column--conf,
  .viz01b-column--dest {
    grid-column: span 12;
  }
}

.viz03-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.viz03-graph {
  grid-column: span 8;
  display: grid;
  gap: var(--spacing-4);
}

.viz03-chart {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: var(--spacing-3);
}

.viz03-chart--density {
  min-height: 360px;
}

.viz03-aside {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  position: sticky;
  top: var(--spacing-8);
}

.viz03-aside .viz-helper,
.viz03-aside .essentiel-block,
.viz03-aside .viz-analysis-block,
.viz03-aside .viz-callout {
  margin: 0;
}

@media (max-width: 1080px) {
  .viz03-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .viz03-graph,
  .viz03-aside {
    grid-column: span 12;
  }

  .viz03-aside {
    position: static;
  }
}

@media (max-width: 768px) {
  .viz03-chart {
    padding: var(--spacing-2);
  }

  .viz03-chart--density {
    min-height: 280px;
  }
}
  .viz-section {
    gap: var(--spacing-3);
  }

  .viz-heading {
    font-size: clamp(22px, 7vw, 26px);
  }

  .essentiel-block,
  .viz-callout {
    padding: var(--spacing-2);
  }

  .viz-analysis-block {
    padding: var(--spacing-3);
    border-radius: 12px;
  }
}

@media (max-width: 540px) {
  body {
    font-size: 16px;
  }

  .viz-text-zone > * {
    flex: 1 1 100%;
  }

  .viz-legend-inline {
    gap: var(--spacing-1);
  }

  .viz-key-number span:last-child {
    font-size: 18px;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

a:hover,
a:focus {
  color: var(--color-noir);
}

main,
section,
article,
header,
nav,
aside,
details,
summary {
  display: block;
}

.intro-hero,
.intro-grid,
.intro-hero-header,
.intro-map-shell {
  padding-inline: var(--layout-padding);
}

.intro-grid {
  display: grid;
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding-block: var(--spacing-8);
}

.intro-grid--hero {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}


.intro-grid--narrative {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: clamp(2.4rem, 4vw, 3.2rem);
}

.intro-body-text {
  grid-column: 1 / span 8;
  display: grid;
  gap: var(--spacing-2);
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.75);
}

.intro-body-text strong {
  color: var(--color-noir);
}

.intro-analysis {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  gap: clamp(2rem, 3.4vw, 3rem);
  align-items: start;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  padding-top: clamp(2.2rem, 3.2vw, 3rem);
}

.intro-analysis-main {
  display: grid;
  gap: clamp(1.4rem, 2.4vw, 2rem);
}


.intro-analysis-rail {
  border-left: 1px solid rgba(17, 17, 17, 0.16);
  padding-left: clamp(1.8rem, 2.6vw, 2.2rem);
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.8rem);
}

.intro-compare {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.4rem, 4vw, 3.4rem);
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  padding-top: clamp(2.2rem, 3.2vw, 3rem);
}

.intro-compare-article {
  display: grid;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
  align-content: start;
}

.intro-compare-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.65);
}

.intro-hero-header {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  gap: clamp(2.4rem, 4vw, 3.6rem);
  align-items: start;
}

.intro-stats {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: var(--spacing-2);
  align-items: baseline;
  padding: var(--spacing-2) 0;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.intro-stats dt {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.intro-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: 0.02em;
  color: #111111;
  font-feature-settings: "tnum" 1;
}

.intro-stats dd span {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(17, 17, 17, 0.58);
}

/* SIDEBAR */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: #ffffff;
  color: #111111;
  overflow-y: auto;
  transition: transform 280ms ease, box-shadow 280ms ease;
  z-index: 1000;
  padding: var(--spacing-6) var(--spacing-4) var(--spacing-8);
  border-right: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 22px 0 48px -32px rgba(0, 0, 0, 0.16);
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.sidebar.collapsed {
  transform: translateX(calc(-1 * var(--sidebar-width)));
  box-shadow: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.sidebar-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.sidebar-title {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #111111;
  line-height: 1.2;
}

.sidebar-progress {
  margin-top: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-progress-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.sidebar-progress-bar {
  height: 1px;
  background: rgba(17, 17, 17, 0.12);
  overflow: hidden;
}

.sidebar-progress-fill {
  height: 100%;
  width: 0%;
  background: #111111;
  transition: width 0.4s ease;
}

.sidebar-section,
.sidebar-chapter {
  margin-top: var(--spacing-4);
}


.sidebar-section .sidebar-link,
.chapter-list a {
  display: block;
  color: rgba(17, 17, 17, 0.76);
  font-size: 14px;
  padding: 6px 0;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.sidebar-section .sidebar-link.is-active,
.chapter-list a.is-active {
  color: #111111;
  font-weight: 600;
}

.sidebar-section .sidebar-link:hover,
.chapter-list a:hover {
  color: #111111;
}

.chapter-toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: rgba(17, 17, 17, 0.58);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 0;
}

.chapter-toggle-icon {
  font-size: 12px;
}

.chapter-list {
  list-style: none;
  padding-left: 0;
  margin: var(--spacing-2) 0 0 0;
  display: block;
}

.chapter-list.collapsed {
  display: none;
}

.chapter-list li + li {
  margin-top: 4px;
}

/* legacy classes removed */

#sidebar-toggle {
  position: fixed;
  top: var(--spacing-3);
  left: calc(var(--sidebar-width) - 18px);
  width: 46px;
  height: 46px;
  background: #111111;
  color: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.15);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  transition: left 240ms ease, width 240ms ease, background 160ms ease;
  box-shadow: 0 16px 28px -24px rgba(0, 0, 0, 0.45);
  z-index: 1100;
}

#sidebar-toggle .toggle-label {
  display: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#sidebar-toggle:hover,
#sidebar-toggle:focus {
  background: #000000;
  outline: 1px solid rgba(0, 0, 0, 0.38);
  outline-offset: 2px;
  box-shadow: 0 20px 36px -28px rgba(0, 0, 0, 0.5);
}

body.sidebar-collapsed #sidebar-toggle {
  left: var(--spacing-3);
  width: 128px;
  justify-content: center;
}

body.sidebar-collapsed #sidebar-toggle .hamburger {
  display: none;
}

body.sidebar-collapsed #sidebar-toggle .toggle-label {
  display: block;
  letter-spacing: 0.22em;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  position: relative;
  transition: transform 240ms ease;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -6px;
}

.hamburger::after {
  top: 6px;
}

.sidebar.collapsed .hamburger {
  transform: rotate(90deg);
}

/* MAIN LAYOUT */
.main-content {
  margin-left: var(--sidebar-width);
  padding: var(--spacing-8) var(--layout-padding);
  transition:
    margin-left 260ms ease,
    padding 220ms ease;
  max-width: calc(var(--grid-max-width) + var(--layout-padding) * 2);
  margin-right: auto;
}

.sidebar-collapsed .main-content,
.main-content.sidebar-collapsed {
  margin-left: auto;
  margin-right: auto;
}

.rapport-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-8);
}

.rapport-kicker {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-noir);
}

.rapport-title {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1px;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--color-noir);
}

.rapport-lead {
  max-width: 65ch;
  color: var(--color-gris-fonce);
  font-size: 18px;
  line-height: 1.6;
}

.chapitre-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-10);
}

.chapitre-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-noir);
  border-bottom: 2px solid var(--color-noir);
  padding-bottom: var(--spacing-2);
}

/* VIZ CONTAINERS */
.viz-container {
  border: 1px solid var(--color-gris-clair);
  display: grid;
  background: var(--color-blanc);
}

/* Remove default gap stack to keep compact layout */
.viz-container + .viz-container {
  margin-top: 0;
}

/* Layout 01 : 20 / 60 / 20 */
.viz-layout-01 {
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto;
  column-gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-3);
}

.viz-layout-01 .viz-context {
  border-right: 1px solid var(--color-gris-clair);
  padding-right: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz-layout-01 .viz-main {
  grid-column: 2;
  grid-row: 1 / 4;
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.viz-layout-01 .viz-insights {
  grid-column: 3;
  grid-row: 2;
  padding: var(--spacing-4) var(--spacing-3);
  background: var(--color-blanc);
  border-left: 3px solid var(--color-noir);
  position: sticky;
  top: var(--spacing-8);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz-layout-01 .viz-footer {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--color-gris-fonce);
}

/* Layout 02 : 65 / 35 */
.viz-layout-02 {
  grid-template-columns: 65% 35%;
  grid-column-gap: var(--spacing-5);
}

.viz-layout-02 .viz-main {
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.viz-layout-02 .viz-aside {
  padding: var(--spacing-5);
  border-left: 2px solid var(--color-noir);
  position: sticky;
  top: var(--spacing-8);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  background: var(--color-blanc);
}

/* HEADER ELEMENTS */
.viz-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.viz-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--color-noir);
  line-height: 1.3;
}

.viz-question {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-gris-fonce);
  line-height: 1.5;
}

.viz-graph {
  width: 100%;
  min-height: 600px;
  border: 1px solid var(--color-gris-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blanc);
}

.plotly-container {
  width: 100%;
  margin: 0;
  height: clamp(320px, 48vw, 560px);
}

/* CONTEXT & TEXT BLOCKS */
.context-text,
.viz-body-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gris-fonce);
}

.context-bullets,
.points-cles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.context-bullets li,
.points-cles li {
  display: flex;
  gap: var(--spacing-2);
  align-items: flex-start;
}

.points-cles li {
  justify-content: space-between;
  font-size: 14px;
}

/* INSIGHTS ESSENTIEL */
.insights-essentiel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.insights-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-noir);
}

.insights-list {
  counter-reset: insight-counter;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
}

.insights-list li {
  counter-increment: insight-counter;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--spacing-2);
  align-items: start;
  list-style: none;
}

.insight-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-noir);
  color: var(--color-blanc);
  font-size: 16px;
  font-weight: 700;
  border-radius: 2px;
}

.insight-number::before {
  content: counter(insight-counter);
}

.insight-text {
  font-size: 15px;
  color: var(--color-gris-fonce);
}

.insight-sublist {
  margin: var(--spacing-1) 0 0;
  padding-left: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--color-gris-fonce);
}

.insight-sublist li {
  list-style: disc;
}

.highlight-jaune {
  position: relative;
  display: inline-block;
  color: var(--color-noir);
  padding: 0 4px;
}

.highlight-jaune::after {
  content: "";
  position: absolute;
  inset: 60% 0 0 0;
  background: var(--color-gris-clair);
  z-index: -1;
}

/* ZOOM BOX */
.zoom-box {
  background: var(--color-blanc);
  border: 2px solid var(--color-noir);
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.zoom-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-noir);
}

.zoom-content {
  font-size: 15px;
  color: var(--color-noir);
}

/* DETAILS */
.details-section {
  border: 1px solid var(--color-gris-clair);
  margin: var(--spacing-3) 0;
}

.details-summary {
  padding: var(--spacing-2);
  background: var(--color-blanc);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  user-select: none;
  transition: background 150ms ease;
}

.details-summary:hover {
  background: var(--color-gris-clair);
}

.summary-icon {
  font-size: 14px;
  color: var(--color-noir);
  transition: transform 150ms ease;
}

details[open] .summary-icon {
  transform: rotate(90deg);
}

.summary-text {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-noir);
}

.details-content {
  padding: var(--spacing-2);
  border-top: 1px solid var(--color-gris-clair);
  background: #f4f4f4;
  font-size: 14px;
  color: var(--color-gris-fonce);
}

/* NAVIGATION LINKS */
.viz-navigation {
  margin-top: var(--spacing-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-noir);
  border-bottom: 1px solid var(--color-noir);
  padding: 2px 0;
  transition: color 150ms ease, background 150ms ease, border-bottom 150ms ease;
}

.nav-link:hover,
.nav-link:focus {
  background: var(--color-noir);
  color: var(--color-blanc);
  border-bottom: 2px solid var(--color-noir);
}

.viz13-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.viz13-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-3);
}

.viz13-chart {
  min-height: 360px;
}

.viz13-metrics {
  min-height: 320px;
}

.viz13-aside {
  margin-top: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz13-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}


.viz13-hero {
  display: grid;
  gap: clamp(2rem, 3vw, 2.6rem);
  justify-items: stretch;
}

.viz13-hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 2.4vw, 2.4rem);
  align-items: start;
  width: 100%;
}


.viz13-hero-brief {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
  padding: var(--spacing-3);
  display: grid;
  gap: var(--spacing-2);
  position: static;
  top: auto;
}

.viz13-hero-chart {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
  padding: var(--spacing-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(320px, 32vw, 420px);
  width: 100%;
}

.viz13-summary-chart {
  min-height: 320px;
}

.viz13-chart-header {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.viz13-chart-header h4 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.7);
}

.viz13-chart-header p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.76);
}

.viz13-chart-header--centered {
  text-align: center;
}

.viz13-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.8rem, 2.8vw, 2.8rem);
}

.viz13-panels-stack {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: clamp(1.6rem, 2.2vw, 2.2rem);
  width: 100%;
  max-width: 1280px;
  padding: 0 clamp(1.6rem, 4vw, 4rem);
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr;
}

.viz13-panels-stack .viz13-panel {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.05);
  padding: clamp(1.8rem, 2.4vw, 2.4rem);
  width: 100%;
}

.viz13-panel-header {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.viz13-panel-header-left {
  display: grid;
  gap: 0.45rem;
}

.viz13-panel-header-left h4 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.7);
}

.viz13-panel-header-left p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.72);
  line-height: 1.55;
}

.viz13-panel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viz13-panel-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: rgba(17, 17, 17, 0.7);
}

.viz13-panel-legend .viz13-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.viz13-panels-stack .viz13-chart {
  min-height: clamp(340px, 42vw, 480px);
}

.viz13-center-block {
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  display: grid;
  justify-items: center;
  gap: var(--spacing-2);
  text-align: center;
}

.viz13-center-chart {
  width: min(680px, 100%);
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.05);
  padding: var(--spacing-3);
}

.viz13-center-note {
  max-width: min(680px, 92%);
  font-size: 15px;
  line-height: 1.66;
  color: rgba(17, 17, 17, 0.74);
}

@media (max-width: 900px) {
  .viz13-hero-top {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .viz13-hero-chart {
    padding: var(--spacing-3) var(--spacing-2);
  }
}

@media (min-width: 1100px) {
  .viz13-hero-brief {
    position: sticky;
    top: calc(var(--spacing-8) + 20px);
  }
}

@media (max-width: 600px) {
  .viz13-hero-chart {
    padding: var(--spacing-2);
  }

  .viz13-center-chart {
    padding: var(--spacing-2);
  }

  .viz13-panels-stack .viz13-panel {
    padding: var(--spacing-2);
  }
}

.viz13-panel {
  display: grid;
  gap: var(--spacing-2);
  background: #ffffff;
  padding: var(--spacing-3);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
}

.viz13-panel-header h4 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.viz13-panel-header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.74);
}

.viz13-panel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  list-style: none;
  margin: var(--spacing-1) 0 0;
  padding: 0;
  font-size: 13px;
  color: rgba(17, 17, 17, 0.6);
}

.viz13-panel-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.viz13-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
}

.viz13-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.viz13-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(17, 17, 17, 0.62);
}

.viz13-analysis,
.viz13-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz13-analysis::before,
.viz13-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz13-analysis h4,
.viz13-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz13-cards {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.viz13-metrics-card {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
  padding: var(--spacing-4);
  display: grid;
  gap: var(--spacing-2);
}

.viz13-metrics-header h4 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.62);
}

.viz13-metrics-header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.74);
}

.viz13-metrics-chart {
  min-height: 320px;
}

.viz13-hero-lede {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.82);
  margin: 0;
}

.viz13-hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.viz13-hero-metrics li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.06);
}

.viz13-hero-metrics li span {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(17, 17, 17, 0.55);
}

.viz13-hero-metrics li strong {
  font-size: 24px;
  font-weight: 600;
  color: #111111;
}

.viz13-hero-metrics li em {
  font-style: normal;
  font-size: 13px;
  color: rgba(17, 17, 17, 0.62);
}

.viz13-key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-3);
}

.viz13-key-grid article {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: #ffffff;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
}

.viz13-key-grid h5 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(17, 17, 17, 0.56);
}

.viz13-key-grid p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(17, 17, 17, 0.78);
}

.viz13-context-card {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 12px 26px rgba(17, 17, 17, 0.05);
  padding: var(--spacing-3);
  display: grid;
  gap: var(--spacing-2);
}

.viz13-context-card h5 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(17, 17, 17, 0.56);
}

.viz13-context-card p,
.viz13-context-card ul {
  margin: 0;
  font-size: 15px;
  line-height: 1.66;
  color: rgba(17, 17, 17, 0.78);
}

.viz13-context-card ul {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  padding: 0;
}

.viz13-context-card li {
  padding-left: 1rem;
  position: relative;
}

.viz13-context-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(17, 17, 17, 0.4);
}

.highlight-card--plain {
  background: #fff8d6;
  border-left-color: #111111;
}

@media (max-width: 768px) {
  .viz13-key-grid,
  .viz13-cards {
    grid-template-columns: 1fr;
  }

  .viz13-hero-metrics {
    grid-template-columns: 1fr;
  }
}

.viz13-summary {
  background: var(--color-blanc);
  border: 1px solid var(--color-gris-clair);
  padding: var(--spacing-3);
  font-size: 14px;
  line-height: 1.5;
}

.viz13-table {
  border: 1px solid var(--color-gris-clair);
  background: var(--color-blanc);
  padding: var(--spacing-3);
  overflow-x: auto;
  font-size: 13px;
}

.viz13-table table {
  width: 100%;
  border-collapse: collapse;
}

.viz13-table th,
.viz13-table td {
  padding: var(--spacing-1) var(--spacing-2);
  border-bottom: 1px solid var(--color-gris-clair);
  text-align: left;
}

.viz13-table th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .main-content {
    padding: var(--spacing-6) var(--spacing-4);
  }

  .viz08-layout {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
    padding: var(--spacing-6) var(--spacing-4);
  }

  body:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
  }

  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width)));
  }

  .viz-layout-01,
  .viz-layout-02 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .viz-layout-01 .viz-context,
  .viz-layout-01 .viz-insights,
  .viz-layout-02 .viz-aside {
    position: static;
    border: none;
  }

  .viz-layout-01 .viz-context,
  .viz-layout-01 .viz-insights,
  .viz-layout-02 .viz-aside {
    padding: var(--spacing-4) var(--spacing-3);
    border-top: 1px solid var(--color-gris-clair);
  }

  .viz-layout-01 .viz-main,
  .viz-layout-02 .viz-main {
    padding: var(--spacing-4);
  }
}

@media (max-width: 768px) {
  #sidebar-toggle {
    right: calc(-1 * var(--spacing-4));
  }

  .rapport-title {
    font-size: 40px;
  }

  .viz13-hero {
    grid-template-columns: 1fr;
  }

  .viz13-hero-brief {
    position: static;
    max-width: none;
  }

  .viz13-panel-grid {
    grid-template-columns: 1fr;
  }

  .viz13-metrics-card {
    padding: var(--spacing-3);
  }

  .plotly-container {
    height: 480px;
  }
}

.table-wrapper {
  border: 1px solid rgba(0, 0, 0, 0.12);
  overflow-x: auto;
  margin-top: var(--spacing-3);
  background: var(--color-blanc);
  box-shadow: 0 18px 32px -24px rgba(0, 0, 0, 0.6);
}

.viz-table {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-wrapper table tbody tr.hidden-row {
  display: none;
}

.table-wrapper table tbody tr.expanded-row {
  display: table-row;
}

.table-wrapper thead th {
  padding: 12px var(--spacing-2);
  background: var(--color-noir);
  color: var(--color-blanc);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.table-wrapper td {
  padding: 12px var(--spacing-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.table-wrapper tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.04);
}

.table-wrapper tr:hover {
  background: rgba(255, 234, 0, 0.35);
}

.table-wrapper tr.is-focused {
  background: rgba(0, 122, 204, 0.15);
}


.table-toggle {
  margin-top: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 10px 18px;
  border: 1px solid rgba(17, 17, 17, 0.28);
  background: transparent;
  color: var(--color-noir);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.table-toggle:hover,
.table-toggle:focus-visible {
  background: rgba(17, 17, 17, 0.08);
  color: var(--color-noir);
  border-color: var(--color-noir);
  outline: none;
}

.table-toggle .toggle-icon {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.table-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(90deg);
}

.age-conf-table tbody tr.section-heading td {
  font-weight: 600;
  font-size: 13px;
  background: #f6f6f6;
  text-transform: uppercase;
}

.age-conf-table .stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gris);
}

.summary-note {
  margin-left: var(--spacing-2);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-gris);
}

.bt-legend {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bt-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.bt-legend .swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-noir);
}

.viz06-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.load-more-btn {
  margin-top: var(--spacing-2);
}

.viz06-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(2.2rem, 4vw, 3rem);
  align-items: start;
}

.viz06-layout .plotly-container {
  min-height: 620px;
}

.viz08-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz08-hero {
  display: grid;
  gap: var(--spacing-3);
}

@media (min-width: 1200px) {
  .viz08-hero {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--spacing-4);
  }
}

.viz08-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz08-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.viz08-sankey-shell {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}





.viz08-sankey-shell {
  border: none;
  background: transparent;
  padding: 0;
  min-height: clamp(520px, 60vw, 680px);
}

.viz08-sankey-shell > .plotly-container {
  width: 100%;
  max-width: min(1180px, 100%);
  margin: 0 auto;
}

.viz08-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.viz08-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.62);
}

.viz08-text-grid > *:not(.viz08-analysis):not(.viz08-focus) {
  border: none;
}

.viz08-analysis,
.viz08-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz08-analysis::before,
.viz08-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz08-analysis h4,
.viz08-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz08-flow-cards {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.viz06-aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz06-graph {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz06-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 12px;
}

.viz06-helper {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 12px;
}

.viz06-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
}

.viz06-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viz06-legend-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-noir);
}

.viz06-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: stretch;
}

.viz06-panel {
  border: 1px solid rgba(17, 17, 17, 0.12);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.4vw, 1.3rem);
  box-shadow: 0 20px 48px rgba(17, 17, 17, 0.08);
}

.viz06-panel .plotly-container {
  height: clamp(480px, 48vw, 560px);
}

.viz06-panel--hidden {
  display: none;
}

.viz06-caption {
  font-size: 13px;
  color: var(--color-gris-fonce);
  margin: 0;
}

/* control containers share layout via controls-block */
.viz07-controls .control-group,
.viz08-controls .control-group,
.viz09-controls .control-group,
.viz10-controls .control-group,
.viz11-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.viz07-insights,
.viz08-aside,
.viz09-aside,
.viz10-aside,
.viz11-aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz07-insights .table-wrapper {
  max-height: 300px;
  overflow-y: auto;
}

.viz07-insights table td {
  white-space: nowrap;
}

.viz11-controls .control-group {
  min-width: 160px;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-1);
}

.viz11-controls select {
  min-width: 180px;
}

.profile-card-grid {
  display: contents;
}

.profile-card {
  border: 1px solid var(--color-gris-clair);
  padding: var(--spacing-3);
  background: var(--color-blanc);
  display: grid;
  gap: var(--spacing-2);
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.35);
}

.profile-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.profile-card ul {
  margin: 0;
  padding-left: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .viz07-controls,
  .viz08-controls,
  .viz09-controls,
  .viz10-controls,
  .viz11-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .viz07-controls select,
  .viz08-controls select,
  .viz09-controls select,
  .viz10-controls select,
  .viz11-controls select,
  .viz08-controls input[type="search"] {
    width: 100%;
    min-width: auto;
  }
}
@media (max-width: 1100px) {
  .viz06-controls {
    grid-template-columns: 1fr;
  }

  .viz06-panels {
    grid-template-columns: 1fr;
  }
}


.viz10-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz10-hero {
  display: grid;
  gap: var(--spacing-3);
}

.viz10-chart-shell {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.viz10-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.viz10-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(17, 17, 17, 0.62);
}

.viz10-analysis,
.viz10-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz10-analysis::before,
.viz10-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz10-analysis h4,
.viz10-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz10-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.viz10-card {
  border: 1px solid var(--color-gris-clair);
  padding: var(--spacing-3);
  background: var(--color-blanc);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz10-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
}

.viz10-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--color-noir);
  color: var(--color-blanc);
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
}

.viz10-card-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.viz10-card-heading h5 {
  margin: 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.viz10-card-heading p {
  margin: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
}

.viz10-confession {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.viz10-card-stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2);
  font-size: 12px;
}

.viz10-card-stats li {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-1);
}

.viz10-card-stats strong {
  font-weight: 600;
}

.viz10-card-circos {
  font-size: 12px;
  line-height: 1.45;
  border-top: 1px solid var(--color-gris-clair);
  padding-top: var(--spacing-2);
}

.viz10-card-circos li {
  list-style: none;
}

.viz10-card-circos li + li {
  margin-top: 4px;
}

.viz11-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz11-hero {
  display: grid;
  gap: var(--spacing-3);
}

.viz11-compare-shell {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}

.viz11-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.viz11-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(17, 17, 17, 0.62);
}

.viz11-analysis,
.viz11-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz11-analysis::before,
.viz11-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz11-analysis h4,
.viz11-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.54);
}

.viz11-toplists {
  display: grid;
  gap: clamp(1.6rem, 2.4vw, 2.4rem);
  grid-template-columns: 1fr;
}

.viz11-card {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  display: grid;
  gap: var(--spacing-2);
  width: 100%;
}

.viz11-card-header {
  display: grid;
  gap: 0.35rem;
}

.viz11-card-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.viz11-card-header h4 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: rgba(17, 17, 17, 0.85);
}

.viz11-card-body {
  display: grid;
  gap: var(--spacing-2);
}

.viz11-mini-chart {
  min-height: clamp(260px, 40vw, 400px);
}

.viz11-cards {
  display: grid;
  gap: var(--spacing-3);
}

.aside-title {
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.aside-subtitle {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.7;
  margin-top: var(--spacing-1);
}

@media (min-width: 1280px) {
  .viz10-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .viz10-cards {
    grid-template-columns: 1fr;
  }
}

.control-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.control-select-wrapper select {
  appearance: none;
  background: var(--color-blanc);
  border: 1px solid var(--color-noir);
  padding: var(--spacing-1) var(--spacing-4) var(--spacing-1) var(--spacing-2);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.control-select-wrapper .select-icon {
  position: absolute;
  right: var(--spacing-1);
  font-size: 11px;
  pointer-events: none;
  color: var(--color-noir);
}

/* Button system — reset */
.btn,
.btn-toggle,
.pill-button,
.ghost-button,
.filter-chip,
.table-toggle,
.viz07-pills button,
.viz09-controls .btn-toggle,
.viz02-tabs .btn-toggle {
  all: unset;
  box-sizing: border-box;
}

.btn,
.btn-toggle,
.pill-button,
.ghost-button,
.filter-chip,
.table-toggle,
.viz07-pills button,
.viz09-controls .btn-toggle,
.viz02-tabs .btn-toggle {
  font-family: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 11px 18px;
  border: 1px solid rgba(17, 17, 17, 0.65);
  background: transparent;
  color: var(--color-noir);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.btn--primary,
.btn-toggle[aria-pressed="true"],
.btn-toggle.is-active,
.pill-button.is-selected,
.viz07-pills button.active,
.filter-chip.is-active,
.table-toggle[aria-expanded="true"],
.ghost-button.is-active {
  background: var(--color-noir);
  color: var(--color-blanc);
}

.btn:hover,
.btn:focus-visible,
.btn-toggle:hover,
.btn-toggle:focus-visible,
.pill-button:hover,
.pill-button:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible,
.filter-chip:hover,
.filter-chip:focus-visible,
.table-toggle:hover,
.table-toggle:focus-visible,
.viz07-pills button:hover,
.viz07-pills button:focus-visible,
.viz09-controls .btn-toggle:hover,
.viz09-controls .btn-toggle:focus-visible,
.viz02-tabs .btn-toggle:hover,
.viz02-tabs .btn-toggle:focus-visible {
  background: rgba(17, 17, 17, 0.1);
  color: var(--color-noir);
  outline: none;
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn-toggle[aria-pressed="true"]:hover,
.btn-toggle[aria-pressed="true"]:focus-visible,
.table-toggle[aria-expanded="true"]:hover,
.table-toggle[aria-expanded="true"]:focus-visible,
.pill-button.is-selected:hover,
.pill-button.is-selected:focus-visible,
.viz07-pills button.active:hover,
.viz07-pills button.active:focus-visible {
  background: var(--color-noir);
  color: var(--color-blanc);
}


.btn-group,
.btn-toggle-group {
  display: inline-flex;
  gap: 0;
}

.btn-group > *:not(:first-child),
.btn-toggle-group > *:not(:first-child) {
  margin-left: -1px;
}

.btn-toggle-group {
  flex-wrap: wrap;
}

.btn-toggle {
  min-width: 140px;
}

.pill-button,
.viz07-pills button {
  padding: 10px 16px;
}

.ghost-button {
  background: transparent;
}

.ghost-button:hover,
.ghost-button:focus-visible {
  background: rgba(17, 17, 17, 0.1);
  color: var(--color-noir);
}

.ghost-button.is-active,
.ghost-button.is-active:hover,
.ghost-button.is-active:focus-visible {
  background: var(--color-noir);
  color: var(--color-blanc);
}

.viz02-panels {
  position: relative;
}

.viz02-panel {
  display: none;
}

.viz02-panel.is-visible {
  display: block;
}

.viz02-panel[hidden] {
  display: none !important;
}

.viz02-tabs {
  width: 100%;
  display: flex;
}

.viz02-tabs .btn-toggle {
  flex: 1 1 calc(100% / 3);
  min-width: 0;
}

.viz09-controls .btn-toggle-group {
  width: 100%;
}

.viz09-controls .btn-toggle-group .btn-toggle {
  flex: 1 1 auto;
  min-width: 0;
}


.viz08-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz08-hero {
  display: grid;
  gap: clamp(1.8rem, 3vw, 2.6rem);
}

@media (min-width: 1180px) {
  .viz08-hero {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    align-items: start;
  }
}

.viz08-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz08-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.viz08-sankey-shell {
  border: none;
  background: transparent;
  padding: 0;
  min-height: clamp(520px, 60vw, 680px);
}

.viz08-sankey-shell > .plotly-container {
  width: 100%;
  max-width: min(1180px, 100%);
  margin: 0 auto;
}

.viz08-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.viz08-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.62);
}

.viz08-text-grid > *:not(.viz08-analysis):not(.viz08-focus) {
  border: none;
}

.viz08-analysis,
.viz08-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz08-analysis::before,
.viz08-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz08-analysis h4,
.viz08-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz08-flow-cards {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.viz09-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz09-hero {
  display: grid;
  gap: var(--spacing-3);
}

.viz09-chart-shell {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-soft);
}

.viz09-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.viz09-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.62);
}

.viz09-analysis,
.viz09-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz09-analysis::before,
.viz09-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz09-analysis h4,
.viz09-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz09-cards {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.viz02-combined .plotly-container {
  height: 520px;
}

.viz02-legend-assist {
  margin-top: var(--spacing-3);
  font-size: 14px;
  color: var(--color-gris-fonce);
}

.viz02-legend-assist strong {
  font-weight: 600;
}

@media (max-width: 900px) {
  .viz02-combined .viz02-tabs {
    flex-wrap: wrap;
  }

  .viz02-tab {
    flex: 1 1 50%;
    text-align: center;
  }
}

.viz06-note {
  background: var(--color-jaune-pale, #fff200);
  border: 1px solid var(--color-noir);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  max-width: 480px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 6px 6px 0 var(--color-noir);
}

.viz06-note strong {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

.viz06-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.viz06-panel-title {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-2);
}

.viz06-panel {
  position: relative;
}

.viz06-panel .plotly-container {
  height: 520px;
}

@media (max-width: 1100px) {
  .viz06-panels {
    grid-template-columns: 1fr;
  }

  .viz06-note {
    max-width: 100%;
  }
}

.viz08-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  border: 1px solid var(--color-noir);
  background: var(--color-blanc);
  color: var(--color-noir);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.pill-button.is-selected,
.pill-button:hover,
.pill-button:focus-visible {
  background: var(--color-noir);
  color: var(--color-blanc);
  outline: none;
}

.pill-label,
.pill-value {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.pill-empty,
.table-empty {
  font-size: 14px;
  font-style: italic;
  color: var(--color-gris-fonce);
}

.pill-empty {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}

.instruction-warning {
  color: #c0392b;
  font-weight: 600;
}

.viz08-instructions {
  font-size: 12px;
  color: var(--color-gris-fonce);
  line-height: 1.5;
  margin-top: var(--spacing-2);
}

.viz08-cards,
.flow-cards-grid {
  display: grid;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


.flow-card {
  border: 1px solid var(--color-gris-clair);
  padding: clamp(1.4rem, 2.1vw, 2rem);
  background: #ffffff;
  box-shadow: 0 18px 36px -32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.flow-card.flow-card--compact {
  padding: var(--spacing-2);
}

.flow-card h5 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.flow-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-1);
}

.flow-total {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

.flow-card-list {
  padding-left: var(--spacing-3);
  margin: var(--spacing-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.viz08-controls {
  display: grid;
  gap: var(--spacing-3);
  align-self: flex-start;
}

.viz08-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.viz08-helper,
.viz08-instructions {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
}



.btn-toggle-group.compact {
  gap: var(--spacing-1);
}

.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
}

#viz08-country-wrapper,
#viz08-territory-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-3);
}

.viz-intro-title {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-noir);
}

.viz-intro-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gris-fonce);
}

.identity-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 280px;
  column-gap: var(--spacing-4);
  align-items: start;
}

.identity-context {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.identity-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.identity-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
}

.identity-secondary .plotly-mini {
  width: 100%;
  height: 260px;
  border: 1px solid var(--color-gris-clair);
}

.identity-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.identity-grid .viz-analysis,
.identity-grid .zoom-box,
.identity-grid .details-section {
  margin-top: 0;
}

.identity-main .plotly-container {
  width: 100%;
  height: 280px;
}

.viz01a-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.viz01a-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: #ffffff;
  box-shadow: none;
  border-radius: 0;
  color: #111;
}

.viz01a-header-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.viz01a-header .viz-kicker {
  color: rgba(17, 17, 17, 0.55);
}

.viz01a-header .viz-heading {
  color: #111;
  margin: 0;
}

.viz01a-header .viz-subtitle {
  color: rgba(17, 17, 17, 0.65);
}

.viz01a-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

.viz01a-metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.viz01a-metric-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.viz01a-metrics strong {
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}


.viz01a-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.viz01a-card,
.viz01a-side {
  background: var(--color-blanc);
  border: 1px solid var(--color-noir);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  box-shadow: none;
}

.viz-card {
  background: var(--color-blanc);
  border: 1px solid var(--color-noir);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  box-shadow: none;
}

.viz-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.viz-card-header h4 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.viz-card--analysis dl {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.viz-card--analysis dt {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gris);
}

.viz-card--analysis dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.78);
}

.viz01a-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--grid-gutter);
}

.detail-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.detail-value {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: #111;
}

.detail-note {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.7);
}

/* New Swiss grid modifiers */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.span-12 {
  grid-column: span 12;
}

.span-9 {
  grid-column: span 9;
}

.span-8 {
  grid-column: span 8;
}

.span-7 {
  grid-column: span 7;
}

.span-6 {
  grid-column: span 6;
}

.span-5 {
  grid-column: span 5;
}

.span-4 {
  grid-column: span 4;
}

.span-3 {
  grid-column: span 3;
}

.span-2 {
  grid-column: span 2;
}

.

.viz-rail-layout {
  display: grid;
  gap: clamp(2rem, 3vw, 2.8rem);
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  align-items: start;
}

.viz-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.2vw, 2rem);
  border-left: 2px solid rgba(17, 17, 17, 0.18);
  padding-left: clamp(1.4rem, 2.2vw, 2rem);
}

.viz-rail .rail-block {
  background: transparent;
  border: none;
  padding: 0;
  display: grid;
  gap: clamp(0.65rem, 1.2vw, 1rem);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(17, 17, 17, 0.78);
}

.viz-rail .rail-block::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: #111111;
  margin-bottom: clamp(0.45rem, 1vw, 0.7rem);
}

.viz-rail .rail-block h5 {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.48);
}

.viz-rail .rail-block p {
  margin: 0;
}

.viz-article-stack {
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.8rem);
}

@media (max-width: 880px) {
  .viz-rail-layout {
    grid-template-columns: 1fr;
  }

  .viz-rail {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.12);
    padding-top: clamp(1rem, 2vw, 1.4rem);
    margin-top: clamp(1.2rem, 2.2vw, 1.6rem);
  }
}


.viz01a-card--chart,
.viz-card--details {
  grid-column: span 8;
}

.viz01a-side {
  grid-column: span 4;
}


.viz01a-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  position: sticky;
  top: var(--spacing-8);
}



.picto-grid {
  position: relative;
  display: grid;
  --picto-columns: 18;
  grid-template-columns: repeat(var(--picto-columns), minmax(0, 1fr));
  gap: clamp(6px, 0.5vw, 10px);
  width: 100%;
  padding: clamp(1rem, 1.8vw, 1.4rem);
}

.picto-grid--volume {
  --picto-columns: 18;
  min-height: 168px;
}


.picto-dot {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(17, 17, 17, 0.12);
  transform-origin: center;
  animation: picto-rise 420ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
}


.picto-dot--diaspora {
  background: var(--picto-color-diaspora, #b5554f);
}

.picto-dot--residents {
  background: var(--picto-color-residents, #2e6a89);
}

.picto-dot--male {
  background: var(--picto-color-male, #2e6a89);
}

.picto-dot--female {
  background: var(--picto-color-female, #b5554f);
}


.picto-grid--ratio {
  --picto-columns: 10;
  min-height: 140px;
}

.picto-grid--confessions {
  --picto-columns: 5;
  min-height: 420px;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(1.8rem, 3vw, 2.8rem);
}

.picto-grid--destinations {
  --picto-columns: 10;
  min-height: 360px;
  gap: clamp(4px, 0.6vw, 10px);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}

@media (max-width: 720px) {
  .picto-grid--confessions {
    --picto-columns: 4;
    min-height: 360px;
  }

  .picto-grid--destinations {
    --picto-columns: 8;
    min-height: 300px;
  }
}

.viz01b-picto-shell {
  display: contents;
}

.picto-legend--vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.viz01b-metrics-heading {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.viz01b-metrics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.viz01b-metrics-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: rgba(17, 17, 17, 0.72);
}

.viz01b-metrics-list strong {
  font-size: 1rem;
  color: #111;
}

.picto-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.picto-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}


.legend-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-noir);
  display: inline-block;
}

.legend-swatch--diaspora {
  background: var(--picto-color-diaspora, #e74c3c);
}

.legend-swatch--residents {
  background: var(--picto-color-residents, #3498db);
}

.viz01a-ratio-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 1.6rem);
}

.viz01a-ratio-block {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.viz01a-ratio-block h5 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.viz01a-ratio-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.7);
}

.viz01a-inline-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(1.2rem, 2vw, 1.8rem);
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.7);
}

.viz01a-inline-stats span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.viz01a-inline-stats strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #111;
}

@keyframes picto-rise {
  0% {
    transform: translateY(6px) scale(0.85);
    opacity: 0;
  }
  60% {
    transform: translateY(-1px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.viz01a-ratio-block h5 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.viz01a-ratio-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.7);
}

.viz01a-inline-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(1.2rem, 2vw, 1.8rem);
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.7);
}

.viz01a-inline-stats span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.viz01a-inline-stats strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #111;
}

@keyframes picto-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
}

.viz01a-card--narrative {
  grid-column: 1 / -1;
}

.viz01a-side {
  grid-column: span 4;
  gap: clamp(1.4rem, 2.5vw, 2rem);
}

.viz01a-card-header h4 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}

.viz01a-card-header .card-kicker {
  color: rgba(17, 17, 17, 0.55);
}

.viz01a-plot {
  min-height: 300px;
}

.viz01a-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.7);
}

.viz01a-sidecard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.viz01a-sidecard--note {
  background: #111;
  color: #f7f7f5;
  border-radius: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: none;
}

.viz01a-sidecard--note h5 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.7);
}

.viz01a-sidecard--note p {
  margin: 0;
  line-height: 1.6;
}

.viz01a-sidefacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}


.viz01a-sidefacts li {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.78);
}

.viz01a-sidefacts-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: rgba(17, 17, 17, 0.55);
}

.viz01a-narrative {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--grid-gutter);
}

.viz01a-narrative h6 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.viz01a-narrative p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.75);
}

@media (max-width: 1200px) {
  .viz01a-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }


  .viz01a-card--chart,
  .viz01a-side,
  .viz01a-card--narrative,
  .viz-card--details {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .viz01a-header {
    flex-direction: column;
  }

  .viz01a-metrics {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .viz01a-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .viz01a-card--chart,
  .viz01a-side,
  .viz01a-card--narrative {
    grid-column: 1 / -1;
  }

  .viz01a-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.viz06-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

.viz06-panel-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

@media (max-width: 1200px) {
  .identity-grid {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-4);
  }

  .identity-side {
    border-top: 1px solid var(--color-gris-clair);
    padding-top: var(--spacing-3);
  }

  .identity-secondary {
    grid-template-columns: 1fr;
  }

  .identity-secondary .plotly-mini {
    height: 220px;
  }
}

.viz06-comparison-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.8);
}

.viz06-pill {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.viz06-pill::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-noir);
}

.viz06-pill-diaspora {
  color: var(--color-diaspora, #d32f2f);
}

.viz06-pill-diaspora::before {
  background: var(--color-diaspora, #d32f2f);
}

.viz06-pill-residents {
  color: var(--color-residents, #2c3e50);
  text-align: right;
  justify-content: flex-end;
}

.viz06-pill-residents::before {
  background: var(--color-residents, #2c3e50);
}

.viz08-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 1080px) {
  .viz08-layout {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

.viz08-graph .plotly-container {
  height: 520px;
}

.viz08-legend {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  font-size: 13px;
}

.viz08-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viz08-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-noir);
}

.viz08-aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.viz08-insight {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}



.viz08-table-wrapper {
  margin-top: var(--spacing-4);
}

.viz06-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gris-fonce);
}

.viz06-essentiel-title,
.viz06-analysis-title {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-2);
}

.analyse-synthetique p {
  margin: 0 0 var(--spacing-2);
  font-size: 14px;
  line-height: 1.6;
}

.viz13-simplified-card {
  border: 1px solid var(--color-gris-clair);
  padding: var(--spacing-4);
  background: var(--color-blanc);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.viz13-simplified-header h4 {
  font-size: 20px;
  margin: 0;
}

.viz13-simplified-header p {
  margin: 0;
}

.viz13-simplified-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-4);
}

.viz13-simplified-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz13-block-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
}

.viz13-context {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz13-factor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz13-factor-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  padding: var(--spacing-2);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.viz13-factor-list li header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-2);
}

.viz13-factor-value {
  font-weight: 600;
}

.viz13-factor-note {
  margin: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

.viz13-key-points {
  background: rgba(0, 0, 0, 0.04);
  padding: var(--spacing-3);
  font-size: 14px;
  line-height: 1.6;
  border-radius: 6px;
}

.viz13-warning {
  margin-top: var(--spacing-2);
  color: var(--color-noir);
}

.viz13-toggle {
  align-self: flex-start;
  border: 1px solid var(--color-noir);
  background: var(--color-blanc);
  padding: 6px 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  cursor: pointer;
}

.viz13-toggle:hover {
  background: var(--color-noir);
  color: var(--color-blanc);
}

.viz13-technical.is-hidden {
  display: none;
}

.viz13-glossary {
  margin-top: var(--spacing-2);
  font-size: 13px;
}

.viz13-glossary ul {
  list-style: disc;
  padding-left: var(--spacing-4);
  margin: var(--spacing-2) 0 0;
}

.viz11-explainer-card {
  border: 1px solid var(--color-gris-clair);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  background: var(--color-blanc);
  font-size: 15px;
  line-height: 1.6;
}

.viz11-toplists {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--spacing-4);
}

.viz11-chart .plotly {
  width: 100% !important;
}

.viz11-comparison {
  margin-top: var(--spacing-4);
}

.viz11-analysis table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.viz11-analysis th,
.viz11-analysis td {
  border: 1px solid var(--color-gris-clair);
  padding: 8px 10px;
  text-align: left;
}

.viz11-analysis thead {
  background: rgba(0, 0, 0, 0.05);
}

#viz11-controls {
  margin-bottom: var(--spacing-3);
}

.viz07-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--spacing-2) 0;
}

.viz07-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.viz07-controls .btn-toggle-group {
  display: flex;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.viz07-controls .btn-toggle {
  min-width: unset;
  padding: 10px 16px;
}

.viz07-controls .btn-toggle.ghost {
  border-color: rgba(17, 17, 17, 0.32);
}

.viz08-aside ul,
.viz09-aside ul,
.viz10-aside ul,
.viz11-aside ul {
  margin: 0;
  padding-left: var(--spacing-3);
}

.viz08-aside li,
.viz09-aside li,
.viz10-aside li,
.viz11-aside li {
  margin-bottom: var(--spacing-1);
}

/* Viz07 */
.viz07-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.viz07-hero {
  display: grid;
  gap: var(--spacing-3);
}



.viz07-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
}

.viz07-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.viz07-slider-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
}

.viz07-slider-wrapper label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gris);
}

.viz07-slider-wrapper input[type="range"] {
  flex: 1;
}

.viz07-map-shell {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.viz07-pills {
  display: flex;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.viz07-pills button {
  border-radius: 0;
  border: 1px solid var(--color-noir);
  padding: 11px 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  background: transparent;
  color: var(--color-noir);
  transition: background 160ms ease, color 160ms ease;
}

.viz07-pills button.active,
.viz07-pills button:hover,
.viz07-pills button:focus-visible {
  background: var(--color-noir);
  color: var(--color-blanc);
  outline: none;
}

.viz07-counter {
  font-size: 13px;
  color: var(--color-gris);
}

.viz07-map {
  min-height: 520px;
}

.viz07-bars {
  margin-top: var(--spacing-3);
}

.viz07-hero {
  display: grid;
  gap: var(--spacing-3);
}

.viz07-text-grid {
  display: grid;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.viz07-text-grid .viz-helper {
  padding: 0;
  border: none;
  background: transparent;
}

.viz07-analysis,
.viz07-focus {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

.viz07-analysis::before,
.viz07-focus::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #111111;
  margin-bottom: var(--spacing-2);
}

.viz07-analysis h4,
.viz07-focus h4 {
  margin: 0 0 var(--spacing-1);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.viz07-cards {
  margin-top: var(--spacing-4);
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.profile-card-grid {
  display: contents;
}

.viz07-bars .bar-chart-title {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gris);
  margin-bottom: var(--spacing-1);
}

.viz07-bars-chart {
  width: 100%;
  min-height: 260px;
}

.profile-card {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--color-blanc);
  display: grid;
  gap: var(--spacing-2);
  min-height: 180px;
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.35);
}

.profile-card header span {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

.viz07-card-meta,
.viz09-card-meta {
  font-size: 0.85rem;
  color: rgba(17, 17, 17, 0.55);
  margin: 0;
}

/* Viz01a */
/* Poster-style grid for Viz01 */
.poster,
.viz01a-poster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
  align-items: start;
}

.poster-hero,
.viz01-poster-hero {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: calc(var(--baseline) * 3);
}

.poster-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.poster-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.poster-lead {
  margin: 0;
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.68);
}

.poster-card,
.viz01-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f4 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.poster-card--funnel,
.viz01-card--weight {
  grid-column: 1 / span 8;
}

.poster-card--profile,
.viz01-card--profile {
  grid-column: 1 / span 8;
}

.poster-card-header h5,
.viz01-card-header h5 {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.7);
}

.poster-card-header p,
.viz01-card-header p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(17, 17, 17, 0.55);
  letter-spacing: 0.04em;
}

.poster-plot,
.viz01-card-plot {
  min-height: 280px;
}

.poster-card-footer,
.viz01-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(17, 17, 17, 0.7);
}

.poster-analysis,
.viz01-analysis-grid {
  grid-column: 1 / span 8;
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.poster-analysis h6,
.viz01-analysis-grid h6 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.poster-analysis p,
.viz01-analysis-grid p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.poster-sidepanel,
.viz01-sidepanel {
  grid-column: 9 / span 4;
  display: grid;
  gap: var(--spacing-4);
  align-content: start;
}

.poster-sidecard,
.viz01-sidecard {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.06);
}

.poster-sidecard--note,
.viz01-sidecard--note {
  background: #111;
  color: #f7f7f5;
  border-color: #111;
}

.poster-sidecard h6,
.viz01-sidecard h6 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
}

.poster-sidecard ul,
.viz01-sidecard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.poster-sidecard ul li,
.viz01-sidecard ul li {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: inherit;
}

.poster-sidecard--note p,
.viz01-sidecard--note p {
  margin: 0;
  color: rgba(247, 247, 247, 0.85);
  line-height: 1.6;
}

@media (max-width: 960px) {
  .poster,
  .viz01-poster {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .poster-hero,
  .poster-card--funnel,
  .poster-card--profile,
  .poster-analysis,
  .poster-sidepanel,
  .viz01-poster-hero,
  .viz01-card--weight,
  .viz01-card--profile,
  .viz01-card--analysis,
  .viz01-sidepanel {
    grid-column: 1 / -1;
  }
}

.viz01b-layout .viz-graph-zone {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}





.viz01a-card {
  grid-column: span 8;
}

.viz01a-card--metrics {
  padding-bottom: var(--spacing-4);
  background: linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%);
  border-color: rgba(17, 17, 17, 0.08);
}

.viz01a-card--wide {
  grid-column: 1 / -1;
}

@media (max-width: 960px) {
  .viz01-card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .viz01a-card {
    grid-column: 1 / -1;
  }
}
.viz01a-card-header h4 {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.75);
  margin: 0;
}

.viz01a-card-header p {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.55);
  letter-spacing: 0.4px;
  margin: 0;
}

.viz01a-bar-chart {
  min-height: 260px;
}

.viz01a-tag {
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 20px;
}

.viz01a-tag--residents {
  color: var(--color-bleu-principal);
}

.viz01a-tag--diaspora {
  color: var(--color-rouge-principal);
}

.viz01a-card--metrics {
  padding-bottom: var(--spacing-4);
  background: #f7f8fb;
  border-color: rgba(0, 0, 0, 0.08);
}

.viz01a-metrics-grid {
  display: grid;
  gap: var(--spacing-3);
}

.viz01a-metric {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.viz01a-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.viz01a-metric-header h5 {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
}

.viz01a-metric-diff {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.viz01a-metric-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.viz01a-metric-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.viz01a-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.45);
}

.viz01a-metric-value {
  font-family: var(--font-sans-condensed);
  font-size: 32px;
  line-height: 1;
}

.viz01a-metric-value--diaspora {
  color: var(--color-rouge-principal);
}

.viz01a-metric-value--residents {
  color: var(--color-bleu-principal);
}

.viz01a-mini-bar {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.viz01a-mini-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    var(--color-rouge-principal),
    rgba(255, 255, 255, 0)
  );
  border-radius: 999px;
}

.viz01a-gap-positive {
  color: var(--color-rouge-principal);
}

.viz01a-gap-negative {
  color: var(--color-bleu-principal);
}

.viz01a-metric-note {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0.2px;
}

.viz01a-metric-footer {
  justify-content: flex-start;
}

.viz-text-zone.compact .viz-helper {
  margin-bottom: var(--spacing-3);
}

/* Intro Hero */
.intro-hero-dark {
  background: #fafafa;
  color: #141414;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.intro-hero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(248, 234, 76, 0.45),
    rgba(250, 250, 250, 0.2) 48%,
    transparent 65%
  );
  pointer-events: none;
}

.intro-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(2rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}



.intro-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gris-moyen);
  font-weight: 500;
}

.intro-hero-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 56px);
  letter-spacing: -0.6px;
  text-transform: none;
  margin: 0;
}

.intro-hero-subtitle {
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--color-gris-fonce);
  font-weight: 400;
}

.intro-hero-lead {
  max-width: 48ch;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.78);
}



.intro-metric-card {
  background: transparent;
  border: none;
  padding: 0;
  min-width: 0;
  text-align: left;
  box-shadow: none;
}

.metric-value {
  display: block;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  font-weight: 600;
  color: #111111;
}

.metric-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.54);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  background: linear-gradient(135deg, #f8ea4c, #fef39f);
  color: #141414;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  box-shadow: 0 16px 26px rgba(248, 234, 76, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 36px rgba(248, 234, 76, 0.32);
}

.intro-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.intro-panels.intro-panels--grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.4rem, 4vw, 3.2rem);
}

.intro-panel--span-7,
.intro-panel--span-12 {
  grid-column: span 12;
}

.intro-panel--span-5 {
  grid-column: span 12;
}

.intro-panel-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  gap: clamp(1.4rem, 2.4vw, 2rem);
  align-items: start;
}

.intro-panel-rail {
  display: grid;
  gap: 1rem;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.74);
  justify-items: start;
}

.intro-panel-rail .rail-facts,
.intro-panel-rail .rail-ranking {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.intro-panel-rail .rail-ranking li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.92rem;
}

.intro-panel-rail .rail-ranking span {
  color: rgba(17, 17, 17, 0.56);
}

.intro-panel-rail .rail-ranking strong {
  color: #111111;
}

.intro-panel-main {
  display: grid;
  gap: 0.9rem;
}

@media (max-width: 900px) {
  .intro-panel-split {
    grid-template-columns: 1fr;
  }

  .intro-panel-rail {
    order: -1;
  }
}

.intro-panel-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(320px, 2fr) minmax(240px, 1fr);
}

.intro-map-shell {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.intro-map-canvas {
  min-height: clamp(360px, 45vw, 520px);
  border: none;
  background: linear-gradient(160deg, #fff 0%, #f5f5f2 100%);
}

.intro-map-canvas--large {
  min-height: clamp(420px, 48vw, 640px);
}


@media (max-width: 900px) {
  .intro-panel-grid {
    grid-template-columns: 1fr;
  }

  .intro-map-canvas {
    min-height: 320px;
  }
}

@media (max-width: 1024px) {
  .intro-panel--bar {
    grid-column: span 12;
  }
}

.intro-panel-primary {
  grid-column: 1 / -1;
}

.intro-panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.panel-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.intro-panel-header h3 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(17, 17, 17, 0.94);
}

.intro-panel-annotation {
  position: sticky;
  top: var(--spacing-4);
  align-self: start;
  max-width: 260px;
  background: rgba(248, 248, 242, 0.95);
  border-left: 2px solid #111111;
  padding: 1.1rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.8);
}

.intro-chart {
  min-height: 320px;
}

.intro-panel-note {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(20, 20, 20, 0.6);
  letter-spacing: 0.05em;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--grid-gutter);
}

.intro-fact-card {
  border: none;
  background: transparent;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intro-fact-value {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 600;
  color: var(--color-noir);
  letter-spacing: -0.01em;
}

.intro-fact-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(17, 17, 17, 0.58);
}

.intro-fact-note {
  font-size: 14px;
  color: rgba(17, 17, 17, 0.78);
}

@media (max-width: 1024px) {
  .intro-hero-cta {
    margin-top: 0;
  }

  .intro-panel-annotation {
    position: static;
    max-width: none;
    margin-bottom: 1rem;
    display: block;
  }
}

@media (max-width: 768px) {
  .intro-hero-dark {
    padding: 3.5rem 0 4.5rem;
  }

  .intro-hero-inner {
    padding: 0 1.5rem;
  }

  .intro-hero-title {
    font-size: clamp(2.3rem, 7vw, 3.2rem);
  }

  .intro-metric-card {
    padding: 1.1rem 1.35rem;
  }

  .intro-chart {
    min-height: 320px;
  }
}


.intro-hero {
  background: #ffffff;
  color: #111111;
  padding: clamp(4rem, 5.5vw, 6rem) 0 clamp(4.6rem, 7vw, 7rem);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.intro-grid {
  row-gap: clamp(2.4rem, 4.6vw, 3.2rem);
  align-items: start;
}


.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 3.6rem);
}

.intro-hero-subtitle {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.52);
}

.intro-hero-lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.75);
}


/* Ligne verticale sur fond transparent */
.intro-metric-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(17, 17, 17, 0.4);
  margin-bottom: clamp(0.3rem, 0.9vw, 0.5rem);
}

.metric-value {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2.4rem, 5vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111111;
}

.metric-label {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.metric-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.7);
}

.intro-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0.8rem 2.2rem;
  border: 1px solid var(--color-noir);
  background: var(--color-noir);
  color: var(--color-blanc);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  transition: background 160ms ease, color 160ms ease;
}

.intro-hero-cta:hover,
.intro-hero-cta:focus {
  background: transparent;
  color: var(--color-noir);
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: transparent;
  border: none;
  padding: clamp(1.8rem, 2.6vw, 2.4rem) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vw, 1.6rem);
  box-shadow: none;
}

.intro-chart-card--full {
  grid-column: 1 / -1;
  position: relative;
}


.intro-compare {
  margin-top: clamp(3rem, 5vw, 4rem);
}

.intro-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.4rem, 5vw, 3.6rem);
}


.intro-compare-panel {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  padding: clamp(1.8rem, 3vw, 2.2rem);
  display: grid;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
  align-content: start;
}

.intro-compare-chart {
  min-height: clamp(320px, 36vw, 440px);
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.intro-panel-note,
.intro-compare-panel .intro-panel-note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.7);
  margin: 0;
}

.intro-compare-summary {
  margin-top: clamp(2.4rem, 4vw, 3rem);
  font-size: 0.98rem;
  line-height: 1.68;
  color: rgba(17, 17, 17, 0.78);
}

.intro-compare-summary p {
  margin: 0;
}

@media (max-width: 960px) {
  .intro-compare-grid {
    grid-template-columns: 1fr;
  }
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--grid-gutter);
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}


.intro-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.6rem);
  width: 100%;
}


.intro-metric-card {
  background: transparent;
  border: none;
  padding: 0;
  min-width: 0;
  text-align: left;
  display: grid;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

.intro-metric-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 0;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}

.intro-hero-cta:hover,
.intro-hero-cta:focus-visible {
  background: transparent;
  color: #111;
  outline: none;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.intro-hero-subtitle::before,
.intro-hero-subtitle::after {
  content: "";
  width: clamp(2.2rem, 6vw, 3.8rem);
  height: 1px;
  background: rgba(17, 17, 17, 0.35);
}

.intro-hero-metrics {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.intro-metric-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.8rem;
  min-width: 200px;
  text-align: center;
}

.metric-value {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

.metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.intro-hero-cta {
  align-self: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: 1px solid #111;
  background: #111;
  color: #f7f7f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.intro-hero-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #111;
}

.card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.intro-chart-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f7 100%);
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-chart-annotation {
  margin-top: 0.85rem;
  padding: 1rem 1.2rem;
  background: rgba(17, 17, 17, 0.05);
  border-left: 4px solid #111;
  color: #111;
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-fact-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

.intro-fact-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.72);
}

.intro-hero-swiss {
  background: #f7f7f5;
  color: #111;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
}

.intro-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 600;
}

.intro-hero-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intro-hero-subtitle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.75rem;
  font-size: 0.95rem