/* --- Base Variables & Core Setup --- */
:root {
  --color-brand-dark: #222222;
  --color-brand-muted: #666666;
  --color-brand-primary: #006a66;
  --color-brand-secondary: #2B817D;
  --color-brand-accent: #C7BD80;
  --color-brand-pillar: #0063B4;
  --color-brand-light: #E1EAE9;
  --color-brand-border: #E1EAE9;
  --color-gray-200: #c2cccb;
  --color-gray-50: #f9fafb;
}

/* Selection Highlight */
::-moz-selection {
  background-color: var(--color-brand-primary);
  color: #ffffff;
}
::selection {
  background-color: var(--color-brand-primary);
  color: #ffffff;
}

html {
  scroll-behavior: smooth;
}

/* --- Custom Style Classes --- */
/* Typography & Text */
.page-title {
  font-size: 2.25rem;
  line-height: 1.25;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--color-brand-primary);
}

.section-titleWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.section-titleNumber {
  font-size: 2.5em;
  line-height: 1;
  color: rgba(194, 204, 203, 0.5);
}

.section-title {
  font-size: 1.7rem;
  line-height: 1.375;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--color-brand-primary);
  margin-bottom: 3rem;
}

.subtitle {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-brand-accent);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.subtitle.text-pillar {
  color: var(--color-brand-pillar);
}

.subtitle.text-secondary {
  color: var(--color-brand-secondary);
}

.subtitle.casenone {
  text-transform: none;
}

.h4-title {
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.h4-title.text-pillar {
  color: var(--color-brand-pillar);
}

.text-sm {
  font-size: 0.85rem;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: var(--color-brand-primary);
}

.text-lg {
  font-size: 1.125rem;
  font-weight: bold;
}

.text-xl {
  font-size: 1.5rem;
}

.text-6xl {
  font-size: 3.75rem;
}

.block {
  display: block;
}

/* Layout & Utilities */
.max-w-3xl {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.section-main {
  max-width: 80rem;
  margin: 0 auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--color-brand-border);
  scroll-margin-top: 2.5rem;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3rem;
}

@media (min-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 5rem;
  }
  .col-5 {
    grid-column: span 5/span 5;
  }
  .col-7 {
    grid-column: span 7/span 7;
  }
  .col-12 {
    grid-column: span 12/span 12;
  }
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3rem 2rem;
}

@media (min-width: 1024px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.items-start {
  align-items: flex-start;
}

.order-alt {
  order: 1;
}

@media (min-width: 1024px) {
  .order-alt {
    order: 2;
  }
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-baseline {
  display: flex;
  align-items: baseline;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-y-8 > * + * {
  margin-top: 2rem;
}

/* Margins & Paddings */
.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

/* Borders */
.border-l {
  border-left: 2px solid;
}

.border-pillar {
  border-color: var(--color-brand-pillar);
}

/* Specific Adjustments */
.img-auto {
  margin-left: auto;
  margin-right: auto;
}

.icon-chevron {
  font-size: 10px;
  margin-left: 0.5rem;
  opacity: 0.7;
}

/* Component-specific Styles */
.index-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
  .index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.index-grid li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0.2rem 1rem 0.2rem 0.5rem;
  background-color: #ffffff;
  font-size: 0.875rem;
  border: 1px solid var(--color-brand-border);
  color: var(--color-brand-primary);
}
.index-grid li > a:hover {
  background-color: rgba(225, 234, 233, 0.3);
}
.index-grid li > a .a_text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.index-grid li > a .a_textNumber {
  display: inline-block;
  font-size: 150%;
  color: var(--color-gray-200);
}

.target-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-bottom: 2px solid rgba(0, 106, 102, 0.2);
  transition: border-color 0.3s ease;
}

@media (min-width: 768px) {
  .target-card {
    width: 25%;
  }
}
.target-card:hover {
  border-color: var(--color-brand-primary);
}

.btn-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: bold;
  background-color: var(--color-brand-primary);
  color: #ffffff;
  border-radius: 0.5rem;
  gap: 0.75rem;
}

.table-roic {
  overflow-x: auto;
}
.table-roic table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.2;
}
.table-roic table th,
.table-roic table td {
  padding: clamp(12px, 3%, 20px);
  border-bottom: 1px solid #dfe6e5;
  text-align: left;
  vertical-align: middle;
}
.table-roic table thead th {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 106, 102, 0.25);
  color: var(--color-brand-primary, #006a66);
  text-align: right;
}
.table-roic table tbody tr:hover {
  background-color: rgba(225, 234, 233, 0.3);
}
.table-roic table tbody td {
  text-align: right;
}
.table-roic table tbody tr.primary th,
.table-roic table tbody tr.primary td {
  background-color: rgba(225, 234, 233, 0.2);
  color: var(--color-brand-primary, #006a66);
  font-size: 1.15rem;
  font-weight: bold;
  border-bottom-color: rgba(0, 106, 102, 0.25);
}

.chart-container {
  position: relative;
  width: 95%;
  height: 300px;
  margin: 2rem auto;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
}