/* Decorative heading accents only. Content, typography and page grids stay as published. */
#main [data-heading-icon="goals"] { --heading-icon: url('/assets/heading-icons/goals.svg'); }
#main [data-heading-icon="vision"] { --heading-icon: url('/assets/heading-icons/vision.svg'); }
#main [data-heading-icon="mission"] { --heading-icon: url('/assets/heading-icons/mission.svg'); }
#main [data-heading-icon="values"] { --heading-icon: url('/assets/heading-icons/values.svg'); }
#main [data-heading-icon="impact"] { --heading-icon: url('/assets/heading-icons/impact.svg'); }
#main [data-heading-icon="excellence"] { --heading-icon: url('/assets/heading-icons/excellence.svg'); }
#main [data-heading-icon="people"] { --heading-icon: url('/assets/heading-icons/people.svg'); }
#main [data-heading-icon="sustainability"] { --heading-icon: url('/assets/heading-icons/sustainability.svg'); }
#main [data-heading-icon="direction"] { --heading-icon: url('/assets/heading-icons/direction.svg'); }

#main [data-heading-icon]:not(.pillar-number) {
  position: relative;
  padding-inline-start: 44px;
}

#main [data-heading-icon]::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 34px;
  block-size: 34px;
  background: var(--heading-icon) center / contain no-repeat;
  pointer-events: none;
}

/* Use the existing number row so the pillar titles retain their full reading width. */
#main .strategy-pillar > .pillar-number[data-heading-icon] { position: relative; }
#main .strategy-pillar > .pillar-number[data-heading-icon]::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
  inline-size: 32px;
  block-size: 32px;
}

#main .strategy-compass > [data-heading-icon]::before {
  background-color: #edf3fb;
  border-radius: 11px;
}

@media (max-width: 760px) {
  #main [data-heading-icon]:not(.pillar-number) { padding-inline-start: 39px; }
  #main [data-heading-icon]::before { inline-size: 30px; block-size: 30px; }
  #main .strategy-pillar > .pillar-number[data-heading-icon]::before { inline-size: 30px; block-size: 30px; }
}

@media (forced-colors: active) {
  #main [data-heading-icon]::before { display: none; }
  #main [data-heading-icon]:not(.pillar-number) { padding-inline-start: 0; }
}